HTML(静态页面，超文本标记语言)
HTML运行在浏览器上，由浏览器来解析(后缀名.html和.htm两种都可以)。
围堵标签：由开始标签和结束标签组成，例如：<html></html>
自闭合标签：开始标签和结束标签都在同一个标签中，例如：<br/>
标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性之间用空格隔开。
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
HTML标签不区分大小写，一般推荐全小写。
head头元素：
1、用于指定HTML文章中的一些元数据
meta：定义页面的编码格式 title：定义页面的标题
2、引入外部的资源文件
body身体元素：浏览器显示的内容都在这里编写
<h1~h6>标题标签</h1~h6> <p>段落标签</p> <strong>加粗标签</strong>
<em>倾斜标签</em> <span>范围标签</span> <!-- 注释内容 -->注释标签
<br/>换行标签 <hr/>水平线标签
转义字符：(小于号)<； (大于号) >； (空格)  ； (版权符号)©；
img图片标签
属性src：指定图片的路径
属性title：鼠标悬浮在图片上的时候显示的文字
属性width和height：宽和高，设置之后图片可能会失真(使用%或px均可)
相对路径(推荐)：<img src="img/cat.jpg" />表示与当前文件同级的img文件夹下的cat.jpg图片；前面加上../则表示在上级目录的img文件夹下的cat.jpg图片。
绝对路径(不推荐)：一般都是以盘符开头 C:\User\image
设置图片的热点区域
<img src="img/cat.jpg" usemap="#地图名称" />
<map name="自定义名称">
<area shape="circle-圆形/rect-矩形/poly-多边形"
coords="坐标"(多个值之间使用逗号隔开)
href="跳转到目标url的位置" title="悬浮文字" />
</map>
font文字标签(size的范围是1~7)
<font color="颜色单词/颜色值" size="文字大小"></font>
列表标签(ul-li、ol-li)
无序列表：<ul type="square小方块/circle空心圆/disc实心圆"><li>内容1</li><li>内容2</li>..</ul>
有序列表：<ol type="1/a/A/i/I" ><li>内容</li>..</ol>
自定义列表标签(常用于图文混编)
<dl>
<dt>存放标题或图片</dt>
<dd>对dt标签进行补充说明</dd>
</dl>
dt(靠前)、dd(靠后)的个数是不限定的，且没有列表符号
行级元素：一般只能容纳文本或者其他行内元素，例如：span、img、a
块状元素：一般都是新起一行，可以容纳行内元素和其他块状元素
超链接标签：1.用来实现页面间的跳转 2.实现锚链接的功能
<a href="URL地址/#表示刷新当前页面" target="用来设置目标页面的打开方式(_self在当前页打开/_blank在新页面打开)" >被点击的文字或图片</a>
锚链接：当滑动页面长度超过一屏的时候，使网页跳转到指定的位置。
<a href="#sport" target="_self" >
<div style="height：700px；background：lightblue；"></div>
<div><a name="#sport">定义锚点</div>
</a>
iframe框架标签：可以在同一个浏览器窗口中显示不止一个页面。
<iframe name="自定义名称" src="默认链接的页面" width="宽度" height="高度" frameborder去除边框="0" ></iframe>
<frameset框架集 rows="25%，*">与body标签不共存(了解即可)
<frame src="">
<frameset cols="50%，*">
<frame src="">
<frame src=""></frameset>
<noframe>你的浏览器不支持框架集</noframe></frameset>
H5中的新标签：
<audio音频 controls="控制面板" loop="重复播放" autoplay="自动播放">
<source资源 src="音频地址"></source>
</audio>
<video视频 controls="controls" height="" width="">
<source src="视频地址" type=""></source>
</video>
注意：查看效果的浏览器一定要支持H5的代码。
表单：用于采集用户输入的数据，用于和服务器进行交互。
<form action="地址" method="提交方式" enctype="multipart/form-data">
form代表采集用户数据的范围；method指定提交的方式，一共7种，以下两种比较常用：get请求参数会在地址栏中显示，会封装到请求行中，请求参数的大小是有限制的，不太安全；post请求参数不会在地址栏中显示，会封装到请求体中，请求参数的大小没有限制，较为安全；enctype表单中有上传文件的时候必备该属性，且取值为multipart/form-data。
表单元素中的共有属性(个别例外)
id：元素的唯一表示(不重复) type：表示表单项元素的呈现形式 class：表示样式名称
name：表单项元素的名称(很重要)，提交数据到服务器之后，服务器获取数据通过该名称
value：表单项元素的值，服务器通过name获取到的数据就是value
readonly：表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改，而且背景是灰色
<form>
<label for="对应id设置的值">用户名</label>：用于光标定位。
<input type="text文本框" id="" name="" placeholder="提供一种提示" />
<input type="password密码框" id="" name="" required不能为空 />
<input type="radio单选" name="" value="" checked默认值 />
<input type="checkbox复选" name="" value="" />
<input type="file文件域" name="" multiple可同时上传多个文件 />
<input type="hidden隐藏域" name="" value="" />
<select name="">下拉列表框
<option value="1">1</option>
<option value="2" selected默认值>2</option></select>
<textarea文本域 rows="指定行数" cols="指定列数" readonly="readonly只读不改"
disabled="disabled禁用"> 协议说明：xxxxx </textarea>
</form>
submit提交按钮、reset重置按钮、button普通按钮、image图片按钮(限input标签)
表格：实现页面布局。
设置表格内容的水平位置：align="left/center/right"
设置表格内容的垂直位置：valign="top/middle/bottom"
<table常用属性：height高度/width宽度/border边框/cellpadding内容与边线的距离/cellspacing单元格与单元格之间的距离>
<tr>定义行<th>一般用来定义表头单元格</th></tr>
<tr><td>定义列</td></tr></table>
th和td中常用的属性：rowspan合并行/colspan合并列
当表单和表格同时存在时：<form><table>...</table></form>
<table><caption>表格的标题</caption>
逻辑分区标签：
<thead>表头tr-th</thead>
<tbody>表体tr-td</tbody>
<tfoot>表末tr-td</tfoot></table>
<div>布局标签层</div> 开发模式：CSS+div
常用的布局组合标签
div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd：常用于图文混编布局
div-form：常用于表单布局
div-table：常用于局部规则数据展示布局
CSS层叠样式表(美化页面)
多个样式可以作用在同一个html的元素上(同时生效)
CSS语法：选择器{ 样式名：样式值；样式名：样式值；... }
样式名和样式值之间用冒号分割，不同的样式之间用分号隔开。
根据定义CSS的位置不同分为行内样式、内部样式和外部样式。
行内样式：通过使用标签内部的style属性，直接在标签中编写样式。
弊端：只能对当前的标签生效，没有做到内容和样式相分离。
内部样式：通过style标签定义在head标签内，该标签内容就是CSS代码(只对当前页面生效)。
<head><style type="text/css"> 选择器{ ... } </style></head>
外部样式：在head标签内定义link标签引入外部样式文件，link.css文件放在与html页面同级的css文件夹中。
<head><link type="text/css" rel="stylesheet" href="文件路径" /></head>
（面试）
作用域的范围：外部样式表 > 内部样式表 > 行内样式表
优先级：外部样式表 < 内部样式表 < 行内样式表
同样的样式作用在同一个标签身上：就近原则
不同的样式作用在同一个标签身上：叠加生效
CSS的注释以 /* 开始, 以 */ 结束
标签选择器
标签名{ css }
例如：h1{ color：red；}
注意：标签名称必须是html提供好的标签。
类选择器(可重复使用)
先定义：.自定义类名{ css }
后引用：标签中添加class属性
<标签名 class="自定义类名">内容</标签名>
注意：类名的第一个字符不能使用数字。
id选择器(不推荐重复使用)
先定义：#标签的id名{ css }
后引用：<标签名id="自定义的id名">内容</标签名>
注意：id属性不要以数字开头。
选择器的优先级：id选择器 > 类选择器 > 标签选择器
全局选择器：*{ }一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用(不推荐)。
并集选择器：选择器1，选择器2，...选择器N{ }通常用于集体声明。
交集选择器：第一个为标签选择器，第二个为类选择器h1.abc{ color:red; }
后代选择器：父选择器 子选择器{属性1：属性值；属性2：属性值}当标签发生嵌套时，内层标签就成为外层标签的后代。
伪类选择器：选择器:伪类名{ css }针对鼠标的某些时间点做的样式。
a:link /*未访问的链接，点击前*/
a:visited /*已访问的链接，点击后*/
a:hover /*鼠标悬停*/ (常用)
a:active /*鼠标按下*/
CSS常用样式
color：字体颜色 rgb(红，绿，蓝)三原色的取值范围：0-255，0-255，0-255；
rgba(红，绿，蓝，透明度)透明度取值：~0全透明/1不透明/0.5半透明；
#值1值2值3：值的范式为00-FF，由十六进制的数字组成，例如#FF0000；
width height：宽和高(只有块状元素可以设置宽高，行级元素设置不生效)
背景样式
background-color：red；
background-image：url(图片位置)；
background-repeat平铺：(no)-repeat-(x/y/xy)；
background-position位置：20px 20px；
文字样式
font-family："微软雅黑"；
font-size：18px；
font-weight：bold(加粗)；
font-style：italic(倾斜)；
文本样式
text-decoration(划线位置)：overline/line-through/underline/none；
text-align：left/center/right；
vertical-align(同一行内对图片描述文字的位置)：top/middle/bottom；
text-indent(首行缩进)：单位em(字符，建议使用)或px；
line-height：50px(设置行高后，文字默认垂直居中)；
letter-spacing(字体间距)：20px；
列表样式
list-style-type：square/circle/decimal/none；
list-style-image：url()；
list-style-position：outside；
list-style：square url() inside；
鼠标样式
cursor：wait/help/pinter...
border(边框)-width/color/style(solid实线、dotted点线、dashed虚线)
border(四个方向分别设置)-top/bottom/left/right：dashed black 2px；
border：none(无边框)；
border：solid 1px #ccc；
盒子模型：Margin(外边距)、Border(边框)、Padding(内边距)、Content(内容)
margin：0上下 auto左右(自动)；
如果想要设置的宽度是元素的实际宽度，可通过box-sizing属性。
box-sizing：content-box/border-box；
CSS的Float(浮动)会使元素向左或向右移动，其周围的元素也会重新排列。
clear清除浮动：both；
overflow属性控制内容溢出元素框时显示的方式：visible默认值/hidden内容会被修剪(不可见)/scroll内容被修剪(浏览器显示滚动条以便查看)/auto如果内容被修剪，则浏览器会显示滚动条/inherit从父类继承overflow的值。
注意：overflow 属性只工作于指定高度的块状元素上。
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"，但是请注意这两种方法会产生不同的结果。
将visibility属性设置为hidden后，但隐藏的元素仍需占用与未隐藏之前一样的空间；也就是说该元素虽然被隐藏了，但仍然会影响布局。
将display属性设置为none后，隐藏的元素不会占用任何空间；也就是说该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display：inline-block 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
