HTML知识综合
HTML相关概念：
超文本是超级文本的简称，简单来说超文本就是用于链接到另一个文本或多媒体内容的文本。
h1 标签的作用：负责给内部文字添加一级标题的语义，不负责样式，样式由css负责
HTML4.0：w3c推荐标准
HTML标签语法：
1.标签名必须写在一对尖括号p标签内部
2.标签分为单标签和双标签，双标签必须成对出现
3.双标签有开始和结束标签，关闭符号/,单标签也需要自封闭书写。HTML5中可以不写。如单标签br 双标签p
title标签的作用：
1.让页面拥有一个属于自己的标题
2.title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
3.内部内容会显示在搜索结果的标题部分、
4.作为浏览器收藏夹默认的网页标题。
部分标签的意义：
Ctrl+/:添加注释
p段落标签
br 换行标签：强制性换行(单标签)
b标签：定义粗体文本
i标签:定义斜体字
u标签：定义下划线（不赞成使用，可用css样式代替）
HTML标签
img标签:
该标签中必须设置src属性
<img src=""/>
src: 属性值是图片查找路径
路径：分为绝对路径和相对路径
上级查找：../表示跳出一级，如果跳出多级则多写几次../
title: 提示文本，设置的是鼠标悬停时的提示文本
属性值： 自定义的提示文字内容。
alt: 替换文本,当图片查找错误时则出现自己自定义的文本提高用户体验，如果正常找到则不显示替换文本内容。
音频与视频标签：
audio :音频标签，双标签，需要src属性设置音频查找路径，支持格式为mp3/ogg/wav
音频 控制条属性：音频加载后不会显示播放器的控制条，需要用此属性进行设置，属性值为controls
<audio src="" controls="controls"></audio>
video标签: 和音频标签类似，支持格式：mp4,ogg,webm
如图所示：
a标签:
内容通常为文本或者文字。
作用：在指定位置添加超级链接，提供用户进行点击和跳转。
<a href="引用的目标地址">页面所点击的内容</a>
a标签的target属性：可以定义被链接的文档在何处跳转显示
target的两种属性值：
_serf:默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口
_blank:空白的，表示跳转的页面在新窗口打开 如：
<a href="" target="_blank">被点击的内容</a>
title 属性：与img标签的title标签类似，属性值为自定义文字内容，目的：用于给用户进行提示，该链接的功能，提高用户体验
同页面锚点跳转：
第一步：设置锚点：设置跳转目标位置的两种设置方式
1.在目标位置找到任意一个标签，给他添加ID属性，id的属性值必须是唯一的。id属性自定义规则：必须以字母开头，后面可以有字母，数字，下划线和横线，区分大小写。
<h2 id="mubiao">目标位置</h2>
2.在目标位置添加一个空的a标签,只设置一个name属性，name属性值设置方式与id相同，必须是唯一的。
<a name="mubiao"></a>
第二步操作：添加链接
连接到锚点，在需要点击的位置设置a标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值
<a href="#mubiao">点击文本</a>
跨页面锚点跳转：
第一步：同上
第二步：链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id
<a href="需要跳转页面地址#mubiao"></a>
列表标签：
无序列表标签:
两个标签参与分别为:ul标签和li标签
ul:表示定义一个无序列表的大结构
li:列表项，定义的是无序列表内的某一项
ul和li>是嵌套关系，快捷键为:ul>li.其中一个列表可以有任意个列表项
如：
#### 有序列表标签：
有序列表由两个标签组成，分别为ol和li标签
ol:表示定义一个有序列表的大结构。
li:定义的是有序列表的每一项。ol和li是嵌套关系，快捷键:ol>li。ol标签内部可以嵌套任意多个li标签。
定义列标签：
项目及其注释的组合，由三个标签组成：dl,dt,dd
dl:表示定义一个自定义列表的大结构
dt:表示定义自定义列表中的一个主题或者术语。
dd:表示定义解释项，表示描述或者解释前面的定义主题。
dl内部只能嵌套dt和dd,且后两个标签是同级关系。快捷键：dl>dt+dd. （每个dd都解释的是距离最近的dt）
####布局标签： div:双标签，是经典容器级标签，内部可以放置任意内容。（大盒子） 作用：多用于划分网页区域，进行结构布局。 span:双标签，容器级标签。（小盒子）
表格
表格制作：
创建一个简单的表格至少有三个标签组成：table标签,tr标签,td标签
table:表格，定义的是整个表格大结构。
tr:表格的行，定义的是表格由多少行组成。
td:表格数据，也叫表格单元格，定义的是每一行内部的单元格。
三者关系：table>tr>td
table属性：
table标签可以添加border边框属性。
属性值：数字，表示像素值。
表格单元格之间有默认的间隙，会导致双线边框。解决办法：设置标签样式属性style.
属性值为：border-collapse:collapse;表示边框塌陷。
<table border="" style="border-collapse:collapse;"/>
表头单元格：使用标签th，在表格中绘制的时候替换的是td的位置,但它自带默认css样式效果，文字显示粗体居中。
合并单元格：
rowspan:跨行合并。上下的合并。
colspan:跨列合并。左右的合并。
属性值：数字，数字几表示跨几行或者跨几列合并。
小技巧：
1.先列出所有行，以最小单元格为标准。
2.再添加每一行的td或者th单元格。
3.划分单元格所在行时，顶边对齐属于同一行。
4.将所有行和列写完后，再查看哪个单元格有跨行或者跨列，属性值的个数要参考最小单元格。
表格分区：
一个完整的表格分为四个大的区域：表格标题，表头部分，表格主题，表格页脚。
四个分区标签：
caption:表格的标题，内部书写标题文字。
thead:表格的头部，内部嵌套tr>th.
tbody:表格的主体。内部嵌套tr>td.
tfoot:表格的页脚。内部嵌套tr>td.
四个分区可以选择性的进行组合。
注意：不论书写顺序如何颠倒，浏览器中加载顺序都是自动按照caption,thead,tbody,tfoot执行的。示例：
表单：
表单的了解与制作：
表单：用来收集用户输入信息。
表单的组成：表单域，提示信息，表单控件（表单元素）如图：
表单域：相当于一个容器，用来容纳所有的表单控件与提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义则表单中的数据无法传送到后台服务器。
提示信息：表单中说明性文字进行提示。
表单控件：各种控件如单行文本输入框等等。
表单域标签：
form标签：双标签，容器级，功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个form标签之内。
标签属性：通过对应属性规定提交数据的方法和提交的位置。
表单元素：
input标签：单标签，通过标签属性实现各种功能。
text:单行文本框，定义提供用户输入的单行文本的输入框，不能输入多行文字。常用value属性定义默认的输入文字（input的type属性值为text）。
password:密码输入框，定义提供用户输入的密码框。passdword字段中的字符会被做掩码处理显示为星号或者实心圆。（同上）
<input type="text" value=""/>
<input type="password"/>
示例：
radio:单选框,定义提供用户点击选择的单选框。一般成组出现，多个单选框组成一组选择的情况。同一组单选框之间必须是互斥关系，通过同一组单选框都设置相同的name属性值实现。
<input type="radio" name=""/> 选择信息
复选框:checkbox,定义提供用户点击选择的多选框，允许用户在有限数量的选项中选择零个或多个选项。
<input type="checkbox" name=""/> 选择信息
单选框和复选框都可以提前设置默认选中项。input标签有checked属性，如果不设置表示默认没有选中，属性值设置为"checked"表示该项默认被选中。
button:普通按钮，没有任何特殊功能
reset：重置按钮，将同一个form标签中填写的表单内容清空，恢复成默认
submit：提交按钮，将填写数据提交form标签中指定的后台服务器，并且重置清空form标签中填写的信息、
file:文件上传，定义文件上传按钮，可以提供用户选择本地文件进行上传服务器
multiple属性:可以决定是否可以选择多个文件。
<input type="button" value=" 普通按钮"/ >
<input type="reset" value=" 重置按钮"/>
<input type="submit" value=" 提交按钮"/>
<input type="image" src=""/>
<input type="file" multiple="multiple"/>
文本域标签:
textarea标签:双标签，制作可以输入多行文本的区域。且可以设置默认输入文字，在双标签之间书写默认文字。
两个标签属性：
rows:行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数则会被隐藏并且出现滚动条.
cols:列，属性值是数字，数字是几，表示在出现滚动条之后每一行显示的最大字节数（一个汉字两个字节）
textarea rows="数字" cols="数字">文字提示 </textarea>
下拉菜单:
select标签:选择，双标签，文本级标签，表示定义下拉菜单整体结构。
option标签:选项，双标签，文本级标签，表示定义下拉菜单的每一项。
关系：select>option,option可以有任意多项。
默认选中项：默认情况下选中的是第一项，也可以在option标签中添加selected属性,属性值为selected，更改默认选中项。
option标签:分组。
英雄选择：
<select>
<optgroup label="法师">
<option >周瑜</option>
<option >小乔</option>
<option selected="selected" >米莱迪</option>
</optgroup>
<optgroup label="射手">
<option >百里守约</option>
<option >李元芳</option>
<option >马可波罗</option>
</optgroup>
</select>
label标签：
作用：帮助表单元素定义标注。
绑定方法一：
1.给表单元素设置id属性
2.然后将需要绑定的内容用该标签包裹
3.给label标签设置for属性，属性值为绑定的表单元素的id属性值。
```
<input type="checkbox" name="hobby" id="sport"/><label for="sport">运动</label>
```
绑定方法二：
如果绑定内容和表单元素写在一起可以化简绑定写法，直接使用label标签将绑定内容与表单元素一起进行嵌套、
<label><input type="radio" name="sex"/>男<\label>\
html字符实体：
可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。（查询w3cschool手册，查看所有字符实体 HTML ISO-8859-1）
常用字符：< < > > 空格
CSS的相关知识
css概念：
css:层叠样式表，用来表现HTML的文件样式的计算机语言。
作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。
css的组成：
层叠式：css中贯穿始终的加载特性，有层叠性和继承性。
样式：如何定义显示HTML元素、
css内联式样式表：
css规则：由选择器以及一条和多条声明构成。
css四种书写方式：内联式，内嵌式，外联式，导入式。
内联式：也叫做行内式，在HTML标签之上的style属性中书写css样式，所有的css样式属性总体组成标签的style属性的属性值。（在标签里面以style的方式完成css样式编写）
缺点：必须写在标签上没有完全脱离html，标签结构重复，不利于HTML结构解读，一个内联式只能给一个标签使用，不方便于多个标签。
**内嵌式：**在head标签内部有一个style标签，并且该标签位于title之后，css代码则放入style之中，style标签有一个标签属性:type，属性值：text/css
缺点：结构和样式没有完全分离，代码在html的style内部，css样式只能给一个HTML文件使用，不能被多个HTML同时使用。
外联式：在一个单独的扩展名为.css的文件，内部代码与内嵌式样式表中一样，需要通过选择器去选中标签，添加对应样式。（不需要添加style标签），在HTML中引用需要用到link标签
<link rel="stylesheet" href="路径">
导入式：在内嵌式样式表style标签内部，或者外联式样式表内部导入其他的外部.css文件，导入方式为：@import url(路径)
css样式注意事项：
1.分号必要性：每条属性后面的分号必须写。
2.Css中所有属性与属性之间对空格，换行，缩进不敏感。
css注释：/css注释/ ctrl+/
css常用样式
颜色属性color：
属性名：color，属性值：颜色名（颜色的英语单词）或者颜色值（rgb或者十六进制）
rgb模式：根据红绿蓝原色进行混合而成，取值范围0-255，书写方法：rgb（红，绿。蓝）
常用颜色rgb色值和16进制:
红色：rgb(255,0,0) #ff0000 #f00
绿色：rgb(0,255,0) #00ff00 #0f0
蓝色：rgb(0,0,255) #0000ff #00f
黑色：rgb(0,0,0); #000000 #000
白色：rgb(255,255,255) #ffffff #fff
灰色：rgb(128,128,128) #808080 无
字体font-family:
属性名:font-family 属性值：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔
常用中文字体： 宋体 SimSun 微软雅黑 Microsoft Yahei
常用英文字体： Arial consolas
注意事项：
1.顺序性，若浏览器不支持第一个设置的字体，则会继续往后面找，直到找到第一个支持的字体
2.必须设置一个通用字体作为后路
3.建议将英文字体写在属性值最前面。
字号font-size：
作用:设置文字大小。
属性名：font-size
属性值：可用相对长度单位，也可以使用绝对长度单位，推荐使用相对长度单位。
盒子实体化三属性:
width px单位数值 定义元素占有的宽度
height 同上
background-color 颜色名或颜色值 定义元素的背景颜色
css标签选择器：
基础选择器：标签选择器，id选择器，类选择器，通配符选择器
高级选择器：后代选择器，交集选择器，并集选择器
标签选择器：通过标签名选择标签元素。
书写方式：标签名。
选择范围：选中的是HTML文件中所有的同名标签。
注意：标签选择器可以选择所有的同名标签，会忽视HTML元素的嵌套关系，不管嵌套多深，都能被选中。
缺点：不能对局部的标签添加特殊样式。
css id选择器：
通过标签的id属性选择标签
书写方式：#id属性值。
选择范围：只能选择一个标签。
id命名规则：必须以字母开头，后面可以有字母，数字，下划线，横线，严格区分大小写，并且每个id属性值必须是唯一的，不能与其他id同名。
缺点：只能实现单选，不能完成多选。
css类选择器：
通过标签的class属性去选择标签。
书写方式：.class属性值。
选择范围：是页面中所有的class属性值相同的标签。
命名规则：必须以字母开头，后面可以有字母，数字，下划线，横线，严格区分大小写。class属性值可用与其他的class相同。
特点1：不同类型的标签只要属性值相同都可以被同一个类选择器选中。
特点2：一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。
通配符选择器：
通过一个特殊符号选择页面内所有的标签。
书写方式：*
选择范围：包含<html>标签在内的所有标签。
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
css后代选择器：
通过标签之间的嵌套关系去选择元素，基本组成部分就是基础选择器。（包含选择器）
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
选择范围：通过后代选择器中前面一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
css交集选择器：
通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必粗书写在开头。
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
css并集选择器：
将两个选择器写一起，用逗号分隔。
层叠式：
继承性：如果一个标签没有设置过一些样式，但是它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
层叠性：
选种目标标签：
第一步：比较多个选择器的权重，权重高的层叠权重低。
基础选择器的权重：根据选择范围，范围越大权重越小，*<标签选择器<类选择器<id选择器
高级选择器的权重：依次比较组成高级选择器的id的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。比较顺序（id个数，类的个数，标签的个数），如果权重都相同则比较css代码的书写顺序，后面的会层叠掉前面的。：
选中目标标签的祖先级：
如果选择器选中的是祖先级元素，文字旳样式可以被继承
第一步：比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的远近，近的层叠远的。
第二步：如果选中的祖先级距离目标一样近1（同一个祖先），比较选择器权重，权重大的层叠小。
第三步：如果距离相同，权重也相同，则比较css书写顺序，后面的层叠前面的。
！important关键字：
如果在比较选择器权重的过程中，遇见一个！important关键字可以将某条css样式属性的权重提升到最大。
书写位置：在某个css属性的属性值后面空格加!important。
注意：
1.就近原则中，不需要比较选择器权重，所有important会失效。
2.important不能提升选择器的权重，只能提升某条属性的权重到最大。
行内式权重： 行内式样式与内嵌式或外联式样式比较权重时，行内式的权重最高但是与!important关键字相比权重要低。
