当前位置：首页 > news >正文

【javaweb】学习日记Day1 - HTML CSS入门

news 2026/2/10 2:57:55

一、图片标签

① 绝对路径

1.绝对磁盘路径

2.绝对网络路径

② 相对路径（推荐）

二、标题标签

三、水平线标签

四、标题样式

1、CSS引入样式

① 行内样式

② 内嵌样式

③ 外嵌样式

2、CSS选择器

① 元素选择器

② id选择器

③ 类选择器

五、超链接

六、视频标签

七、音频标签

八、换行、段落、文本加粗

九、页面布局

1、div

2、span

3、盒子模型

十、表格标签

十一、表单标签

1、主体

2、表单项

（1）input

（2）select

（3）textarea

十二、代码展示

一、图片标签 <img>

src：指定图片的url（绝对路径 / 相对路径）
width：宽度（px：像素，%：相对于父元素的百分比）
height：高度（px：像素，%：相对于父元素的百分比）

① 绝对路径

1.绝对磁盘路径

右键图片属性 —— 安全 —— 复制对象名

<img src="C:\Users\24453\Desktop\容宝网站\img\sina.jpg">

2.绝对网络路径

右键网页图片—— 在新标签页中打开图片 —— 复制路径
<img src="https://img-home.csdnimg.cn/images/20201124032511.png">

② 相对路径（推荐）

./ 当前目录，可省略
../ 上一级目录

二、标题标签 <h1> - <h6>

三、水平线标签 <hr>

四、标题样式

1、CSS引入样式

① 行内样式

写在标签style属性中（不推荐）

<h1 style="属性名:属性值;属性名:属性值;"中国新闻网</h1>

② 内嵌样式

写在style标签中（可以写在页面任何位置，通常写在head标签中）

<style>h1{属性名:属性值;属性名:属性值;}
</style>

③ 外嵌样式

写在一个单独的.css文件中（需要通过link标签在网页中引入）

<link rel="stylesheet" href="css/news.css">

实例：

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>页面标题</title><!-- 方式二：内嵌样式 --><style>h1{color: brown;}</style> <!-- 方式三：外嵌样式 --><link rel="stylesheet" href="./news.css"></head>
<body><img src="img/sina.jpg" width="7%"> <div style="font-size: 6px;">日常 > 分享</div><!-- 方式一：行内样式 --><h1 style="color: firebrick;">标题样式</h1> <h1>标题样式</h1><hr>2023年8月11日 13:14 容宝网<hr></body>
</html>

2、CSS选择器

优先级：id选择器 > 类选择器 > 元素选择器

① 元素选择器

元素名称{color:red;
}h1{color:red;
}<h1> 新闻联播网 </h1>

② id选择器

#id属性值{color:red;
}#hid{color:red;
}<h1 id="hid"> 新闻联播网</h1>

③ 类选择器

.class属性值{color:red;
}.cls{color:red;
}<h1 class="cls"> 新闻联播网 </h1>

实例：

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>震惊！！</title><!-- 方式二：内嵌样式 --><style>h1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}</style> </head>
<body><img src="img/sina.jpg" width="7%"> <span>恋爱日常 > 分享</span><h1>震惊！！</h1><hr><span id="time">2023年8月11日 13:14</span> <span class="cls">容宝网</span><hr></body>
</html>

五、超链接

<a href="https://baidu.com">容宝网</a>

href：指定资源访问的url
target：指定在何处打开链接
- -self：默认值，在当前页面打开
- -blank：在空白页面打开

实例：

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>震惊！！</title><!-- 方式二：内嵌样式 --><style>h1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*设置文本为一个标准文本*/}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}</style> </head>
<body><img src="img/sina.jpg" width="7%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2445374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">恋爱日常</a><span> > 分享</span><h1>震惊！！</h1><hr><span id="time">2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容宝网</span></a><hr></body>
</html>

六、视频标签 <video>

<video src="./video/VID_20230808_173135.mp4" controls width="200px"></video>  <!--controls是允许播放-->

七、音频标签 <audio>

<audio src="audio/1.mp3" controls></audio>

八、换行、段落、文本加粗

<br>   换行<p>   段落<b> <strong>   文本加粗line-height  设置行高text-indent  首行缩进text-align   文本水平对其方式&nbsp;   生成一个空格

九、页面布局 <div> <span>

1、div

一行只显示一个(独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height)

2、span

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高( width、height)

3、盒子模型

<style>div{width:200px;height:200px;box-sizing:border-box;  /*指定width height为盒子的高宽*/background-color:red;   /*背景色*/padding:20px 20px 20px 20px;  /*内边距 上 右 下 左 （顺时针）*/border:10px solid red;        /*边框宽度  线条类型  颜色*/margin:30px 30px 30px 30px;   /*外边距 上 右 下 左 （顺时针）*/}
</style>

