文章目录
HTML(Hyper Text Markup Language)
超文本标记语言
“超文本”指页面可以包含图片，链接，音乐，程序等非文本元素。
标签
表格标签
< table>：表格容器
属性：
border：表格边框的宽度。
width：表格的宽度。
cellpadding：单元格边与内容之间的空白。
cellspacing：单元格之间的空白。
< tr>：定义行
< td>：定义单元格
属性：
colspan：单元格可以横跨的列数。
rowspan:单元格可以横跨的行数。
align：单元格内容水平对齐的方式。
nowrap:单元格中的内容是否折行。
< th>:定义表头
超链接标签
< a>：超链接标签
图片标签
< img />：图片标签
属性：
src：url。
alt：图片无法显示时的替代文本。
框架标签
< frame>：
用于设置 < framset>框架集中的一个页面（框架）。
属性：
src:url。
noresize：框架分隔先不能移动。
target：确定需要显示的页面在何处显示。
< frameset>：
框架集，由多个单独< frame>组成。
注意:
- < framset>和< body>不能共存
- < framset> 可以嵌套使用。
排版标签
< hn>：标题标签
< p>：段落标签
< br />：插入单个换行
< hr />：水平分割线
< b>：粗体
< i>：斜体
列表标签
< ul>：无序列表
属性type：取值A，a，I，i，1等
< li>：定义列表项
< ol>：有序列表
属性type：desc实心圆，square方块，circle空心圆
表单
表单标签< form>
< form>表单标签，在浏览器上没有任何显示。
如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内容。
属性：
action：表单提交到服务器路径
method：请求方式。
get:默认值，提交数据追加在路径上。
post:
输入域标签< input>
属性：
name：服务器通过属性值获得提交的数据。
value:input标签默认值
size：大小
checked：单选框或者复选框被选中
readonly：是否只读
disabled：是否可用
maxlength：允许输入最大长度
type：
text：文本框，默认宽度20字符
password：密码框
radio：单选框
submit：提交按钮
checkbox：复选框
file：文件上传组件
hidden：隐藏字段，数据会发送服务器，但浏览器不显示
reset：重置按钮，将表单恢复到默认值
image：图形提交按钮
button：普通按钮
下拉列表标签：< select>
< select>:可进行单选或者多选。需要使用子标签< option>指定列表项
属性：
name:发送给服务器的名称
multiple：不写默认单选，取值为multiple表示多选。
size：多选时，可选择数
< option>子标签：下拉列表中的一个选项。
selected：勾选当前列表项
value：发送给服务器的选项值。
文本域标签：< textarea>
多行文本输入控件。
CSS
CSS（Cascading Style Sheets)：层叠样式表
具体格式：
选择器{
属性1:属性值；
属性2：属性值；
...
}
注意：
- 选择器区分大小写，属性和属性值不区分大小写。
- 如果属性值由包含空格的多个单词组成，则为其加上引号
- 在css代码中空格不被解析
引入css样式
1）行内样式
通过标签的style属性来设置元素样式
2）内部样式
对其所在的HTML页面有效，可以对多处标签统一设置样式。
3）外部样式
可以被多个页面使用
<!--方式三：外部样式
rel="stylesheet",固定值，表示样式表
type="text/css",固定值，表示css类型
href,css文件位置
font_family ，使用字体，多个字体使用逗号分隔
-->
<link rel="stylesheet" type="text/css" href="css/xxx.css" />
选择器
用于找到要使用css样式的目标元素
1）元素选择器
为页面中同类型标签统一样式
具体格式：
标签名{
属性1:属性值；
属性2：属性值；
...
}
2）ID选择器
id名为html元素的id属性值
具体格式：
#id名{
属性1:属性值；
属性2：属性值；
...
}
3）类选择器
类名为html元素的class属性值
具体格式：
.类名{
属性1:属性值；
属性2：属性值；
...
}
可以为元素对象定义单独或者相同的样式。
高级用法：给指定标签设定class样式
具体格式：
标签.类名{
属性1:属性值；
属性2：属性值；
...
}
4）属性选择器
元素选择器的扩展，对标签进一步过滤。
标签名[标签属性='标签属性值']{
属性1:属性值；
属性2：属性值；
...
}
5）包含选择器
给指定父标签的后代标签设置样式
父标签 后代标签{
属性1:属性值；
属性2：属性值；
...
}
css样式
- border：设置边框的样式
- width，heigth：宽高
布局float
默认排版方式：将页面中的元素从上到下排列
实际开发中，需要左右方式进行排版，就需要使用浮动
选择器{float:value；}
常用属性值：
left：左浮动
right：右浮动
none：不浮动（默认值）
由于浮动元素不在占用原来该占有的位置，所有会对其它元素排版产生影响。为了避免影响，可以使用clear来清除浮动。
选择器{clear:value；}
常用属性值：
left：清除左边浮动影响
right：清除右边浮动影响
both:同时清除左右浮动影响
display块元素与行内元素转换
- 块元素
每个块元素独占一行或多行，如div，hn，ul等 - 行内元素
不独占也不强迫其它元素独占一行如a，span等
转换：
选择器{display：属性值}
常用属性值：
inline：行内元素（行内元素默认的display属性值）
block：块元素（块元素默认的display属性值）
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。
none：隐藏元素，不显示，也不占用页面空间。
盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
