HTML基础
在网络已完全融入大家的生活的时代，从网络上获取信息或通过网络反馈个人信息，这些都离不开网页。在这些各式各样的页面中，无论是漂亮的，丑的，还是文字的，图片的，视频的等，都是以HTML文件为基础制作出来的。本节将介绍HTML文件的基本结构，在讲解之前，首先简单介绍什么是HTML，以及它的发展史。
HTML简介及发展史
HTML是用来描述网页的一种语言。它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅仅只是一种标记语言。既然HTML是标记语言，那么HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。
HTML的优势
-
世界知名浏览器厂商对HTML5的支持
-
市场的需求
-
跨平台
微软：2010年3月16日微软于拉斯维加斯市举行的MIX10技术大会上宣Explore (IE) 9浏览器开发者预览版此版本将更多地支持CSS3. SVG和浏览通用标准。
Gogle： 2010年2月19日. Goole Gers项目经理伊安.费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目的支持，重点开发HTML5项目。
苹果: 2010年6月7日，苹果在开发老大会的会后发布了Safari 5。这款浏览器支持10个以上HTML5新技术，包括全屏播放、HTML5 视频. HTML5 地理位置、HTML5 的形式验证等功能。
Opera: 2010年5月5日，Opera 软件公司首席技术官Hakon Wium Lie先生在访华之际，接受中国软件资讯网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势。
Mozilla：2010年7月，Mozilla基金会发布了Firefox4浏览器的第一个测试版，从官方文档看，它对HTML5是完全级别的支持。
W3C标准
W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构，表现和行为。用一座房子来比喻，房子首先需要用砖，泥，沙，钢筋等搭框架——“结构”，然后需要对这框架进行装修，如刷漆，贴墙纸，安装灯等，总之让房子更加漂亮。这就称为房子的“表现”。给房子加电梯，门铃，感应门等就像是房子的“行为”
W3C标准不是某一个标准，而是一系列的标准集合，一个网页由三部分组成，即结构(Structure),表现(Presentation)和行为(Behavior)
简单来说"结构"表现"行为"分别对应了三种非常常用的技术，即HTML,CSS,javaScript。也就是说HTML用来决定结构和内容，CSS用来设定网页的表现样式，javaScript用来控制网页的行为。
HTML5文件的基本结构
前面讲过HTML是一种超文本标记语言，如网页中的一个标题，一个段落，一张图片等，这些都是利用一个个HTML标记完成的。最基本的语法就是<标记>内容<标记>。
标记在有的地方也称为标签或者元素，其实它们都指的是同一种东西。标签都是成对出现的，有一个开头标记就对应地有一个结束标记，以“<>”开始，以“</>”结束，要求成对出现，标签之间有缩进，体现层次感，方便阅读和修改。
网页的基本信息
1.DOCTYPE声明：
DOCTYPE声明必须位于HTML文档的第一行
<!DOCTYPE html>使用
<title>搜狐—中国最大的门户网站</title>打开页面后，将在浏览器窗口的标题栏显示标题
3.标签
使用该标签描述网页的摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎，它采用"名称/值"对的方式描述摘要信息。
(1)文档内容类型，字符编码信息书写如下
<meta charset="UTF-8"/>属性：charset表示字符集编码，常用的编码有以下几种。
(1) gd2312：简体中文，一般用于包含中文和英文的页面
(2) lSO—885901：纯英文，一般用于只包含英文的页面
(3) big5：繁体，一般用于带有繁体字的页面
(4) UTF—8：国际性通用的字符编码，同样适用于中文和英文的页面。和gd2312编码相比，国际通用性更好。
在保存文件时编码方式一定要与HTML5页面中标签中编码方式保持一致，否则，将会出现乱码
网页的基本标签
标题标签
标题标签表示一段文字的标题或主题，并且支持多层次的内容结构。例如，一级标题采用
,二级标题则采用
,其他级别标题以此类推。HTML共提供了六级标题
~
,并赋予了标题一定的外观。所有标题字体加粗，
字号最大，
字号最小。如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>不同等级的标题标签对比</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html> 段落标签和换行标签
段落标签<p>…</p>表示一段文字内容换行标签
<br>表示这一个段落的换行。水平线标签：
<hr/>表示一条水平线字体样式标签：
<strong>可以让字体变粗，<em>标签让文字倾斜。注释和特殊符号：
HTML中注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容
HTML注释的语法是，如下
<!--注释内容-->有时候为了调试，需要暂时注释掉一些不必要HTML代码
由于大于号(>),小于号(<)等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相对的HTML代码表示，这些特殊符号对应的HTML代码被称为字体实体。
HTML中常用的特殊符号及其对应的字符实体如下图所示，这些实体符号都以"&“开头，以”；"结束。
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 |  ； | <a href="#".>百度</a.> ；| ；<a href="#".>Google</a.> |
| 大于号(>) | >； | 如果时间>；晚上6点，就坐车回家 |
| 小于号(<) | <； | 如果时间<；早上7点，就走路去上学 |
| 引号(’’) | "； | W3C规范中，HTML的属性值必须用成对的"；引起来 |
| 版权符号 | ©； | ©；20013-2018北大青鸟 |
图像标签
1.1JPG格式
1.2GIF格式
1.3BMP格式
1.4PNG格式
基本语法：
<img src="图片地址"alt="图像的代替文字"title="鼠标悬停提示文字"width="图像宽度"height="图片高度"/>src属性表示图片路径，alt属性指定的替代文本，width和height两个属性分别表示图片的宽度和高度。
超链接标签
超链接的基本用法，一是链接地址，即链接的目标，可以是某个网址或文件的路径。
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。
相对路径：相对于当前页面的路径，一般指向本站点外的文件，所以不需要一个完整的URL形式。
页面间链接语法：
<a href="链接地址"target="目标窗口位置">链接文本或图像</a>href表示链接地址的路径
锚链接语法：
<a name="marker">目标位置乙</a>
<a href="#marker">当前位置甲</a>列表、表格与媒体元素
列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来。HTML5中的列表可以分为三种类型：无序列表，有序列表，定义列表。
1.无序列表及其应用
无序列表由
- 标签和
- 标签组成，使用
- 标签作为无序列表的声明，使用
- 标签为每个列表项的起始。
<ul>
<li></li>
<li></li>
</ul>
无序列表中的每项都是评级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容.有序列表会依据列表项的顺序进行显示.遵循W3C标准，
- 标签里面只能嵌套
- 标签，不能嵌套其他标签。
2.有序列表及其应用
有序列表由
- 标签和
- 标签组成。
<ol>
<li></li>
<li></li>
</ol>
在实际网页应用中,无序列表比有序列表应用得更加广泛,有序列表ol-li一般用于显示带有顺序编号的特定场合.3.定义列表及其应用
<dl>
<dt></dt>
<dt></dt>
<dt></dt>
</dl>
定义列表一般适用于带有标题和标题解释性内容的场合.定义列表是一种很特殊的列表形式,它是标题及列表项的结合.定义列表的语法相对于无序和有序列表不太一样.它使用
-
标签作为列表的开始,使用
标签作为每个列表项的起始.
4.表格
1.表格的使用很广泛简单,结构稳定每行的列数一致,同行单元格高度一致且水平对齐.
2.表格的基本结构:
1.1单元格
单元格是表格的最小单位,一个或多个单元格纵横排列组成了表格.
1.2行
一个或多个单元格横向堆叠形成了行.
1.3列
由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列.
5.表格的基本语法
<table>
<tr>
<th>第1个单元格的内容</th>
<th>第2个单元格的内容</th>
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
</tr>
</table>为了显示表格的轮廓,一般还需要设置
标签的border边框属性,指定边框的宽度.<body>
<table border="2">
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
<th>1行3列的标题</th>
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
<td>1行3列的单元格</td>
</tr>
</table>
</body>6.表格的跨列与跨行
1.表格的跨列
<table>
<tr>
<td colspan="所跨的列数">单元格的内容</td>
</tr>
</table>2.表单的跨行
<table>
<tr>
<td rowspan="所跨的行数">单元格的内容</td>
</tr>
</table>3.表格跨立与跨行的综合应用
<body>
<table border="1">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td rowsspan="2">李四</td>
<td>语文</td>
<td>98</td>
</tr>
</table>
</body>7.HTML5的媒体元素
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>引用:
<body>
<audio controls>
<source src="music/music.ogg"/>
<source src="music/music.mp3"/>
</audio>
</body>可以用loop属性来实现视频的循环播放。
8.HTML的结构元素
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容 |
| footer | 标记脚部的内容 |
| section | Web页面中的独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅助内容 |
9.iframe框架
<iframe> 框架的主要作用是使页面中的部分内容用框架实现。
语法:
<iframe src="引用页面地址" name="框架标识名"..><iframe>2.属性的使用
常用的属性包括name,width,height,其中name属性可以和锚链接结合起来实现页面间的相互跳转。
表单
1.表单概述
1.表单的内容
不同的表单控件有不同的用途
表单的格式:
<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>2.post方法和get方法的区别:
（1）post方法提交方式不会改变地址状态，表单数据不会被显示。
（2）使用get方法提交方式，地址状态会发生改变，表单数据会在URL信息中显示。
(3) 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属性设置为hidden隐藏类型即可创建一个隐藏域.
2.表单的只读与禁用设置
只读场景:网站服务器方不希望用户修改的数据,这些数据在表单中显示.
禁用场景:只有满足某个条件后,才能选用某项功能.
只读和禁用效果分别通过设置readonly属性和disabled属性来实现.
4.表单元素的标注
对表单元素进行标注,这样做的目的就是为了增强鼠标的可用性.
语法:
<label for="表单元素的id">标注的文本</label>5.表单初级验证的方法
1.placeholder
placeholder属性用于为input类型的文本框提供一种提示.
2.required
required属性用于规定文本框填写内容不能为空.
3.pattern
pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配.
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
