HTML语言
一.HTML5基础
1.HTML简介及发展史
HTML是用来描述网页的一种语言。它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。
HTML是由一套标记标签组成的，使用浏览器打开任意一个界面，按下F12键，就会看到一段程序，里面显示的就是这个网页的HTML源文件。
1，HTML5的优势：
①，世界知名浏览器厂商对HTML5的支持
②，市场的需求
③，跨平台
2，W3C标准
各大浏览器厂商为了吸引用户，在HTML上扩展各种标签，，各浏览器之间互不兼容，导致HTML发明的初衷，因此需要一个组织来制定和维护统一的Web开发标准，“万维网联盟”，它是Web技术领域最权威和具有影响力的国际中立性技术标准机构。
W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构，表现和行为。
3.HTML5文件的基本结构
最基本的语法是：<标记> 内容<标记>
标记在有的地方称为标签或元素，标签都是成对出现的，有一个开头标记就对应有一个结束标记，以“<>”开始，以“</>”结束， HTML的基本框架如下：
<html>
<head>
<title>标题</title>
</head>
<body>
正文
<body>
</html>
4.DOCTYPE声明
最上面有一行关于DOCTYPE文档类型的声明，约束HTML文档结构
2.
使用此标签描述网页的标题
3.标签
使用该标签描述网页的摘要信息
2.网页的基本标签
1.标题标签
HTML提供了六级标题<h1>~<h6>
<h1>字号最大，<h6>字号最小
2.段落标签和换行标签
<p>我们是程序员</p>标签表示一个段落标签
<br/>表示换行标签
换行标签这样没有结束标签的叫单标签，如又开始有结束的叫双标签。
3.水平线标签
<hr/> 水平线标签
顾名思义，水平线标签
表示一条水平线，注意该标签与
标签一样特殊，没有结束标签。
4.字体样式标签
<strong>内容</strong>标签来让字体加粗
5.注释和特殊符号
语法：<!--注释内容-->
当页面HTML结构复杂或内容较多时，需要添加必要的注释，方便阅读。
HTML中常用的特殊符号及对应的字符实体
| 特殊符号 | 字符实体 |
|---|---|
| 空格 | |
| 大于号（>） | > |
| 小于号（<） | < |
| 引号（“） | " |
| 版权符号（） | © |
如果看不到字符实体点击文本框可显示。
6.图像标签的基本语法：
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停文字" width="图片宽度" height="图片高度"/>
src属性表示图片路径，alt属性指定的替代文本，title属性可以提供额外的提供或帮助信息
width和height属性表图片的宽度和高度。
3.超链接标签
1.超链接的基本用法
<a href="链接地址" target="目标窗口位置">连接文本或图像</a>
target：指定链接在哪个窗口打开，常用取值有-self（自身窗口）-blank（新窗口）
超链接既可以是文本链接，也可以是图像超链接。
根据链接地址指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径：
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。
相对路径：相对于当前页面的路径，一般指向本站点外的文件，所以不需要一个完整的URL形式。
注意：当超链接href链接路径为”#“时，表示空链接，如
<a href="#">首页</a>
2.超链接的应用场合
①页面链接
页面链接就是从一个页面连接到另一个页面。
②锚链接
锚链接常用于目标内内容很多，需定位到目标页内容中的某个具体位置时，语法为：
<a name="marker">目标位置</a>
设置位置链接路径属性值为#标记名的语法如下：
<a name="#marker">当前位置</a>
③功能性链接
单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序。
3.行内元素和块元素
我们发现p元素h1元素不管内容多少都是独占一行，这样的元素称为块元素。
如strong元素，a元素这些宽度由自己决定，这样的元素称为行内元素。
二.列表，表格与媒体元素
1.列表
列表就是信息资源的一种展示形式，使信息结构化和条理化，列表分为三种：无序列表，有序列表，自定义列表；
1.无序列表：
无序列表是由
-
标签和
- 标签组成的，使用
-
标签作为无序列表的声明，使用
- 标签作为每个列表的起始。语法如下：
<ul>
<li>第1项</li>
<li>第2项</li>
</ul>
遵循W3C标准，
-
标签里面只能嵌套
- 标签，不能嵌套其他标签。
无序列表的特性如下：
（1）没有顺序，每个
（2）默认
（3）一般应用于导航，侧边栏新闻，有规律的图文组合等。
2.有序列表
有序列表的语法结构：
<ol>
<li>第1项</li>
<li>第2项</li>
</ol>
有序列表的特性如下：
（1）有顺序，每个
（2）默认
（3）一般应用于试卷，问卷等。
3.自定义列表
它是标题及列表项的集合，使用
-
作为列表的开始，使用
- 作为每个列表项的起始，使用
- 来定义，语法如下：
<dl>
<dt>标题一</dt>
<dd>第1项</dd>
<dd>第二项</dd>
</dl>
定义列表的特性如下：
（1）没有顺序，每个
（2）默认没有标记
2.表格
1.为什么使用表格
①简单通用
②结构稳定
2表格的基本语法：
<table>
<tr>
<th>第一个单元格内容</th>
<th>第二个单元格内容</th>
</tr>
<tr>
<td>第一个单元格内容</th>
<td>第二个单元格内容</th>
</tr>
.....
</table>
第一步：创建表格标签
…第二步：在表格标签
里创建行标签.可以有多行第三步：在里创建单元格标签创建标题
第四步：在行标签里创建单元格…可以有多个单元格
忘了显示表格轮廓，一般还需要设置
标签得border属性，指定边框的宽度。3.跨行和跨列
<table>
<tr>
<td colspan="所跨的列数" rowspan="所跨的行数">单元格内容</td>
<tr>
</table>
以上是跨行和跨列的语法使用。
3.媒体元素
1.视频元素
video元素是现在插放视频的一种标准方法，video元素的基本语法：
<video src="视频路径" controls="contrls"></video>
src属性用于指定播放的视频文件的路径，controls属性用于提供播放，暂停和音量控件。
<body>
<video controls>
<source src="video/video.webm"/>
<source src="video/video.mp4"/>
</video>
</body>
使用source元素来链接到不同的视频文件，浏览器会自动选择第一个可以识别的格式
设置autoplay属性后，可以让视频文件加载完后自动播放。
2.音频元素
audio元素的基本语法：
<audio src="音频路径" controls="contrls"></audio>
audio元素的应用：
<body>
<audio controls>
<source src="music/music.ogg"/>
<source src="music/music.mp3"/>
</audio>
</body>
其中可以使用loop属性来实现视频的循环播放。
4.HTML的结构元素
1.页面布局分析
页面的大体结构分为页面头部，页面主体，页面底部。
2.HTML5的结构元素
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容 |
| footer | 标记脚部的内容 |
| section | Web页面中的独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅助内容 |
结构标签不仅可以使网页结构更清晰，明确，还有利于搜索引擎的检索。
3.iframe框架
<iframe> 框架的主要作用是使页面中的部分内容用框架实现。
语法：
<iframe src="引用页面地址" name="框架标识名"..><iframe>
2.属性的使用
常用的属性包括name,width,height,其中name属性可以和锚链接结合起来实现页面间的相互跳转。
三.表单
1.表单概述
1.表单的内容
表单就是将一个用户信息组织起来额容器，典型的应用场景如下：
登录，注册，网上订单，网上搜索等等。
创建表单后，放置控件以接收用户的输入，这些控件通常放在…标签里。
2.表单标签及表单属性
使用标签来实现表单的创建，该标签用于在网页中创建表单区域，其他标签需要在它的范围内才有效，便是其中一个。
| 属性 | 说明 |
|---|---|
| action | 指示服务器处理表单输出的程序 |
| method | 指定向服务器发送数据的方法（get/post） |
下图为一个基本的表单格式：
<form method="post" action="#">
<p> 名字:<input type="text" name="names"/></p>
<P> 密码:<input type="password" name="name1"/></p>
<p> <input type="submit" value="提交"/></p>
</form>
3.post方法和get方法的区别：
（1）post方法提交方式不会改变地址状态，表单数据不会被显示。
（2）使用get方法提交方式，地址状态会发生改变，表单数据会在URL信息中显示。
以上两点区别：post提交方法的数据安全性明显高于get方法提交的数据。
2.表单元素及其格式
元素的常用属性
| 属性 | 说明 |
|---|---|
| type | 此属性可用类型有text，password，checked，radio,submit,reset,file,email,number,url,hidder,image,button等 |
| name | 指定表单元素的名称。 |
| value | 指定表单元素的初始值。 |
| size | 指定表单元素的初始宽度。 |
| maxlength | 在text或password类型，表单元素大小以字符为单位。 |
| checked | 指定按钮是否被选中。 |
1.文本框
最常见的表单输入元素就是文本框（text），用于输入单行文本信息。
maxlength属性用来指定输入的数据长度。size属性用来指定文本框的长度，这就是二者之间的不同。
2.密码框
password
密码框与文本框不同，区别在于需要设置文本框控件的type属性为password以黑色实心圆点来表示。
3.单选按钮
radio 单选按钮有一个默认键，可以使用checked属性来实现默认功能。
<input name="gen" type="radio" value="男" checked/>男
4.复选框
复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框。
5.列表框
列表框的目的主要是使用户快速，方便，正确的选择一些选项，节省页面空间，标签和标签来实现，标签用来显示用户选择的列表框，一个标签表示，标签必须至少包含一个标签。
<select>
<option>....</option>
<option>....</option>
</select>
6.按钮
分为普通按钮（button），提交按钮（submit），重置按钮（reset）
<input type="reset" name="names" value="重置"/>
value用来设置在按钮上的文字，name给按钮命名。
reset按钮：重置最初状态，数据被清空。
submit按钮：表单将会提交到action属性所指定的URL，传递数据。
button：与事件关联使用。
7.多行文本域
标签为，它的语法如下：
<textarea name="textarea" cols="显示的列数" rows="显示的行数">
文本内容
</textarea>
8.邮箱
email类型的input元素是一种专门用于输入email地址的文本框。
9.滑块
range类型的input元素提供用于输入包含一定范围内的数字值的文本框。
10.搜索框
search类型的input元素提供用于输入搜索关键词的文本框。
3.表单的高级应用
1.设置表单的隐藏域
将type设置为hidder隐藏类型可创建一个隐藏域。
2.表单的只读与禁用设置
只读：readonly （只对信息进行读取作用，不改变框颜色）
禁用：disabled（按钮呈灰色显示，表示无法使用）
2.表单元素的标注
进行标注要使用
<label for="表单元素的id">标注文本</label>
<form>
请选择性别：
<label for="mal">男</label>
<input type="radio" name="gen" id="mal"/>
</form>
其中name和id是必不可少的。
3.为什么要进行表单验证？
①减轻服务器的压力
②保证数据的可行性和安全性
4.表单初级验证的方法：
①placeholder
用于为input类型的文本框提供一种提示，可以描述为期待用户输入何种内容，在输入时消失
②required
规定文本框填写内容不能为空，否则不允许用户提交表单
③patter 验证input类型文本框中用户输入的内容是否与自定义的正则表达式匹配。
以上就是我对HTML1~3章内容的总结。
转载：https://blog.csdn.net/Clsrm/article/details/101462458