目录:
第一章:HTML5基础
1.1 HTML5文件的基本结构和W3C标准
1.2 网页的基本标签
1.3 图像标签
1.4 超链接标签
第二章:列表、表格与媒体元素
2.1 列表
2.2 表格
2.3 HTML5的媒体元素
2.4 HTML5的结构元素
2.5 <iframe>框架
第三章:表单
3.1 表单概述
3.2 表单的高级应用
3.3 表单的初级验证
第四章:初识CSS3
4.1 CSS概述
4.2 CSS3的基本语法
4.3 在HTML中引入CSS样式
4.4 CSS3的选择器
第五章:CSS3美化网页元素
5.1 编辑网页文本
5.2 设置超链接和列表样式
5.3 背景样式
第六章:盒子模型
6.1 盒子模型
6.2 圆角边框
6.3 盒子阴影
第七章:浮动
7.1 网页布局
7.2 display属性
7.3 浮动概述
7.4 清除浮动
第八章:定位网页元素
8.1 定位在网页中的应用
8.2 position属性
8.3 z-index属性
第九章:利用CSS3制作网页动画
9.1 CSS3变形
9.2 CSS3过渡
9.3 CSS3动画
第一章:HTML5基础
1.1 网页的基本信息
1.1.1DOCTYPE声明
约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。
<! DOCTYPE html>
1.1.2 < meta> 标签
使用 <meta> 标签描述网页的摘要信息,包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不现实,其目的是方便浏览器解析或利于搜索引擎搜索,它采用“名称/值”对的方式描述摘要信息。
<meta charset="UTF-8" />
当遇到页面发生乱码时,可以先观察页面中是否有些编码方式的语句,然后使用记事本打开该乱码文件,单机“另存为”按钮,在弹出的“另存为”对话框中修改编码方式,使其与页面中的编码方式一致。
搜索关键字:
<meta name="keywords" content=“2017” />
内容描述信息:
<meta name ="description" content=“今天是2017年9月21日”/>
1,2 网页的基本标签
标题标签 <h1>~<h6>
段落标签:<p> </p>
换行标签:<br/>
水平线标签:<hr/>
字体样式标签:<strong>字体加粗</strong> <em>字体倾斜</em>
特殊符号:
特殊符号 | 字符实体 |
空格 | |
大于号(>) | > |
小于号(<) | < |
引号(") | " |
版权符号() | © |
1.3 图像标签
图像标签的基本语法:
<img src ="图片地址" alt = " 图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
1.4 超链接标签
1.4.1 超链接的基本用法
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
根据连接地址是指向站外文件还是站内文件,链接地址又分为绝对路径和相对路径
绝对路径:指向目标地址的完整描述,一般指向本站点外的文件。例如:<a href="http:// www.sohu.com/index.html">搜狐</a>
相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要一个完整的URL地址的形式。例如:<a href="login/login.html">登录</a>表示链接地址为当前页面所在路径的login目录下的login.html页面
另外:"../"表示当前目录的上级目录;“../../”表示当前目录的上上级目录。
1.4.2 超链接的应用场合
① 页面间链接:A页到B页
② 锚链接:A页甲位置到A页乙位置或A页甲位置到B页乙位置
③ 功能性链接:在页面中调用其他程序功能,如电子邮件、QQ/MSN等。
锚链接语法:
<a name="marker">目标位置乙</a>
<a href="#marker">当前位置甲</a>
功能性链接语法:
<p><img src="image/logo.jpg" alt="logo"/>[<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>] </p>
第二章:列表、表格与媒体元素
2.1 定义列表及其应用 <dl>
<dt>标题</dt>
<dd><dd>
</dl>
2.2 表格的基本语法
<table>
<tr> <th></th><th></th></tr>
<tr><td></td><td></td></tr>
</table>
表格的跨列与跨行:
表格的跨列:
<table><tr><td colspan="所跨的列数">单元格内容</td></tr></table>
表格的跨行:
<table><tr><td rowspan="所跨的行数">单元格内容</td></tr></table>
2.3 HTML5的媒体元素
2.3.1 视频元素
<video controls>
<source src="video/video.webm"/>
<source src="video/video.mp4"/>
</video>
设置<video autoplay>后,不需要与用户进行任何交互,就可以让视频文件加载完成后自动播放。
2.3.2 音频元素
<audio controls>
<source src="music/music.mp3"/>
<source src="music/music.ogg"/>
</audio>
可以使用Loop属性实现视频的循环播放。
2.4 <iframe> 框架
语法:<iframe src="引用页面地址" name="框架标识名"></iframe>
<iframe>属性的使用
<iframe name="mainFrame" src="subframe/the_second.html"/>
< a href="subframe/the_second.html" target="mainFrame">下面显示第二页</a>
第三章:表单
最基本的表单:
1 <form method="post" action="result.html">
2 <p> 名字: <input name="name" type="text" /> </p>
3 <p> 密码: <input name="pass" type="password" /> </p>
4 <p>
5 <input type="submit" name="Button" value="提交"/>
6 <input type="reset" name="Reset" value="重填"/>
7 </p>
8 </form>
get方式提交和post方式提交的区别:
(1)post方法提交方式不会改变地址栏状态,表单数据不会被显示
(2)使用get方法提交方式,地址栏状态发生变化,表单数据会在URL信息中显示。
表单类型:
type | 说明 |
text | 文本框 |
password | 密码框 |
radio | 单选按钮 |
checkbox | 复选框 |
select[option] | 列表框 |
reset | 重置按钮 |
button | 普通按钮 |
submit | 提交按钮 |
textarea(cols="显示的列数" rows="显示的行数" | 多行文本域 |
files(form中必须有enctype="multipart/form-data") | 文件域 |
email | 邮箱 |
url | 网址 |
number | 数字 |
range | 滑块 |
search | 搜索框 |
hidden | 隐藏域 |
readonly:只读 disabled:禁用
表单元素的标注
对表单元素进行标注,是为了增强鼠标的可用性。
语法: <label for="表单元素的id">标注的文本</label>
<form>
请选择性别:
<label for="male">男</label>
<input type="radio" name="gender" id="male"/>
<label for="female"> 女</label>
<input type="radio" name="gender" id="female"/>
</form>
3.3表单的初级验证
1、placeholder
1 <form action="#" method="post">
2 <p> 请输入搜索的关键词:
3 <input type="search" name="sousou" placeholder="请输入要搜索的关键字"/>
4 <input type="submit" value="Go"/>
5 </p>
6 </form>
2、required 验证表单元素非空
3、pattern 验证input类型文本框中用户输入的内容是否与自定义的正则表达式想匹配
<form action="#" method="post">
<p>
电话号码:
<input type="text" name="tel" required pattern="^ 1[358]\d{9}"/> *以13、15、18开头的11位数字
<br/>
<input type="submit" value="提交"/>
</p>
</form>
^:开始
$:结束
\d:数字
\D:非数字
\s:空字符
\S:非空字符
\w:文字
\W:非文字
*:任意字符,0~N次
+:任意个字符 1~N次
?:是否有(0次或者1次)
{n}:N次重复
{n,}:至少n次
{n,m} n到m次
.:除了换行之外的所有字符,当需要用"."时,应写为:"\."