HTML+css进阶学习摘录（标签语义化）（一）

一、浏览器标题栏小图标

<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>