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

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

news 2025/9/13 18:06: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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/9/13 15:47:16

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局：PCB行业的时代之问在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/9/9 10:12:42

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...

编程新知 2025/9/6 15:44:23

使用分级同态加密防御梯度泄漏

抽象联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...

编程新知 2025/9/7 2:01:52

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/8/30 19:47:38

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...

编程新知 2025/8/11 22:22:05

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现一、系统概述本系统基于Java和WML(无线标记语言)技术开发，实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构，服务器端使用Java Servlet处理请求，数据库采用MySQL存储信息&#xff0…...

编程新知 2025/7/28 0:01:58

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/9/3 13:43:40

标签	描述	备注
<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

十二、代码展示

相关文章：

② 相对路径（推荐）