快捷键
h${我是h$标签}*6然后按tab按键
1.1 html常用的标签
字体是默认加粗
h1到h6是一级标签到六级标题标签
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
span标签
<span>文本标签1</span>
<span>文本标签2</span>
<span>文本标签3</span>
元素分类：
块级元素：一个标签沾满其父级元素的一行。
行内元素：内容多少所占位置就有多大。
<p>我是第一个段落我是第一个段落我是第一个段落</p>
<p>我是段落标签<br>我是段落标签</p>
br:换行标签。是一个单标签，也是空标签
<b>加粗标签</b>
<strong>也是加粗标签，强调语气的作用</strong>
<i>斜体</i>
<em>也是斜体起到加强语气的作用</em>
<img src="img/HBuilder.png"alt="当图片失效用来说明此图片的用处"/>
删掉png，改为jap就会显示出"alt=当图片失效用来说明此图片的用处"
路径
相对路径：相对于文件的位置来查找目标文件。
绝对路径：从文件根目录开始查找。
../表示返回上一级目录
img表示进入这个文件夹里面
./表示当前目录，在这里即表示当前的这个test文件
下面两个表现效果一样
sup上标
sub下标
<del>删除文本</del>
x<sup>2</sup>
h<sub>2</sub>
<ruby>陈<rt>chen</rt></ruby>
<abbr title="英雄联盟">LOL</abbr>
abbr是缩略词
title是abbrd 标签的一个属性
<bdo dir="rtl">定义文本的排列顺序</bdo>
<mark>标记文本</mark>
<div style="height: 500px;"></div>
<span id="btn">123</span>
link网页标题图标的制作
<link rel="icon" href="img/bitbug_favicon.ico"/>
语义化标签
一个语义化标签能够描述其代表的意义，比如：h1代表一级标签
什么是语义化
就是能够根据内容，选择相应的语义化标签进行代码书写。比如：一段话，应该用p标签。
语义化的优点
1，在没有css的情况下，也能够很好的展示我们的内容结构
2，提高用户体验，比如label标签和title属性的使用
3，有利于SEO，和浏览器建立良好的沟通，有利于爬虫获得更多的信息，可以根据使用的标签来确定各个关键词的权重
4，有利于其他设备的解析，比如 盲人阅读器，可以根据语义化标签进行有感情的朗读
5，有利于团队开发和维护，语义化更具有可读性
html5新增的语义化标签
<header>头部</header>
<section>代表一个独立的块</section>
<article>代表一个独立的内容</article>
<aside>代表和主要内容相关的信息，比如侧边栏</aside>
<footer>底部</footer>
hgroup标签的作用：将所有标题之间有关的标题联系起来。
比如：h1标题和h2标题的内容是相关的，就可以将h1跟h2标签用hgroup标签装起来
<hgroup>
<h1>我是一级标题</h1>
<h2>我是和一级标题有关的二级标题</h2>
</hgroup>
figure用来规定独立的内容（图片，表格...）
需要结合figcaption标签来用
<figure>
<img src="../2018-05-30html的介绍/img/HBuilder.png"/>
<figcaption>用来说明此图片</figcaption>
</figure>
autofocus自动获取焦点
<input type="text" autofocus="autofocus" placeholder="请输入用户名" name="username"/>
contenteditable使元素变为可以编辑状态
<div contenteditable="true">我是一个div</div>
html5新增的表单元素
type：
color
date
datetime
month
week
time
email
rang
search
url
Tel
html5废弃的元素
<font></font>
<bigfont></bigfont>
<big></big>
<s></s>
<u></u>
<tt>定义打字机文本</tt>
<center>居中</center>
1.2 a标签的使用
锚点的跳转：
1在目标位id置给一个a链接，给做个饭a链接加上一个name：或者在目标元素上面加id：
2，在点击的a标签的href属性上面加锚点即可：#name/#id（#井号拼接上目标a标签的name/目标元素的id）
<a href="css/test1.html" target="_blank">点击跳转到css页面</a>
<!--a标签的作用：从一个页面跳转到另一个页面
href：定义跳转链接
target：定义跳转方式-->
<a href="new_fe.html">跳转到new页面</a>
<!--可以跳转到外部链接-->
<a href="http：//wwwbaidu.com">百度</a>
<!--mailto：会自动检测本机系统是否有安装邮箱，如果有就会自动打开邮箱，
没有就会提示用户选择邮箱或者没有提示-->
<a href="mailto:502221798@qq.com">跳转到我的邮箱</a>
<a href="Tel：13265973117">一键拨打电话</a>
<a href="sms：13265973117">一键发送短信</a>
<!--a标签用于页面之间的跳转
属性：href：页面跳转的路径
target:定义当前页面跳转方式
_self当前页面跳转（默认）
_blank:跳转新页面-->
a标签的四种状态，a标签里面的href里面的链接要填才会有效果，要安装下面的顺序进行书写，不能颠倒
link > visited > hover > active
.a:link{/*未点击时的状态*/
color: red;
}
.a:visited{/*点击过后的状态*/
color: black;
}
.a:hover{/*鼠标停在元素上时的状态*/
color: pink;
}
.a:active{/*鼠标按下时的状态*/
color: yellow;
}
导航下划线效果
<style type="text/css">
*{
text-decoration: none;
list-style: none;
margin: 0;
padding: 0;
}
nav li:{
overflow: hidden;
}
.nav li{
float: left;
width: 50px;
text-align: center;
/*line-height: 35px;*/
}
.nav li a{
font-size: 14px;
color: #000000;
}
.nav li::after{
content: "";
width: 10px;
height: 1px;
background: #000000;
/*display: block;*/
margin: 0 auto;
margin-top: 5px;
}
.nav li:hover::after{
display: block;
}
</style>
<body>
<!--
ul.nav>li*5>a{首页$}
-->
<ul class="nav">
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
</ul>
</body>
1.3 表格的介绍
表头：th >字体默认加粗，内容水平居中
表格的内容：td
属性：(写在开头标签里面的单词就是该元素的属性)
border：边框,用来设置表格边框
cellspacing:设置单元格之间的距离
cellpadding：设置内容到边框的距离
width:表格的宽度
height:表格的高度
align:单元格内容水平对齐方式
left：左对齐
right：右对齐
center：水平居中
valign：单元格内容垂直对齐方式
top：顶部对齐
bottom：底部对齐
middle：居中对齐
baseline:基线对齐
合并单元格
colspan:列合并.需要合并多少个单元格，他的值就是多少
rowspan:行合并(行合并，要被合并的那一行就要用注释消掉)
1.4 列表
实体字符：
 ：空格符
