第一部分 HTML（超文本标记语言）

一、 基本概念

1. 文档声明与字符编码

！DOCTYPE html5 相当于交互协议

utf-8 万国语言

2. 语义

通过标签使程序员输入的语言具有了被计算机识别HTML特征。

3. 元素、标签、属性

1. 元素
• 页面中可见的任何东西均可成为元素。
2. 标签
• 赋予了特殊特征的一些字符。
• 有双标签也有单标签
• 有些标签可以作为容器，有的只能作为文本。
3. 属型
• 说明或者补充说明标签具有的特性。
• 格式：属性名="属性值"。

4. 常用标签及其属性

属性：双标签的属性写在开始标签中。

1. 标题标签
• h标签，是双标签
• h1到h6共6个级别
2. 段落标签
• p标签，是双标签
3. 换行标签
• br标签，是单标签
4. 分割线标签
• hr标签，是单标签
5. 列表标签
• 有序列表
• ol标识
• 属性：type只有5种；阿拉伯数字、罗马数字大小写、英文字母大小写
• 无序列表
• ul标识
• 属性：type=disc、circle、square、none
• 自定义列表
• dl(definition list)定义列表标识
• dd(definition title)定义列表标题标识-图片
• dd(definition description)定义列表描述标识-文字
• *dl、dt、dd优先级不同，dl优先级高，dt和dd同等优先级
• *应用：图文混排；结合img图片标签使用
6. 图片标签
• img标签，是单标签
• 属性：
• 路径：src
• 鼠标悬停提示信息：title
• 图片加载失败后的提示信息：alt
• widlth、height,只设置width，图片会等比缩放
7. 超链接标签
• a标识，是双标签
• 属性：
• 路径：href(也可以跳转自己的页面)
• 打开页面方式：target(_helf(当前页面打开)、_blank（新的页面中打开）、_parent（当前页面父级中打开）、_top（在浏览器窗口打开）、framename（指定框架中打开)
8. 表格标签
• table标签，是双标签
• 层级关系：table（定义表格）>tr（定义行）>th（定义表头）/td（定义单元格）
• 表格的属性（table）
• width（宽度）:支持像素（px）和百分比(%) ；百分比是相对于其父元素宽度而言的；同时列表中单元格的宽度是均分的，可根据内容自动调节
• height(高度)：宽度可设定；表格的高度是由内容撑开的。
• border（边框宽度）：
• cellspacing（单元格间隙）：
• cellpadding（单元格与文字间隙）：
• bordercolor（边框颜色）：
• bgcolor（背景色）：
• align（水平对齐）:left、center、right
• background（背景图）：
• 行的属性（tr）
• height(高度)：宽度可设定；表格的高度是由内容撑开的。
• align（水平对齐）:left、center、right
• valign(垂直对齐)：top、middle、buttom
• bgcolor（背景色）：
• background（背景图）：
• 单元格的属性（td）
• width（宽度）:支持像素（px）和百分比(%) ；百分比是相对于其父元素宽度而言的；同时列表中单元格的宽度是均分的，可根据内容自动调节
• height(高度)：宽度可设定；表格的高度是由内容撑开的。
• align（水平对齐）:left、center、right
• valign(垂直对齐)：top、middle、buttom
• bgcolor（背景色）：
• backgroundr（背景图）：
• 合并单元格
• rowspan（合并行）:合并几行值位几。
• colspan（合并行）:合并几列值位几。
9. 表单标签
• form标签，是双标签
• action属性：提交地址
• method属性：请求方法（GET、POST）
• form表单的属性
1. input元素的属性
• type属性：（text、password、submit（可有value）、reset、button（校验行为用）
• name属性：非常重要！！！有namet提交时数据才能提交至后端
• placeholder属性：默认的提示信息
• button：普通按钮
• 必填项？
10. div标签
• 可做容器标签，独占一行
11. span标签
• 文本标签，不单独起行