文章目录
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个作用:
- 语义上绑定了
label
元素和表单元素 - 增强了鼠标可用性
<label for="">说明性文字</label>
- 语义上绑定了
label
标签两种关联方式:<!--第1种--> <input id="cbk" type="checkbox" /><label for="cbk">复选框</label> <!--第2种--> <label>复选框<input id="cbk" type="checkbox"/></label>
- for属性的2个作用:
fieldset
标签给表单进行分组,legend
标签定义某一组表单的标题fieldset
标签和legend
标签的两个作用:- 增强表单的语义
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样式,再看页面是否还具有可读性