Skip to content
全栈开发

深入了解 HTML 规则

嵌套规则

HTML 标签由块级元素和行内元素构成，块级元素主要用来表示内容的结构、布局和内容的性质，行内元素用来标记内容的语义细节。

  1. 块级元素与块级元素平级，内嵌元素与内嵌元素平级。

    <div><span></span><p></p></div>  //span是行内元素，p是块级元素，所以这个是错误的嵌套
    

    <div><span></span><a></a></div>  //对的

  2. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块元素，它只能包含其它的内联元素。

    <div><span></span></div>
    

    <span><span></span></span>

  3. 有几个特殊的块级元素(h1、h2、h3、h4、h5、h6、p、dt)只能包含内嵌元素，不能再包含块级元素

  4. 块级元素不能放在标签p里面

  5. li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器

语义化标签

语义化标签是HTML5引入的重要特性，它们使代码更具可读性和可维护性，同时对搜索引擎优化(SEO)和无障碍访问有很大帮助。

<header>网站头部</header>
<nav>导航菜单</nav>
<main>
  <article>
    <section>文章章节</section>
  </article>
  <aside>侧边栏</aside>
</main>
<footer>网站底部</footer>

表单高级特性

HTML5为表单元素引入了多种新的输入类型和属性，提升了用户体验和表单验证能力。

<!-- 新的输入类型 -->
<input type="email" required>
<input type="url">
<input type="date">
<input type="number" min="1" max="100">
<input type="range" min="0" max="10">
<input type="search">
<input type="color">


<!-- 表单验证属性 -->
<input type="text" pattern="[A-Za-z]{3}" title="三个字母">
<input type="text" required placeholder="请输入姓名">

响应式图片

使用 srcset 和 sizes 属性可以根据不同设备和屏幕尺寸加载最合适的图片。

<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 500px) 100vw, (max-width: 1500px) 50vw, 800px"
     alt="响应式图片示例">

自定义数据属性

通过 data-* 属性可以在HTML元素上存储自定义数据，便于JavaScript访问和操作。

<article data-category="技术" data-published="2023-05-15">
  <h2>HTML进阶知识</h2>
  <p>这是一篇关于HTML进阶知识的文章</p>
</article>

无障碍性(Accessibility)

编写无障碍的HTML代码对于确保所有用户（包括使用屏幕阅读器的用户）能够访问您的网站至关重要。

<!-- 使用ARIA属性增强无障碍性 -->
<button aria-label="关闭" aria-pressed="false">X</button>


<!-- 使用正确的语义元素 -->
<nav aria-label="主导航">
  <ul role="menubar">
    <li role="menuitem"><a href="#">首页</a></li>
    <li role="menuitem"><a href="#">关于</a></li>
  </ul>
</nav>

微数据和结构化数据

使用微数据可以增强网页的SEO，帮助搜索引擎更好地理解页面内容。

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">张三</span>
  <span itemprop="jobTitle">Web开发者</span>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="addressLocality">北京</span>
  </div>
</div>