>：大于号
<:小于号
"：引号
®：注册商标
©：版权
&：&
无序列表:
属性：type:（改变项目符号的样式）
circle：实心改为圆
disc：实心圆
square：矩形
none:消除点
<ul type="none">
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ul>
有序列表
1，i,I.a,A吴忠项目符号类型
start：定义项目排序的起始值、值为数字
<!--ol>li{我是项目$}*5--然后按tab>-->
<ol type="I" start="5">
<li>我是项目1</li>
<li>我是项目2</li>
<li>我是项目3</li>
<li>我是项目4</li>
<li>我是项目5</li>
</ol>
定义列表
```
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
```
1.5 iframe内嵌框架
ase用来定义页面内所有相对地址的根目录
最终当页面在浏览器上显示的时候，所有的路径都会拼接上这个设置的目录。
（即把相对的地址变成绝对地址）
<base href="2018-06-04表格作业" />
<!--设置所有的链接都在新窗口打开-->
<base href="_blank" />
<base href="_blank" />
iframe:是html内嵌框架
缺点：不利于搜索引擎优化（就是不能让客户快速找到你的浏览器）
浏览器不能识别到iframe里面引入的文件内容
<iframe src="a标签的使用.html" width="100%" height="10%" scrolling="yes"></iframe>
frame：设置table的边框
below：设置只显示底部边框
above：设置只显示顶部边框
lhs：只显示左边的边框
rhs：只显示右边的边框
hsides：只显示上下边框
vsides：只显示左右边框
border/box：显示所有边框
void：不显示边框
rules：设置table的内部边框
cols：只显示纵向的边框
rows：只显示横向的边框
all：全部显示边框
none没有内部边框
1.6 表单
表单：用于提交数据到服务器
action：填写提交的服务器地址
method:定义数据提交的方式
get：提交的数据是显示在浏览器的地址栏上不安全性
一般用于少量且不涉及安全的数据（因为浏览器地址栏上面数量有限）
post：相对安全用于大量数据提交。
enctype：设置表单提交的数据格式
默认值：application/x-www-form-urlencoded
所有表单元素都必须要添加name属性，单选框和复选框还需要定义它的值（value）
表单元素：
input
类型（type）：
text：文本框
password：密码框
submit：提交按钮
button：普通按钮
reset：重置按钮；作用是将所有的表单数据重置为默认状态。
image:图片按钮，有提交数据的功能
属性：
placeholder：定义用户提示语
checked:设置默认选中状态(复选框里面的)
disabled:表示禁用，不能够提交数据
readonly：表示只读，可以提交数据,必须要填的此项才用此元素
单选框
性别：<input type="radio" checked="checked" name="sex" id="nan" value="nan"/ ><label for="nan">男</label>
<input type="radio" name="sex" id="nv" value="nv" / ><label for="nv">女</label>
<input type="radio" name="sex" id="1" value="1"/ ><label for="1">第三性别</label>
<br /><br /><br />
<!--复选款-->
爱好：<input type="checkbox" checked="checked" name="hobby" id="5" value="5"/ > <label for="5">运动</label>
<input type="checkbox" name="hobby"id="7" value="7"/ > <label for="7">看书</label>
<input type="checkbox"name="hobby"id="8" value="8"/ > <label for="8">敲代码</label>
<br />
<br />
<!--下拉框-->
<select name="city">
<option value="" >请选择</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="珠海">珠海</option>
</select>
<br /><br />
多行文本域
rows:设置文本域的行数
cols：设置文本域的列数
不识别标签，原样输出文本域的内容，包括换行符和空格。
<textarea name="message" rows="5" cols="5">
上传文件
规定要用post方式提交表单
数据格式要设置成：multipart/form-data
multiple：可以上传多个文件
<input type="file" name="file" multiple/>
<!--拾色器不兼容ie浏览器-->
<input type="color" name="Scolor"/>
<!--日期控件 不兼容ie浏览器-->
<input type="date" />
<!-- required：此属性规格该字段不能为空-->
<input type="text" required placeholder="q请输入你的爱好" name="like" />
<input type="reset" value="重置"/>
下来框分组
selected：默认选项
<select name="city">
<optgroup label="广东">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</optgroup>
<optgroup label="广西">
<option selected="" value="桂林">桂林</option>
<option value="南宁">南宁</option>
</optgroup>
</select>
<!--定义数值字段的滑块，默认值是-0-100-->
<input type="range" name="num" min="10" max="20"/>
<!--maxlength:限制文本输入的字数-->
<input type="text" maxlength="10"/>
1.7媒体标签
音频：
autoplay：自动播放（这个元素可以写一个）
controls:控制器（这个元素可以写一个）
loop:循环播放
<p>你的浏览器过时了！</p>（浏览器版本过低就要写此字段）
<audio src="medial/bg.mp3" autoplay >
<p>你的浏览器过时了！</p>
</audio>
可以通过source标签来定义多种格式的音频
当浏览器不支持第一个格式的音频，就会自动找到下一个音频进行播放，直到播放成功或者提示浏览器过时了。
audio目前只支持三种格式，mp3/ogg/wav
<audio autoplay controls="controls">
<source src="medial/bg.mp3" type="audio/mp3"></source>
<source src="medial/bg.ogg" type="audio/ogg"></source>
<source src="medial/bg.WAV" type="audio/wav"></source>
<p>你的浏览器过时了!</p>
</audio>
poster:设置视频的封面
muted:设置视频为静音状态
video：目前只支持三种格式.mp4/ogg/webm
align-items: center;<!--居中对齐弹性盒的各项-->
<!--元素：-->
justify-content: center;
<!--在弹性盒对象的元素中的项目位于容器的中心。需要把这个reset表单和你的text放到中，才生效。-->
<!--单行文字超出部分省略号显示-->
overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;
<!--限制p元素之显示2行文字，同时出现省略号。-->
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/*清除select框的默认样式*/
select{
/*将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
文本描边
-webkit-text-stroke:1px #006C68;
/*禁止用户选择元素*/
-moz-user-select:none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select:none; /*禁止元素点击出现半透明黑色背景*/
pointer-events:none;/*禁止图片的点击事件，例如长按保存图片*/
/*禁止textarea拉伸resize:none*/
