编写HTML文档时遵守W3C标准，W3C是制定和维护统一的国际化Web开发标准的组织
结构标签
HTML标签
标题标签<h1>~<h6>
段落<p></p>
水平线<hr/>
粗体<strong></strong>
斜体<em></em> 中间可以嵌套<br/>
换行<br/>
空格
大于号（>） >
小于号（<）<
引号(") "
版权符号@ ©
图像(images)
<img src="相对路径\绝对路径" alt="" width="" height="">
超链接
-self;本页面打开 -blank；新窗口打开
几个页面之间的调整 <a href="相对路径\绝对路径">热点图像\热点文本</a>
锚链接
跳转到同一个页面的固定位置
<a href="#name">点击我</a>
<a name="">跳转到这里来</a>
跳转到不同页面的固定位置
1.html
<a href="2.html#name">点击我</a>
2.html
<a name="me">跳转到我这里来</a>
功能连接
<a href="mailto:邮箱地址">给站长写信</a>
特殊字符
<!--注释内容--> 规范意识 *******
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
二 美化 漂亮的衣服 -CSS样式
怎么写？
选择器{
属性：值；
属性：值；
}
（1）标签选择器：选择器写法和标签是一致的。所有的这些标签会使用统一的样式
如果有个别某些h1不想用这个格式怎么办？--》肯定不能使用h1这个标签选择器了
如果某些段落也想使用h1的那个样式怎么办？
（2）类选择器
.red{
color:red;
}
<h1></h1>
<h1 class="red"></h1>
<h1></h1>
<p></p>
<p class="red"></p>
（3）ID选择器
#green{
color:#00ff00;
}
<p id="green"></p>
怎么用？
(1)内部样式表 作用在全部
<style></style>
（2）内联样式
<p style="color: yellow;"></p>
(3)外部样式
创建一个外部的css文件：*.css,把样式写在这个文件中想用这个样式，谁就引入这个css文件即可
<link rel="stylesheet"href="样式文件的路径"/>
<style>
@import "css/types.css";
</style>
连接式和导入式区别
补充
css注释：/* */
颜色？
使用英文单词：red yellow bule green......
使用十六进制数字表示0-9ABCDEF
RGB=Red Green Blue
列表的分类
无序列表
有序列表
定义列表
无序列表的特性
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
有序列表的特性
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
定义列表的特性
没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
为什么使用表格
简单通用
结构稳定
基本结构
单元格
行
列
colspan 合并列 rowspan 合并行
视频播放的代码：
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
元素名 描 述
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容
隐藏域 <input type="hidden" value="666" name="userid">
<input name="name" type="text" value="张三" readonly（只读文本框
）>
<input type="submit " disabled（禁用） value="保存" >
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
表单验证的好处
减轻服务器的压力
保证数据的可行性和安全性
placeholder
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
文本框输入内容提示
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username" required/>
必填项
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
验证规则，正则表达式
CSS的概念
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS的优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式表
CSS代码写在<head>的<style>标签中
<style type="text/css">
h1{color: green; }
</style>
外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
链接式
导入式
外部样式表
链接外部样式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
文件路径 使用外部样式表 文件类型
……
</head>
外部样式表
导入外部样式表
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
链接式与导入式的区别
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级
行内样式>内部样式表>外部样式表
就近原则
CSS3基本选择器
标签选择器
类选择器
ID选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>
类选择器
<标签名 class= "类名称">标签内容</标签名>
<span>
ID选择器
#id { font-size:16px;}
小结
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
基本选择器的优先级
ID选择器>类选择器>标签选择器
层次选择器
选择器 类 型 功能描述
E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
后代选择器
body p{ background: red; }
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
body>p{ background: pink; }
相邻兄弟选择器
.active+p { background: green; }
通用兄弟选择器
.active~p{ background: yellow; }
结构伪类选择器
选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置