HTML+css进阶学习摘录（标签语义化）（一）_html 语义化浮动图标用什么标签-CSDN博客

本文链接：https://blog.csdn.net/zyw6042/article/details/74779869

一、浏览器标题栏小图标

<link rel="shortcut icon" type="img/x-icon" href="panda.ico"/>

二、标签语义化

1.标题语义化（h1-h6）

2.图片语义化

（1）alt 属性（给搜索引擎看）+title 属性（给用户看）

（2）figure元素 + figcaption元素（图片+标注显示）

<figure><p>音符在跳动</p>

  <img class="myimg" src="m1.jpg" alt="音符" title="跳动的音符"/> <img class="myimg" src="m1.jpg" alt="音符" title="跳动的音符"/>
  <figcaption class="fig">音乐盛宴</figcaption>
</figure>

3.表格语义化

<table >
  <caption>表格标题</caption>
  <thead>
    <tr>
     <th>表头单元格1</th>
     <th>表头单元格2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>标准单元格1</td>
     <td>标准单元格1</td>
    </tr>
    <tr>
     <td>标准单元格1</td>
     <td>标准单元格1</td>
    </tr>
    </tbody>
    <tfoot>
     <tr>
     <td>标准单元格1</td>
     <td>标准单元格1</td>
    </tr>
    </tfoot>
</table>

4.表单语义化(label标签+fieldset+legend)

两种等价

 <input id="rdo"name="rdo" type="radio"/><label for="rdo">单选框</label>
 <label><input id="cbl" type="checkbox"/>复选框</label>

<form action="" method="get">
<fieldset>
 <legend>欢迎登录</legend>
 <p>
 <label for="name">账 号：</label><input id="name" type="text" />
 </p>
 <p>
 <label for="pwd">密 码：</label><input id="pwd" type="text" />
 </p>
 
</fieldset>
</form>

5.换行符<br/>用在p标签内

6.del 和ins 标签

<p>新鲜水果</p>
<p><del>原价：￥20/kg</del></p>
<p><ins>现价：9.9/kg</ins></p>