03-08 08:05 阅读 204

HTML5常用标签

1.HTML文档的基本结构





	

	
		
		这是我的第一个HTML页面
	
	

	hello html 这是我的第一个HTML页面

二：HTML的注释

1.语法：

HTML注释以结尾。

注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码

三：HTML中常用标签

一：文本标签

1.标题标签： h1--h6，字体逐渐缩小

2.段落标签：

3.换行标签：

4.水平线标签：

5.范围标签：一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。

二：图片标签

1.基本属性

2.设置图片的热点区域--了解

三：列表标签

1.无序列表/有序列表

四：定义描述标签

1.一般用在图文混编的场景中。

五：布局标签层 div

1.一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局

四：标签分类

1.html标签可以分为块状元素和行级元素两类。

块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；

行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。

PS:区分的简单方法：是否独占一行。

2.块状元素和行内元素的区别：

块级元素会独占一行，其宽度自动填满其父元素宽度；

行内元素会排列到同一行里，其宽度随元素的内容变化而变化。

块级元素可以设置宽高；行内元素设置宽高无效。

块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。（此处的属性稍后介绍）

3.我们上面已经讲过的标签中归类一下：

属于块状元素的：

标题标签 h1-h6,

段落标签 p ,

水平线标签 hr,

有序列表标签 ol--li，

无序列表标签 ul--li，

定义描述标签 dl-dt-dd，

容器标签 div：

属于行级元素的：

范围标签：span

图像标签：img

五：超链接

1. 超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能

2. 页面间的跳转

3.锚链接：当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接。

4.页面间的锚链接

六：表格标签

1.规则表格

2.不规则表格：跨行快列

3. 表格的高级标签--标题标签和逻辑分区标签

上诉的标签都是用在

中

七：表单--非常重要

1.用于采集用户输入的数据。用于和服务器进行交互。

2.表单的元素

3. 表单项元素中的一些属性：

4.文本框

5. 密码框

6.单选按钮

7.复选框

8.文件域

9.日期-html5的新特性

10.隐藏域

11.下拉列表框

12.文本域

13.按钮：提交按钮 / 重置按钮 / 图像按钮 / 普通按钮

button标签可以与input实现的按钮相互替换

14.标签

八：框架

1.通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动

2.框架语法

3.框架集

九：常用的布局组合标签

1.div-ul-li/div-ol-li：常用于导航布局

div-dl-dt-dd:常用于图文混编布局

div-form:常用于表单布局

div-table:常用于局部规则数据展示布局

十：HTML4和HTML5的区别

1.DOCTYPE 不同

2.指定字符编码语法不同

3. HTML5中新增的语义标签-了解

1）article：定义页面独立的内容区域。

2）aside：定义页面的侧边栏内容。

3）bdi：允许您设置一段文本，使其脱离其父元素的文本方向设置。

4) details：用于描述文档或文档某个部分的细节

5）dialog：定义对话框，比如提示框

6）summary：标签包含 details 元素的标题

7）header：定义了文档的头部区域

8）footer：定义 section 或 document 的页脚。

9）nav：定义导航链接的部分。

10）progress：定义任何类型的任务的进度。

11）section：定义文档中的节（section、区段）。

12）time：定义日期或时间。

13）wbr：规定在文本中的何处适合添加换行符

十一：HTML5新的表单属性

1. form新属性

autocomplete 属性：autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意: autocomplete 适用于标签，以及以下类型的标签：text, search, url,telephone, email, password, datepickers, range 以及 color。

2. input 新属性

list属性：list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

3.multiple：multiple 属性是一个 boolean 属性。multiple 属性规定元素中可选择多个值。

注意: multiple 属性适用于以下类型的标签：email 和 fifile

传多个文件:

4.placeholder：placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的标签：text, search, url, telephone, email 以及password。

5.requiredrequired 属性是一个 boolean 属性。required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的标签：text, search, url, telephone, email, password,date pickers, number, checkbox, radio 以及 fifile。

用户名:

6.HTML5新的表单元素--了解

1）datalist：input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

2）keygen：规定用于表单的密钥对生成器字段。

3）output：标签定义不同类型的输出，比如脚本的输出。

7. HTML5中新的input类型

1）HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

2）color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week

3）并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

8. HTML5中新增的音频

1）直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了在网页上嵌入音频元素的标准，即使用

2）目前,

9. HTML5中新增的视频




	
		
		视频音频
	

	
		音频
		
		视频

10. HTML5中已经移除的元素：frame，frameset，noframes

十一：转义字符

十二：总结：有完成一章节了呢，加油!

原文：https://www.cnblogs.com/baiyangshu/p/15013788.html