本文详细介绍了HTML和CSS的基础元素，从HTML的注释、标签结构到CSS的引入方式、选择器类型和常见样式。HTML部分涵盖了一般标签、自闭合标签、结构标签如head和body，以及文本、列表、表格、图片等元素。CSS部分讲解了选择器、字体样式、文本和边框样式、背景图片等。内容深入浅出，适合前端初学者入门。
网页设计
网站制作到前端开发
Web 1.0时代指的的网站制作，那时候的页面主要是静态页面，仅供用户浏览，而无法提供用户进行交互（无法与服务器进行数据交互）。
而到了Web 2.0时代，已经从网页制作到了前端开发，以前的网页“三剑客”（Fw、Dw、Fl）已经满足不了我们的需求，所以我们要学习新的技术。
分别是：HTML、CSS、JavaScript也是新“三剑客”。
- HTML:超文本标记语言，是一门描述型语言。
- CSS：层叠样式表，是控制网页外观的一门技术。
- JavaScript：是嵌入HTML的一种脚本语言。
HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为。
比如：制作网页就好比盖房子，HTML用于搭建房子的框架，CSS用于装饰房子的外观，JavaScript用于家居的交互（比如开灯关灯）。
此外，很多人认为“网站就是很多网页的集合”，其实这个理解是不太恰当的。准确地说，网站是前端与后端的结合。
HTML
HTML是一门标记语言，我们学习HTML就是在学习它的各种标签，用标签来表明各种东西。
HTMl注释
语法：
一般标签和自闭合标签
一般标签：有开始和结束符号，中间可以插入文字和其他的标签
自闭合标签：只有开始符号，没有结束符号。开始标签里面不能插入任何东西。（所谓自闭合，本来要配一个结束符号，但却自己闭合了）
HTML标签结构
HTML是由最基本的四个部分组成（一个页面的最基本的四个部分）
-
/ ——声明文档，表示这是一个HTML文档。
- ——告诉浏览器，页面从html开始到/html结束
- > ——这是网页的头部，用于定义一些特殊的内容
- ——这是网页的身体，大部分代码都是在这里面编写
head标签
一般来说只能有6个标签放在head里面
title标签
meta标签
link标签
style标签
script标签
base标签
title标签：
唯一作用定义网页的标题
****必须在最前面
meta标签：
一般用于定义页面的特殊信息，这些信息不是提供给用户看的，而是提供给搜索引擎的看的。简单来说，meta标签是告诉搜索引擎这个网页是做什么的。
meta有两个重要属性：name和http-equiv
name:描述页面是做什么的，其属性值有：
keywords（页面关键字）
description（页面描述）
author（页面作者）
copyright（页面版权信息）
语法结构为：
http-equiv:有两个功能
定义网页所使用的编码
语法：
不过在HTML5标准中，上面这句代码可以简写成下面这样。
定义网页自动刷新跳转
语法：
style标签：
style标签用于定义元素css样式，学到css在补充。
script标签：
在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。学到JavaScript在补充。
link标签
在HTML中，link标签用于引入外部样式文件（CSS文件）。学到css在补充。
base标签
这个标签没有意义，我们只需知道有这么个标签就行。
body标签结构
页面的构成元素:
- 文本
- 图片
- 超链接
- 音频和视频
div标签
语法：
用来划分区域，让代码更有逻辑性
HTML文本
-
标题标签
语法：
h1到h6分别是1到6级标题，h1一般只能有一个。
-
段落标签
语法：
里面存放的基本段落
-
换行标签
语法：
段落标签也会提供自动换行
比如：
落叶聚还散，寒鸦栖复惊
相思相见知何日，此时此夜难为情
-
文本标签
粗体标签：strong（建议用这个）、b
斜体标签：i、em（建议用这个）、cite
上标标签：sup
下标标签：sub
中划线标签：s
下划线标签：u
大字号标签：big
小字号标签：small
重点前4个，其他会用css代替
-
水平线标签
语法：
-
特殊符号
特殊符号都是以&开始;结尾的
空格：语法： (三个  约等于1个汉字)
其他特殊符号：
块元素和行内元素
块元素：在浏览器显示状态下独占一行，排斥其他元素与其一行。块元素内部可以容纳其他块元素和行内元素。
常见的块元素
行内元素：行内元素可以与其他的行内元素位于一行；
行内元素内部可以容纳其他行内元素，但不可以容纳块元素。
常见的行内元素
HTML列表
类别分为三种：有序列表、无序列表、定义列表
-
有序列表：各个列表是有顺序的。
（数字）语法：
- 列表项
-
- 列表项
-
- 列表项
-
必须一起使用，不能单独使用。语法里面只能有
- ,不能有别的。
（其他符号）语法：
（其他）语法：
- 列表项
-
- 列表项
-
- 列表项
-
-
无序列表：各个列表是没有顺序的
（实心点）语法：
- 列表项
-
- 列表项
-
- 列表项
-
必须一起使用，不能单独使用。语法里面只能有
- ,不能有别的。
（其他符号）语法：
（其他）语法：
- 列表项
-
- 列表项
-
- 列表项
-
-
自定义列表：定义的列表由两部分组成：名称和描述。
语法：
名称
- 描述
HTML表格简介
一个表格一般由以下三个部分组成：
表格：table标签
行：tr标签
单元格：td标签
语法：
单元格
单元格
说明：
和表示一个表格的开始和结束；和表示一行的开始和结束，写多少个和就有多少行；和表示一个单元格的开始和结束，中间写是单元格里面的内容。
完整结构：
但是一个表格的“完整结构”不是只有table、tr、td，还包括caption、th等。
表格标题：caption
语法：表格标题
说明：一个表格只能有一个标题
表头单元格：th（在浏览器会以黑体、居中显示内容，但是td不会）
语法：表头单元格
更加语义化：
增加了了thead(表头)、tbody（表身）和tfoot（表尾）
合并行：rowspan
语法：
注意：数为几就合并几行，从第一行开始，往下面数，包含本身。
合并列：colspan
语法：
注意：数为几就合并几行，从第一行开始，往后面数，包含本身。
图片标签
我们使用img标签来显示一张图片，掌握它的三个属性src、alt、title
语法：
<img src=“图片路径”/>,可以是绝对路线，也可以是相对路径
alt:表示图片无法显示后，显示的文字
title：表示鼠标停留在图片上显示的文字
超链接
分为文本超链接和图片超链接
语法：<a href=“l=链接网址”>文本或图片
注意：如果里面是文本，就是文本超链接，如果里面是图片，就是图片超链接
target属性（通过这个标签定义超链接打开窗口的方式）如果没有target属性打开的超链接则会覆盖当前页面
一般只用_blank这个
超链接又可分为外部链接和内部链接
外部链接就是跳转到别人的网站页面
内部链接是跳转到自己文件内部的html文件
比如：这里我跳转的是 test2的文件，网站路径为名字.后缀名。
多级目录文件名加反斜杠即可
锚点链接（属于内部链接）
由于内容过多，可通过锚点链接链接快速浏览需要的内容，简单来说它的超链接就是当前页面的一部分。
语法：<a href="#div块的id">锚点链接标题
说明：#代表的是锚点链接，名字是我们自己定义好的，里面放的不是网址。
表单
表单标签有5种：form（标签体）、input（单行标签）、textarea（多行标签）、select（下拉菜单体）、option（下拉菜单选项）
form标签：
语法：
各种表单标签
input标签：
text：单行文本框
input标签是自闭合标签，没有结束符号。单行文本框是用input实现的。
语法：
text：单行文本框
输入一行字的文本框
单行文本框常用属性：
password：密码文本框
密码文本框和单行文本框它们的常用属性是相同的，只不过单行文本框输入的内容可见，密码文本框输入的内容不可见。
它的常用属性和单行文本框的常用属性一样
radio单选框
在多个选项中，只能选一个。
语法：男
注意：name和valve标签是必须加的，name的作用是同一个名字的，是同一组选项。value是为了让编译器更好识别。
通过checked关键字可以默认勾线选项
checkbox多选框
在多个选项中，可以选择多个。
语法：跑步
注意：name和value标签也是必须加的，和单选框一样
按钮
常见的按钮有三种：button（普通按钮），submit（提交按钮），reset（重置按钮）
button（普通按钮）
语法：
submit（提交按钮）
提交给服务器数据的按钮,有特殊功能的普通按钮
reset（重置按钮）
重置按钮是用来清除表单里用户输入的内容的
注意：只是清除form标签里面包含的表单
法语：
说明：在按钮中，value=""里面的文字是用来显示按钮上的文字
file文件上传
语法：
textarea多行标签
<textarea rows=“行数” cols=“列数” value=“取值”>文本框里面的默认内容
下拉列表
下拉列表是由select和option这两个标签控制
语法：
项目内容
项目内容
…
项目内容
select标签属性
multiple可以让下拉列表选择多项
size可以设置下拉列表显示的列表数
我这里设置可以显示5个
option标签
selected表示默认选中当前标签
value是用来和服务器交互用的
iframe标签
这个标签表示在当前页面在套入另一个页面
语法：<iframe src=“需要嵌入页面的网站” width="设置嵌入页面的宽度"height=“设置嵌入页面的高度”>
说明：还可以同时嵌入多个页面
CSS
CSS是什么？
css是指“Cascading Style Sheet（层叠样式表）”，是一门用于控制网页外观的一门技术。
CSS的引入方式
1、外部样式表
所谓外部样式表，是指把css文件和html文件单独放在不同的文件中，然后在html文件中，用link标签来引用css文件
语法：<link rel=“stylesheet” type=“text/css” href=“文件路径” href=“文件路径”/>
rel即relative的缩写，它的取值是固定的，即"stylesheet"，表示引入的是一个样式表文件（即CSS文件）。
type属性的取值也是固定的，即"text/css"，表示这是标准的CSS。
2、内部样式表
所谓内部样式表是指，把html代码和css代码都放在html文件中。其中css代码放在style标签中，style标签是放在head标签内部的。而不是body标签内部。
语法：
…
说明：type="text/css"是必须添加的，这是标准的css
3.行内样式表
所谓行内样式表是指：在行内的“标签的style属性”来定义样式的
效果也为红色
注意：行内样式是在每一个元素的内部定义的，冗余代码非常多，并且每次改动CSS的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。
CSS选择器类型
选择器是什么
我们选中某个元素的方式，我们称为选择器。我们有很多种方式可以选中想要的元素，这些不同的方式都是选择器
语法：选择器{
属性1：取值1
…
属性n，取值n
}
元素的id和class
id属性：id属性具有唯一性，也就是说，在一个页面中相同的id只能出现一次。如果出现多个id会导致无法识别。
class属性：我们可以为相同页面的同一个元素或不同元素设置class，让相同class的元素具有相同的css样式。
对于id和class，我们可以这样理解：id就像你的身份证号，而class就像你的名字。身份证号是唯一的，但是两个人的名字却有可能是一样的。
5中最实用的选择器：
1.元素选择器
2.id选择器
3.class选择器
4.后代选择器
5.群组选择器
元素选择器：
通过标签题（也就是元素）进行选择
通过：需要选择的标签符号{取值：属性；}，把两个带p字的标签变成蓝色。
id选择器:
顾名思义就是通过id进行选择，那么id也就必须不能相同。
语法：#id名称{取值：属性；}
注意：必须加上#表示名称
class选择器：
我们可以对相同的元素或者不同的元素定义相同的class名称，然后对相同的class名称进行定义css样式。
语法：.class的名称{取值：属性}
注意：加.表示为class选择器。在为多个标准定义相同的样式时，建议使用class选择器
后代选择器：
后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素（如“孙元素”）。
语法：#父类的名字 子类的标签{取值：属性}
注意：父类的名字必须和子类的标签用空格隔开
群组选择器：
对多个选择器进行相同的操作。
语法：标签，标签，标签…{取值：属性}
注意：中间用逗号隔开。
字体样式
字体类型
语法：font-family：字体一，字体二，… ，字体n；
注意：字体类型是中文，需要用双引号；定义多种字体中间用逗号隔开
字体大小
语法：font-size:像素值
注意：字体大小有两种取值方式：一种是“关键字”，如：small、large等。另一种是“像素值”，如10px等。
px（像素是什么）？
像素是图片中最小的点，一张图片的像素越高，那么组成这个图片的方块点就越多。
字体粗细
语法：font-weight：取值;(没有单位)
注意：字体粗细的取值方式也有两种：属性值和数值（100–900）
一般在开发中，我们只会用到bold这个属性，其他几乎不用，数值的方式也不建议使用。
字体斜体
语法：font-style：取值;
两者斜体的区别：：有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
字体颜色
语法：color：颜色值;
注意：color属性值取值有两种：一种是“关键字”，如：blue，brown等；另一种是“十六进制RGB值”
CSS注释
语法：/*注释内容*/
注意：css注释只能在bead文件里面用，html注释只能在body文件里面用
文本样式
文本样式时针对整个文本进行排版
首行缩进
语法：text-indent:像素值（并不代表默认缩进两个汉字，需要我们自己设置）
首行缩进的像素值为字体大小的两倍，因为：首行缩进为两个汉字大小，而缩进为字体大小的倍数，就相当于空出两个汉字 的大小
水平对齐
语法：test-align:取值;
我们一般只用居中，其他用不上一般。
文本修饰（上中下划线）
语法：text-decoration:取值；
默认是超链接是有下划线的，可以通过none去掉
大小写转化
语法：text-transform：取值；
行间距
语法：line-height：像素值；
字间距
语法：letter-spacing：像素值；
字间距就是字和字左右之间的距离
词间距（英文）
语法：word-spacing：像素值；
每个单词之间的距离
边框样式
边框的属性
设置一个元素的边框，需要设置这三个属性
边框的外观样式
还可以为图片加边框，和文字的步骤一样
三个全写有点繁琐，css为我们提供了一种简写形式：
border：1px solod red；
上下左右边框
上边框
语法：border-top
下边框
语法：border-bottom
左边框
语法：border-left
右边框
语法：border-right
如果我们想去某个边框，让它的某个边框像素为0就可以了。或者挨个定义上下边框，不想要那个就不需要定义那个。或者用none去掉
列表样式
有序列表
在css中的语法：list-style-type:取值；
有序列表取值：
无序列表
无序列表取值
说明：list-style-type属性是针对ol或者ul元素的，而不是li元素。
通过list-style-type: none；来取消列表符号
图片列表
list-style-image:url（图片路径）;
表格样式
表格标题的位置
语法：caption-side：取值；
表格边框合并
注：都在table元素里面定义的
语法：border-collapse：取值；
表格边框间距
语法：border-spacing：像素值；
注意：如果边框合并了，就不能使用间距了。
图片样式
图片大小
语法：width：像素值；
height：像素值；
图片边框
语法：（为缩写）border：1px（边框的宽度） solid（虚线或实现） red（颜色）；
图片对齐
语法：text-align：取值；
注意：text-align属性一般只用到：文本水平对齐，和图片水平对齐；想要实现图片的水平对齐，就应该在div中定义text-align属性。
垂直对齐
意思是垂直的与排对齐
语法：vetical-align：取值；
文字环绕
语法：float：取值；
背景样式
包括两个：背景样色、背景图片
背景颜色
语法：background-color：颜色值；
说明：颜色值有两种，一种是“关键字”，另一种是RGB值。
注意：background-color 与color的区别，color是定义文本颜色，background-color 是定义背景颜色。
背景图片
定义图片地址
语法：background-image：url（图片路径）;
注意：加入图片，要定义图片的宽高，不然无法显示。在宽高后面加上px值，我好几次都没加所以不显示。
背景图片重复
语法：background-repeat
没有上面属性，会默认第一个属性。
背景图片位置
语法：background-position：像素值/关键字;
像素值语法：background-position：水平距离 垂直距离；
说明：水平和垂直距离都为px值，从左上角开始。它两之间用空格隔开。
关键字语法:像素值语法：background-position：水平距离(为关键字) 垂直距离（为关键字）；
注意：水平和垂直距离都用关键字
背景图片固定
语法：background-attachment:取值;
分析：我们在本地浏览器中拖动右边的滚动条，可以发现，背景图片在页面固定不动了。如果把“background-attachment:fixed；”这一行代码去掉，背景图片就会随着元素一起滚动。
超链接样式
超链接鼠标点击样式（超链接伪类）
语法：a：link{…}
a：visited{…}
a：hover{…}
a：active{…}
定义4个伪类，必须按照从上到下的顺序。顺序不能改变。
一般只用两个：未访问时的状态，鼠标经过时的状态。
说明：a：hover 可以定义鼠标经过任何元素的样式。
鼠标样式
语法：cursor：取值；
前三个最常用！
自定义鼠标样式
语法：cursor：url（图片地址），属性值；
鼠标图片的后缀名一般为“.cur”
CSS盒子模式
所以的元素都可以看做一个盒子，一个盒子的组成由这4部分组成。
宽高
语法：width：像素值；
height：像素值;
注意：只有块元素才可以使用宽高，行内元素不能使用。
那我们如何为行内元素设置宽和高呢？在css进阶我们会学到。
边框（复习）
语法：border: 1px solid red;
内边距
内容距离内边框的距离叫做内边距
语法：padding-top：像素值；
padding-right：像素值；
padding-bottom：像素值；
padding-left：像素值；
padding的简写形式
语法：
- padding：像素值；（表示4个方向的像素值都相同）
- padding：像素值1 像素值2；（1表示上和下，2表示左和右）
- padding：像素值1 像素值2 像素值3 像素值4；（上下左右）
注意：中间用空格隔开
外边距
外边框是指：边框到“父元素”或“兄弟元素”之间的距离
语法：
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
重要：如果只有父元素，那么外边距是相对于父元素而言；如果有父元素和兄弟元素，那么首先会看上下左右有没有兄弟元素，如果有就会相对于兄弟元素而言，没有某个方向没有兄弟元素，就会以父元素而言。
简写形式和内边距的完全一样
浮动布局
正常文档流：是默认的html文件结构。
默认的文件结构：div、p、hr为块元素，会独占一行。而span、i等为行内元素，会从左到右依次排。
脱离文档流：是改变默认的html文件结构。
如何改变正常的文档流呢？
使用两种方法：浮动和定位
浮动
语法：float：取值；
清除浮动
语法：clear：取值；
注意：通常只使用both。
定位布局
固定布局
固定定位：是相对浏览器而言的。
语法：
position：fixed;
top:像素值；
bottom：像素值；
left：像素值；
right：像素值；
注意：position：fixed;是结合这四个属性一起使用的。上下左右是以浏览器为标准的
相对定位
相对定位：相对于原始位置而言的。
语法：
position:relative;
top:像素值;bottom;像素值;
left:像素值;
right:像素值;
在这里插入图片描述
绝对定位
绝对定位：当一个元素为绝对定位元素，这个元素就脱离文档流了，这个元素相当于在其他元素后面，独立出来了。
语法：
position:absolute;
top:像素值;bottom:像素值;
left:像素值;
right:像素值;
注意：上下左右是相对于游览器而言的
-
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