十、表格标签 <table>

标签描述备注
<table>
定义表格整体

可以包裹多个<tr>
border：规定表格边框宽度
width：规定表格宽度
cellspacing：规定单元格间的空间
<tr> 表格的行，可以包裹多个<td>
<td> 单元格如果是表头单元格，可以替换为<th>，有加粗和居中效果

十一、表单标签 <form>

1、主体

action：表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面
method：表单提交方式
get：在url后面拼接表单数据，比如?用户名=容也同学&年龄=20，url长度有限制，默认值
<form action="" method="get">用户名：<input type="text" name="用户名">年龄：<input type="text" name="年龄"><input type="submit" value="提交">
</form>
post：在消息体中传递，参数大小无限制
<form action="" method="post">用户名：<input type="text" name="用户名">年龄：<input type="text" name="年龄"><input type="submit" value="提交">
</form>

2、表单项

（1）input

表单项，通过type属性控制输入形式

（2）select

定义下拉列表，<option>定义列表项

（3）textarea

定义文本域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head><body><form action="" method="post">用户名：<input type="text" name="用户名"><br><br>密码：<input type="password" name="密码"><br><br>性别：<label><input type="radio" name="性别" value="1">男</label><label><input type="radio" name="性别" value="2">女</label><br><br>用餐偏好：<label><input type="checkbox" name="中餐">中餐</label><label><input type="checkbox" name="西餐">西餐</label><label><input type="checkbox" name="日料">日料</label><label><input type="checkbox" name="韩餐">韩餐</label><label><input type="checkbox" name="东南亚风味">东南亚风味</label><br><br>生日：<input type="date" name="生日"><br><br>时间：<input type="time" name="时间"><br><br>邮箱：<input type="email" name="邮箱"><br><br>年龄：<input type="number" name="年龄"><br><br>学历：<select name="学历"><option value="">--------请选择---------</option><option value="1">本科</option><option value="2">大专</option><option value="3">硕士</option><option value="4">博士</option></select><br><br>头像：<input type="file" name="image" ><br><br>个人简介：<textarea name="个人简介" cols="30" rows="10"></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" name="按钮"><br></form>
</body>
</html>

十二、代码展示

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>震惊！西安居然发生了这种事！</title><!-- 方式二：内嵌样式 --><style>h1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*设置文本为一个标准文本*/}p{text-indent: 35px;  /*首行缩进*/line-height: 30px;  /*设置行间距*/}video{display: block;margin: 0 auto;}table{text-align: center;}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}#plast{text-align: right;  /*设置对其方式*/}#center{width:65%;/*margin:0% 17.5% 0% 17.5%;    设置外边距：上 右 下 左 */margin:0 auto;}#mid{display: block;margin: 0 auto;}</style> </head>
<body><div id="center"><!-- —————————————————————— 标题部分 ———————————————————————— --><img src="img/sina.jpg" width="12%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">恋爱日常</a><span> > 分享</span><h1>震惊！西安居然发生了这种事！</h1><hr><span id="time">&nbsp; &nbsp; 2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容宝网</span></a><hr><!-- —————————————————————— 正文部分 ———————————————————————— --><p><b>容宝网消息</b>（聚焦西安）：据了解，xx。</p><img id="mid" src="./img/htmlMTXX_MH20230807_214202042.jpg" width="300px"><p>xxxxxxx购置了西瓜和葡萄。</p><img id="mid" src="./img/htmlMX_MH20230807_204455741.jpg" width="300px"><p>由于许xxxx</p><table border="0" cellspacing="5"><tr><td><img src="./img/htmlMTXX_MH20230807_211045065.jpg" width="300px"></td><td><img src="./img/htmlMTXX_MH2230807_204911532.jpg" width="300px"></td><td><img src="./img/htmlMTXX_MH2023080_220415058.jpg" width="300px"></td></tr></table><p>第二天，xxx</p><video src="./video/VID_20230808_173135.mp4" controls width="200px"></video>  <!--controls是允许播放--><p id="plast">责任编辑：小白  SN242</p></div>
</body>
</html>

【javaweb】学习日记Day1 - HTML CSS入门

目录一、图片标签 ① 绝对路径 1.绝对磁盘路径 2.绝对网络路径 ② 相对路径 （推荐） 二、标题标签三、水平线标签四、标题样式 1、CSS引入样式 ① 行内样式 ② 内嵌样式 ③ 外嵌样式 2、CSS选择器 ① 元素选择器 ② id选择器 ③…...

编程日记 2023/8/16 18:59:21

贴吧照片和酷狗音乐简单爬取

