<1>html概述及html文档基本结构
1、html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
ps:l超文本指的是超链接，标记指的是标签。
2、html文档基本结构
<!DOCTYPE html> <!--第一行是文档声明-->
<html lang="en"> <!--语言：英语-->
<html> <!--二行“<html>”标签和最后一行“</html>”定义html文档的整体-->
<head>
<!--“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏.-->
“<head>”标签和“<body>” <!--标签是它的第一层子元素 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--显示比例-->
<meta charset="UTF-8"> <!--编码格式-->
<title>网页标题</title>
</head>
<body> <!--“<body>”内编写网页上显示的内容-->
网页显示内容
</body>
<!--“<head>”标签和“<body>”标签是它的第一层子元素-->
</html>
3、web前端技术及web标准
（1）html: 标签.（结构标准）
（2）css: 漂亮.（样式标准/表现标准）
（3）javascript: 动作.（行为标准）
<2>html标签入门
1、标签的的使用方法
（1）双闭合标签
<h1>致青春</h1>
<p>怀念啊我的青春</p>
（2）单闭合标签
你好！<br>
（3）带属性的标签
<img src="images/1.jpg" alt="该照片不存在" width = 100px >
<a href="http://www.baidu.com" target="_blank">林志玲</a>
（4）标签的嵌套
<div>
<p>
我是盒子
</p>
</div> <!--div——相当于收纳盒，更加美观，操作简便-->
2、html标签元素
（1）块元素
块元素在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。
常用块元素标签
1>标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小
<h1>一级标题</h1> <!--h1 常用于网站logo,h1 到 h6-->
2>段落标签，表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距
<p>实现自身价值</p>
3>通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式
<div>这是一个div元素</div>
（2）内联元素
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。
常用内联元素标签
1>超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线
<a href="02.html">第二个网页</a>
<!--a链接 target=“_blank”跳转新的页面打开,herf = '#' ——跳转到页面最顶端（点击后不跳转）-->
2>通用内联容器标签，具有内联元素基本特性，没有其他默认样式
<span>我是span1</span><span>我是span2</span><span>我是span3</span>
3>图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。
<img src="images/pic.jpg" alt="图片" />
（3）常用html字符实体
<!--在段落前想缩进两个文字的空格，使用空格的字符实体：-->
< <!--小于 '<' -->
> <!--大于 '>'-->
<3>css介绍
1、css概述
CSS是( Cascading Style Sheets )层叠样式表
2、css基本语法
选择器是将样式和页面元素关联起来的名称。语法格式：选择器 { 属性：值； 属性：值； 属性：值；}
3、css引入方式
1、内联式：通过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; background:red ">......</div>
2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style>
样式表
</style>
3、外链式：通过link标签，链接外部样式文件到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
4、html布局
（1）网页布局原理
标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。
（2）标签语义化
在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。
带语义的标签
1、h1~h6：标题标签
2、p：表示段落
3、img：表示图片
4、a：表示链接
不带语义的标签
1、div：表示一块内容
2、span：表示行内的一块内容
5、css选择器
（1）标签选择器
标签选择器，此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
（2）类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
（3）层级选择器
子代选择器 div>p
后代选择器 div span
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
6、css属性
（1）布局常用样式属性：
| 样式属性 | 概述 |
|---|---|
| width | 设置元素(标签)的宽度，如：width:100px; |
| height | 设置元素(标签)的高度，如：height:200px; |
| background | 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色 |
| background-color | |
| border | 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线 |
| border-top | 设置顶边边框，如：border-top:10px solid red; |
| border-left | 设置左边边框，如：border-left:10px solid blue; |
| border-right | 设置右边边框，如：border-right:10px solid green; |
| border-bottom | 设置底边边框，如：border-bottom:10px solid pink; |
| padding | 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。 |
| margin | 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。 |
| float | 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right; |
（2）文本常用样式属性一：
| 样式属性 | 概述 |
|---|---|
| color | 设置文字的颜色，如： color:red; |
| font-size | 设置文字的大小，如：font-size:12px; |
| font-family | 设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’; |
| font-weight | 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗700 == blod ，100-700 |
| line-height | 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px |
| text-decoration | 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 |
| text-align | 设置文字水平对齐方式，如text-align:center 设置文字水平居中 |
| text-indent | 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px |
| text-indent:2em | 缩进两个字符 |
| text-indent：-9999em | 设置logo时使用（供开发人员使用） |
（3）小标签：
<i>i</i> <em>em</em> <!--倾斜-->
<s>s</s> <del>del</del> <!--删除像-->
<u>u</u> <ins>ins</ins> <a href="#">a</a> <!--下划线:-->
<b>b</b> <strong>strong</strong> <!--加粗:-->