前端
1.了解html的结构
head标签中的内容一般不会显示在网页上，其作用
网页的设置
资源的引用
body中的内容通常用于网页显示
2.标签的了解
有成对的标签
<html> <head> <body> <title> <ul> <li> <a> 这样的标签是
单个的标签
<meta> <hr> <img> 这样的标签是单个的
标签的嵌套
标签的属性
标签的分类
块元素 (行元素)
块元素的特点：
- 单个块元素在浏览器中默认独占一行
- 两个块元素不能够在一行显示, 他们会自动换成两行显示
- 块元素可以设置宽高等属性.
内联元素 (行内元素)
内联元素的特点：
- 多个内联元素可以在一行显示
- 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
- 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.
一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.
3.块元素标签
1. 标题标签：h
<h1>一级标题</h1>....<h6>六级标题</h6>
2.段落标签: p
表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距
3. 通用块容器标签： div
表示文档中一块内容, 具有块元素基本特性, 没有其他默认样式
注意：p 标签不能嵌套 div
嵌套规则
块级元素 可以包含内联元素或某些块级元素, 但是内联元素不能包含块级元素,它只能包含其他内联元素
4.常用内联元素标签
1.超链接标签 a
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
- a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:
- 不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
- 如果想要跳转到当前页面的最上方时, 可以使用 #
- a 标签有 target 属性
- 如果不设置该属性, 在当前页面打开新页面
- 如果设置该属性, 则会在新窗口中打开新页面
2.通用内联容器标签 span
具有内联元素基本特性, 没有其他默认样式
span是一个行内元素通常用于p标签内部,个别文字设置时使用.
例如，<span>特殊标志或者样式</span>
3. 图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
例如，<img src="./images/pic.png" alt="图片">
- src属性主要是添加要展示的图片地址
- alt属性的作用:
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.
5.特殊一些标签
空格: 在html中, 空格一般会用: 表示
回车: 在html中回车换行一般用<br>表示
小于号( < ): 在html中一般用<表示
大于号( > ): 在html中一般用>表示
删除标签: del 或者 ( s )
倾斜标签: em 或者 ( i )
下划线标签: ins 或者 ( u )
字体变粗: strong 或者 b
6.CSS
6.1 CSS使用格式
选择器 {
属性：值；
属性：值；
}
外联式:
例如：，直接命名一个css文件，在里面直接写，例如,p {}
<link rel="stylesheet" type="text/css" href="css/样式文件名.css">
通过 style 标签, 在网页上创建嵌入的样式表.
<head> <style> div {} </style> </head>
6.2 CSS的四种基本选择器
通用选择器 ( * )
通用选择器, 匹配任何元素:
标签选择器 ( 标签名 )
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
例如，div {}
类选择器 ( class )
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类
应用灵活, 可复用, 是css中应用最多的一种选择器
例如，.blue {} <div class="blue"></div>
id 选择器 ( id )，唯一性
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
6.3 CSS 组合选择器
多元素选择器
同时匹配所有 E元素 和 F元素, E和F之间用逗号分隔:
例如，E，F {}， .box,p {}
后代选择器(层级)
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
例如， E F {} 例如，div p {}
子元素选择器
E > F 匹配所有 E元素的 子元素F
例如，E > F {}, 例如，div > p {}
兄弟选择器
匹配所有紧随 E元素 之后的同级元素F (向下寻找)
例如， E + F {}, 例如， .box + div {}
6.4 CSS 属性选择器
属性选择器
[] {}
伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态
例如，CSS部分:
<style>
.box1 {
width:100px;
height:100px;
background:gold;
}
.box1:hover {
width:300px;
}
</style>
浮动 float
我们有时候为了让一行能够显示多个元素, 会设置元素的float属性
内边距
padding-top padding-left
注意：在加边框时，是在原先框的外边加
解题思路：先设计板块,把整个板块分成若干个小版块，然后依次在板块里面填需要填的信息
