HTML笔记
HTML常用标签
<h1></h1> <!--标题（共有h1-h6，独占一行）--><p></p> <!--段落--><br /> <!--换行（单标签不带/也可以）--><strong></strong> <!--加粗--><em></em> <!--倾斜--><del></del> <!--删除线--><ins></ins> <!--下划线--><div></div> <!--大盒子（独占一行）--><span></span> <!--小盒子--><img src:'图像URL' /> <!--图像标签（src是<img>标签的必须属性，它用于指定图像文件的路径和文件名）（单标签不加/也行）-->- 除了src，img标签还有其他属性（和src搭配使用）：
- alt：替换文本，图像显示不出来的时候，用文字替换（src=”…” alt=”Hello”）
- title：提示文本，鼠标放到图像上，显示的文字（src=”…” title=”Hello”）
- width：设置图像的宽度（src=”…” width=”100”）
- height：设置图像的高度（src=”…” height=”100”）
- border：设置图像的边框粗细（src=”…” border=”100”）
<a href="URL" target="目标窗口的弹出方式"></a> <!--超链接标签-->- 属性：
- href：用于指定链接目标的URL地址（必需属性）
- target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式
空链接：如果当时没有确定链接目标时：
<a href="#"></a>下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：点击可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式，如
<a href="#two"></a>在要跳转到的地方写
<a id="two">
<!--空格符（重要）-->< <!--小于号-->> <!--大于号--><table></table> <!--用于定义表格的标签--><thead></thead> <!--表格头部区域--><tbody></tbody> <!--表格主体区域--><th></th> <!--加粗的表格行--><tr></tr> <!--用于定义表格中的行，必须嵌套在<table>标签中--><td></td> <!--用于定义表格中的单元格，必须嵌套在<tr>标签中-->列表
无序列表（重点）：
<ul></ul> <!--无序列表（<ul>标签中只可放<li>标签）--><li></li> <!--列表项（<li>标签中可以放任意标签）-->有序列表（了解）：
<ol></ol> <!--有序列表（<ol>标签中只可放<li>标签）--><li></li> <!--列表项（<li>标签中可以放任意标签）-->自定义列表（重点）：
<dl></dl> <!--描述列表（<dl>标签只可放<dt>和<dd>标签）--><dt></dt> <!--定义项目/名字（<dt>标签中可以放任意标签）--><dd></dd> <!--描述每一个项目/名字（<dd>标签中可以放任意标签）-->
表单
<form></form> <!--表单域-->- action=”URL”：用于指定接收并处理表单数据的服务器程序的URL地址
- method=”get/post”：用于设置表单数据的提交方式，其取值为get或post
- name=”表单域名称”：用于指定表单的名称，以区分同一个页面中的多个表单域
<input> <!--表单元素（单标签）-->- type属性：
- button：定义可点击按钮（多数用于通过JavaScript启动脚本）
- checkbox：定义复选框（需要给多个input定义相同的name）
- file：定义输入字段和“浏览”按钮，供文件上传
- hidden：定义隐藏的输入字段
- image：定义图像格式的提交按钮
- password：定义密码字段，该字段中的字符被掩码
- radio：定义单选按钮（要实现单选，需要给多个input定义相同的name）
- reset：定义重置按钮，重置按钮会清除表单中的所有数据
- submit：定义提交按钮，提交按钮会把表单数据发送到服务器
- text：定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
- name属性：给input定义ID（一般后端用）
- value属性：默认显示的内容
- checked属性（checked=”checked”）：默认选中某个单选/复选框
- maxlength属性：指定最多输入字符长度
<label></label> <!--用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上-->- 使用方法：
<label for="sex">男</label><input type="radio" name="sex" id="sex">表单控件（表单元素，包含在form标签中）
- input输入表单元素（单标签）
- select下拉表单元素（双标签）
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>- textarea文本域元素（双标签）
Emmet语法（HTML）
- 生成标签，直接输入标签名按Tab键即可
- 如果想要生成多个相同标签，加上星号（*）就可以了，比如div*3就可以快速生成3个div
- 如果有父子级关系的标签，可以用>，比如ul>li就可以了
- 如果有兄弟关系的标签，用+就可以了，比如div+p
- 如果生成带有类名或者id名字的，直接写.demo或者#two 按Tab键就可以了
- 如果生成的div类名是有顺序的，可以用自增符号$
- 如果想要在生成的标签内部写内容可以用{}表示，例：div{nb}$*5
HTML5的新特性：针对以前的不足，增加了新标签、新表单和新的表单属性等
<header> <!--头部标签--> <nav> <!--导航标签--> <article> <!--内容标签--> <section> <!--定义文档某个区域--> <aside> <!--侧边栏标签--> <footer> <!--尾部标签-->HTML5新增的多媒体标签（使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件）
音频：
语法：
<audio src="文件地址" controls="controls"></audio>常见属性：
属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮 loop loop 如果出现该属性，则每当音频结束时重新开始播放 src url 要播放的音频的URL 视频：
语法：
<video src="文件地址" controls="controls"></video>常见属性：
属性 值 描述 autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） controls controls 向用户显示播放控件 width pixels（像素） 设置播放器宽度 height pixels（像素） 设置播放器高度 loop loop 播放完是否继续播放该视频，循环播放 preload auto（预先加载视频）none（不应加载视频） 规定是否预加载视频（如果有了autoplay就忽略该属性） src url 视频url地址 poster imgurl 加载等待的画面图片 muted muted 静音播放
HTML5新增的input表单
- 属性值
- **type=”email”**：限制用户输入必须为Email类型
- **type=”url”**：限制用户输入必须为url类型
- **type=”date”**：限制用户输入必须为日期类型
- **type=”time”**：限制用户输入必须为时间类型
- **type=”month”**：限制用户输入必须为月类型
- **type=”week”**：限制用户输入必须为周类型
- **type=”number”**：限制用户输入必须为数字类型
- **type=”tel”**：手机号码
- **type=”search”**：搜索框
- **type=”color”**：生成一个颜色选择表单
- 属性值
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=”on”，关闭autocomplete=”off”需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {color: pink;}