HTML_CSS小结
目录
什么是HTML？
HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页 的标准标记语言。HTML 使用标记标签来描述网页，由浏览器来解析，即使用 HTML 来建 立 Web 站点，通过 Web 浏览器读取 HTML 文档，并以网页的形式显示出来。
一、初识HTML
开发工具：HbuilderX
WEB项目页面标准结构
<!DOCTYPE html> html5的文档类型
<html> html的标准的开始标签
<head> 头标签
<meta charset="utf-8" /> 页面编码格式utf-8(一个中文对应三个字节)
<title></title> 页面的窗口标签
</head>
<body> 页面主体部分,需要写大量的html元素(标签)在这里面通过浏览器进行渲染
</body>
</html>
二、HTML常用的最基础标签
2.1文本标签
2.1.1标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3> 字体自动加粗
<h4>四级标签</h4> 字体大小由上到下依次减小
<h5>五级标签</h5>
<h6>六级标签</h6>2.1.2分割线标签
<hr/> <!-- 分割线标签，没有开始标签
加入该标签后，后方的文本将与该标签前面的文本分隔开，并出现一条分割线 --!>2.1.3段落标签
<p> </p> <!-- p标签可以实现自动换行,段落的前后都有自动换行功能 --!>
<blockquote> </blockquote> <!-- lockquote:段落缩进标签 --!>
2.1.4滚动标签
<marquee>标签用于创建一个滚动区域，behavior属性用于设置滚动的行为，direction属性用于设置滚动的方向，scrollamount属性用于设置滚动的速度。
| 属性名 | 说明 |
| scrollamount | 设置滚动速度，值越大，速度越快 |
| behavior | 设置滚动的方式 |
| slide | 滚动至边框停止 |
| scroll | 穿梭滚动 |
| alternate | 交替滚动 |
| direction | 滚动方向 |
| left/right/up/down | 分别向左右上下滚动 |
| bgcolor | 背景颜色（英文单词即可） |
<marquee behavior="scroll" direction="left" scrollamount="5" bgcolor="red">
<!-- 这里放置需要滚动的内容 -->
</marquee>
需要注意的是，
<marquee>标签在HTML5中已经被废弃，不推荐使用。推荐使用CSS样式来实现滚动效果。
2.1.5文本
| 语义 | 标签 | 说明 |
| 加粗 | <strong>或<b> |
都可用于加粗文本字体，strong语义更为强烈 |
| 斜体 | <i>或<em> |
倾斜字体 |
| 删除线 | <del>或<s> | 给字体中间加一条删除线 |
| 下划线 | <ins>或<u> | 给字体加一条下划线 |
| 换行 | <br/> | 文本末端加入该标签，下一段文本换行 |
| 原样输出 | <pre> </pre> | 按照文本的格式原封不动的输出 |
| 上标 | <sup></sup> | 将标签中间的字符变为右上角的小标 |
| 下标 | <sub></sub> | 将标签中间的字符变为右下角的小标 |
2.1.6转义字符
| 字符 | 说明 |
| © | 等价于 © |
| ® | 等价于 ® |
|   | 等价于一个空格键 |
| &ensp | 等价于两个空格键 |
| < | 等价于 < |
| > | 等价于 > |
2.1.7超链接
格式：a标签 href="链接到的资源地址url"； target=" " :打开资源文件的方式
_blank：新建一个窗口打开 ，_self：当前窗口直接打开
<body>
<a href="01_html常见的文本标签.html" target="_blank">点击跳转</a>
</body图片超链接方式：
<body background="img/bg.jpg">
<a href="adv.html" target="_self">
<img src="img/adv.jpg"
width="300px"
height="300px"
align="left"/>
</a>
</body><body background="页面背景图片"> ：body标签内直接设置页面背景
a标签之间插入图片，src="图片路径"，width=“图片宽度”，height="图片高度"
align="图片对齐方式"
2.2表格标签
2.2.1表格相关属性
| 标签 | 描述 |
| table | 表格标签 |
| caption | 表格标题内容标签 |
| tr | 行标签 |
| th | 表头 |
| td | 列标签 |
| 标签 | 属性值 | 内容 |
| border | 像素值 | 表格边框的大小 |
| cellspacing | 像素值 | 单元格边框和table边框的距离 |
| width | 像素值或百分比 | 表格的宽度 |
| height | 像素值或百分比 | 表格的高度 |
| bgcolor | 英文字母 | 表格的背景颜色 |
| align | center/left/right | 表格的水平对齐方式 |
2.2.2表格的行列合并
rowspan="含本单元格要行合并的单元格数量"
colspan="含本单元格要列合并的单元格数量"
2.2.3案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<table border="1px" align="center" cellspacing="0px" bgcolor="greenyellow" width="500px" height="500px">
<caption>xxx学校学生成绩表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>平均成绩</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三丰</td>
<td>计算机1班</td>
<td>98</td>
</tr>
<tr align="center">
<td>2</td>
<td>高圆圆</td>
<td rowspan="2">软工1班</td>
<td>95</td>
</tr>
<tr align="center">
<td>3</td>
<td>刘亦菲</td>
<!-- <td>软工1班</td> -->
<td>100</td>
</tr>
<tr align="center">
<td>4</td>
<td>文章</td>
<td>计算机2班</td>
<td>78</td>
</tr>
<tr align="center">
<td colspan="3">平均成绩</td>
<!-- <td ></td>
<td></td> -->
<td>95</td>
</tr>
</table>
</body>
</html>
运行结果图：
2.3列表标签
2.3.1无序列表
ul属性 type="指定列表项前面的标记"
disc:实心圆点
cicle:空心圆点
square：实心小正方形子标签li（列表项）
实例展示
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
你喜欢的足球明星是谁？
<ul type="disc">
<a href="#">梅西</a>
</li>
<li>C罗</li>
<li>姆巴佩</li>
<li>上帝之手-马拉多纳</li>
</ul>
</body>
</html>2.3.2有序列表
ol标签属性type="指定列表项前面的标记"
默认值:1.....
其他标记：A,I
子标签li（列表项）
实例展示：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表的标签</title>
</head>
<body>
<<我们结婚吧>>电视剧中杨桃的扮演者是谁
<ol type="I">
<li>刘亦菲</li>
<li>高圆圆</li>
<li>张佳宁</li>
<li>宋秩</li>
</ol>
</body>
</html>2.4块标签
2.4.1块级元素
<div>：用于定义文档中的一个独立的块级元素，常用于分组和样式控制。
<p>：用于定义段落，自动在元素前后添加换行。
<h1>-<h6>：用于定义标题，数字越小，字号越大。
<ul>：用于定义无序列表，包含在其中的列表项会显示为一个项目符号。
<ol>：用于定义有序列表，包含在其中的列表项会显示为数字或字母。
<li>：用于定义列表项，必须包含在<ul>或<ol>中。
<table>：用于定义表格，包含在其中的内容会按行和列进行布局。
<form>：用于定义表单，用于收集用户输入的数据。
2.4.2内联元素
<span>：用于在文本中标记或包裹特定的内容，常用于设置样式或添加事件。
<a>：用于创建超链接，可以点击跳转到其他页面或位置。
<img>：用于插入图片，可以通过src属性指定图片的URL。
<strong>和<em>：分别用于表示强调和斜体文本。
<input>：用于创建输入字段，如文本框、单选按钮、复选框等。
<button>：用于创建按钮。
<label>：用于定义表单元素的标签。
2.4.3自定义列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>XXX公司项目部组织架构如下</p>
<dl>
<dt>项目总监</dt>
<dd>技术总监</dd>
<dd>架构总监</dd>
<dd>管理总监</dd>
<dt>工程师</dt>
<dd>工程师1</dd>
<dd>工程师2</dd>
<dd>工程师3</dd>
</dl>
</body>
</html>
2.5表单标签
常见的表单标签有：
<form>：定义一个表单<input>：定义一个输入字段，可以用于接收用户输入的文本、数字、密码等<textarea>：定义一个多行文本输入框<select>：定义一个下拉列表框<option>：定义一个下拉列表框中的选项<button>：定义一个按钮<label>：定义一个表单元素的标签<fieldset>：定义一个字段集，用于将相关的表单元素分组<legend>：定义一个字段集的标题<optgroup>：定义一个选项组，用于将相关的选项分组<input type="radio">：定义一个单选按钮<input type="checkbox">：定义一个复选框<input type="submit">：定义一个提交按钮<input type="reset">：定义一个重置按钮<input type="file">：定义一个文件上传字段这些标签可以根据需要进行组合和嵌套，用于创建各种类型的表单。
2.6HTML5新增元素
video元素
type="媒体类型 举例.mp4/.mp3/.ogg等等都是媒体类型"
src="视频文件的地址"
<video width="320px" height="300px" controls="controls">
<source type="audio/mp4" src="video/OPPO-京东.mp4"></source>
<!-- 添加多个source标签 -->
</video>| 属性 | 说明 |
| width | 宽度 |
| height | 高度 |
2.7框架标签
框架标签<frame>和框架集标签<frameset>用于在网页中创建框架布局。它们主要用于划分网页内容，并且可以让多个网页同时显示在浏览器窗口中。
<frame>标签：定义一个单独的框架，用于显示一个独立的HTML文档。每个<frame>标签都必须包含在<frameset>标签中，通过指定src属性来加载相应的HTML文档。
<frameset>标签：定义框架集合，用于指定页面中的框架布局。<frameset>标签必须包含在<html>标签的内部，并且在<body>标签之前
三、CSS
3.1常见的CSS选择器
元素选择器：通过元素名称选择元素，如 div、p、h1。
类选择器：通过指定类名选择元素，如 .class。
ID选择器：通过指定ID选择元素，如 #id。
伪类选择器：根据元素的状态或位置选择元素，如 :hover
3.1.1伪类选择器
:link: 鼠标未访问时的状态
:visited：选择已访问过的链接。
:hover：选择鼠标悬停在元素上的状态。
:active：选择元素被点击时的状态。
注意：
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。
实例：
未访问时：
鼠标经过时：
鼠标点击时：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/* 鼠标未访问*/
a:link{
font-size: 20px;
color: red;
}
/* 鼠标访问过的状态 */
a:visited{
font-size: 25px;
color: red;
text-decoration: none;
}
/* 激活状态 */
a:hover{
font-size: 30px;
color: cornsilk;
}
/* 激活状态 */
a:active{
font-size: 45px;
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="02-h5新增元素.html">京东超市</a>
</body>
</html>3.2CSS文本样式
color: red; /* 字体颜色 */
direction: ltr;/* 文本的方向 ltr从左到右显示左对齐 rtl从右到左显示左对齐*/
text-align: center;/* text-align:文本对齐方式
left:默认值 左对齐
center:居中
right:右对齐
*/
text-decoration: underline;/* text-decoration:文本装饰 :
underline:设置下划线
overline:上划线
line-through中划线
none:去掉文本修饰
*/
text-transform: uppercase;
/* 文本转换:设置字母大写:uppercase/lowercase小写 */
text-indent: 50px;/* 文本缩进:第一行文本设置 缩进效果 */
line-height: 60px;/* 行高:line-height 属性用于指定行之间的间距 */
letter-spacing: 5px;/* 控制文本中字符之间的间距 */
word-spacing: 25px;
/* word-spacing:单词间距 系统认定中文,必须两个子组成一个单词*/
text-shadow: 1px 1px blue;
/* text-shadow 属性为文本添加阴影
垂直和水平阴影 默认2px 后面可以指定颜色
*/
3.3CSS边框
/* border-top-color: red;
border-bottom-color: blue;
border-left-color: orange;
border-right-color: darkblue;
border-color: blue red orange gainsboro; */ */
/* 设置边框颜色 上右下左*/
/* border-top-width: 10px;
border-bottom-width: 20px;
border-left-width: 15px;
border-right-width: 30px;
border-width: 20px 15px 20px 15px; */
/* 设置边框宽度 上右下左*/ */
/* soild:单实线
double:双实线
dotted:线
dashed:虚线
*/
border-style: dashed solid inset;
/* 边框样式 */
border: 30px dashed #6d19ff;
/* 边框的简写属性 */
border-radius: 15px;
/* 边框四个角的弧度*/
width: 200px;
height: 200px;
/* 设置宽度和高度 */
3.4CSS背景样式
background-color: red; /* 规定要使用的背景颜色。 */
background-image: url(img/bg2.jpg) ;/* 规定要使用的背景图像。 */
background-position: center;/* 规定背景图像的位置。 */
background-size: 50rem;/* 规定背景图片的尺寸。 */
background-repeat: no-repeat; /* 规定如何重复背景图像。 */属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。 */
background-origin: content-box; /* 规定背景图片的定位区域。 */
background-clip: padding-box; /* 规定背景的绘制区域。 */
background-attachment: ; /* 规定背景图像是否固定或者随着页面的其余部分滚动。 */
/* inherit /* /*规定应该从父元素继承 background 属性的设置。 */
background
3.5CSS列表样式
list-style-type: disc;
/* disc:默认值 实心圆点
ircle:空心圆点
square:实心小正方形
none:去掉列表项的标记 */
display: inline;/* 让列表项的内容 水平排列 */list-style-image:url();自定义列表前面的标记类型
url(自定义图片地址)
3.6CSS表格
<style>
table,th,td{
border: 1px solid #1dff12;
}
table{
border-collapse: collapse;
}
</style>全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,th,td{
border: 1px solid #1dff12;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" align="center">
<tr>
<th>用户id</th>
<th>用户名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三丰</td>
<td>男</td>
<td>西安</td>
</tr>
</table>
</body>
</html>3.7CSS盒子
它将每个HTML元素视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。
内容区域（Content Area）：盒子的实际内容，例如文本、图像等。
内边距（Padding）：内容区域与边框之间的空白区域。可以使用padding属性设置内边距的大小。
边框（Border）：内边距周围的边界线。可以使用border属性设置边框的样式、宽度和颜色。
外边距（Margin）：边框与相邻元素之间的空白区域。可以使用margin属性设置外边距的大小。
3.8CSS浮动
float：通过设置元素的float属性为left或right，可以使元素向左或向右浮动。
clear属性：用于控制元素周围的浮动元素对其的影响。通过设置clear属性为left、right、both或none，可以清除元素周围特定方向的浮动元素。
清除浮动：为了防止浮动元素对后续内容的影响，可以在需要清除浮动的元素后面添加一个空的块级元素，并设置clear属性为both。