（一）元素（标签）
1、<p>
1.1段落标签，会换行。
2、<h1-h6>
2.1标题标签，会换行，有自己的样式。
3、<span>
3.1小元素标签，不会换行，显示的文字效果与p标签相同。
4、<a>
4.1超链接标签，不换行，下划线，独特的字体颜色，可以点击，点击后会跳转。
4.2可以跳转到在线的网页：注意：记得复制https、http；可以跳转到本地，填相对路径：相对于自身的位置出发去找到对应的文件。
4.3../ 返回上一级
6、图片标签
6.1单标签，不换行
5、标签的语法：<标签名 属性1="属性值1" 属性2="属性值2"></标签名>
（二）文档流（块级元素、行内元素）和脱离文档流（行内块元素）
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
1、display:inline;转换为行内（内联）元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
1.1设置宽高无效
1.2对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
1.3不会自动进行换行
2、display:block;转换为块级元素
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
2.1能够设置宽高
2.2margin和padding的上下左右均对其有效
2.3自动换行，多个块级元素标签写在一起，默认排列方式为从上至下
3、display:inline-block;转换为行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
3.1能够设置宽高
3.2不自动换行，默认排列方式为从左到右
（三）列表
列表分三种：有序列表、无序列表和自定义列表。
无序列表标签：<ul><li></li></ul>;
有序列表标签：<ol><li></li></ol>;
ul或者ol的子集只能是li li的父级只能是ul或者ol。
（四）css
CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。
目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。
css引入方式有三种：内嵌式、外链式和行内式
1、内嵌式:在head标签中,输入一个style标签.并把样式属性写在style标签内
2、外链式:link标签：链接CSS文件,引入外部样式,href属性中,填入相对路径
3、行内式：在标签属性的位置,加一个style属性,值样式属性填
优先级：行内式最大，其次内嵌式和外链式。同一元素属性存在外链式和内嵌式中时，因外链式和内嵌式同级，所以写在<head></head>里面时，先后写的生效。
（五）URL
HTML 统一资源定位器(Uniform Resource Locators)。
图片来源于www.w3cschool.com
（六）HTML布局
HTML布局使用<div>元素布局。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div id="container" style="500px"> 6 7 <div id="header" style="background-color:#FFA500;"> 8 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> 9 10 <div id="menu" style="background-color:#FFD700;height:200px;100px;float:left;"> 11 <b>Menu</b><br> 12 HTML<br> 13 CSS<br> 14 JavaScript</div> 15 16 <div id="content" style="background-color:#EEEEEE;height:200px;400px;float:left;"> 17 Content goes here</div> 18 19 <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 20 Copyright © W3Cschools.com</div> 21 22 </div> 23 24 </body> 25 </html>
代码来源于www.w3cschool.com
Tip:使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
Tip:由于创建高级的布局非常耗时，使用模板是一个快速的选项。
练习：淘宝导栏行
1 <div class="first"> 2 <ul class="one"> 3 <li class="a"><a href="https://www.tmall.com/" class="a" target="_blank">天猫</a></li> 4 <li class="b"><a href="https://ju.taobao.com/" class="b" target="_blank">聚划算</a></li> 5 <li class="c"><a href="https://chaoshi.tmall.com/"class="c" target="_blank">天猫超市</a></li> 6 <li class="pipe">|</li> 7 <li class="d"><a href="https://qiang.taobao.com/" class="d" target="_blank">淘宝抢</a></li> 8 <li class="e"><a href="https://3c.tmall.com/" class="e" target="_blank">电器城</a></li> 9 <li class="f"><a href="https://sf.taobao.com/" class="f" target="_blank">司法拍卖</a></li> 10 <li class="g"><a href="https://good.tmall.com/" class="g" target="_blank">淘宝心选</a></li> 11 <li class="h"><a href="https://www.taobao.com/markets/xt/znfp" class="h" target="_blank">兴农扶贫</a></li> 12 <li class="pipe">|</li> 13 <li class="i"><a href="https://www.fliggy.com/?spm=a21bo.50862.201859.9.28689e73wh3bzS/" class="i" target="_blank">飞猪旅行</a></li> 14 <li class="j"><a href="https://yun.taobao.com/" class="j" target="_blank">智能生活</a></li> 15 <li class="k"><a href="https://suning.tmall.com/" class="k" target="_blank">苏宁易购</a></li> 16 </ul> 17 </div>
1 /*div标签*/ 2 .first{ 3 width: 1349px; 4 height: 31px; 5 background: #FF6600; 6 } 7 /*ul标签*/ 8 .one{ 9 width: 1190px; 10 height: 30px; 11 border: 1px solid #f60; 12 list-style: none; 13 overflow: hidden; 14 } 15 /*li标签*/ 16 .one .a{ 17 width: 51px; 18 height: 30px; 19 float: left; 20 } 21 .one .b{ 22 width: 67px; 23 height: 30px; 24 float: left; 25 } 26 .one .c{ 27 width: 76px; 28 height: 30px; 29 float: left; 30 } 31 .one .d { 32 width: 53px; 33 height: 30px; 34 float: left; 35 } 36 .one .e { 37 width: 53px; 38 height: 30px; 39 float: left; 40 } 41 .one .f { 42 width: 67px; 43 height: 30px; 44 float: left; 45 } 46 .one .g { 47 width: 67px; 48 height: 30px; 49 float: left; 50 } 51 .one .h { 52 width: 67px; 53 height: 30px; 54 float: left; 55 } 56 .one .i { 57 width: 67px; 58 height: 30px; 59 float: left; 60 } 61 .one .j { 62 width: 67px; 63 height: 30px; 64 float: left; 65 } 66 .one .k { 67 width: 67px; 68 height: 30px; 69 float: left; 70 } 71 /*a标签*/ 72 .one .a .a{ 73 width: 43px; 74 height: 30px; 75 text-align: center; 76 line-height:30px; 77 color: #fff; 78 text-decoration: none; 79 font-weight: 700; 80 } 81 .one .b .b{ 82 width: 59px; 83 height: 30px; 84 text-align: center; 85 line-height:30px; 86 color: #fff; 87 text-decoration: none; 88 font-weight: 700; 89 } 90 .one .c .c{ 91 width:76px; 92 height: 30px; 93 text-align: center; 94 line-height:30px; 95 color: #fff; 96 text-decoration: none; 97 font-weight: 700; 98 } 99 .one .d .d{ 100 width: 53px; 101 height: 30px; 102 text-align: center; 103 line-height:30px; 104 color: #fff; 105 text-decoration: none; 106 font-weight: 700; 107 } 108 .one .e .e{ 109 width: 53px; 110 height: 30px; 111 text-align: center; 112 line-height:30px; 113 color: #fff; 114 text-decoration: none; 115 font-weight: 700; 116 } 117 .one .f .f{ 118 width: 67px; 119 height: 30px; 120 text-align: center; 121 line-height:30px; 122 color: #fff; 123 text-decoration: none; 124 font-weight: 700; 125 } 126 .one .g .g{ 127 width: 67px; 128 height: 30px; 129 text-align: center; 130 line-height:30px; 131 color: #fff; 132 text-decoration: none; 133 font-weight: 700; 134 } 135 .one .h .h{ 136 width: 67px; 137 height: 30px; 138 text-align: center; 139 line-height:30px; 140 color: #fff; 141 text-decoration: none; 142 font-weight: 700; 143 } 144 .one .i .i{ 145 width: 67px; 146 height: 30px; 147 text-align: center; 148 line-height:30px; 149 color: #fff; 150 text-decoration: none; 151 font-weight: 700; 152 } 153 .one .j .j{ 154 width: 67px; 155 height: 30px; 156 text-align: center; 157 line-height:30px; 158 color: #fff; 159 text-decoration: none; 160 font-weight: 700; 161 } 162 .one .k .k{ 163 width: 67px; 164 height: 30px; 165 text-align: center; 166 line-height:30px; 167 color: #fff; 168 text-decoration: none; 169 font-weight: 700; 170 } 171 /*pipe*/ 172 .one .pipe{ 173 width: 5px; 174 height: 30px; 175 float: left; 176 color: #fff; 177 text-align: center; 178 line-height:30px; 179 }
（七）盒子模型
盒子模型：
1、内容 宽度（width）和高度（height）
2、内边距（内填充） padding 内容到边框的距离
3、边框 boder
4、外边距 距离其他盒子的距离 代表四个方向
练习：做一个回字形的图案
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 border:3px solid black; 11 } 12 p{ 13 width: 100px; 14 height: 100px; 15 border:1px solid black; 16 margin:49px; 17 } 18 </style> 19 </head> 20 <body> 21 <h1> 22 <p></p> 23 </h1> 24 <!--p标签不能被文本类的标签作为子集--> 25 </body> 26 </html>
练习：运用p标签的盒子模型，做出一个三角形 transparent透明色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 p{ 8 width: 0px; 9 height: 0px; 10 border-top:200px solid transparent; 11 border-bottom:200px solid black; 12 border-left:200px solid transparent; 13 border-right:200px solid transparent; 14 } 15 </style> 16 </head> 17 <body> 18 <p></p> 19 </body> 20 </html>
（八）居中
1、文字的水平居中
也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。利用line-height设为height的一样即可。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 .wrap{ 9 line-height: 200px;/*垂直居中关键*/ 10 text-align:center; 11 height: 200px; 12 font-size: 36px; 13 background-color: #ccc; 14 } 15 </style> 16 <body> 17 <div class="wrap">Hello World!</div> 18 </body> 19 </html>
2、padding填充
利用padding和background-clip配合实现div的水平垂直居中；通过background-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，来实现：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .parent{ 8 margin:0 auto; 9 width:200px; 10 height:200px; 11 background-color:red; 12 } 13 .children { 14 width: 100px; 15 height: 100px; 16 padding: 50px; 17 background-color: black; 18 background-clip:content-box;/*居中的关键*/ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="parent"> 24 <div class="children"></div> 25 </div> 26 </body> 27 </html>
3、绝对定位居中
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。父容器元素：position: relative。
1 .Absolute-Center { 2 50%; 3 height: 50%; 4 overflow: auto; 5 margin: auto; 6 position: absolute; 7 top: 0; left: 0; bottom: 0; right: 0; 8 }
注意：高度必须定义，建议加 overflow: auto，防止内容溢出。
（九）浮动
1、float属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
2、float的可能值为：left或right或none。
2.1 left - 使左边缘接触包含块的左边缘或另一浮动块的右边缘。
2.2 right - 使右边缘接触包含块的右边缘或另一浮动块的左边缘。
2.3 none - 元素不浮动。
浮动影响：让元素水平排列，父级高度变成0 解决办法：给父级加一个overflow:hidden;浮动后，元素脱离文档流，变成行内块元素。
此元素浮动，同级的元素也要浮动，否则容易造成页面结构混乱。
4、清除浮动
4.1clear：（left、right、both、none）。
（十）颜色
颜色赋值方式
1、第一种 直接打颜色的英文单词
2、第二种:十六进制 1六位数 2三位数
3、第三种：rgb(红，绿，蓝)
4、第四种：rgba(r,g,b,a) a指的是透明度 值的范围0-1 1代表不透明