HTML 和 CSS 笔记

一、HTML 简介

1 什么是html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

2 浏览器内核（渲染引擎）

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

3 Web标准

由W3C 组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际著名的标准化组织。

3.1什么是Web标准

结构(Structure)：用于对网页元素进行整理和分类，主要指html

表现(Presentation)：用于设置网页元素的版式、颜色、大小等外观演示，主要指CSS

行为(Behavior)：指网页模型等定义及交互等编写，如JavaScript

最佳体验方案：结构、表现、行为相分离，即把结构写到html文件中，表现写到CSS文件中，行为写到JavaScript文件中

二、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 < b> 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 标签单标签是特殊标签，如
文件后缀名要为：.html

1 标签关系

双标签关系可以分为：包含关系和并列关系

1.1 包含关系

<html><head></head>
</html>

1.2 并列关系

<head></head>
<body></body>

2 基本结构标签

每个页面都有个基本的机构标签（也称为骨架标签），页面内容也是在这些基础标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	在head标签中我们必须设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放在body里面的
<!DOCTYPE html>	文档类型的声明	声明网页的版本

属性

定义标签的属性，属性与属性之间要空格，格式是：属性（key）=属性值(vA)

属性名	定义	说明	例子
lang	语言	用来定义显示的语言，en英文，zh-CN汉语	<html lang=“zh-CN”>
charset	定义编码	一般使用万国码：UTF-8	<meta charset=“UTF-8”>

3 常用标签

标签名	定义	说明
<h1> ～ <h6>	标题标签	定义1～6个等级的标题，标题标签独占一行，内容加粗
<p>	段落标签	paragraph段落，用于网页内容分段，网页中多个空格只会显示出一个
<br />	换行标签	强制换行，是个单标签
<!-- -->	注释标签	主要用于注释说明

3.1 内容格式化标签

标签名	定义	说明
strong>、<b>	加粗标签	把内容设置为加粗格式
<em>、<i>	倾斜标签	把内容设置为倾斜格式
<del>、<s>	删除线	把内容设置为删除线格式
<ins>、< u>	下划线	把文本设置为下划线格式

3.2 盒子标签

标签名	定义	说明
	没有语义	用来布局的盒子，用来装内容，div是区域，分区的作用，会跨行显示
	没有语义	用来布局的盒子，用来装内容，span 是跨度、跨距，多个span可以显示在一行

3.3 图像标签

标签名	定义	说明
<img src=“图像的URL” alt=‘图像说明’ title='图片气泡说明’/>	图像标签	src是必须要传递的属性，根据src属性给的URL或者路径读取图片文件，在网页上显示；alt替换文件名显示定义的内容，不是必须的；title属性上定义鼠标放在图片上的气泡内容，也不是必须的；

3.3.1 图像标签的属性

属性名	说明	属性类型
src	传递文件路径，必须	路径
title	气泡显示说明内容	文本
alt	定义文件名称	文本
width	宽度	像素
heigth	高度	像素
border	边框	像素

3.3.2 路径

相对路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src=‘Baidu.gif’
下一级路径	/	图像文件位于HTML文件的下一级如<src = ‘images/baidu.gif’>
上一级路径	…/	图像文件位于HTML文件的上一级如<src = ‘…/baidu.gif’>

绝对路径

绝对路径分类	说明
磁盘路径
网页地址

3.4 超链接标签

<a href="地址" target='打开方式'>文本</a>

属性名	定义	说明
href	链接	必须的属性，指定目标地址
target	打开方式	指定链接打开方式，默认_self是在原窗口地址打开，__blank在新窗口中打开

3.4.1 链接方式

外部链接：href=‘https://www.baidu.com’
内部链接：href='index.html'
空链接：href='#'
下载链接：如果链接里面是一个文件或者压缩包，会下载这个文件
网页元素链接：<a href='https://www.baidu.com'><img src='img.jpg'></a> 点击图片可以跳转到指定地址
锚点链接：点击我们的链接，可以快速定位到同一个页面的某个位置<a href='.two'> 能快速定位到class='two'的位置

3.5 特殊字符

在HTML页面中，一些特殊支付很难也不方便直接使用，此时我们需要用下面的方式来替代

特殊字符	描述	字符的代码
	空格符	& nbsp;
<	小于符	&lt
>	大于符	&gt
&	和号	& amp;
¥	人民币	&yen；
©	版权	& copy;
®	注册商标	& reg;
°	摄氏度	& deg;
±	正负号	& plusmn;
X	乘号	& times;
÷	除号	& divide;
²	平方2	& sup2;
³	平方3	& sup3;

3.6 表格标签

表格主要用于显示、展示数据，让数据显示得非常整齐，可读性非常好

