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

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

news 2025/6/6 22:27:06

一、图片标签

① 绝对路径

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

Spring Boot + OpenAI 构建基于RAG的智能问答系统

一、技术架构设计 1.1 系统架构图 [前端]│▼ (HTTP/REST) [Spring Boot Controller]│▼ (Service Call) [问答处理服务层]├─▶ [知识库检索模块] ──▶ [向量数据库]└─▶ [OpenAI集成模块] ──▶ [OpenAI API]│▼ [结果组装与返回] 1.2 技术选型组件技术栈版本要求…...

编程新知 2025/6/6 21:27:08

[yolov11改进系列]基于yolov11引入上下文锚点注意力CAA的python源码+训练源码

【CAA介绍】本文记录的是基于CAA注意力模块的RT-DETR目标检测改进方法研究。在远程遥感图像或其他大尺度变化的图像中目标检测任务中，为准确提取其长距离上下文信息，需要解决大目标尺度变化和多样上下文信息时的不足的问题。CAA能够有效捕捉长距离依赖…...

编程新知 2025/6/6 20:01:43

用ApiFox MCP一键生成接口文档，做接口测试

日常开发过程中，尤其是针对长期维护的老旧项目，许多开发者都会遇到一系列相同的困扰：由于项目早期缺乏严格的开发规范和接口管理策略，导致接口文档缺失，甚至连基本的接口说明都难以找到。此外，由于缺乏规范…...

编程新知 2025/6/6 14:32:18

Java 抗量子算法：构建后量子时代的安全基石

一、量子计算带来的加密挑战在传统加密体系中，RSA、ECC 等公钥算法依赖大数分解和离散对数问题的难解性。然而，量子计算机的 Shor 算法可在多项式时间内破解这些算法，使现有加密体系面临颠覆性威胁。例如，2048 位 RSA 密钥的破解…...

编程新知 2025/6/6 13:35:46

物料转运人形机器人适合应用于那些行业？解锁千行百业的智慧物流革命

当传统物流设备困于固定轨道，当人力搬运遭遇效率与安全的天花板，物料转运人形机器人正以颠覆性姿态重塑产业边界。富唯智能凭借GRID大模型驱动的"感知-决策-执行"闭环系统，让物料流转从机械输送升级为智慧调度——这不仅是工具的革…...

编程新知 2025/6/6 11:09:13

刷leetcode hot100--矩阵6/1

1.螺旋矩阵【很久】6/1【感觉就是思路的搬运工，没完全理解】 54. 螺旋矩阵 - 力扣（LeetCode） 原来想但是如果是奇数矩阵，遍历不到中间解决思路： 用left,right,top,down标记/限定每次遍历的元素，每次从…...

编程新知 2025/6/6 8:46:49

结构型设计模式之Proxy（代理）

结构型设计模式之Proxy（代理） 前言： 代理模式，aop环绕通知，动态代理，静态代理都是代理的一种，这次主要是记录设计模式的代理demo案例，详情请看其他笔记。 1）意图为其…...

编程新知 2025/6/6 8:07:52

斐波那契数列------矩阵幂法

斐波那契数列斐波拉楔数是我们在学递归的使用看到的题目，但递归法是比较慢的，后面我们用循环递进来写的，但今天我有遇到了新的方法—— 矩阵幂法（线性代数的知识点）。矩阵幂法： F11*F10*F2; F20*F11*…...

编程新知 2025/6/6 6:53:15

【Redis】zset 类型

zset 一. zset 类型介绍二. zset 命令zaddzcard、zcountzrange、zrevrange、zrangebyscorezpopmax、zpopminzrank、zrevrank、zscorezrem、zremrangebyrank、zremrangebyscorezincrby阻塞版本命令：bzpopmax、bzpopmin集合间操作：zinterstore、zunionstor…...

编程新知 2025/6/6 5:34:45

Java高级 | 【实验四】Springboot 获取前端数据与返回Json数据

隶属文章： Java高级 | （二十二）Java常用类库-CSDN博客系列文章： Java高级 | 【实验一】Spring Boot安装及测试最新-CSDN博客 Java高级 | 【实验二】Springboot 控制器类相关注解知识-CSDN博客 Java高级 | 【实验三】Springboot …...

编程新知 2025/6/6 2:58:25

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

十二、代码展示

相关文章：

② 相对路径（推荐）