pink老师html标签学习笔记一
1、mac快捷键
基本
Command + C 复制（未选中文本的情况下，复制光标所在行）
Command + / 添加、移除行注释
Option + Shift + A 添加、移除块注释
Option + Z 自动换行、取消自动换行
多光标与选择
Option + 点击 插入多个光标（列式编程）
Command + I 选中当前行
查找替换
Command + F 查找
Command + Option + F 替换
进阶
Tab Emmet插件缩写补全
Option + Shift + F 格式化
Command + K Command + F 格式化选中内容
文件管理
Command + N 新建文件
Command + S 保存文件
显示
Command + Ctrl + F 全屏、退出全屏
调试
F9 设置 或 取消断点
F5 开始 或 继续
F11 进入
Shift + F11 跳出
F10 跳过
Command + K Command + I 显示悬停信息
2、基本结构标签
| 标签名 | 说明 |
| <html></html> | <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体 |
| <head></head> | <head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等 |
| <title></title> | 元素可定义文档的标题 |
| <body></body> | 元素定义文档的主体,元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） |
2.1、文档类型声明标签
- <!DOCTYPE html>文档类型声明是告诉浏览器使用哪种html，这就话的意思是页面采用H5版本显示网页。
- 注意：<!DOCTYPE>不是HTML标签，它的作用只是进行文档说明。
2.2、<html>标签lang属性，作用告诉浏览器当前文档显示的语言
- en定义为英文文档
- zh-CN定义中文文档
2.3、字符集
- <meta>标签定义和用法：
- <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
- <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使哪种字节编码。
charset常用的值：GB2312、BIG5、GBK和UTF-8
3.5、盒子标签
- <div></div>用法：
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
- <span></span>用法：
<span> 标签被用来组合文档中的行内元素。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用 于标识单独的唯一的元素。
3.12、表格标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。(多行多列时使用tr>td*3一键生成)
3.12.1表格属性
| 属性名 | 属性值 | 说明 |
| border | 像素值，语法border="value" | 单元格边框宽度，默认无边框 |
| cellpadding | 像素值，语法cellpadding="value" | 规定单元边沿与其内容之间的空白。（单元格与内容之间的内边距） |
| cellspacing | 像素值，语法cellspacing="value" | 规定单元格之间的空白。（单元格之间的外边距） |
| width | 像素值，语法width="value" | 设置表格的宽度。 |
3.12.2单元格<td></td>标签属性
| 属性名 | 属性值 | 说明 | 语法 |
| align | center/right/left/justify/char | 规定单元格内容对齐方式 | <td align="value"></td> |
| colspan | 数字 | 属性规定单元格可横跨的列数 | <td colspan="value"></td> |
| rowspan | 数字 | 规定单元格可跨的行数 | <td rowspan="value"></td> |
3.13列表标签
- 无须列表：<ul>
- 有序列表：<ol>
- 自定义列表：<dl>
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下：
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
浏览器显示如下：
- Coffee
- Black hot drink
- Milk
- White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
3.14、表单标签
一个完整的表单通常由表单域、表单控件和提示信息3部分组成。
3.14.1、表单域
<form></form>是表单域标签，用于定义表单域，会把它所包围的表单元素信息提交给服务器
| 属性名 | 属性值 | 说明 | 用法 |
| action | url地址 | 定义了在提交表单时执行的动作，向服务器提交数据的通常做法是使用提交按钮 | <form action="url地址"> |
| method | get/post | method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST） | <form method="GET">(注意大写) |
| name | 名称 | 如果要正确地被提交，每个输入字段必须设置一个 name 属性。以区别同一个页面中的不同表单域 | <form name="名称"> |
3.14.2表单控件（表单元素）
- <input></input>输入标签；
- 标签中的type属性用来规定不同的控件类型
type属性值及描述
| 属性值 | 描述 | 使用方法 |
| button | 可定义点击按钮（大部分情况下，用于通过js启动脚本） | <input type="button"> |
| radio | 定义单选框（注意多个单选框中的name属性值必须相同） | <input type="radio" name="sex"> |
| image | 定义图片形式的提交按钮 | <input type="image"> |
| passwod | 定义密码字段 | <input type="password"> |
| submit | 定义提交按钮，提交按钮会把表单数据提交到服务器 | <input type="submit"> |
value属性值及描述
| 属性值 | 描述 | 使用方法 |
| char | type=“button”、“reset”、"submit"用于定义按钮上的显示的文本 | <input type="button" value="登陆"> |
| char | type=“text”、“password”、"hidden"用于定义输入字段的初始值 | <input type="password" value="123456"> |
| char | type=“checkbox”、“radio”、"image"用于定义与输入相关联的值 | <input type="radio" value="0"> |
其他类型属性
| 属性名 | 属性值 | 描述 | 使用方法 |
| min | 数字 | min属性规定输入域所允许的最大值 | min="number" |
| max | 数字 | max属性规定输入域所允许的最小值 | min="number" |
| step | 数字 | step属性为输入域规定合法的数字间隔 | min="number" |
| placeholder | 字符 | placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失 | placeholder="请输入密码" |
