语义化

标题语义化
图片语义化
表格语义化
表单语义化
其他语义化
语义化表单
HTML5摒弃的标签

---

对标题h1-h6的语义化 注意的四方面
1，一个页面只能有一个h1标签
2，h1-h6之间不要断层
3，不要用h1-h6来定义样式
4，不要用div来代替h1-h6

对图片的语义化
1，alt属性 和 title属性   alt一定要添加
2，figure元素和figcaption元素

实现图片+图注 的效果 ，在html5中 引入figure元素和figcaption两个元素来增强图片的语义化
figure元素 ： 包含图片和图注
figcaption元素 ：用来表示图注文字

<figure>
    <img src="img/bg-1.png" alt="红花"/>
    <figcaption>这是一朵漂亮的花朵</figcaption>
</figure>

 

 

表格语义化
table tr 和td 这3个是常用的
加强表格的语义化又增加了，th caption  thead  tbody  和 tfoot 


表单语义化
1，lable标签

  for属性值：为所关联的表单元素的id
  <input id="name" type="text"/>  
  所关联的label标签为<label for="name">说明性文字</label>

  label标签的for属性有两个作用
  1，语义上绑定了label元素和表单元素
  2，增强了鼠标可用性，也就是点击label中的文本时，其所关联的表达元素也会获取焦点
  换句话说：label标签for属性的作用 就是使得鼠标单击的范围扩大到label元素上
  极大提高了用户点击的可操作性

<label for="">说明性文字</label>

 label标签有2种关联方式，下面两种写法是等价的
     <input id="cbk" type="checkbox"/><label for="cbk">复选框</label><br/>
     <label>复选框<input id="cbk" type="checkbox"/></label>

 

 

 

2，fieldset标签和legend标签
使用 fieldset标签 来给表单元素进行分组
legend标签 用于定义某一组表单的标题

<fieldset>
    <legend>表单组标题</legend>
    ......
</fieldset>

 

 

    <form action="index.aspx" method="post">
        <fieldset>
            <legend>登入学习网站</legend>
            <p>
                <label for="name">账号</label><input type="text" id="name" name="name"/>
            </p>
            <p>
                <label for="pwd">密码</label><input type="password" id="pwd" name="pwd"/>
            </p>

            <input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">记住我</label>
            <input type="submit" value="登入"/>
        </fieldset>
    </form>

 
换行符<br/>标签只适合在p标签内部的换行，不能用于其他标签



strong实现加粗文本  em实现斜体文本   ，这两个标签赋予 强调的语义，标签内部的文本被强调为重要文本，
搜索引擎对这两个标签页赋予一定的权重，如果在页面中 为了SEO而想要突出某些关键字，可以使用strong 和 em 这两个标签
一般情况下，去掉strong 和 em的默认样式，然后在使用CSS重新定义新的样式，但不影响这两个标签的语义，只是改变外观而已



del标签 和 ins 标签 这两个标签是配合使用的，
del表示 "delete" 用于定义被删除的文本
ins 表示"insert" 用于定义被更新的文本
一般会使用CSS重新定义del 和 ins标签样式

<p>新鲜水果</p>
<p><del>原价：￥6.5/kg</del></p>
<p><ins>原价：￥4.00/kg</ins></p>

 

 

img标签
想在页面显示一张图片，有两种方式  ：使用img标签 和 使用背景图片
img标签加图片 是通过HTML来实现的
背景图片 是通过CSS来实现的

何时用img标签，何时用背景图片，应该根据HTML的语义来判断
如果图片作为HTML的一部分，并且想要被搜索引擎识别 则就应该使用img标签   ，例如常见的各种图片列表
如果图片仅仅是起到修饰作用，且并不想被搜索引擎识别，则就应该使用背景图片