标签名	定义	说明
<table>	定义表格	定义这是一个表格
<tr>	行标签	这是表格的一行
<th>	表头单元格标签	在第一行设置为表头单元格
<td>	单元格标签	这是表格行里面的一个单元格

<table>  <tr><td> 单元格内的内容</td></tr>
</table>

3.6.1 表格属性

属性名	属性值	说明
align	left、center、right	单元格元素对其方式
border	1 or “”	单元格是否有边框
cellpadding	像素值	规定单元边沿与内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的像素，默认2像素
width	像素值/百分比	规定表格的宽度
height	像素值/百分比	规定表格的高度

3.6.2 表格结构区域

标签名	定义	说明
<thead>	表格头部标签	用来显示表头
<tbody>	表格主体标签	用来显示内容数据

3.6.3 合并单元格

属性值	定义
rowspan	跨行合并
colspan	跨列合并

    <table align="center" border="1" cellspacing='3' cellpadding='5'><thead><tr><th></th><th>单元格</th><!-- 合并到第四列 --><th colspan="4">单元格</th>  </tr></thead><tbody><tr><!-- 合并到第三行 --><td rowspan="3"> 111</td><td>111</td><td>111</td><td>111</td></tr><tr><td>111</td><td>111</td><td>111</td></tr></tbody> </table>

3.7 列表

标签名	定义	说明
<ul>	无序列表	列表之间是并列关系、没有先后关系，里面只能放标签，可以放所有的内容
<ol>	有序列表	有先后顺序，也是只能放标签，实际使用中我们会用CSS来设置
<dl>	自定义列表	定义项目名/名字描述项目的特效或者是子类，和是并列关系，一个dt对应对多个dd

标签名

定义

说明

<ul>

无序列表

列表之间是并列关系、没有先后关系，

里面只能放
标签，
可以放所有的内容

<ol>

有序列表

有先后顺序，也是只能放

标签，实际使用中我们会用CSS来设置

<dl>

自定义列表

定义项目名/名字

描述项目的特效或者是子类，
和: 是并列关系，一个dt对应对多个dd

3.8 表单

使用表单的目的是收集用户信息

一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成

标签名	定义	说明
<form>	表单区域标签
<input>	表单输入元素	type=‘属性值’

3.8.1 表单属性

属性	属性值	说明
action	表单地址
method	请求方式	请求后台的方式
name	表单的name名称属性

3.8.2 < input> 属性

type属性的属性值

属性值	描述
button	定义可点击的按钮（多数情况下，用于通过JavaScript启动脚本）,通常不会提交数据
checkbox	定义复选框. name属性要是同一个
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符会被掩码
radio	定义单选按钮，name属性要是同一个
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据提交给服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度是20个字符

其他属性

属性	属性值	描述
name	由用户定义	定义input元素的名称
value	由用户定义	规定input元素的值，给后台人员使用
checked	checked	规定此input元素首次加载时应当给选中
maxlength	正整数	规定输入字段中的字符的最大长度

name 和value 时每个表单元素都有的属性值，主要给后台人员使用的

name表单元素的名称，要求同一组单选按钮和复选按钮要有相同的name

3.8.3 label标签

标签为input元素定义标注

可以把input标签的输入的范围点击文本内容也能触发光标输入

# label内的for属性应该=input 的id
<label for="username">用户名：</label> <input type="text" id="username" value="请输入用户名">

3.8.4 select 下拉列表标签

页面中，如果一个选择框内有多个选项让用户选择，并且空间有限的情况下，可以用标签定义下拉列表

语法

<select name="jg" id="jg"><option value="">北京</option><option value="">广东</option><!-- selected 定义默认选项 --><option value="" selected="selected">陕西</option><option value="">天津</option><option value="">广西</option>
</select>

3.8.6 文本域标签

表达中用来记录多行文本的区域叫文本域标签

4 Emmet语法

4.1快速生成HTML结构语法

1.生成标签直接输入tab键即可，比如 div 然后tab键，键可以生产

2.如果想要生成多个相同标签加上*键可以，比如生存div * 3 键可以快速生成3个div

3.如果有父子级关系的标签，可以用>，比如ul>li就可以了

4.如果有兄弟关系的标签，用+就可以了，比如div +p

5.如果生成带有类名或者ID的，直接写.demo 或者 #demo tab键键可以了

6.如果生成的div类名上有顺序的，可以用自增符号$

三、 CSS 选择器

css都主要使用场景就是美化网页布局

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

1 CSS语法

CSS 规则由连个主要的部分构成：选择器，以及一条或多条声明，多条声明时，每条声明都是以；结束：

1 代码格式

1.1 样式格式化-要用展开式写法，每个声明单独一行

    <style>p {color: red;margin-left: 20px}</style>

1.2 以小写的方式编写

1.3 选择器和冒号的后面都应该加空格

