HTML标签
1.<p></p>标签:paragraph
<h1></h1>标签:标题(header)标签
<strong></strong>加粗标签
<em></em>斜体标签
引申：如果想让一个文字既加粗又斜体，可以用<strong></strong>标签嵌套<em></em>标签，也可以使用<em></em>嵌
套<strong></strong>标签！当然如果想让一个文字既加粗又斜体，同时也独占一行，那么就可以使用<p></p>嵌
套<strong></strong>标签，<strong></strong>标签嵌套<em></em>标签！
2.<div></div>标签：
<span></span>标签：
以上两个标签非常重要，本身不具备含义，实际上就是起到容器的作用，通过对容器的操作，顺带着就可以将容器中的内容改变了！
容器主要有两个功能：1.分门别类，清晰化 2.绑定化操作【对容器操作就可以取代对容器中每一个元素的操作了】
3.空格在HTML中是文本分隔符的含义，不能使用在HTML中用空格当做我们传统意义上的空格！如下两行，你就能看到区别是啥：
1 <div style="width:100px;height:100px;background-color:red"> 2 thisisiafasljfasdjlasjfdlasjdlfjas;dfj;asdf;asdfafdasdf 3 </div>
上面的这段代码你会发现写在div中的文字都跑出了div之外，这是因为div将这些字母看成了一个单词【没有空格】，所以没法换行！
如果改成下面的形式：
1 <div style="width:100px;height:100px;background-color:red"> 2 This is a beautiful Girl! I love you you are very beautiful! 3 </div>
这样就能换行了，当然汉字也是可以的，一个汉字默认就是一个词
1 <div style="width:100px;height:100px;background-color:red"> 2 你说的这是啥啊，这样讲都不懂么？哈哈 3 </div>
而且我们来看：
1 <div style="width:100px;height:100px;background-color:red"> 2 刘辉 很帅！ 3 </div>
上面可以看到，虽然我们在代码中隔了好多个空格，但是在浏览器显示的时候却显示不出来几个空格，仅仅能显示一个，所以在HTML中的空格不能按着我们在电脑中的普通文本的空格来看待，而是看做文本分隔符！当然与这个类似的，回车也是被看做文本分隔符,多个回车也是被看做一个分隔符！
那非要实现多个空格的效果咋办呢？这里需要用到HTML编码，HTML编码就可以将很多的特殊字符给显示出来！
4.HTML编码的书写都是有规律的，HTML编码都是以&开头，以;结尾，中间的这部分叫做HTML编码，举例：
HTML编码
空格
< <
> >
当然还有其它的，可以参考W3SCHOOL文档，至于回车我们可以使用<br>标签来代替！
单标签：<meta> <br> 换车 <hr> 分割线 <img> 图片
5.下面讲到的都是成组出现的
<ol><li></li></ol> :ol表示Ordered List【有序列表】; li表示List Item!【列表项】
1 <ol type="1" start="2"> 2 <li>marvel</li> 3 <li>速8</li> 4 <li>返老还童</li> 5 <li>战狼2</li> 6 </ol>
上面的ol的type属性可以有以下几个选择：
①.阿拉伯数字【1】
②.大小写英文字母【a或A】
③.罗马数字【i或I】
start属性：表示这个列表是从几开始的，它的值就是阿拉伯数字！
总结，属性值就这么几个[1/i/I/a/A],注意有些同学说老师，我这里用2可以代替1不，答案：不可以，必须这么写！
下面还要讲到一个非常有用的标签：无序列表<ul><li></li></ul>：
ul:UnOrdered List; li:List Item；
这个无序列表非常有用，经常在开发中使用！如下所示：
1 <ul type="disc"> 2 <li>橘子</li> 3 <li>苹果</li> 4 <li>香蕉</li> 5 </ul>
ul标签就一个属性type,该type属性值就有三个：disc[discircle,实心圆]、square[实心方框]、circle[空心圆]
有很多的需求都是需要ul和li这种父子结构的，比如说：有一大功能都是由多个功能子项组成，而且每个功能子项基本上都是相同的，只不过内容可能是不同的，这很多的子项就组成了一个大功能,这样的功能我们尽量使用ul和li来展示，这更符合他天生的结构！比如一个书柜，都是由多个小隔间组成的，多个小隔间都是很类似的，只不过不同的隔间中装的内容不一样，这些隔间和大书柜之间的关系就和我们这里的ul及li差不多！再开发中最常用的和我们这个书柜差不多的功能就是导航栏、导航栏就是由很多菜单项组成，而每一个菜单项的功能结构都很类似，这不过内容不一样，功能和展现形式都差不多，这样的菜单项就组成了一个导航栏，这样的结构我们更加适合用ul和li来展示，因为他们的父子结构和ul及li的结构天生就很配！案例如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 *{ 8 margin:0px; 9 padding:0px; 10 } 11 ul{ 12 list-style:none; 13 } 14 li{ 15 margin:0px 10px; 16 float:left; 17 font-weight:bold; 18 color:#f40; 19 font-size:14px; 20 height:25px; 21 line-height:25px; 22 } 23 24 li:hover{ 25 background-color:#f40; 26 color:#fff; 27 border-radius:10px; 28 } 29 </style> 30 </head> 31 <body> 32 <ul type="circle"> 33 <li>天猫</li> 34 <li>聚划算</li> 35 <li>天猫超市</li> 36 </ul> 37 </body> 38 </html>
6.img加载图片的标签，img标签由几个属性：
alt:表示当图片加载不出来的时候，显示的内容是啥，通常这里我们会给出一个提示信息,alt也被称为图片站位符！
title:当鼠标移动到图片上面的时候，在图片上会有一个小角标提示，我们浏览网站的时候会偶尔看到这种功能，但
凡是这种功能都是用title实现的,也被称为图片提示符！
src：表示的是加载的图片的地址，该地址分为三种类型：
①.url网络地址：
②.本地绝对路径
③.本地相对路径
代码如下所示：
1 <img alt="图片未加载完毕" src="http://edu-image.nosdn.127.net/a070eb60-eca4-463b-8cd5-8958897a37c8.jpg?imageView&quality=100"/> 2 <img alt="图片未加载完毕" src="C:\Users\Administrator\Desktop\1.png"/> 3 <img alt="图片未加载完毕" src="1.png"/>
7.a标签，该标签的属性介绍如下：
href[全称HyperText Reference超文本引用/参考]:值为超链接要跳转或指向的地址
1 <a href="http://www.baidu.com">www.baidu.com</a>
这个a标签的功能很强大，它可以嵌套任何标签，例如:在a标签内部嵌套一个图片，那么这个图片就有了被引用的功能，也就是只要你一点击到这个图片的任何一个地方，他都会跳转到a标签超链接对应的地址，当然a标签里面放别的也可以，例如放文字、图片、css样式都可以，所以a标签套谁都好使！
1 <a href="http://www.baidu.com" style="width:100px;height:100px;background-color:red;display:block;"></a>
以上代码就是存放的CSS样式!
当然a标签还有target属性，该属性规定在何处打开链接文档：可选值：
- _blank
- _parent
- _self
所以a标签第一层含义是超链接，然后a标签还有一个功能是锚(anchor)的意思，也就是锚点的意思!举例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 *{ 8 margin:0px; 9 padding:0px; 10 } 11 ul{ 12 list-style:none; 13 } 14 li{ 15 margin:0px 10px; 16 float:left; 17 font-weight:bold; 18 color:#f40; 19 font-size:14px; 20 height:25px; 21 line-height:25px; 22 } 23 24 li:hover{ 25 background-color:#f40; 26 color:#fff; 27 border-radius:10px; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="demo1" style="width::100px;height:100px;background-color:red;">demo1</div> 33 <br> 34 <br> 35 <br> 36 <br> 37 <br> 38 <br> 39 <br> 40 <br> 41 <br> 42 <br> 43 <br> 44 <br> 45 <br><br><br><br> 46 <div id="demo2" style="width:100px;height:100px;background-color:green;"></div> 47 <br> 48 <br> 49 <br> 50 <br> 51 <br> 52 <br> 53 <br> 54 <br> 55 <br> 56 <br> 57 <br> 58 <br> 59 <br> 60 <br> 61 <br> 62 <br> 63 <br> 64 <br> 65 <br> 66 <br> 67 <br> 68 <br> 69 <br> 70 <br> 71 <br> 72 <br> 73 <br> 74 <br> 75 <br> 76 <br> 77 <br> 78 <br> 79 <br> 80 <br> 81 <br> 82 <a href="#demo1">find first div</a> 83 <a href="#demo2">find second div</a> 84 </body> 85 </html>
这个锚点在生活中我们浏览文章的时候最典型的应用就是：置顶！以及我们访问网页的时候，有的时候左边是一个目录，右边是目录各个章节的文字说明，我们点击哪个目录，然后鼠标就会直接跳转到该目录所对应的章节，这其实也是a标签锚点作用[文件连续页]！
案例演示：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 *{ 8 margin:0px; 9 padding:0px; 10 } 11 ul{ 12 list-style:none; 13 } 14 li{ 15 margin:0px 10px; 16 float:left; 17 font-weight:bold; 18 color:#f40; 19 font-size:14px; 20 height:25px; 21 line-height:25px; 22 } 23 24 li:hover{ 25 background-color:#f40; 26 color:#fff; 27 border-radius:10px; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="demo1" style="width::100px;height:100px;background-color:red;">demo1</div> 33 <br> 34 <br> 35 <br> 36 <br> 37 <br> 38 <br> 39 <br> 40 <br> 41 <br> 42 <br> 43 <br> 44 <br> 45 <br><br><br><br> 46 <div id="demo2" style="width:100px;height:100px;background-color:green;"></div> 47 <br> 48 <br> 49 <br> 50 <br> 51 <br> 52 <br> 53 <br> 54 <br> 55 <br> 56 <br> 57 <br> 58 <br> 59 <br> 60 <br> 61 <br> 62 <br> 63 <br> 64 <br> 65 <br> 66 <br> 67 <br> 68 <br> 69 <br> 70 <br> 71 <br> 72 <br> 73 <br> 74 <br> 75 <br> 76 <br> 77 <br> 78 <br> 79 <br> 80 <br> 81 <br> 82 <a style="display:block;position:fixed;bottom:100px;right:100px; border: 1px solid black;height:50px;width:200px;background-color:#fcc;" href="#demo1">find first div</a> 83 <a style="display:block;position:fixed;bottom:150px;right:100px; border: 1px solid black;height:50px;width:200px;background-color:#ffc;" href="#demo2">find second div</a> 84 </body> 85 </html>
超链接的第三个功能,像美团，饿了么等外卖有一个电话的小图标，只要我们一点击就能将电话打出去，实际上也是靠a标签来实现的！如下所示：
1 <a href="tel:18301099961">打电话！</a>
同理：a标签还可以用来发送邮件，如下所示：
1 <a href="mailto:liuhui68888@163.com">邮箱！</a>
最后：a标签还有个功能：协议限定符，如下所示,下面这是个整人的东西，慎用：
1 <a href="javascript:while(1){alert('叫你手欠')}">点我，come on 来啊</a>
我把协议限定符改为javascript:然后就可以在后面写javascript代码了,这个技术一般是黑客或者做标签标记的时候使用！
所以，综上：a标签一共有四种功能：
①.超链接
②.锚点
③.打电话、发邮件
④.协议限定符
8.表单标签
如下是一个登录框的书写：
1 <form action="#"> 2 <p> 3 username:<input type="text" name="username" value="请输入用户名" style="color:#999" 4 onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" 5 onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"/> 6 </p> 7 <p> 8 password:<input type="text" name="password"/> 9 </p> 10 <input type="text" value="Login"/> 11 </form>
总结一下HTML标签：
实际上在公司中开发将HTML标签主要分为三类:
①.行级元素【内联、inline】
特点：
1.不独占一行，内容觉得所占位置大小
2.不可以通过CSS样式改变宽和高
常见的行级元素有：span、strong、em、del、a
②.块级元素【block】
特点：
1.独占一行
2.可以通过CSS样式改变宽和高
常见的块级元素有：div、ul、ol、p、form、address
③.行级块元素【inline-block】
特点：
1.内容绝对大小
2.可以改宽和高
常见的行级块元素：<img>标签
实际上，上面的这三种标签本质还是由CSS属性控制的，在CSS中有个属性叫:display,该属性值为：inline、block、inline-block,
所以从这里你应该就知道无论是行级元素、块级元素、以及行级块元素实际上都是有默认值的,如下所示：
<style type="text/css">
span{
display: inline;/*行级元素默认属性值*/
}
div{
display:block;/*块级元素默认属性值*/
}
img{
display: inline-block;/*行级块元素默认属性值*/
}
</style>
再换句话说：难道你有自己的默认样式，我就不能给你改一下么？可以的，如下所示：
1 <style type="text/css"> 2 span{ 3 display: block; 4 } 5 </style> 6 </head> 7 <body> 8 <span>124</span> 9 <span>124</span> 10 </body>
这样，就会看到我们也可以将span转换成了块级元素！当然也可以将一个块级元素转换为一个行级元素，转换之后再设置宽和高也不好使，如下所示：
1 <style type="text/css"> 2 div{ 3 display: inline; 4 width:100px; 5 height:100px; 6 background-color:red; 7 } 8 </style> 9 </head> 10 <body> 11 <div>123</div> 12 <div>123</div> 13 </body>
注意：去公司开发的时候，基本上有两种实现思路：
第一种：先写html代码，每写一个html代码，就去将其对应的css样式设置好！【这种也被称为是小白级别的】
第二种：先定义功能【在整个页面确定了就几种颜色或盒子大小的情况下，先定义CSS】，然后再写HTML代码
的时候用到谁就选谁组合一下就OK了，而且这种定义好的功能【CSS】除了自己用别人也可以用！
如下所示：我们看一下第二种方式【公司基本上使用这种开发方式】：
先定义好功能【写好CSS样式】:
<style type="text/css">
.red{
background-color: red;
}
.green{
background-color: green;
}
.gray{
background-color: gray;
}
.size1{
width:100px;
height:100px;
}
.size2{
width:200px;
height:200px;
}
.size3{
width:300px;
height:300px;
}
</style>
如上所示，已经定义好了功能：然后我们就可以写HTML代码了，在用到CSS文件的时候，只需要引入相应的功能即可，如下所示：
1 <body> 2 <div class="red size1"></div> 3 <div class="green size2"></div> 4 <div class="gray size3"></div> 5 </body>
这样我们在用到什么样式的时候，css文件中直接选择就可以了,可以任意选配各种CSS样式组合！而且还有个好处，比如有三个页面，这三个页面都用到了导航栏，你会发现成员A去开发导航栏1，成员B去开发导航栏B，成员C去开发导航栏C这样无一例外每个人都开发一个导航栏会耽误很多功夫，这时候技术经理就说了，成员A你去开发一个导航栏的CSS功能，其它成员如果想要开发导航栏功能，只需要将你写的这个写导航栏的CSS文件引入，引入完之后将对应的class样式加在自己的DIV【其它元素】上就OK了,而且我们可以在我们的页面中引入多个CSS文件，当然通常只有一个是自己的CSS文件主包【自定义的CSS文件】，剩下的那10多个CSS文件都是前人们写好的工具库，直接拿过来用就OK了！而且这符合团队开发、模块化开发的流程也就是：你写过的东西就不要让我再写了！
再给大家强调一点：标签选择器除了可以选择相应的标签之外，更大的功能是将系统自带的标签进行一个初始化操作，也就是说我们不一定非要使用系统自带标签原来的含义，我们可以改变它原来的功能，例如em标签原意是斜体，但是我们可以将它的原意改成适合我们项目开发的标签，例如：我可以将系统自带的em标签改成如下所示：
1 <style type="text/css"> 2 em{ 3 font-style: normal; 4 color:#c00 5 } 6 </style> 7 </head> 8 <body> 9 <em>23</em> 10 </body>
这样23就不是斜体的了，而是红色、正常显示的字体了!与这个类似的是a标签【超链接】，现在大家见到的基本上都不是蓝颜色、有下滑线的a标签，而是a标签被修改了系统自带的值，如下所示：
1 <style type="text/css"> 2 a{ 3 text-decoration: none; 4 color:#424242; 5 } 6 </style> 7 </head> 8 <body> 9 <a href="#">超链接</a> 10 </body>
同样，系统ul本身自带的数字，间距、空格我们也可以改变，现在基本上是如下使用：
1 <style type="text/css"> 2 ul{ 3 list-style: none; 4 padding:0; 5 margin:0; 6 } 7 </style> 8 </head> 9 <body> 10 <ul> 11 <li>1</li> 12 <li>2</li> 13 <li>3</li> 14 </ul> 15 </body>
注意：list-style属性就ul标签和ol标签有，以上这几种形式，我们称之为初始化标签！
再近一步，很多标签一出生就带来了很多的默认样式，例如：几乎所有的标签都会带着padding和margin属性，如ul 、p、div等都带有这些值，这些值不见得就是我们想要的，我们想要的东西可能我们可以自己去设置，而基本上所有的标签都带有这个东西，所以一开始我们基本上都给这些标签将他们的margin和padding都给去掉，怎么去呢？用分组选择器或者*[通配符]都可以！我们通常情况下使用的是*(通配符)选择器，因为通配符选择器的权重值为0,0就非常好，0代表我给你初始化好了，你随便写个选择器你就能更改，我的权重是0，你设置成啥就是啥，不会影响到你，而且设置的范围是所有的标签【范围广】，所以通配符选择器是初始化标签最好的一种方式！所以有的时候你经常会看到*通配符会这样写：
1 <style type="text/css"> 2 *{ 3 padding:0; 4 margin:0; 5 text-decoration: none; 6 list-style: none;/*只有ol和ul有这个属性，别的标签本来就没有，设置了也没问题*/ 7 } 8 </style>
而且在公司中开发的时候，一般css文件上边是初始化样式，下边是定义功能！
