ctrl+alt+insert 新建文件
tab键可自动补全代码，. 例：只键入h1，按下tab，自动生成
按end键可以令光标移动到当前行的最后，home键可以把光标移动到当前行的最前面
长按alt键+鼠标，可以多行一起输入
ctrl + d 快速复制光标所在的一行 ctrl + X快速删除光标所在的一行
ctrl + / 快速生成注释
ctrl + alt +T 用标签包裹整行
快速移动选中的代码：
(1)向上移动：Ctrl + shift + ↑
(2)向下移动：Ctrl + shift + ↓
快速合并/展开代码：Ctrl + Shift + -/+
快速新启一行（不用把光标移动到末尾）：shift + enter
注意点:
H标签是用来给文本添加标题语义的，而不是用来修改文本样式的
H标签一共有6个，从h1~h6，最多只能到6，超过6则无效
被H系列标签包裹的内容会独占一行
在H系列标签中，h1最大，h6最小
在企业开发中，一定要慎用H系列的标签，特别是h1标签，在企业 开发中一般情况下，一个界面中只能出现一个h1标签（和SEO有关）
注意点：
在浏览器中独占一行
注意点：
在浏览器中独占一行
HTML5向下兼容，所以两种写法都可以
做前端开发时，根据高级开发工具的提示来写即可
注意点
和H系列标签/P标签以及Hr标签不同，img标签不会独占一行
扩展
width 宽度； height 高度。可以设置要显示的图片的宽度和高度，不指定时会按照默认的宽和高来显示手动指定img标签显示的图片的宽度和高度，可能导致图片变形；如果既想指定高度和宽度，又不想图片变形，可以只指定宽度和高度中的一个值，系统会自动计算另一个值。
title: 用于告诉浏览器，当鼠标悬停在图片上时，需要弹出的描述框中显示什么内容
alt：是alternate的缩写，作用是告诉浏览器，当需要显示的图片找不到时显示什么内容。
路径问题
通过相对路径赋值 （就是每次都从.html文件所在的文件夹开始查找）
（1） 同级（图片和.html文件存储在同一个文件中）
格式：
<img src="xxxx.jpg>（2） 下级(存储图片的文件夹和.html文件在同一个文件夹中)
格式：
<img src = "存储图片的文件夹名称/xxxx.jpg">例：
<img src="images/2.JPG" width="50"> <img src="images/a/3.JPG" height="50"> <img src="images/a/b/4.JPG" width="50">3）上级（图片和存储代码的文件夹在同一个文件夹中,此电脑中就是图片和code文件夹在一个文件夹中）
格式： (. . /代表从当前位置找到上一级文件夹)
<img src = ". . /xxxx.jpg" >例：
<img src="../5.JPG" width="500" > <img src="../../c/6.JPG" width="500" >通过绝对路径赋值
每次都从指定的盘符开始查找（C盘，D盘…）
格式：
<img src = "C:\xxxx\xxxx\xxxxx\xxxx">例：
<img src="D:\HTML\code/1.JPG" width="500"> <img src="D:\HTML\code\images/2.JPG" width="500"> <img src="D:\HTML\code\images\a/3.JPG" height="500"> <img src="D:\HTML\code\images\a\b/4.JPG" width="500"> <img src="D:\HTML/5.JPG" width="500" > <img src="D:\c/6.JPG" width="500" >注意点
路径中不要出现中文
通过相对路径赋值时，不能跨盘符
企业开发中如果需要编写路径时，**统一使用‘/’，**不要使用‘\’，因为将来开发的程序可能会部署到其他操作系统的服务器，而在其他的操作系统中路径都是‘/’。
绝对路径的可移植性不好，所以在企业开发中一般不使用绝对路径赋值。
注意点：
多个br标签可以连续使用，使用了多少个br标签就会换多少行
HTML的作用是给文本添加语义，而br标签的语义是换行，而不另起一段，但在企业开发中一般情况下需要换行都是因为需要另起一个段落，所以很少使用br标签
例：
<a href="https://www.baidu.com/?tn=80035161_1_dg">社会箫的网页</a>注意点：
a标签不仅可以让文字可点击 ，还可以让图片也可点击
属性
href属性（1） a标签的href属性不止可以指定网络地址，还可以指定本地地址
（2） 一个a标签必须有一个href属性----指定a标签要跳转的位置
（3） 如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加http://或https://
target属性（1） 专门用于控制如何跳转
（2） _self: 用于在当前选项卡中跳转，不新增界面
（3） _blank: 用于在新的选项卡中跳转，会新增界面
title属性和img标签中的title属性一样，都是控制鼠标悬停时显示的提示文本的
假链接
(1)点击之后不会真正跳转的链接称之为假链接
(2)在企业开发前期，其他页面没有写出来，就会用假链接代替，后期其他界面完成后再将假链接替换为真链接
(3)格式：
①："#" -------------会自动返回网页的顶部（如许多网站的“返回顶部”功能）
②：“javascript:”----------------不会返回网页底部
通过a标签跳转到当前页面的指定位置（锚点）
(1) 要通过a标签跳转到指定位置，就必须告诉a标签一个独一无二的“身份证号码”，这样才能在当前界面找到需要跳转的目标位置
(2) 在HTML中，每一个标签都有一个名称叫做id的属性，这个属性就是用来给标签指定一个独一无二的“身份证号码”的
(3) 通过a标签跳转到当前页面的指定位置分为两步
① 给目标位置的标签添加一个id属性，然后指定一个独一无二的值
②告诉a标签需要跳转到的目标标签对应的独一无二的“身份证号码”
<a href="#center">跳转到中部</a> <h2 id="center"> 我是中部 </h2>(4) 通过a标签跳转到指定的位置，是没有过渡动画的（没有滚动过程）
(5) 除了可以跳转到当前页面的指定位置以外，还可以跳转到其他界面的指定位置
<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>注意点：
(1) base标签必须写在head标签的开始标签和结束标签之间
(2) 如果在base标签和a标签中都指定了跳转方式，则会按照a标签中执行。即，如果有的超链接需要特殊跳转，单独指定即可。
作用：
给一些数据添加列表语义，告诉搜索引擎和浏览器这些数据是一个整体。
HTML中列表标签的分类
无序列表(unordered list 最多)
**1) 作用：**给一堆数据添加列表语义，并且这一堆数据中的所有数据都没有先后之分。
2) 格式：
<ul> <li>需要显示的条目内容1</li> <li>需要显示的条目内容2</li> ...... ...... ...... </ul> 注：li是list item的缩写，列表条目的意思3) 注意点：
(1) ul标签只是用来给数据添加语义的，并不是添加列表前的小圆点的。
(2) ul标签和li标签是一个整体，一般情况下都是一起出现，不会单独使用其中一个
(3) 由于(2),所以ul标签中不推荐包含其它标签，在ul标签中只会看到li标签（但li标签中可以继续添加其他标签，还可以添加ul标签）
(4)快捷写法
ul>li*n，按下tab键
4) 应用场景
(1) 新闻列表
(2) 商品列表
(3) 导航条
有序列表( ordered list 最少)
1) 作用：给一些数据添加列表语义，并且这些数据中所有的数据都有先后之分
2) 格式：
<ol> <li></li> </ol>**3) 注意点：**和无序列表类似
定义列表(definition list其次)
1) 格式：
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> 简化写法：dl>dt+dd dt: definition title 用来定义列表中的标题 dd: definition description 用来定义标题对应的描述2) 作用：
(1) 给一堆数据添加列表语义
(2)先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息
3) 应用场景：
(1) 做网站尾部的相关信息
(2)做图文混排
4) 注意点：
(1) 一个dt可以没有对应的dd，也可以有多个对应的dd，但是不推荐使用，只推荐一对一
(2)其他和其他两个列表类似，也可以在dt和dd中继续添加其他标签
作用：
用来给一些数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。
格式
<table> <tr> <td></td> </tr> </table> (table代表整个表格，即一对table标签就是一个表格) (tr标签代表整个表格中的一行数据，即一对tr标签就是表格中的一行) (td标签代表表格中一行中的一个单元格，即一对td标签就是表格中的一个单元格)注意点：
（1） 表格标签有一个边框属性，这个属性决定了边框的宽度，默认情况下，这个属性的值是0，所以看不到边框。
<table border="1">（2） 表格标签和列表标签一样，是一个组合标签，所以table/tr/td不会单独出现，只能一起出现。
表格标签中的属性
（仅作为了解，在企业开发中所有的样式都通过CSS实现）
宽度和高度的属性
（1） 可以给table标签和td标签使用
（2） 表格的宽度和高度默认是按照内容的尺寸来调整的，也可以通过给table标签设置width/height属性的方式来指定表格的宽度和高度
<table border="1" width="500px" height="300px">（3） 如果给td标签设置width/height属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽度和高度
水平对齐和垂直对齐的属性
（1） 水平对齐可以给table标签和tr标签和td标签使用
<table align="right/center/left">（2） 垂直对齐只能给tr标签和td标签使用
<table valign="top/center/bottom">（3） 给table标签设置align属性，可以控制表格在水平方向的对齐方式； 给tr标签设置align属性，可以控制当前行所有单元格内容在水平方向的对齐方式；给td标签设置align属性，可以控制当前单元格内容在水平方向的对齐方式（如果td中和tr中都设置了align属性，那么单元格中的内容会按照td中设置的来对齐）
（4） 给tr标签设置valign属性，可以控制当前行所有单元格内容在垂直方向的对齐方式；给td标签设置valign属性，可以控制当前行所有单元格内容在垂直方向的对齐方式；（如果td中和tr中都设置了valign属性，那么单元格中的内容会按照td中设置的来对齐）
外边距和内边距的属性
（1） 只能给table标签使用
（2） 单元格与单元格之间的距离为外边距，默认值为2px
<table cellspacing="12px">（3） 文字与单元格边框之间的距离为内边距,默认值为1px
<table cellpadding="20px"细线表格
（仅作为了解，企业开发中通过CSS实现）
制作方式：
（1） 给table标签设置bgcolor
（2） 给tr标签设置bgcolor
（3） 给table标签设置cellspacing=“1px”
<table bgcolor="black" cellspacing="1px"> <tr bgcolor="white"> <td>1.1</td> <td>1.2</td> </tr> <tr bgcolor="white"> <td>2.1</td> <td>2.2</td> </tr>caption标签
（1） 专门设置表格的标题，可以使标题相对表格居中
（2） 必须写在table标签里面，且一定要紧跟table标签
th标签
标题单元格标签：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中，就可以自动居中&加粗
单元格合并
(1) 水平方向的单元格合并（添加colspan属性）
<td colspan="2"></td>(2) 垂直方向的单元格合并（添加rowspan属性）
<td rowspan="2"></td>(3)注意点：
a： 由于合并单元格是把一个单元格当作多个单元格显示，所以会多出一些单元格，所以还需要删除多余的单元格
**b： **单元格合并永远都是向后或向下合并
表格的结构（仅了解，企业开发中不写）
表格的标题caption表格的表头信息thead表格的主体信息tbody表格的页尾信息(附加信息)tfoot <table> <caption>表格的标题</caption> <thead> <tr> <th>每一列的标题</th> </tr> </thead> <tbody> <tr> <td>数据</td> </tr> </tbody> <tfoot> <tr> <td>数据</td> </tr> </tfoot> </table>注意点：
(1) 如果我们没有编写tbody，系统会自动添加
(2) 如果指定了thead和tfoot，在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化。
作用：
专门用来收集用户信息的
格式:
<form> <表单元素> </form>作用：
专门用来收集用户信息的
格式:
<form> <表单元素> </form>表单元素/标签：
这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能。
input标签1）type属性（这个属性有很多类型的取值，取值的不同决定了input标签的功能和外观）
(1) 明文输入框
<input type="text">(如账号之类) (2)暗文输入框
<input type="password">(密码) (3)单选框(只能选一个)
<input type="radio" >男 <input type="radio" >女注意点：
A：默认情况下单元框不会互斥，要实现单选框互斥，就必须给每一个单选框都设置一个name属性，且name属性必须**设置相同的值
<input type="radio" name="xxxx">男 <input type="radio" name="xxxx">女B：给input标签添加一个check属性，可以让单元框默认选中某一个
<input type="radio" name="xxxx">男 <input type="radio" name="xxxx">女 <input type="radio" name="xxxx" checked="checked">保密C：在HTML中，如果属性的取值和属性的名称一样，可以只写一个,但是XHTML中不能省略，所以写代码四最好不要省略取值
(4)多选输入框（可以选多个）
<input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">棒球 (5)按钮（定义一个按钮，配合JS完成一些操作）
<input type="button" value="我是按钮">--普通 <input type="image" src="xxxxx.jpg">--图片按钮 <input type="reset">--定义重置按钮，清空表单中的数据 <input type="submit">--定义提交按钮，将表单中的数据提交到远程服务器注意点
A：重置按钮有默认的按钮标题—”重置“，如果不想用默认的，也可以用value修改标题
B：要把表单中的数据提交到远程服务器，必须满足两个条件：通过form标签的action属性告诉表单需要提交到哪个服务器；告诉表单有哪些数据（带有name属性的）是需要提交的。
(6)隐藏域（悄悄的收集用户的信息，不会在网页中显示）
例：<input type="hidden" name="cc" vaue="it66"> (7)其他
<input type="date"> <input type="email"> <input type="number">2）value属性
给输入框设置默认值
<input type="text" value="xxxxx"> label标签让文字和输入框绑定在一起，实现点击文字时，输入框可以聚焦(光标在对应的输入框中闪烁)
1）格式
（1）将文字用label标签包裹
（2）给输入框添加一个id属性
（3）在label标签中通过for属性和输入框中的id进行绑定
<form> <label for="account">账号:</label><input type="text" id="account"><br> <label for="pwd">密码:</label><input type="password" id="pwd"> </form> datalist标签（了解） 1）作用：
给输入框绑定待选项（例：百度输入框）
2）datalist格式： 请输入你的车型：<input type="text" list="cars">--给输入框绑定待选列表 <datalist id="cars"> <option>待选项内容</option> </datalist> select标签1）作用：用于定义下拉列表
<select>xial <optgroup label="分组"> <option>列表数据</option>-----默认第一条就是默认值 <option selected="selected">列表数据</option>-----指定列表的默认值 </optgroup> </select> 2）注意点： ①下拉列表不能输入内容，是直接在下拉列表中选择
②用optgroup标签包裹option标签可以给下拉列表中的数据分组
textarea标签 1）作用：定义一个多行输入框
<textarea> </textarea>2）注意点：
①默认情况下可以无限换行
②默认情况下有自己的宽度和高度
③可以通过cols和rows来指定输入框的宽度和高度，但是虽然指定了行数和列数，但还是可以无限往下输入
④默认情况下是可以手动拉伸的（可以通过CSS设置不能拉伸）
注意点：
(1) 在单元框和多选框中，所有项目的name必须一致
(2) 在表单标签中，除了按钮以外的标签，都可以通过value来指定需要提交到服务器中的数据
**作用：**播放视频
格式：
(1)
<video src="">---默认不会自动播放 </video> (2)解决浏览器适配问题，video元素支持三种视频格式，把这三种格式都通过source标签指定给video标签，那么以后当浏览器播放视频时，它就会从这三种格式中选择一种支持的格式来播放
<video> <source src="xxxx.webm" type="video/webm"></source> <source src="xxxx.mp4" type="video/mp4"></source> <source src="xxxx.ogg" type="video/ogg"></source> </video>属性：
**src：**告诉video标签需要播放的视频地址**autoplay：**用于告诉video标签是否需要自动播放视频**controls：**用于告诉video标签是否需要显示控制条**poster：**在视频没有播放之前，显示一张占位图片（封面）loop：一般用于做广告视频，用于告诉video标签视频播放完毕之后是否循环播放preload：预加载视频，但是需要注意preload和autoplay相冲，如果设置了autoplay,preload就会失效muted：静音width/height：和img标签中一模一样注意点：
前提条件：浏览器必须支持HTML5标签（可以用过一个JS的框架——html5media来实现）
作用：播放音频
格式：
（1）
<audio src=""> </audio>（2）
<audio> <source src="xxxx.mp3" type="audio/mp3"> </audio>注意点
audio标签的使用和video标签的使用基本一样，video中能够使用的属性在audio中大部分都能够使用，并且功能都一样（height/width/poster不能用）
作用：
利用summary标签来描述概要信息，利用details标签来描述详情信息
格式:
<details> <summary>概要信息</summary> 详情信息 </details>注意点：
marquee不是W3C推荐的标签，在W3C官方文档中也无法查询到这个标签，但是各大浏览器对这个标签非常支持
为什么会废弃
当前HTML中的标签只有一个作用，就是用来添加语义，而早期的HTML标签有一部分是没有语义的，而是用来修改样式的，所以就被淘汰了
列举
<br>,<hr>, <font>修改字体大小和颜色等 <b>（bold）加粗文本 <u>（underlined）下划线 <i>（italic）将文本倾斜 <s>（strikethrough）删除线注意点
在企业开发中，不到万不得已一定不要用这些；
如果一定要用，一般情况下都是用来作为CSS的钩子来使用的
替代的标签（区别：有无语义）
strongb; insu; emi; dels
strong语义：定义重要性强调的文字
ins语义：定义插入的文字
em：定义强调的文字
del语义：定义被删除的文字
作用：
在HTML中有的字符是被HTML保留的，有的HTML字符在HTML中是有特殊含义的，不能在浏览器中直接显示出来，那么这些如果想显示出来，就必须通过字符实体来实现
格式：
空格，一个这样的字符就代表一个空格，有多少个这样的字符就会有多少个空格 < 小于符号< > 大于符号> © 版权符号div
作用：
一般用于配合CSS完成网页的基本布局
span
作用：
一般用于配合CSS修改网页中的一些局部信息
两者的区别
div会单独占据一行，而span不会div是一个容器级别的标签，而span是一个文本级的标签容器级标签和文本级标签的区别
容器级的标签中可以嵌套其他所有的标签，div h ul ol dl li…文本级的标签中只能嵌套文字/超链接/图片，span p buis stong em ins del …不用刻意去记忆哪些是文本级标签，哪些是容器级标签，在企业开发中一般情况下的嵌套都是嵌套在div中，或者按照组标签来嵌套