Appearance
HTML基础
定义
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。浏览器内核（渲染引擎）
负责读取网页内容，整理信息，计算网页的显示方式并显示页面
WEB标准的构成
主要包括 《结构Structure》 、《表现（Presentation）》和《行为（Behavior）》三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类【HTML】 |
| 表现 | 表现用于设置网页元素的排版、颜色‘大小等外观布局展示【CSS】 |
| 行为 | 行为是指网页模型的定义及交互的编写【JaveScript】 |
HTML头部标签属性
DOCTYPE
<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
lang语言种类
定义当前文档显示的语言【英文：en、中文：zh-CN】
charset字符集
- 字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
- 在
<head>标签内，可以通过<meta>标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码 <meta charset=" UTF-8" />- charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符
标题标签（<h1> ~ <h6>）
- 双标签，数值越小，字体越大
- 一个标题独占一行
- 自动加粗
段落标签（<p></p>）
- 用于文本的展示
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间有空隙
换行标签（<br />）
- 单标签
- 只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
文本格式化标签
- 色湖之粗体、斜体、增加下划线等效果
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或者 <b></b> |
| 倾斜 | <em></em> 或者 <i></i> |
| 删除线 | <del></del> 或者 <s></s> |
| 下划线 | <ins></ins> 或者<u></u> |
div和span标签
- 没有语义，就是一个盒子，用来装内容
- div属于块元素，span属于行内元素
图片标签（<img src="URL"/>）
- 单标签
- src属性是必须的，用于指定图像文件的路径和文件名
- 属性必须写在标签名的后面
链接标签（<a href="url"></a>）
- href：用于指定链接目标的url地址。必填属性
- target：用于指定链接页面的打开方式_self默认值 _blank新窗口打开
- 当href地址指向一个文件或者压缩包，点击时会下载这个文件
- 锚点链接：可以快读定位到页面中的某个位置：
<a href="#adv">广告</a>点击时，会定位到id为adv盒子的位置
特殊字符
表格
因为表格可以让数据显示比较完整，可读性比较好，所以主要用于显示、展示数据；表格只是用于展示页面数据，不是用来布局页面
语法：
<table>
<thead>
<tr>
<th></th>
</tr>
<thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table><th>一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。 一般是位于第一行<tbody></tbody>：用于定义表格的主体，主要用于放数据本体
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、right、center | 规定表格相同周围元素的对齐方式 |
| border | 1 或者 "" | 规定表格单元是否拥有边框，默认没有边框 |
| cellpadding | 像素值 | 规定单元格边缘与其内容之间的空白距离，默认1px |
| cellspacing | 像素值 | 规定单元格之间的空白。默认2px |
| width | 像素值或百分比 | 规定表格的宽度 |
单元格合并
跨行合并：
rowspan="合并单元格的个数"
跨列合并：
colspan="合并单元格的个数"
- 合并之后，注意td标签也要减少
列表
无序列表
语法：
<ul><li></li></ul>
- 以项目符号呈现列表项
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
- ul标签只能嵌套li标签
- li标签相当一个容器，可以容纳所有元素
有序列表
语法：
<ol><li></li></ol>
- 列表排序以数字来显示
- ol标签只能嵌套li标签
自定义列表
常用于对术语或名词进行解释和描述
语法
<dl>
<dt>定义项目/名字</dt>
<dd>描述每一个项目/名字</dd>
</dl>dt定义的项目/名字自动加粗
dl标签只能是dt或dd标签；dt和dd标签可以放任何标签
表单
表单组成：表单域、表单控件（表单元素）和提示信息
- 用
<form></form>标签定义表单域，以实现用户信息的收集和传递
表单域常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序URL地址 |
| method | post/get | 设置表单数据的提交方式 |
| name | 名称 | 指定表单的名称，以区分同一个页面中的多个表单域 |
表单控件（表单元素）
input表单元素
根据不同的type属性值不同可以拥有多种形式（文本字段、复选框、掩码后的文本控件、单选按钮、提交按钮...）
语法：<input type="属性值" name="属性值" value="属性值" checked="checked" maxLength="数值"/>
type属性值
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框（使用name属性区别） |
| file | 定义输入字段和”浏览“按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义面膜字段，该字段张的字符被掩码 |
| radio | 定义单选按钮（使用name属性区别） |
| reset | 充值按钮 |
| text | 单行的输入字段 |
其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自定义 | 定义input元素的名称 |
| value | 用户自定义 | 规定input的值 |
| checked | checked | 规定input元素是否被选中 |
| maxLength | 整数 | 规定输入字段中的字符的最大长度 |
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- name表单元素的名字，要求单选按钮和复选按钮要有相同的name值
- checked属性主要针对对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某一个表单元素
label标签
<label>标签为 input 元素定义标注（标签）<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
语法：
<!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
<label for="person-sex">男</label>
<input type="radio" name="sex" id="person-sex" />select表单元素
下拉选标签
- selected默认选中的选项
语法：
<select name="address">
<option label="南宁" value=”nanning“ selected="selected" />
<option label="柳州" value="liuzhou" />
</select>textarea 表单元素
多行文本
语法：<textarea rows="3" cols="20">文本内容</textarea>