1.HTML

　　1.1 文档结构

　　1.2 head标签

　　1.3 body标签

　　　　1.3.1 h1-h6标签

　　　　1.3.2.br标签:换行

　　　　1.3.3.hr标签:一行横线

　　　　1.3.4 a标签:超链接标签

　　　　1.3.5 img标签:图片标签

　　　　1.3.6 div标签和span标签

　　　　1.3.7 p标签:上下有边距

　　　　1.3.8 ul标签和ol标签:列表标签

　　　　1.3.9 dl标签(了解)

　　　　1.3.10 table标签:表格标签(重点)

　　　　1.3.11 from标签:表单标签

　　　　1.3.12 input标签:输入框

　　　　1.3.13 select标签:下拉框标签

　　　　1.3.14 textarea标签:多行文本输入框

2.CSS

　　2.1 CSS样式引入方式

　　2.2 CSS选择器

　　　　2.2.1 元素选择器

　　　　2.2.2 id选择器

　　　　2.2.3 类选择器

　　　　2.2.4 属性选择器

　　　　2.2.5 后代选择器

　　　　2.2.6 组合选择器(逗号连接)

HTML：超文本标记语言

文档结构

三味书屋欢迎你

head标签

1.meta文档字符编码

这是一个网页

2.meta页面刷新

这句话有七个字

3.meta关键字

<!-- 设置关键字，用于搜索引擎收录和关键字收索 -->  
<meta name="keywords" content="数学，语文，英语" />

这还是一个栗子

4.meta设置网站描述信息

<!-- 设置网站描述信息，用于在搜索引擎搜索时，显示网页基本描述信息-->  
<meta name="description" content="我们这什么书都有">  

这是一个三味书屋

5.meta触屏播放

<!--支持触屏缩放-->  
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

<!--不支触屏持缩放-->  
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->

<h1 style="width: 1500px;background-color: green;">咕叽咕叽！</h1>  

6.link图标

三味书屋欢迎你

7.head内部标签总结

三味书屋欢迎你

body标签

1.h1-h6标签

AAA

BBB

CCC

DDD

EEE

FFF

运行结果如下图所示

2.br标签:换行

AAA

BB
CC

运行结果如下图所示

3.hr标签:一行横线

AAA

---

BBB

运行结果如下图所示

4.a标签:超链接标签

1.不加href属性，就是普通文本显示

python

2.加上href属性，不给href属性赋值

python

3.加上href属性，并且给href属性赋值

python

要注意:

　　　跳转对应网址的页面

　　　未访问之前是蓝色的字体颜色

　　   访问之后是紫色的字体颜色

target属性:

　　_self:在当前标签页打开 href属性值的那个网址

　　_blank:在新的标签页打开 href属性值的那个网址

4.要a标签效果，但是不刷新或者跳转页面

校花网
校花网

5.设置瞄点

回到顶部

5.img标签:图片标签

src属性:图片路径 必须写

alt属性:图片加载失败或者正在加载时提示的内容

title属性:鼠标悬浮时显示的内容,不是img标签独有的

width:设置宽度

height:设置高度

6.div标签和span标签

div标签和span标签没有任何的修饰效果

标签分类:

　　块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li →块级标签能够包含内联标签,和某些块级标签

　　内联标签(行内标签):不独占一行,img\a\span →只能包含内联标签,不能包含块级标签

关于标签的嵌套:

　　块级标签能够设置高度宽度，能够嵌套某些块级标签和内敛标签，p不能嵌套块级标签，也不能嵌套p标签

　　内敛标签不能设置高度宽度，它的高度宽度由内容来决定，只能嵌套内敛标签

7.p标签:上下有边距

李博伦

8.ul标签和ol标签:列表标签

李博伦的爱好

• 抽烟
• 喝酒
• 烫头

c9h的爱好

2. 学习
3. 跑步
4. 吃饭

type属性：控制列表内容前面的效果的

start属性：是控制有序列表标签的起始值的

运行结果如下图所示

9.dl标签(了解)

吉林省

长春

四平

辽宁省

沈阳

大连

运行结果如下图所示

10.table标签:表格标签(重点)

名称	年龄	爱好
李博伦	18	coc
c9h	23	王者
ph	22	看书

也可以合并列和合并行

        </tr>  
        <tr>  
            <td>22</td>  
            <td>看书</td>  
        </tr>  
    </tbody>  
</table>  

运行结果如下图所示

11.from标签:表单标签

action属性: 指定提交路径,提交到哪里去

form表单作用:form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径

12.input标签:输入框

<!-- 单选框 -->  
性别  
<input type="radio" name="sex" value="1">男  
<input type="radio" name="sex" value="2">女

<!-- 多选框 -->  
喜欢的明星  
<input type="checkbox" name="hobby" value="1">张三  
<input type="checkbox" name="hobby" value="2">李四  
<input type="checkbox" name="hobby" value="3">王五

注意：选择框写的时候，尽量将name属性和value属性都写上

运行结果如下图所示

13.select标签:下拉框标签

性别
男 女

<!-- 多选 -->  
喜欢的明星  
<select name="star" multiple="multiple">  
    <option value="1">张三</option>  
    <option value="2">李四</option>  
    <option value="3">王五</option>  
    <option value="4">赵六</option>  
</select>

运行结果如下图所示

注意:这两种写法完全相同

14.textarea标签:多行文本输入框

运行结果如下图所示

CSS:称为层叠样式表

CSS样式引入方式

第一种:head标签引入

第二种:外部引入CSS文件

创建一个ceshi.css文件

第三种:内联样式

CSS选择器

1.元素选择器

2.id选择器

3.类选择器

4.属性选择器

<div id="d2" class="c1">  
    <span class="c2">这是span2</span>  
    <div>  
        <span>这是span4</span>  
    </div>  
</div>

<div id="d3" class="c1">  
    <span class="c2">这是span3</span>  
</div>

名称	年龄	爱好
李博伦	18	coc
c9h	国服第一帅