멋지고 실용적인 HTML 태그 및 속성 5가지 소개_HTML/Xhtml_웹페이지 제작

사실 이것도 헤드라인이고 '눈부시다'고는 할 수 없습니다. 단지 제가 무지하고 이런 라벨을 본 적이 없기 때문입니다. 이러한 기능은 일반 웹사이트에서는 흔하지 않기 때문에 매우 신선한 느낌을 줍니다. 그런 다음 내가 접한 모든 좋은 HTML 태그를 기록하는 시리즈를 만들 것입니다(HTML5 태그일 수도 있지만 모든 브라우저가 호환된다는 보장은 없습니다).

1. 내용 편집 가능

이것은 HTML5의 새로운 태그로, 다음 표와 같이 영역의 내용을 편집할 수 있습니다. (IE의 표는 이 속성을 지원하지 않는 것 같지만 div와 body는 지원하는 것 같습니다. IE를 사용하는 경우 $100 및 $50 부분을 클릭하여 편집해 보세요. IE가 아닌 경우 모든 내용을 편집할 수 있어야 합니다.

<본문> 월일>

월별 절감 효과

절감
1월	$100
2월	$50

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

이 테이블은 텍스트 상자를 추가하지 않고도 직접 편집할 수 있습니다. 또한 하위 태그에 이 속성이 지정되지 않으면 기본적으로 상속되므로 매우 유용합니다. 편리한. (물론 이 속성을 바디에 추가하면 다 편집이 가능하니 정말 무섭습니다...)

2. 필드셋 태그

이것은 .NET의 GroupBox와 동일하지만 그 기능이 다음 형식으로 관련 요소를 그룹화하는 것임을 몰랐습니다.

<필드세트> <legend>색인:</legend> <ul> <li><a href="#">모든 기사 색인</a></li> <li><a href="#">오늘 양들이 일어나서 해야 할 일</a></li> <li><a href="#">Sheeple을 깨울 수 있었습니다</a></li> </ul> </fieldset></ul>

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

범례 태그는 이 BOX의 제목을 지정합니다.

3. 지역 태그

이미지의 특정 영역에 하이퍼링크를 직접 배치할 수 있습니다! 지도 태그와 img의 usemap 속성을 일치시키기만 하면 됩니다(다른 페이지로 이동하려면 사진을 클릭한 후 ^_^로 돌아가야 한다는 점에 유의하세요).

<지도 이름="행성지도">

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

4. output标签

这个标签能够直接显示脚本的运算结果（注意：目前IE的任何版本都不支持），以下脚本似乎不工作，可能是因为WP的原因所致：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form></p> <p><p><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p> </form>
提示：您可以先修改部分代码再运行

5. mark标签

直接能够高亮一段文字，不需要把文字拆开即可实现：

<p>Do not forget to buy <mark>milk</mark> today.</p>
提示：您可以先修改部分代码再运行

今天先到这吧，以后看到好的HTML标签和特效再贴上来。