第一章HTML5基础
1.什么是HTML
HTML是一种用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言(Markup Language)。
HTML5的优势:
1.世界知名浏览器厂商对HTML5的支持
2.市场的需求
3.跨平台
2.HTML5文件的基本结构
HTML5的最基本语法就是<标记>内容<标记>标记在有的地方也称为标签或者元素,他们指的都是同一种东西,标签都是成对出现的,有一个开头标记就对应一个结束标记。
3.网页的基本信息
1.DOCTYPE声明必须位于HTML文档第一行。
<!DOCTYPE html>
2.
HTML中常用的特殊符号
特殊符号 | 字符实体 |
---|---|
空格 | |
大于号(>) | > |
小于号(<) | < |
引号("") | " |
版权符号() | copy |
4.网页的基本标签
标题标签:
标题标签表示一段文字或者主题,并且支持多层次的内容结构,HTML提供了六级标题
最大标签依次到
最小标签。
<h1>一级标题</h1>
依次到六级标题
<h6>六级标题</h6>
段落标签和换行标签:
段落标签<p>…</p>表示一段文字内容换行标签
<br>表示这一个段落的换行。
水平线标签:
<hr/>表示一条水平线
字体样式标签:
<strong>可以让字体变粗,<em>标签让文字倾斜。
注释和特殊符号:
<!--注释内容-->表示注释
5.图像标签
1.1JPG格式
1.2GIF格式
1.3BMP格式
1.4PNG格式
基本语法:
<img src="图片地址"alt="图像的代替文字"title="鼠标悬停提示文字"width="图像宽度"height="图片高度"/>
src属性表示图片路径,alt属性指定的替代文本,width和height两个属性分别表示图片的宽度和高度。
6.超链接标签
超链接的基本用法,一是链接地址,即链接的目标,可以是某个网址或文件的路径。
绝对路径:指向目标地址的完整描述,一般指向本站点外的文件。
相对路径:相对于当前页面的路径,一般指向本站点外的文件,所以不需要一个完整的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类型文本框中用户输入的内容是否与自定义的正则表达式相匹配.