1.4 不要在属性值与单位之间留有空格

2 CSS创建

插入样式的方法有三种

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

3 CSS样式

外部样式表

内部样式表

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>世界佳缘-你在我也在</title><style>p {color: red;}</style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4 CSS选择器

选择器(选择符)就是根据不同需求吧不同的标签选出来，即选择标签用的

选择器分为基础选择器和复合选择器两大类，我们这里先讲一下基础选择器。

基础选择器是由单个选择器组成的

基础选择器包含：标签选择器、类选择器、ID选择器和通配符选择器

4.1 标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器，安标签名称分类，为页面某一类标签指定统一的CSS样式。缺点是没法做差异化设置

标签 {属性1: 值1;属性2: 值2;...
}示例p {color: green;text-align: center;}

4.2 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

用标签的类属性(class)名称，以 .类名称来定义选择器

ps：当类名较长时，可以用-来分隔好阅读，类名称最好有意义

语法：

.类名 {属性1: 值1;属性2: 值2;...
}示例：.red {color: red;
}

4.3 类选择器-多类名

一个标签的class属性可以有多个类名称，类名称之间以空格隔开

 .red {background-color: red;}.font35 {font-size: 35px;}<div class="red font35">刘德华</div>

4.4 ID选择器

以标签结构的ID值来调用定义选择器，以#ID的值来定义，而且只能调用一次，ID的值时唯一的。

#类名 {属性1: 值1;属性2: 值2;...
}示例：#red {color: red;
}

4.5 通配符选择器

通配符*可以用来定义素所有的标签，特殊情况的时候使用，选择的太多有部分不需要

* {属性1: 值1;属性2: 值2;...
}

5 CSS 字体属性

Fonts(字体)属性用于定义字体系列、大小、粗细、和字体的样式

5.1 字体类型

font-family属性定义文本的系列

可以同时定义多个字体，按定义的先后顺序显示字体

h2 {font-family: "Microsoft Yahei", "Arial";
}

尽量使用系统自带的字体，保证在任何用户的浏览器中都能正确显示

常见的字体Microcsoft Yahei、tahoma、arial、Hiragino Sans GB

5.2 字体大小

font-size定义字体的大小

ps.body内的标题要单独定义

body {font-size: 16px;
}

5.3 字体粗细

font-weight定义字体的粗细样式，其实默认时400， bold 粗体是700，推荐用数字来来表示

p {font-weight: 700;
}

5.4 文本字体样式

font-style 定义文本的样式

p {font-weight: 700;font-style: italic;
}

5.5 字体复合属性

font可以把以上的字体属性复合来写，简洁代码

字段位置上固定的不能更换位置，其中font-size和font-family必须要写

p {font: font-style font-weight font-size/line-height font-family;font: italic 700 16px 'Microsoft yahei';
}

6 CSS 文本属性

6.1 文本颜色

color是定义文本的颜色，实际开发中用取色器取，开发过程中十六进制最常用

p {color:greenyellow;
}
其中颜色有三种写法，
预定义的颜色值：red、green...
十六进制：#FF0000，#FF6600...
RGB代码：rgb(255,0,0)

6.2 文本水平对齐

text-align属性用于设置元素文本内容的水平对齐

左对齐 left、居中对齐 center、右对齐 right

div {text-align: right;
}

6.3 装饰文本

text-decoration属性是对文本进行线条装饰的

下划线 underline、line-through 删除线、上划线 overline、默认没有下划线 none

div {text-decoration: underline;
}

6.4 文本缩进

text-indent 属性是对文本进行首行进行缩进

p {text-indent: 2em;
}em是一个相对单位，1em先对一个汉字就是一个单位

6.5 行间距

line-height 是设置行高度的属性

div {line-height: 26px;
}

7 Emmet 语法

快速生成CSS样式的语法

CSS基本采取简写形式即可

1.比如w200 按tab 可以生成width：200px

2.比如lh26 按tab 可以生成line-height：26px

8 CSS复合选择器

复合选择器上建立在基础选择器之上的，对基础选择器进行组合形成的

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器上由多个或者多个基础选择器，通过不同的方式组合而成
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

8.1 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签方式嵌套时，内层标签就会成为外层标签的后代。

语法：

元素1 元素2 {声明样式}
表示了元素1里面的所有元素2（后代元素）

8.2 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

语法：

元素1>元素2{样式声明
}
上述语法表示选择元素1里面的所有直接后代（子元素）元素2

8.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于并集声明。

并集选择器时各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1,元素2 {样式声明
}
元素1和元素2都使用了这个样式

8.4 伪类选择器

伪类选择器用于向某些选择器加特殊效果，比如给链接加特殊效果，或选择第一个，第n各元素。

伪类选择器书写最大的特点是用冒号（