HTML基础
前期准备
破解安装webstorm
汉化Webstorm
1、下载汉化包解压完成。
2、运行Webstorm，在菜单上依次选择File-->Settings-->Appearance&Beh*Vior-->Appearance-->Overrride default fonts by （not recommended） Name:Microsoft YaHei（选择任意中文字体），保存，关闭软件。此设置是避免汉化后显示乱码。
3、将D:\Program Files\JetBrains\WebStorm 2018.1.2\lib目录下的resources_en.jar文件复制到桌面，并更名为resources_cn.jar.
4、选中resources_cn.jar，以压缩方式打开查看，然后将下载的汉化包zh_CN文件下的所有文件全选，复制到messages文件夹下，然后保存。
5、将resources_cn.jar文件复制回D:\Program Files\JetBrains\WebStorm 2018.1.2\lib目录下即可。
字符集
在HTML文件中指定的字符集必须和保存这个文件的字符集一致，否则则还是会出现乱码
所以仅仅指定字符集不一定能解决乱码问题，还需要保存文件的时候，文件的保存格式必须和指定的字符集一致才能保证没有乱码问题
标签的分类
- 单标签
- 双标签
HTML标签关系分类
- 平级关系
- 嵌套关系
DTD文档声明
HTML有多个版本规范，版本间存在差异。所以需要告知浏览器当前网页是用哪一个版本的HTML规范来编写的，才能够正确的编译/解析/渲染我们的网页。
DTD文档声明格式
- HTML的DTD文档声明是向下兼容的< !DOCTYPE html>
- 必须写在HTML第一行
- 不区分大小写
- 不是标签
img属性
target：跳转目标（_blank：空白的，跳转至另一空白页面）
并集选择器
可以选择多个id或标签、类
清除浮动（当父块状没有设置高度时，子元素无法撑起父元素高度，设置清除浮动后，子元素可撑起父元素高度）
overflow:hidden
选择器写多个时（用空格分隔选择器，可多层筛选所需的元素进行设置）
父元素的选择器 子的元素选择器 子子元素的选择器{}
选择所有标签
*{}
子绝父相（设置子元素相对于父元素的位置）
子元素设置绝对定位
position:absolute
父元素设置相对定位
position:relative
跳出当前存放文件的目录，到上一级目录下寻找images文件夹中的图片
url(../images/login_bg.png)
ul子元素li平均分布
ul
{
display:flex;
}
li
{
flex:1;
text-align:center;
}
强调，可以设置其长度，调整相对位置，形成划线效果
<em></em>
WebStorm常见快捷键
如何在WebStorm中利用快捷键创建一个新的.html的文件
- 同时按下键盘上的Ctrl + Alt + Insert
如何在WebStorm中让光标移动到当前行的末尾
- 按下键盘上的End键即可
如何在WebStorm中让光标移动到当前行的最前面
- 按下键盘上的Home键即可
如何在WebStorm中让光标在多行中闪烁
- 按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可
如何在WebStorm中快速的复制光标所在的那一行
- 按下键盘上的Ctrl + D
如何在WebStorm中快速的删除光标所在的那一行
- 按下键盘上的Ctrl + X
如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签
- 按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可
通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
链接：https://www.jianshu.com/p/cc669b19f09f
锚点
1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2.如果和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
格式:
<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>
注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
格式:
<a href="13-锚点测试界面.html#bottom" target="_blank">
跳转到锚点测试界面
</a>
<h2 id="bottom">我是锚点测试界面33333</h2>
表格标签的属性
表格的完整结构
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格的主体信息数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格的附加信息数据</td>
</tr>
</tfoot>
</table>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
注意点:
如果我们没有编写tbody, 系统会系统给我们添加tbody
如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化
表格标签是有边框的，需要设置显示
表格宽高根据内容自动调整，也可以手动设置宽高属性
水平对齐和垂直对齐的属性
其中水平对齐可以给table标签和tr标签和td标签使用
垂直对齐只能给tr标签和td标签使用
给table标签设置align属性, 可以控制表格在水平方向的对齐方式
给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
给td标签设置align属性, 可以控制当前单元格中内容在水平方向的对齐方式
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
同理
给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式
给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式
注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
外边距和内边距的属性
只能给table标签使用
外边距就是单元格和单元格之间的距离, 我们称之为外边距
默认情况下单元格和单元格之间的外边距的距离是2px
内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
默认情况下内边距是1
在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服
细线表格的制作方式:
1.给table标签设置bgcolor="black"
2.给tr标签设置bgcolor="white"
3.给table标签设置cellspacing = "1px"
注意点:
table标签和tr标签以及td标签都支持bgcolor属性
表格标题
在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
caption标签的注意点:
caption一定要写在table标签中, 否则无效
caption一定要紧跟在table标签后面
标题单元格标签
在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的
水平方向上的单元格合并
可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
例如:
<td colspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
注意点:
由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
垂直方向上的单元格合并
可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
例如:
<td rowspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
注意点:
由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
若同时对一个单元格进行水平方向的单元格合并和垂直方向的单元格合并的设置，那么将合并多个行列单元格为一个单元格
快捷键方式
快速移动选中的代码, 上下移动
往上移动 Ctrl + shift + ↑(方向键上)
往下移动 Ctrl + shift + ↓(方向键下)
快速合并和展开代码(合并和展开的是某一个标签)
合并: Ctrl + -
展开: Ctrl + +
快速合并和展开代码(合并和展开选中的所有标签)
合并: Ctrl + shift + -
展开: Ctrl + shift + +
快速新启一行
shift + enter
单选框
默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值 要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性 在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值多选框
表单标签
提交表单时，提交有name属性的标签
默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
要想让输入框和文字绑定在一起, 那么我们可以使用Label标签
绑定的格式:
将文字利用label标签包裹起来
给输入框添加一个id属性
在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">账号:</label><input type="text" id="account">
<label>
账号:<input type="text">
</label>
如何给输入框绑定待选列表
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
请输入你的车型:
<input type="text" list="cars">
select标签
作用: 用于定义下拉列表
格式:
<select>
<optgroup label="分组名称">
<option>列表数据</option>
<option>列表数据</option>
<option>列表数据</option>
</optgroup>
<optgroup label="广东">
<option>广东</option>
<option>揭阳</option>
</optgroup>
</select>
注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
表单标签边框（包裹在form标签中）
<fieldset></fieldset>
表单标签名称（包裹在fieldset标签中）
<legend>表单名称</legend>
video标签
src: 用于告诉video标签需要播放的视频地址，属性值="视频地址"
autoplay: 用于告诉video标签是否需要自动播放视频，属性值="autoplay"
controls: 用于告诉video标签是否需要显示控制条，属性值="controls"
poster: 用于告诉video标签视频没有播放之前显示的占位图片，属性值="图片地址"
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放，可以把控制条除去来使得用户不能控制循环播放，属性值="loop"
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效，属性值="preload"
muted:静音，属性值="muted"
width/height: 和img标签中的一模一样
第一种格式：
<video src="images/sb1.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px">
</video>
第二种格式:
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
注意点:
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
audio标签
注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
第一种格式：
<audio src="images/yinyue.mp3" autoplay="autoplay" controls="controls">
</audio>
第二种格式：
<audio autoplay="autoplay" controls="controls">
<source src="images/yinyue.mp3" type="audio/mp3">
</audio>
这个因为浏览器大多不支持，仅供了解
<details>
<summary>概要信息</summary>
详情信息
</details>
跑马灯标签（滚动图片或文字）
格式:
<marquee>内容</marquee>
属性:
direction: 向哪个方向滚动，设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
HTML中被废弃的标签
为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了
<br> <hr> <font>
<b> <u> <i> <s>
以上标签都是没有语义的,都是用来修改样式的
b(bold) ：加粗文本, 没有任何语义的
u(underline) ：给文本添加下划线, 没有任何语义的
i(italic) ：将文本倾斜, 没有任何语义的
s(strikethourgh)： 给文本添加删除线, 没有任何语义的
注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签
如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用
strong == b
ins == u
em == i
del == s
strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized): 定义强调的文字
del语义(deleted): 定义被删除的文字
字符实体
在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理
什么是字符实体?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体
空格, 一个 就是一个空格, 有多少个 就有多少个空格
< 小于符号(less than) <
> 大于符号(greater than) >
© 版权符号
我 爱你。<h1>标签, <table>标签, <img>标签....
style标签必须放在head标签里，style标签和title标签是平级关系
