HTML5常用标签

2022-03-16 03:20:43

1.HTML文档的基本结构

<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
	<!--head,头元素： 作用： 1、用于指定HTML文章中的一些元数据， 例如元数据 meta：定义页面的编码格式 title:定义页面的标题 2、引入外部的资源文件--未来讲解 -->

	<head>
		<meta charset="utf-8" />
		<title>这是我的第一个HTML页面</title>
	</head>
	<!--body，主体：浏览器显示的内容都将在这里编写 格式化代码的快捷键：ctrl+shift+f（英文状态下使用） -->

	<body>hello html 这是我的第一个HTML页面 </body>

</html>

二：HTML的注释

1.语法：

      HTML注释以<!-- 开头 ，以-->结尾。
      注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
      <!--
      这里编写HTML注释，
      可以是一行，也可以是多行
       -->
 

三：HTML中常用标签

一：文本标签

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

2.段落标签：<p></p>

3.换行标签：<br/>

4.水平线标签：<hr/>

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

HTML5常用标签

 

 二：图片标签

1.基本属性
HTML5常用标签

 

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

HTML5常用标签

 

 

三：列表标签

1.无序列表/有序列表

HTML5常用标签

 

四：定义描述标签

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

HTML5常用标签

 

 五：布局标签 层 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.  页面间的跳转

HTML5常用标签

 

 

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

HTML5常用标签

 

 

4.页面间的锚链接
HTML5常用标签

 

六：表格标签

1.规则表格

HTML5常用标签

HTML5常用标签

 

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

HTML5常用标签

HTML5常用标签

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

HTML5常用标签

上诉的标签都是用在<table></table>中

 

七：表单--非常重要

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

2.表单的元素

HTML5常用标签

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

HTML5常用标签

 4.文本框

HTML5常用标签

 

 5. 密码框

HTML5常用标签

 

 6.单选按钮

HTML5常用标签

 

 7.复选框

HTML5常用标签

 

 8.文件域

HTML5常用标签

 

 9.日期-html5的新特性

HTML5常用标签

 

 10.隐藏域

HTML5常用标签

 

 11.下拉列表框

HTML5常用标签

 

 12.文本域

HTML5常用标签

 

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

HTML5常用标签

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

HTML5常用标签

 

 14.标签

HTML5常用标签

 

 

八：框架

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

2.框架语法

HTML5常用标签

 

 3.框架集

HTML5常用标签

 HTML5常用标签

 HTML5常用标签

 HTML5常用标签

 

九：常用的布局组合标签

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 适用于 <input> 标签，以及以下类型的 <input> 标签：text, search, url,telephone, email, password, datepickers, range 以                                                      及 color。
HTML5常用标签

 

 2. input 新属性

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

<input list="companys">
	<datalist id="companys"> 
		<option value="alibaba"> 
		<option value="baidu"> 
		<option value="tencent"> 
		<option value="zijie"> 
		<option value="didi"> 
	</datalist>

　　

3.multiple：multiple 属性是一个 boolean 属性。multiple 属性规定 <input> 元素中可选择多个值。
                   注意: multiple 属性适用于以下类型的 <input> 标签：email 和 fifile 
                  传多个文件: <input type="file" name="img" multiple>
 
4.placeholder：placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。
                         注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及password。
                        <input type="text" name="userName" placeholder="请输入用户名"> 
 
5.requiredrequired 属性是一个 boolean 属性。required 属性规定必须在提交之前填写输入域（不能为空）。
                              注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password,date pickers, number, checkbox, radio 以及 fifile。
                              用户名: <input type="text" name="username" required>
 
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                 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素
HTML5常用标签

 

          2）目前, <audio> 元素支持三种音频格式文件: MP3, Wav, 和 Ogg，音频格式的MIME类型 

 HTML5常用标签

 

 9. HTML5中新增的视频 

HTML5常用标签

 HTML5常用标签

 

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>视频音频</title>
	</head>

	<body>
		<h1>音频</h1>
		<audio controls>
			<source src="audio/wgs.ogg" type="audio/ogg">
			<source src="audio/zjl.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
		<h1>视频</h1>
		<video width="1320" height="640" controls>
			<source src="audio/ruhai.mp4" type="video/mp4">
			<source src="audio/wgs.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video>
	</body>

</html>

 

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

 

十一：转义字符

HTML5常用标签

 

 

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

 

HTML5常用标签

上一篇：Python version 2.7 required, which was not found in the registry


下一篇：2014.3.11-C语言学习小结