本文介绍了HTML常用标签，包括排版、文本格式化、语义化和媒体标签等，并详细讲解了CSS的基础知识，如选择器、属性和三大特性，帮助初学者理解网页布局和样式设计。
HTML常用标签、CSS基础
一、HTML常用标签
1.1 什么是标签
1.1.1 HTML
HTML称为超文本标记语言，英文名称为Hyper Text Markup Langguage。
hypertext超文本 不是简单的纯文字的东西，可能有图片、音乐、程序、链接之类的
markup language表示使用标记语言表示这些超文本，也就是用各种各样的标签组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。
1.1.2 标签的结构
HTML标签是由尖括号包围的关键词
- 标签由<、>、\、英文单词或字母组成。并且把标签中<>包括起来的英文单词成字母称为标签名
- 常见标签由两部分组成，我们称之为双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
- 少数标签由一部分组成，我们称之为单标签。自成一体，无法包裹内容。
1.1.3 标签之间的关系
父子关系（嵌套关系）
<head>
<title></title>
<head>
兄弟关系（并列关系）
<head></head>
<body></body>
1.1.4 html结构框架
<!DOCTYPE html>//声明，不是标签
<html lang="en">//表示当前文档显示为英文，en定义语言为英语，zn-CN定义语言为中文
//其实对于文档显示来说，定义成en的文档也可以写中文的，定义成zh-CN的文档也可以显示英文
<head>//头部标签
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>//头部标签中必备的
</head>
<body>//文档的主体
</body>
</html>
<html>这个标签是文档的根标签，所有的其他的标签都是写在HTML标签里边的。<html>里边还有一个head标签，head标签里边会放一些页面的元信息 （元信息是关于信息的信息，用于描述信息的结构、语义、用途和用法等） ，绝大多数文档头部包含的数据都不会真正作为内容显示给读者，也就是说页面上需要这个信息，但又不需要直接呈现给用户的，比如说页面的标题是什么，页面用了什么样的编码。
现在我们来看meta标签
一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在内容的最前面。
<meta charset="UTF-8">
<meta>标签的charset属性，用来指定网页的编码方式。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。而字符编码我们可以这样理解：
在计算机中存放的都是0和1的二进制值。8个位对应一个字节，常用16进制来表示。比如“01000001”就是一个字节，其对应的十六进制值“0x41”。那么我们如果想要在计算机上看到我们想要的字符显示，而不是各种0和1的数字该怎么实现呢？这里我们就需要使计算机把其所存储的对应的16进制的数值，转化为对应的字符，包括英文和中文等其他语言的字符，然后输出到屏幕上。
所以编码也就是定义了一套规则，去指定哪些数值对应着哪些字符。那么字符编码，就是定义了一套规则，指定了计算机中存放的这么多值中的哪个值，对应了电脑屏幕显示出来的哪个字母。属性UTF-8被称为万国码，囊括所有国家所需字符。
网页乱码原因：
- 网页的字符编码、内容、数据库中读取的数据，编码不一致的时候
- meta声明和文本编码不一致的时候（很少见）（保存的时候选择编码规则与meta规则不一致）
- 浏览器不能检测网页编码、浏览器默认解码规则和网页编码不一致。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
标签的http-equiv属性用来补充 HTTP 回应的头信息字段，如果服务器发回的 HTTP 回应缺少某个字段，就可以用它补充。
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。这是IE8的专用标记，是用于指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题.
<meta name="参数" content="具体的描述">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关于title标签
1.2 HTML常用标签
1.2.1 排版标签
标题<h1~h6> 换行<br> 水平线<hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<p>我是段落标签我是段落标签看我换行<br>我是段落标签我是段落标签看我换行</p>
<hr>
</body>
</html>
我是一级标题
我是二级标题
我是三级标题
我是四级标题
我是五级标题
我是六级标题
我是段落标签我是段落标签看我换行
我是段落标签我是段落标签看我换行
1.2.2 文本格式化标签
文字
加粗、下划线、倾斜、删除
| 标签 | 说明 |
|---|---|
| b,strong | 加粗 |
| u,ins | 下划线 |
| i,em | 倾斜 |
| s,del | 删除线 |
列表
ul标签里面只能放li
<ul>
<li>我是无序列表</li>
</ul>
<ol>
<li>我是有序列表</li>
</ol>
- 我是无序列表
- 我是有序列表
表格
<table border="2" width="400px" height="200px">
<caption><strong>蓝旭21级成员</strong></caption>
<tr>
<th>前端</th>
<th>后端</th>
</tr>
<tr align="center">
<td>张若妍</td>
<td>赵鑫源</td>
</tr>
<tr align="center">
<td>张珂铭</td>
<td>吴越洋</td>
</tr>
<tr align="center">
<td>潘伊凡</td>
<td>周丽容</td>
</tr>
<tr align="center">
<td>孟玮炜</td>
<td>冯星月</td>
</tr>
<tr align="center">
<td>唐琳棋</td>
<td>邓长圣</td>
</tr>
</table>
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
| caption | 表格大标题 |
| th | 表头单元格 |
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
合并单元格：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
目标单元格（写合并代码）
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
表单
input
input标签可以通过type属性值的不同，展示不同效果
<input type="checkbox" checked />跳舞
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框，用于输入密码 |
| radio | 单选框，用于多选一 |
| checkbox | 多选框，用于多选多 |
| file | 文件选择，用于之后上传文件 |
| submit | 提交按钮，用于提交 |
| reset | 重置按钮，用于重置 |
| button | 普通按钮，默认无功能 |
form表单的action属性
form标签的action属性是一个表单当中必须的属性，action属性规定当提交表单时，向何处发送表单数据。
orm表单中的action属性的值是表单提交给的url，如果我们没有设置action属性，那么默认的表单还是提交给当前页面。
通常为了省事,我们一般将表单的action属性设为action=“”/action="#"或者干脆不写,但是这会造成一个问题，如果当前页面带有参数，参数也一并会提交，而且参数的优先级会高于<form>控件提交的参数，也就是说页面带的参数值会将<form>的值覆盖，从而得到不正确的值。
例:SpecTop.asp 页面是表单要提交的页面,且有从上级页面传递过来参数，action=“”，真正提交时的页面:SpecTop.asp?ClassID=000100200005&SpeID=947&SpeType=3
如果<form>中有<input type=”text” name=”SpeID” value=”1000”/>，提交时得到的值将会是947，而不是1000,而action=”currentPage.xxx”就能得到1000
select下拉菜单
<select>
<option>麻酱鸡丝拌面</option>
<option>不二格米粉</option>
<option>银锅鸡</option>
<option>鸡公煲</option>
</select>
textarea–文本域标签
placeholder–占位符 提示用户要输入的内容
1.2.3.语义化标签
语义是指对一个词或者句子含义的正确解释，那么语义化标签就是指元素本身传达了关于标签所包含内容类型的一些信息。
无语义化标签
div
一行只能有一个（独占一行）
span
一行可以有多个
有语义的标签
1.2.4.媒体标签
图片
<img src="wozaixiangni.jpg" alt="iloveyoubaby">//alt表示替换文本
音频
视频
1.2.5.链接标签
超链接
<a href="https://www.bilibili.com/" target="_blank">点我开一个新网页跳转b站</a>
二、CSS基础
2.1 CSS简介
2.1.1 CSS是什么
- CSS 即层叠样式表 (Cascading Style Sheets)。是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
- CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2.1.2 CSS发展史
- 1996年12月W3C推出了CSS规范的第一个版本CSS1.0，这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
- 1998年W3C发布了CSS的第二个版本即CSS2.0，这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
- 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。
早在2001年5月W3C开始进行CSS3标准的制定，虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。
2.1.3 CSS的作用
CSS是网页的美容师（因为HTML只能做简单的样式）
CSS的使用可以使网页的结构（HTML）与样式（CSS）相分离，便于团队开发
CSS可以让样式复用，利用后期维护
2.2 CSS的引用方式
css的引用方式主要有以下三种
1.内嵌式--CSS写在style标签内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
list-style-type: none;;
}
</style>
</head>
2.外联式--CSS样式写在一个单独的.css文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./my.css">
</head>
3.行内式--CSS写在标签的style属性里
<body>
<div style="color: blueviolet;">生命久如暗室，不碍我明写春诗</div>
</body>
2.3 CSS的三大特性
层叠性
相同选择器设置相同的样式，一个样式就会覆盖（层叠）另一个冲突的样式）
就近原则，后来居上
/*最后的字体颜色是skyblue*/
div {
color: pink;
font-size: 10px;
}
div {
color: skyblue;
}
继承性
子标签会继承父标签的某些样式，包括：
-
字体相关属性：font、font-size、font-style、font-weight、font-family、line-height等。
-
文本相关属性：color、text-align、text-indent、text-transform、text-decoration、letter-spacing、word-spacing等。
-
列表相关属性：list-style、list-style-type、list-style-position等。
-
边框相关属性：border、border-color、border-style、border-width等。
-
背景相关属性：background、background-color、background-image等。
-
表格相关属性：border-collapse、border-spacing、caption-side等。
-
其他属性：visibility、cursor等。
需要注意的是，虽然这些属性可以被继承，但并不是所有元素都会继承这些属性，具体取决于元素的默认属性值和父元素是否设置了相应的属性值。
优先级
当同一个元素指定多个选择器，就产生了优先级
选择器的优先级依次是:
!important>内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
!important使某个样式有最高的优先级（!important要写在分号的前面）
div{
color: purple !important;
}
选择器相同则执行层叠性
选择器不同则根据选择器权重执行
选择器权值的计算
| 选择器 | 权重 |
|---|---|
| * | 0，0，0，0 |
| 标签选择器和伪类选择器 | 0，0，0，1 |
| 类选择器 | 0，0，1，0 |
| id选择器 | 0，1，0，0 |
| 内联样式 | 1，0，0，0 |
| !important | 无穷大 |
注意：
- 这里的0,1采用的进制并不是简单的十进制，也不是二进制；上面的表格可理解为：内联样式权重为1000，id选择器权重为100，以此类推。
- 权值由4位数字组成（这里的0,1采用的进制并不是简单的十进制，也不是二进制），权值叠加可理解为相加
- 权值不会有进位，比如10个（0,0,0,1）相加得到（0,0,0,10）
- 比较规则：从左往右逐个等级比较，前一等级相等才往后比。如1,0,0,0 > 0,99,99,99
- 继承的权重是0，若未直接选中该元素，则不管父元素权重多高，子元素得到的权重都是0
/* 样式一 */
body header div nav ul li div p a span div {
width: 100px;
height: 100px;
background-color: red;
}
/* 样式二 */
.count {
width: 100px;
height: 100px;
background-color: yellow;
}
<header>
<div>
<nav>
<ul>
<li>
<div>
<p>
<a href="#">
<span>
<div class="count">权值的计算</div>
</span>
</a>
</p>
</div>
</li>
</ul>
</nav>
</div>
</header>
最后的效果是：类名为count的盒子是黄色的
原因：
样式一：权值相加——（0，0，0，11）
样式二：权值相加——（0，0，1，0）
2.4 CSS的常用属性
字体样式
<1>字体大小 font-size
<2>字体粗细 font-weight
| 正常 | normal | 400 |
|---|---|---|
| 加粗 | bold | 700 |
<3>字体样式（是否倾斜）font-style
| 正常值 | normal |
|---|---|
| 倾斜 | italic |
<4>字体 font-famliy
| 无衬线字体 | sans-serif |
|---|---|
| 衬线 | serif |
| 等宽字体 | monospace |
<5>字体相关属性的连写 font(复合属性)
<style>
div{
font:italic 700 32px 宋体;
}
</style>
如果给同一个标签设置了相同的属性，此时样式会层叠
文本样式
<1>文本缩进 text-indent
- 数字+px
- 数字+em（1em = 当前标签的font-size的大小）
<2>文本水平对齐方式 text-align
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
text-align:center 能让
- 文字
- span、a标签
- input标签、img标签
如果要让文本水平居中对齐，text-align属性给 文本所在标签（也就是文本的父元素） 设置
<3>文本修饰 text-decoration
| 属性值 | 效果 |
|---|---|
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
| none | 无装饰线 |
<4>行高 line-height
可以通过设置行高使文字垂直方向居中
背景样式
<1>背景颜色 background（bgc）
<2>背景图片 background-image（bgi）
<3>背景平铺 background-repeat（bgr）
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向平铺 |
| repeat-y | 沿着垂直方向 |
<4>背景位置 background-position（bgp）
2.5 选择器
2.5.1 标签选择器
顾名思义就是以标签命名的选择器 选中所有的这个标签都会生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: aqua;
}
</style>
</head>
<body>
<div style="color: blueviolet;">你是我的神</div>
</body>
</html>
2.5.2 类选择器
联想到c语言里的函数 函数需要声明和调用才能生效
类需要定义和调用才能生效
2.5.3. id选择器
从前车马书信慢，一生只够爱一个人
现在网络发达，id选择器还是只能找一个标签做一辈子的伴侣
2.5.4 通配符选择器
找到页面中的所有标签，设置样式
<style>
* {
color: aqua;
}
</style>
主要用于清除默认样式
2.5.5 后代选择器
会选中所有后代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./my.css">
<style>
div p {
color: brown;
}
</style>
</head>
<body>
<div>
<p>我是div的儿子</p>
</div>
</body>
</html>
2.5.6 子代选择器
只会选中他的“儿子”
2.5.7 并集选择器
同时选中多组标签，设置相同的样式
div,p{
color: antiquewhite;
}
此时body内的p标签和div标签都会被选中并更改颜色
2.5.8 交集选择器
选中页面中同时满足多个选择器的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
color: blueviolet;
}
div.box {
color: brown;
}
</style>
</head>
<body>
<p>我是引用box类的p标签</p>
<div>我是没有引用box类的div标签</div>
<div class="box">我是引用box类的div标签</div>
</body>
</html>
2.5.9 伪类选择器
选中鼠标悬停在元素上的状态，设置样式
<style>
div:hover{
color: antiquewhite;
}
</style>
鼠标放在div上的时候标签就会变成奶白色！！!
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