爬取的基本步骤很简单，主要是两大步向url发起请求这里注意找准对应资源的url，如果对应资源不让程序代码访问，这里可以伪装成浏览器发起请求。解析上一步返回的源代码，从中提取想要的资源这里解析看具体情况，一…...

编程日记 2023/8/16 18:58:19

Databend 开源周报第 106 期

Databend 是一款现代云数仓。专为弹性和高效设计，为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务：https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展，遇到更贴近你心意的 Databend 。数据脱敏 Data…...

编程日记 2023/8/16 18:57:18

Mysql中使用存储过程插入decimal和时间数据递增的模拟数据

场景 Mysql插入数据从指定选项中随机选择、插入时间从指定范围随机生成、Navicat使用存储过程模拟插入测试数据： Mysql插入数据从指定选项中随机选择、插入时间从指定范围随机生成、Navicat使用存储过程模拟插入测试数据_mysql循环插入随机数据_霸道流氓气质的博客…...

编程日记 2023/8/16 18:56:15

IL汇编ldc指令学习

ldc指令是把值送到栈上， 说明如下， ldc.i4 将所提供的int32类型的值作为int32推送到计算堆栈上； ldc.i4.0 将数值0作为int32推送到计算堆栈上； ... ldc.i4.8 将数值8作为int32推送到计算堆栈上； ldc.i4.m1 将数值-…...

编程日记 2023/8/16 18:55:14

【Redis基础篇】浅谈分布式系统（一）

一、浅谈分布式系统 1. 单机架构：只有一台服务器，这个服务器负责所有的工作。如果遇到了服务器不够的场景怎么处理? 开源：增加更多的硬件资源节流：软件上的优化，优化代码等…一台服务器资源使用有限，就…...

编程日记 2023/8/16 18:54:12

CSS中的calc()函数有什么作用？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中的calc()函数及其作用⭐ 作用⭐ 示例1. 动态计算宽度：2. 响应式布局：3. 自适应字体大小：4. 计算间距： ⭐ 写在最后 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界记得点…...

编程日记 2023/8/16 18:53:11

由浅入深学习Tapable

文章目录由浅入深学习TapableTapable是什么Tapable的Hook分类同步和异步的使用Sync*同步类型钩子基本使用bailLoopWaterfall Async*异步类型钩子ParallelSeries 由浅入深学习Tapable webpack有两个非常重要的类：Compiler和Compilation。他们通过注入插件的方式&a…...

编程日记 2023/8/16 18:52:10

YOLOv5白皮书-第Y6周：模型改进

📌本周任务：模型改进📌 注：对yolov5l.yaml文件中的backbone模块和head模块进行改进。任务结构图： YOLOv5s网络结构图: 原始模型代码： # YOLOv5 v6.0 backbone backbone:# [from, number, module, args]…...

编程日记 2023/8/16 18:51:08

word之插入尾注+快速回到刚才编辑的地方

1-插入尾注在编辑文档时，经常需要对一段话插入一段描述或者附件链接等，使用脚注经常因占用篇幅较大导致文档页面内容杂乱，这事可以使用快捷键 ControlaltD 即可在整个行文的末尾插入尾注，这样文章整体干净整洁，需…...

编程日记 2023/8/16 18:50:07

Qt扫盲-QTableView理论总结

QTableView理论总结一、概述二、导航三、视觉外观四、坐标系统五、示例代码1. 性别代理2. 学生信息模型3. 对应视图一、概述 QTableView实现了一个tableview 来显示model 中的元素。这个类用于提供之前由QTable类提供的标准表，但这个是使用Qt的model/view架构提供…...

编程日记 2023/8/16 18:49:06

从外部访问K8s中Pod的五种方式

hostNetwork、 hostPort、 NodePort、 LoadBalancer、 Ingress 暴露Pod与Service一样，因为Pod就是Service的backend 1、hostNetwork：true 这是一种直接定义 Pod 网络的方式。如果在 Pod 中使用 hostNetwork:true 配置， pod 中运行的应用程序…...

编程日记 2023/8/16 18:47:02

什么是A股交易接口_（股票交易c接口）开发原理

A股交易接口是指用于与国内的证券交易所（上海证券交易所和深圳证券交易所）进行股票买卖交易的电子接口或软件系统。A股交易接口是金融机构、券商以及个人投资者的必备掌握操作技能之一，它提供了实时的股票行情、交易下单、撤单、查询账户信息…...

编程日记 2023/8/16 18:46:01

STM32F4X NVIC中断概念

STM32F4X NVIC中断概念 CPU查询状态两种方式轮询查询中断查询 STM32有关中断的概念中断向量表系统中断外设中断中断号中断优先级 STM32F4X NVIC控制器NVIC控制器简介NVIC寄存器优先级分组 STM32F4X中断配置优先级分组设置配置外设中断 CPU查询状态两种方式在讲解中断的概念之…...

