HTML 与 XHTML区别、HTML5新的语义化标签、表单扩展学习

1. HTML 与 XHTML区别

  DOCTYPE文档及编码
  元素大小写 
  属性布尔值
  属性引号
  图片的alt属性
  单标签写法
  双标签闭合

2. strong与b、em与i

表现形态都是 文本加粗  和  文本斜体

区别：是否具备语义化

3. 引用标签

 blockquote  :  引用大段的段落解释
    q  :  引用小段的短语解释
    abbr  :  缩写或首字母缩略词
    address  :  引用文档地址信息
    cite  :  引用著作的标题

4. iframe标签

可以引入其他的html到当前html中显示。

主要是利用iframe的属性进行样式的调节。

5. br 与 wbr

br 就是换行、  wbr 就是软换行（在指定时机进行换行）

6. pre 与 code ?

针对网页中的程序代码的显示效果。

7. map 与 area

  给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

8. embed 与 object

给flash和一些插件进行渲染操作的标签。

9. audio 与 video

 引入音频与视频的标签。属于H5的功能。

10. 文字注解

ruby  、 rt 这样一个组合

11. link扩展学习

添加网址标题栏前的小图标：
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
DNS预解析：
<link rel="dns-prefetch" href="//static.360buyimg.com">

12. meta扩展学习

  meta添加一些辅助信息。

    <meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
    <meta name="keywords" content="大连美食,大连酒店,大连团购">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="refresh" content="3" url="">
    <meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

13. HTML5新的语义化标签

 	header : 页眉
    footer : 页脚
    main : 主体
    hgroup : 标题组合
    nav : 导航

    注：header、footer、main 在一个网页中只能出现一次。

    article : 独立的内容
    aside : 辅助信息的内容
    section : 区域
    figure : 描述图像或视频
    figcaption : 描述图像或视频的标题部分	

    datalist : 选项列表
    details / summary : 文档细节 / 文档标题
    progress / meter : 定义进度条 / 定义度量范围
    time : 定义日期或时间
    mark : 带有记号的文本

14. 表格扩展学习

添加单线 : border-collapse : collapse
隐藏空单元 : empty-cells : hide
斜线分类 : border / rotate
列分组 : colgroup  / col

15. 表单扩展学习

美化表单控件：   1. label + :checked    2. position + opacity

新的input控件
   email  :  电子邮件地址输入框
   url  :  网址输入框
   number  :  数值输入框
   range  :  滑动条
   date / month / week  :  日期控件	
   search  :  搜索框
   color  :  颜色控件
   tel  :  电话号码输入框  ( 在移动端会默认调起数字键盘 )
   time  :  时间控件

表单属性：
   autocomplete  :  自动完成  默认 on  /  off
   autofocus  :  获取焦点
   required  :  不能为空
   pattern  :  正则验证

   method  :  数据传输方式
   enctype  :  数据传输类型
   name / value  :  数据的键值对

扩展标签 :	
   fieldset  :  表单内元素分组 
   legend  :  为fieldset元素定义标题
   optgroup  :  定义选项组

16. BFC规范

触发BFC规范的元素，可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。

触发的样式：
    float、display、position、overflow

文章来源地址https://www.toymoban.com/news/detail-600359.html

到了这里，关于HTML 与 XHTML区别、HTML5新的语义化标签、表单扩展学习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！