1，Web标准
（注：Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（World Wide Web Consortium）即万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做了杰出的贡献）
网页中Web标准三层组成
结构（Structure）、表现（Presentation）、行为（Behavior）
结构：结构用于对网页元素进行整理和分类（HTML）
表现：表现用于设置网页元素的板式、颜色 、大小等外观样式（CSS）
行为：行为是指网页模型的定义及交互的编写（JavaScript`）
2，Web标准的好处
（1）遵循web标准可以让我们写的页面更标准更统一
（2）让Web的发展前景更广阔
（3）内容能被更广泛的设备访问
（4）更容易被搜寻引擎搜索
（5）降低网站流量费用
（6）使网站更易于维护
（7）提高网页浏览速度
3,HTML
HTML指的是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
html作用：网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。
超文本，有2层含义：
因为他可以加入图片、声音、动画、多媒体等内容（超越文本限制）
还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）
3.1HTML骨架标签
html骨架：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
html骨架标签总结
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标语 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
3.2HTML元素标签分类
标签：在html页面中，带有"<>"符号的元素被称为html标签，如上面提到的<html>、<head>、<body>都是html骨架结构标签。
分类：
（1），常规元素（双标签）
<标签名>内容</标签名> 比如 <body>我是文字</body>
该语法中“<标签名>”表示该标签的作用开始，一般称为"开始标签（start tag）"，"</标签名>"表示该标签的作用结束，一般称为"结束标签（end tag）"。
和开始标签相比，结束标签只是在前面加了一个关闭符"/"。
我们以后接触的基本都是双标签
（2），空元素（单标签）
<标签名/> 比如 <br/>
空元素用单标签来表示，简单点说，就是里面不需要包含内容，只有一个开始标签不需要关闭。
单标签非常的少
3.3HTML标签关系
主要针对于双标签的相互关系分为两种：
（1）嵌套关系（父子关系）
<head>
<title> </title>
</head>
（2）并列关系（兄弟关系）
<head></head>
<body></body>
注：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）；如果是并列关系，最好上下对齐。
4，开发工具Sublime
生成页面骨架结构
<!DOCTYPE html>//<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前，此标签可告知浏览器文档使用哪种HTML或XHTML规范。即告诉浏览器按照HTML5规范解析页面。（注：HTML文件必须加上DOCTYPE声明，并统一使用HTML5的文档声明）
<html lang="en">//指定html语言种类，en定义语言为英语，zh-CN定义语言为中文（考虑浏览器和操作系统的兼容性，目前仍然使用zh-CN属性值）（注：简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理html的程序对页面语言内容来做一些对应的处理或者事情。比如可以：根据lang属性来设定不同语言的css样式，或者字体；告诉搜索引擎做精确的识别；让语法检查程序做语言识别；帮助翻译工具做识别；帮助网页阅读程序做识别等等）
<head>
<meta charset="UTF-8">//字符集（Character set）是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。这句代码是让html文件是以UTF-8编码保存的，浏览器根据编码去解码对应的html内容。（一般情况下统一使用“UTF-8”编码，请尽量统一写成标准的“UTF-8”，不要写成“utf-8”或“utf8”或“UTF8”）
<title>Document</title>
</head>
<body>
</body>
</html>
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文 包括6763个汉字 GUO BIAO
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符
5，HTML标签的语义化
所谓标签语义化，就是指标签的含义。
语义化的目的：根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
（1）方便代码的阅读和维护
（2）同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
（3）使用语义化标签会具有更好地搜索引擎优化
语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
遵循的原则：先确定语义的HTML，再选合适的CSS 。所以，html标签，要根据语义去记忆。HTML网页中任何元素的实现都要依靠HTML标签。
6，HTML常用标签
6.1排版标签
排版标签主要是和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
（1）标题标签h
单词缩写：head 头部标题 title 文档标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即标题标签的语义：作为标题使用，并且依据重要性递减
其基本语法格式如下（注：加了标题的文字会变的加粗，h1-h6字体依次变小,一行只能放一个标题）：
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
（2）段落标签p
单词缩写：paragraph 段落
作用语义：
可以把HTML文档分割为若干段落
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是
<p>文本内容 </p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
（3）水平线标签hr
单词缩写：horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr/>就是创建横跨网页水平线的标签。其基本语法格式如下：
<hr/>是单标签
在网页中显示默认样式的水平线。
（4）换行标签br
单词缩写：break 打断，换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br />
（5）div和span标签
div span是没有语义的 是我们网页布局主要的2个盒子 div就是division的缩写 分割，区分的意思，其实有很多div来组合网页。span 跨度，跨距；范围
语法格式：
<div>这是头部</div> <span>此处为内容</span>
他们两个都是盒子，用来装我们网页元素的。
div标签 用来布局的，但是现在一行只能放一个div
span标签 用来布局的，一行上可以放好多个span
排版标签
| 标签名 | 定义 | 说明 |
| <hx></hx> | 标题标签 | 作为标题使用，并且依据重要性递减 |
| <p></p> | 段落标签 | 可以把HTML文档分割成若干段落 |
| <hr/> | 水平线标签 | 一条分割线 |
| <br/> | 换行标签 | 强制换行 |
| <div></div> | div标签 | 用来布局的，但是现在一行只能放一个div |
| <span></span> | span标签 | 用来布局的，一行上可以放好多个span |
6.2文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
| 标签 | 显示效果 |
| <b></b>和<strong></strong> | 文字以粗体方式显示（XHTML推荐使用strong） |
| <i></i>和<em></em> | 文字以斜体方式显示（XHTML推荐使用em） |
| <s></s>和<del></del> | 文字以加删除线方式显示（XHTML推荐使用del） |
| <u></u>和<ins></ins> | 文字以加下划线方式显示（XHTML不赞成使用u） |
区别：
b只是加粗 strong除了可以加粗还有强调的意思，语义更强烈
6.3标签属性
所谓属性，就是外在特性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置，其基本语法格式如下：
<标签名 属性1="属性1"属性2= "属性值2"...>内容</标签名>
6.4图像标签img
在网页中显示图像就需要使用图像标签
语法如下：
<img src="图像url"/>
该语法啊中src属性用于指定图像文件的路径和文件名，即img标签的必须属性。
<img/>标记属性
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
注：（1）标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
（2）属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
（3）采取键值对的格式 key=“value” 的格式
6.5链接标签
单词缩写：anchor的缩写 基本解释 锚，铁锚的
在HTML中创建超链接非常简单，只需用标签把文字包括起来就行。
语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，_blank为在新窗口中打开方式。 |
注意：
（1）外部链接 需要添加 http://www.baidu.com
（2）内部链接 直接链接内部页面名称即可 比如 <a href="index.html">首页</a>
（3）如果当时没有确定链接目标时，通常将链接标签的href属性值定义为"#"（即href="#"）,表示该链接暂时为一个空链接。
（4）不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接
6.6注释标签
在HTML中还有一种特殊的标签——注释标签。。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
简单解释：
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
语法格式：
<!..注释语句..> 快捷键：ctrl+/ 或者 ctrl+shift+/（加注释或取消注释同样的快捷键）
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
7，路径
路径分为相对路径和绝对路径
相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一文件时，所使用的路径将不相同，故称之为相对路径。
| 路径分类 | 符号 | 说明 |
| 同一级路径 | 只需输入图像文件的名称即可，如<img src="baidu.gif"/> | |
| 下一级路径 | "/" | 图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）如<img src="images/baidu.gif"/> |
| 上一级路径 | "../" | 在文件名之前加入"../",如果是上两级的话，则需要使用"../../",以此类推，如<img src="../baidu.gif"/> |
注：相对路径，是从代码所在的这个文件出发，去查找我们的目标文件，而我们所说的上一级、下一级、同一级 简单说，就是图片位于HTML页面的位置
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
"D:\web\img\logo.jpg", 或完整的网络地址，例如"http://www.itcast.cn/images/logo.gif"。
注：绝对路径用的较少，只需理解，但要注意，他的写法 特别是符号\并不是 相对路径的/
8，
8.1锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
（1）使用相应的id名标注跳转目标的位置
<h3 id="two">第二集</h3>
（2）使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
<a href="#two" >第二集</a>
8.2base标签
语法：
<base target="_blank"/>
总结
（1）base可以设置整体链接的打开状态
（2）base写到<head></head>之间
（3）把所有的链接 都默认添加target="_blank"
8.3预格式化文本pre标签
<pre>标签可定义预格式化文本
被包围在<pre>标签 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
<pre></pre>
所谓的预格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等。
注：比较少用，因为整体不好控制
8.4特殊字符
一些特殊的符号，我们在html里面很难或者不方便直接使用,我们此时可以使用下面的代替代码。
| 特殊字符 | 描述 | 字符代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| © | 版权 | © |
| ® | 注册商标 | ® |
| 。 | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| 2 | 平方2（上标3） | ² |
| 3 | 平方3（上标3） | ³ |
| ￥ | 人民币 | ¥ |
总结
（1）是以运算符&开头，以分号运算符；结尾
（2）它们不是标签而是符号
（3）HTML中不能使用小于号“<”和大于号“>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在HTML源代码中使用字符实体
9，表格标签
表格用来显示数据，可以让数据显示整齐规范
（1）创建表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含基本的三对HTML标签，分别为table、tr、td,他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释
1）table用于定义一个表格标签
2）tr标签 用于定义表格中的行，必须嵌套在table标签中。
3）td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4）字母td指表格数据（table data），即数据单元格的内容，现在我们明白，表格最适合的地方就是用来存储数据的。
总结
1）表格的主要目的是用来显示特殊数据的
2）一个完整的表格有表格标签(table）、行标签（tr）、单元格标签（td）组成，没有列的标签
3）<tr></tr>中只能嵌套<td></td>类的单元格
4）<td></td>标签，可以容纳所有的元素。
（2）表格属性
| 属性名 | 含义 | 常用属性值 |
| border | 设置表格的边框（默认border="0"无边框） | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值（默认为2像素） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认为1像素） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
（3）表头单元格标签th
作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
语法：
只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
（4）表格标题caption
定义和用法
<table>
<caption>我是表格标题</caption>
</table>
注：
1）caption元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2）caption标签必须紧随table标签之后
3)这个标签只存在表格里面才有意义
（5）合并单元格
1）合并单元格2种方式
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
2)合并单元格顺序
合并的顺序按照 先上 后下 先左 后右的顺序
3）合并单元格三步曲
先确定是跨行还是扩列合并
根据先上 后下 先左 后右的原则找到目标单元格 然后写上合并方式还有要合并的单元格数量 比如：<td colspan="3"></td>
删除多余的单元格
（6）总结表格
| 标签名 | 定义 | 说明 |
| <table></table> | 表格标签 | 一个四方的盒子
|
| <tr></tr> | 表格行标签 | 行标签要在table标签内部才有意义 |
| <td></td> | 单元格标签 | 单元格标签是个容器级元素，可以放任何东西 |
| <th></th> | 表头单元格标签 | 还是一个单元格，但里面 的文字会居中加粗 |
| <caption></caption> | 表格标题标签 | 表格的标题，跟着表格一起走，和表格居中对齐 |
| colspan和rowspan | 合并属性 | 用来合并单元格的 |
1)表格提供了HTML中定义表格式数据的方法
2）表格中由行中的单元格组成
3）表格中没有列元素，列的个数取决于行的单元格个数
4）表格不要纠结于外观，那是CSS的作用
（7）表格划分结构
对于比较复杂的表格，将表格分割成三部分：题头、正文和脚注。这三部分分别用：thead、tbody、tfoot来标注.
注：
1）<thead></thead>用于定义表格的头部，用来放标题之类的东西。<thead>内部必须拥有<tr>标签
2）<tbody></tbody>用于定义表格的主体，放数据本体。
3）<tfoot></tfoot>放表格的脚注之类
4）以上标签都是放到table标签中
10，列表标签
概念：
容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表
特点：
列表最大的特点就是整齐、整洁、有序，跟表格类似，但它可组合自由度会更高
列表用来布局，列表可以让页面布局整齐规范
10.1无序列表ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注：（1）<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的。
（2）<li></li>之间相当于一个容器，可以容纳所有元素。
（3）无序列表会带有自己样式属性
10.2有序列表ol
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
注：所有特性基本与ul一致，但实际中比无序列表用的少很多。
10.3自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
10.4列表总结
| 标签名 | 定义 | 说明 |
| <ul></ul> | 无序标签 | 里面只能包含li 没有顺序，我们以后布局中最常用的列表 |
| <ol></ol> | 有序标签 | 里面只能包含li 有顺序，使用情况较少 |
| <dl></dl> | 自定义列表 | 里面有2个兄弟，dt和dd |
11，表单标签
作用：
表单用来搜集用户信息
在网页中，我们需要跟用户进行交互，收集用户资料，此时也需要表单
在HTML中，一个完整的表单通常由表单控件（也称表单元素）、提示信息和表单域3部分构成。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：F:\develop\html\练习\案例\综合案例-体育页面\体育页面.html
F:\develop\html\练习\案例\综合案例-体育页面\综合案例演示.html
相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
11.1input控件
<input type="属性值" value="你好">
input 输入的意思
<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性
常用属性
| 属性 | 属性值 | 描述 |
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认文本值 |
| size | 正整数 | input控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
（1）type属性
这个属性通过改变值，可以决定你属于那种input表单。
比如 type="text" 就表示文本框可以做用户名，昵称等。
比如 type="password" 就表示密码框 用户输入的内容是不可见的。
用户名：<input type="text"/>
密码：<input type="password"/>
（2）value属性值
用户名：<input type="text" name="username" value="请输入用户名"/>
value默认的文本值，有些表单想刚打开页面就默认显示几个文字，就可以通过value来设置。
（3）name属性
用户名：<input type="text" name="username"/>
name表单的名字，这样后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是区别不同的表单。
name属性后面的值，是我们自己定义的。
radio如果是一组，我们必须给他们命名相同的名字name 这样就可以多个选其中一个了。
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
name属性，现在用的较少，当学习ajax和后台的时候是必须的。
（4）checked属性
表示默认选中状态，较常见于 单选按钮和复选按钮。
性别：
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
（5）input属性小结
| 属性 | 说明 | 作用 |
| type | 表单类型 | 用来指定不同的控件类型 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单 |
| checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
11.2label标签
目的：
label标签主要目的是为了提高用户体验，为用户提供最优秀的服务
概念：
label标签为input元素定义标注（标签）。
作用：
用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。
如何绑定元素呢?
（1）第一种用法就是用label直接包括input表单。
<label>用户名:<input type="radio" name="username" value="请输入用户名"> </label>
适合单个表单选择
（2）第二种用法 for属性规定label与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
当鼠标点击label标签里面的文字时，光标会定位到指定的表单里面
11.3textarea控件（文本域）
语法：
<textarea >
文本内容
</textarea>
注：cols="每行中的字符段" rows="显示的行数" 实际开发中不用，通过css进行调节。
作用：
通过textarea控件可以轻松地创建多行文本输入框。
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
| input type="text" | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
11.4select下拉列表
目的：
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
语法：
<select>
<option>选项1</option>
<option>选项1</option>
<option>选项1</option>
...
</select>
注意：
（1）<select></select>中至少应包含一对<option></option>
（2）在option中定义selected="selected"时，当前项即为默认选中项 。
12，form表单域
目的：
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，from中的所有内容都会被提交给服务器。
语法：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 同于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，取其值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
注：
每个表单都应该有自己表单域，我们现在做页面，不写看不到效果，但是后面学习ajax后台交互的时候，必须需要form表单域。
元素属性
元素属性值使用双引号语法
元素属性值可以写上的都写上
推荐
<input type="text"/>
<input type="radio" name="name" checked="checked" />
不推荐
<input type=text />
<input type='text' />
<input type="radio" name="name" checked/>
CSS笔记（2022.3.2）
1,css初识
概念：CSS（Cascading Style Sheets），通常称为CSS样式表或层叠样式表（级联样式表）
作用：
（1）主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
（2）CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
2，引入CSS样式表（书写位置）
2.1行内式（内联样式）
概念：
称行内样式、行间样式。
是通过标签的style属性来设置元素的样式
其基本语法格式如下：
<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3；">内容</标签名>
实际上任何HTML标签都拥有style属性，用来设置行内式。
案例：
<h1 style="color:green; font-size:18px;">满天繁星，总有我想成为的那道光</h1>
注：
(1)style其实就是标签的属性
(2)属性和值中间是:
(3)多组属性值之间用;隔开
(4)只能控制当前的标签和以及嵌套在其中的子标签，造成代码冗余
缺点：
没有实现样式和结构相分离
2.2内部样式表（内嵌样式表）
概念：
称内嵌式
是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义
其基本语法结构如下：
<head>
<style type="text/CSS>
选择器（选择的标签）{
属性1：属性值1；
属性2：属性值2；
属性2：属性值2；
}
</style>
</head>
注：
（1）style标签一般位于head标签中，当然理论上他可以放在HTML文档中的任何地方。
（2）type="text/css"在html5中可以省略
（3）只能控制当前的页面
缺点:
没有彻底分离
2.3外部样式表（外链式）（可以共享css）
概念：
称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
其基本语法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注：
（1）link是个单标签
（2）link标签需要放在head头部标签中，并且指定link标签的三个属性
| 属性 | 作用 |
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为"text/CSS",表示链接的外部文件为CSS样式表，我们都可以省略 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
2.4三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
代码风格
样式书写一般有两种：
一种是紧凑格式（Compact）
h3{color:deeppink;font-size:20px;}
一种是展开样式（推荐）
h3{
color:deeppink;
font-size:20px;
}
代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/*推荐*/
h3{
color:pink;
}
/*不推荐*/
H3{
COLOR:PINK;
}
3,总结CSS样式规则
使用HTML时，需要遵从一定的规范，CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则
总结：
（1）选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
（2）属性和属性值以“键值对”的形式出现。
（3）属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
（4）属性和属性值之间用英文“:”连接
（5）多个“键值对”之间用英文“;”进行区分
4，CSS选择器
4.1CSS选择器作用
找到特定的HTML页面元素
h3{
color:red;
}
4.2CSS基础选择器
（1）标签选择器
概念：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
作用：
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签和所有的span标签
优点：
是能快速为页面中同类型的标签统一样式
缺点：
不能涉及差异化样式
总结口诀：
标签选择器，
页面同选起。
直接写标签，
全部不放弃。
（2）类标签
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
语法：
类名选择器
.类名｛
属性1：属性值；
属性2：属性值2；
属性3：属性值3；
｝
标签
<p class='类名'></p>
优点：
可以为元素对象定义单独或相同的样式，可以选择一个或多个标签
注意
1）类选择器使用.（英文点号）进行标识，后面紧跟类名（类名自定义）
2）长名称或词组可以使用中横线来为选择器命名
3）不要纯数字、中文等命名，尽量使用英文字母来表示
（3）id选择器
id选择器使用#进行标识，后面紧跟id名
其基本语法格式如下：
id选择器
#id名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
标签
<p id="id名"></p>
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类别选择器相同
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class.
1)类选择器（class） 是可以多次重复使用的
2）id选择器 不得重复，只能使用一次
id选择器和类选择器最大的不同在于 使用次数上
类选择器我们在修改样式中，用的最多。
id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript搭配使用。
（5）通配符选择器
概念
通配符选择器用*号表示，*就是所有的 它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
其基本语法格式如下：
*｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
例如下面代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边框
*｛
margin:o; /*定义外边距*/
padding:0; /*定义内边距*/
｝
注：
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
（6）基础选择器总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p{color:red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red;} |
| id选择器 | 一次只能选择1个标签 | 只能用一次 | 不推荐使用 | #nav{color:red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | *{color:red;} |
注：
1）尽量少用通用选择器
2）尽量少用id选择器
3）不使用无语义定义的标签选择器div、span
5,CSS字体样式属性调试工具
5.1font字体
（1）font-size：大小
作用：
font-size属性用于设置字号
p{
font-size:20px;
}
单位：
可以使用相对长度单位，也可以使用绝对长度单位。
相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少
| 相对长度单位 | 说明 |
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用，推荐使用 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注：
我们文字大小以后，基本就用px了，其他单位很少使用
谷歌浏览器默认的文字大小为16px
但是不同浏览器可以默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小
5.2font-family：字体
作用：
font-family属性用于设置哪一种字体。
p{font-family:"微软雅黑"；}
网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
p{font-family:Arial,"Microsoft Yahei","微软雅黑";}
（1）各种字体之间必须使用英文状态下的逗号隔开。
（2）中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体之前。
（3）如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:"Times New Roman";
（4）尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
为什么使用Unicode字体
1）在CSS中设置字体名称，直接写中文是可以的，但是在文件编码（GB2312、UTF-8等）不匹配时会产生乱码的错误。
2）xp系统不支持 类似微软雅黑的中文。
解决：
方案一：你可以使用英文来替代。比如 font-family："Microsoft Yahei"。
方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误，使用Unicode写中文字体名称，浏览器是可以正确的解析的。
font-family:"\SFAE\8F6F\96CS\9ED1"; 表示设置字体为“微软雅黑”
| 字体名称 | 英文名称 | Unicode编码 |
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSUN | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \6977\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
5.3font-weight：字体粗细
在html中如何将字体加粗我们可以用标签来实现
使用b和strong标签是文本加粗
可以使用CSS来实现，但是CSS是没有语义的。
| 属性值 | 描述 |
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100-900 | 400等同于normal，而700等同于bold |
提倡：
用数字来表示加粗和不加粗
5.4font-style：字体风格
在html中如何将字体倾斜我们可以用标签来实现
字体倾斜除了用i和em标签
可以使用CSS来实现，但是CSS是没有语义的
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
| 属性 | 作用 |
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
5.5font:综合设置字体样式
font属性用于对字体样式进行综合设置
基本语法格式如下：
选择器{font:font-style font-weight font-size/line-height font-family;}
注：
1）使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
2）其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
5.6font总结
| 属性 | 表示 | 注意点 |
| font-size | 字号 | 我们通常用的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 我们直接复制就可以了，按照团队约定来 |
| font-weight | 字体粗细 | 加粗是700或者bold 不加粗 是normal或者400 |
| font-style | 字体样式 | 倾斜是italic 不倾斜是normal |
| font | 字体连写 | 1.字体连写是有顺序的 不能随意换位置2.其中字号和字体必须同时出现 |
6,CSS外观属性
| 属性 | 表示 | 注意点 |
| color | 颜色 | 我们通常用 十六进制 比如 #ffffff 而且简写形式#fff |
| line-height | 行高 | 控制行与行之间的距离 单位px |
| text-align | 水平对齐 | 可以设定文字水平的对齐方式 center right left |
| text-indent | 首行缩进 | 通常用于段落首行缩进2个字的距离 text-indent:2em;此时em表示单位 |
| text-decoration | 文本修饰 | 添加下划线 underline 取消下划线none |
7,快捷键
8，CSS复合选择器
8.1后代选择器
概念：
后代选择器又称为包含选择器
作用：
用来选择元素或者元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔
父级 子级｛属性：竖向值；属性：属性值｝
语法：
.class h3{color:red;font-size:16px;}
注：
当标签发生嵌套时，内层标签就成为外层选择器的后代
子孙后代都可以这么选择，或者说，它能选择任何包含在内的标签
8.2子元素选择器
作用：
子元素选择器只能选择作为某元素子元素（亲儿子）的元素
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接
语法：
.class>h3{color:red;font-size:14px;}
8.3交集选择器
h3.class{color:red;font-size:25px;}
条件
交集选择器由两个选择器构成，找到的标签必须满足：即有标签一的特点，也有标签二的特点
其中第一为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如
p.one 选择的是：类名：.one 的段落标签
8.4并集选择器
应用：如果某些选择器定义的样式完全相同，或者部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
并集选择器（CSS选择器分组）是各个选择器铜鼓，连接而成的
.class,h3{color:red;font-size:25px}
任何形式的选择器（包括标签选择器、class类选择器和id选择器等），都可以作为并集选择器的一部分。
记忆技巧：
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
比如 .one,p,#test{color:#F00;}
表示 .one和p和#test这三个选择器都会执行颜色为红色。
通常用于集体声明。
8.5链接伪类选择器
伪类选择器：
为了和类选择器相区别
类选择器是一个点 比如.demo{}
而伪类用两个点即冒号 比如：link{}
作用：
用于向某些选择器添加特殊的效果。如给链接添加特殊效果，比如可以选择第1个，第n个元素.
因为伪类选择器很多，比如链接伪类，结构伪类等等。
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注：
顺序尽量不要颠倒
因为叫链接伪类，所以都是-利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态 一般我们写法如下：
a{/*a是标签选择器 所有的链接*/
font-weight:700;
font-size:16px;
color:gray;
}
a:hover{ /*:hover是链接伪类选择器 鼠标经过*/
color：red; /*鼠标经过的时候，由原来的灰色变成了红色*/
｝
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格.nav a |
| 子元素选择器 | 选择最近一级的元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 用于集体声明 | 较多 | 符号是逗号 .nav,header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住a{}和a:hover 实际开发的 |
9,标签显示模式（display）
9.1什么是标签显示模式
什么是标签的显示模式？
标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个
作用：
我们网页的标签非常的多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。
标签的类型（分类）
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
9.2块级元素（block-level）
例：
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点
（1）比较霸道，自己独占一行
（2）高度、宽度、外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素
注：
只有文字才能组成段落 因此p里面不能放块级元素，特别是p不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
9.3行内元素（inline-level）
例：
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其<span>中最典型的行内元素，有的地方也称内联元素。
行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
注：
链接里面不能放链接
特殊情况a里面可以反复块级元素，但是给a转换一下块级模式最安全。
9.4行内块元素
例：
在行内元素中有几个特殊的标签<img/>,<input/>,<td>可以对它们设置宽高和对齐属性，有些资料会称它们为行内块元素
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个
（2）默认宽度就是它本身内容的宽度
（3）高度、行高、外边距以及内边距都可以控制
9.5三种模式区别元素模式
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不能设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
9.6标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;
10,行高
单行文本垂直居中
可以让单行文本在盒子中垂直居中对齐。
文字的行高等于盒子的高度。
行高和高度的三种关系
如果行高等高度 文字会垂直居中
如果行高大于高度 文字会偏下
如果行高小于高度 文字会偏上
11，CSS背景(background)
11.1背景颜色(color)
11.2背景图片(image)
11.3背景平铺(repeat)
11.4背景位置(position)
语法：
background-position:length || length
background-position:position || position
| 参数 | 值 |
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
注：
1）必须先指定background-image属性
2）position后面是x坐标和y坐标,可以使用方位名词或者精确单位。
3）如果只指定了一个方位名词，另一个值默认是y坐标，默认居中
4）如果指定两个值，两个值都是方位名字，则两个值的前后顺序无关，比如left,top和top，left效果一致
5）如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
11.5背景附着（attachment）
背景附着就是解释背景是滚动的还是固定的
语法：
background-attachment:scroll | ficed
| 参数 | 作用 |
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
11.6背景简写
background:属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 北京位置
语法：
background:transparent url(image.jpg) repeat-y scroll center top;
11.7背景透明
语法：
background:rgba(0,0,0,0.3);
最后一个参数是alpha透明度 取值范围0-1之间
我们习惯把0.3的0省略掉 这样写background:rgba(0,0,0,0.3)
注：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
因为是CSS3，所以低于ie9的版本是不支持的。
11.8背景总结
| 属性 | 作用 | 值 |
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 背景平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x和y坐标，切记如果有精确数值单位，则必须按照先x后y的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed其中scroll为默认状态滚动，fixed为固定 |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 它们没有顺序 |
| 背景透明 | 让盒子半透明 | background:rgba(0,0,0,0.3);后面必须是4个值 |
12，CSS三大特性
12.1CSS层叠性
概念：
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同的选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：
样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行那个样式
样式不冲突，不会层叠。
color属性第二个div，但是第一个div的font-size仍会执行
12.2CSS继承性
概念：
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。
注：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了
子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）
12.3CSS优先级
概念：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时
选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题
（1）权重计算公式
| 标签选择器 | 计算权重公式 |
| 继承或者* | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式style="" | 1,0,0,0 |
| 每个！important 重要的 | ∞ 无穷大 |
specificity用一个四位的数，更像四个级别
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越
关于CSS权重，我们需要一套计算公式来去计算，这个就是CSS Specificity(特殊性）
（2）权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算
div ul li——>0，0，0，3
.nav ul li——>0,0,1,2
a:hover——>0,0,1,1
.nav a——>0,0,1,1
注：
1）数位之间没有进制 比如说0，0，0，5+0，0，0，5+0，0，0，10而不是0，0，1，0，所以不会存在10个div能赶上一个类选择器的情况。
（3）继承的 权重是0
这个不难，但是忽略很容易绕晕。其实我们修改样式，一定要看该标签有没有被选中
1）如果选中，那么以上面的公式来计算权重，谁大听谁的
2）如果没有选中，那么权重是0，因此继承的权重为
注：
2个特殊标签链接和h标题 他们浏览器有自己默认的样式，继承的权重为0，所以，我们还是要单独给链接和标题一个样式
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
