HTML进阶教程

HTML进阶

一、HTML、XML、HTML5的本质区别：

• HTML：指HTML4.01 （HyperText Mark-up Language 超文本标记语言）
• XML：指HTML的过渡版 （EXtensible HyperText Mark-up Language 扩展的超文本标记语言）
• HTML5：指HTML的升级版

二、语义化

优点：1）利于开发调试和后期维护 2）利于搜索引擎优化

2.1 标题语义化

• 一个页面只能有一个h1便签
• h1~h6之间不要断层
• 不要用h1~h6来定义样式
• 不要用div来代替h1~h6

2.2 图片语义化

• alt属性（必需）：图片描述，给搜索引擎看的，当图片无法显示时，页面会显示alt中的文字
• title属性（可选）：图片描述，给用户看的，当鼠标移到图片上时，会显示title中的文字

  <img src="" alt="图片描述(搜索引擎看)" title="图片描述(用户看)"/>
  

• figure元素：用于包含图片和图注
• figcaption元素：用于表示图注文字

  <!--figure元素用来包含图片和图注、figcaption元素用于表示图注文字-->
  <figure>
      <img src="" alt=""/>
      <figcaption></figcaption>
  </figure>
  

2.3 表格语义化

• thead、tbody、tfoot三个标签的语义:表头、表身、表脚。有了这几个标签，表格语义更加良好，结构更加清晰

2.4 表单语义化

• label标签:用于显示在输入控件旁边的说明性文字，将表单元素和说明文字关联起来
  • for属性的2个作用:
    1. 语义上绑定了label元素和表单元素
    2. 增强了鼠标可用性

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

  • label标签两种关联方式:

    <!--第1种-->
    <input id="cbk" type="checkbox" /><label for="cbk">复选框</label>
    <!--第2种-->
    <label>复选框<input id="cbk" type="checkbox"/></label>
    

• fieldset标签给表单进行分组，legend标签定义某一组表单的标题
  • fieldset标签和legend标签的两个作用:
    1. 增强表单的语义
    2. fieldset元素的disabled属性可以禁用整个组中的表单元素

    <form action="index.php" method="post">
        	<fieldset>
        		<legend>title of form</legend>
            		<p>
            			<label for="name">账号：</label>
            			<input type="text" name="name" id="name"/>
            		</p>
            		<p>
            			<label for="password">密码：</label>
            			<input type="password" name="password" id="password"/>
            		</p>
        		<input type="checkbox" name="remember" id="remember"/>
        		<label for="remember">记住我</label>
        		<input type="submit" value="登录">
        	</fieldset>
    </form>
    

2.5 其他语义化

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

  <p>第一行<br/>第二行<br/>第三行<br/></p>
  

• 无序列表ul
  为了实现良好的语义，对于列表型的数据，建议使用无序列表

  <!--span标签可以自定义列表项-->
  <ul>
  	<li><span>1</span>python</li>
  	<li><span>2</span>php</li>
  	<li><span>3</span>C</li>
  </ul>
  

• strong标签和em标签
  在strong和em内部的文本会被强调为重要文本，为了SEO想要突出某些关键字可以使用这两个标签，一般会先去掉他们的默认样式，再用CSS重新定义，这并不影响他们的语义

• 显示图片的2种方式:

  • 使用img标签
    通过HTML来实现，图片作为HTML的一部分，且被搜索引擎所看到
  • 使用背景图片
    通过CSS实现，不作为HTML的一部分，不被搜索引擎所看到，仅起到修饰作用

2.6 语义化验证

• 如何判断一个页面的语义是否良好呢？
  去掉CSS样式，再看页面是否还具有可读性