2021-07-24

一 、HTML
HTML:超文本标记（标签）语言。
超文本：文字、图片、动画、音频和视频、超链接和程序等。
1.html 结构
有三个部分人构成：
html、head、body
2.html标签
结构：html、head、body、title、meta
文章：h1~h6、p、br、em、strong
超链接：a
图片：img
布局：div、span
列表：ul、ol、li、dl、dt、dd
表格：table、tr、td、th
表单：form、input、select、option、textarea
二、HTML 基本标签及作用
1、标题标签
h1-h6， 格式

内容

通常对于一篇新闻文章会使用h1标签。
还有大型网站的首页logo会使用h1标签。
2.段落标签
作用：用来分隔内容，使内容调理清晰。
格式：

内容

还有一个和p有关的标签是br，表示换行，是一个单标签。
3.超链接标签及其属性
作用：用于链接其他资源，从而形成万维网。
格式：<a href=“target=” name="“title=”>内容
还有一个锚点链接。
4.图像标签及其属性
作用：用于显示图片
格式：<img src=“width=” height="alt=“title=”>
注意，img标签是人妖标签，可以设置宽高。
5.div和span
作用：用来组织划分结构
格式：

内容

内容
div它是一个占据一整行的分隔块，而span则是占据一行中的一部分的分隔块。
div的使用,用于分隔整个页面中的模块。
三.列表标签
1.无序列表
格式：

• 内容

作用：将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序，如购物清单。
2.有序列表
格式：

1. 内容

作用：用于将一组相关的列表项目在一起，列表中的项目有特别的先后顺序
3.定义列表
格式：

作用：用于显示名称及其对应的“值”，如术语及其定义，或时间及相对应的事件。
四.表格
1.表格的基本标签
table
tr
td
th
2.表格的基本属性：
width：宽度
height：高度
align：表格本身的对齐方式
bgcolor：背景颜色
border：边框
cellspacing:单元格之间的距离
cellpadding:单元格中的内容距离单元格边框的距离
td/th 的属性
width
height
bgcolor
align
rowspan：合并行
colspan: 合并列
五.表单
1.常见的表单元素 表单 输入框 和下拉列表 文本域 2.input：输入框 type=“text”单行文本输入框 type=“password”密码输入框 type="checkbox"复选框 type=“radio”单选框 type=“sumbit”将表单里的信息提交给表单属性action所指向的文件 type=“reset”将表单信息清空，重新填写 type=“button”按钮 type=“hidden”隐藏域 六.其他标签 1.em和strong 作用：用来强调某一个内容 格式： 内容

CSS

一.初始CSS
1.什么是CSS
层叠样式表，简称样式表。
作用：实现网页布局，美化网页
版本：css2和css3
2.引入css的三种方式
行内样式、内部样式、外部样式。
3.css选择器
（1）.基本选择器
a.类型选择器
也叫标签选择器，或叫元素选择器。
b.id选择器
要使用id选择器，需要分成两个步骤：
第一步，需要在对应的标签中的增加一个id属性
第二步，需要在css中，使用#id属性值
c.class选择器
class 是班级的意思，在计算机领域中还可以理解为类、类别。
叫类选择器，使用也是分为两步：
第一步，需要在对应的标签中设置 class 属性，并设置对应值
第二步，在 css 的规则中，使用 .+class 属性

注意：对于 class 的使用
所有的标签都可以添加 class 属性
对于不同的标签，他们需要有相同的样式，此时使用 class 比较合适
对于相同的标签，但是在页面中，特别的多，我只需要某一部分标签有额外的样式，也应该使用 class。
（2）.选择器用法
a.通配选择器
使用通配符，*，表示所有的标签（元素）。
b.分组选择器
在书写 css 的时候，有可能对两个不同的标签、class、id，设置相同的 css。
在 css 中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。
c.后代选择器
肯定会涉及到标签的一个嵌套（包含）。
d.伪类选择器
目前我们就掌握一个，最常用的，就是 a 标签的 hover 伪类。
hover，表示将鼠标放到 a 上面的这个状态。
a:hover
二.CSS排版初步
1.字体设置
font-family
font-size
color
font-style
font-weight
2.文本设置
(1).text-decoration
decoration:修饰
作用：用来设置文本的修饰线，有如下几种：
underline
overline
line-through
none
(2).text-indent
Indent 是缩进
作用：用来缩进文本的。
(3).text-align
align：对齐
作用：设置文本对齐的水平方式，通常有如下几种对齐方式：
left，是默认值
center
right
(4).line-height
作用：设置行高的。
3.关于CSS的继承性
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换
句话说，就是特定的 CSS 属性向下传递到子孙元素。
四.CSS布局
1.盒子模型概念
从日常生活中出发，
在我们的 HTML 中，所有的标签都是矩形的。围绕着整个矩形，我们可以使用一系列的属性
来控制它的显示外观。
有如下一些属性：
width: 宽度
height：高度
border：边框
padding：内边距 补白
margin：外边距 边界
background：背景
2.什么是盒子模型？
CSS 定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景颜色和背景图片），这就是盒模型。
（2）.盒模型中的属性的基本用法
a.width 和 height
它们表示元素的宽度和高度。不是指整个盒子所占据的空间。
在设置的时候，通常使用 px 来进行，如果要实现响应式，则可以使用百分比。
b.border 设置
border 有三部分构成
边框的粗细
边框的样式
边框的颜色
border-top
border-right
border-bottom
border-lef
c.padding
表示的内边距，或者补白。
所处的区域是指 border 和内容之间的那个空间。
五.层布局模型
1.定位类型
在 css 中，有三种布局模型：
流动布局，默认的
浮动布局，使用 float 来实现
层布局，使用 position 来实现的
在 css 中，有如下三种定位方式：
相对定位
绝对定位
固定定位
它们是通过 position 属性来实现的
有如下几个值：
relative，相对定位
absolute，绝对定位
fixed，固定定位
static，不定位，默认的流动布局，一般不会写