编程日记 2023/8/16 18:44:59

linux下 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/RHEL/hashicorp.repo sudo yum -y install consulwindow下 https://developer.hashicorp.com/consul/downloads 然后把里面的exe文件放在gopath下就行了验证…...

编程日记 2023/8/16 18:43:58

应用在汽车前照灯系统中的环境光传感芯片

为了保证行车照明的安全性和方便性，减轻驾驶员的劳动强度。近年来，出现了许多新的照明控制系统，例如用于日间驾驶的自动照明系统、光束调节系统、延迟控制等。尤其是汽车自适应前照灯系统，它是一种能够自动改变两种以上的光型以适…...

编程日记 2023/8/16 18:42:57

Python Flask+Echarts+sklearn+MySQL(评论情感分析、用户推荐、BI报表)项目分享

Python FlaskEchartssklearnMySQL(评论情感分析、用户推荐、BI报表)项目分享项目背景： 随着互联网的快速发展和智能手机的普及，人们越来越倾向于在网上查找餐厅、购物中心、酒店和旅游景点等商户的点评和评分信息，以便做出更好的消费决策。…...

编程日记 2023/8/16 18:41:55

开源项目-高校自动排课系统

哈喽，大家好，今天给大家带来一个开源项目-基于遗传算法的一个高校自动排课系统，同时也是一个前后端分离项目。前端：React 后端：SpringBoot+MyBatis+MySQL数据库高校自动排课系统的主要功能包括查询模块，安排教学区域，排课页面三部分登录查询模块可以根据学年…...

编程日记 2023/8/16 18:40:54

IP网络广播系统草坪音箱景区系统防水石头,草坪音箱的应用

IP网络广播系统草坪音箱景区系统防水石头,草坪音箱的应用 SV-7045V是深圳锐科达电子有限公司的一款防水网络草坪音箱，具有10/100M以太网接口，可将网络音源通过自带的功放和喇叭输出播放，可达到功率20W。常用场景：公园ip草坪音箱&…...

编程日记 2023/8/16 18:39:51

拒绝摆烂！C语言练习打卡第二天

🔥博客主页：小王又困了 📚系列专栏：每日一练 🌟人之为学，不日近则日退 ❤️感谢大家点赞👍收藏⭐评论✍️ 目录一、选择题 📝1.第一题 📝2.第二题 📝…...

编程日记 2023/8/16 18:38:50

Robots.txt 文件

什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字不要使用 Kotlin 的任何硬关键字作为方法的名称或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录一、👋🏻前言二、😈sinx波动的基本原理三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理四、🌊波动优化…...

编程新知 2026/2/6 22:55:12

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2026/2/9 2:41:28

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。问题一：历史轨迹与小球残影残留现象小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

实战三：开发网页端界面完成黑白视频转为彩色视频

一、需求描述设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。效果图二、实现思路总体思路： 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...

编程新知 2026/2/7 16:38:17

API网关Kong的鉴权与限流：高并发场景下的核心实践

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】引言在微服务架构中，API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关，Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程核心流程商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面代码实现示例（电脑网站支付） 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53

对象回调初步研究

_OBJECT_TYPE结构分析在介绍什么是对象回调前，首先要熟悉下结构以我们上篇线程回调介绍过的导出的PsProcessType 结构为例，用_OBJECT_TYPE这个结构来解析它，0x80处就是今天要介绍的回调链表，但是先不着急，先把目光…...

编程新知 2026/1/26 18:44:47

标签	描述	备注
<table>	定义表格整体可以包裹多个<tr>	border：规定表格边框宽度
		width：规定表格宽度
		cellspacing：规定单元格间的空间
<tr>	表格的行，可以包裹多个<td>
<td>	单元格	如果是表头单元格，可以替换为<th>，有加粗和居中效果

一、图片标签 <img>

① 绝对路径

1.绝对磁盘路径

2.绝对网络路径

② 相对路径 （推荐）

二、标题标签 <h1> - <h6>

三、水平线标签 <hr>

四、标题样式

1、CSS引入样式

① 行内样式

② 内嵌样式

③ 外嵌样式

2、CSS选择器

① 元素选择器

② id选择器

③ 类选择器

五、超链接

六、视频标签 <video>

七、音频标签 <audio>

八、换行、段落、文本加粗

九、页面布局 <div> <span>

1、div

2、span

3、盒子模型

十、表格标签 <table>

十一、表单标签 <form>

1、主体

2、表单项

（1）input

（2）select

（3）textarea

十二、代码展示

相关文章：

② 相对路径（推荐）