本文详细介绍了HTML的基础知识，包括常见的文本、排版、符号、媒体、列表、表格和表单标签及其用法。通过实例展示了如何创建和编辑HTML文件，以及如何预览和控制网页效果。此外，还提到了HTML中的字符实体和布局标签，对于初学者理解网页结构和构建静态页面极具帮助。
html编辑器 - VScode 优点：速度快，体积小，插件多
- 新建文本文件，后缀名改为 .html/.htm
- 编写 HTML结构标签
- 保存后，使用浏览器打开该文件（VScode 扩展安装view in browser，预览网页效果）
一、HTML网页结构标签
| 标签 | 描述 |
|---|---|
| HTML标签：<HTML> | 网页的整体 ：定义 HTML 文档 |
| head标签： <head> | 网页的头部：定义关于文档的信息 |
| body标签： <title> | 网页的标题：定义文档的标题 |
| title标签：<body> | 网页的身体 ：定义文档的主体 |
<!DOCTYPE html>
<!-- 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>网页的标题</title>
</head>
<body>
网页的身体（内容）
</body>
</html>
二、基础标签
文本标签
| 效果 | 标签语义化 | 标签格式化 |
|---|---|---|
| strong文字加粗 | <strong> strong文字加粗 </strong> | <b> b加粗 </b> |
| ins文字下划线 | <ins> ins文字下划线 </ins> | <u> u下划线 </u> |
| em文字倾斜 | <em> em文字倾斜 </em> | <i> i倾斜 </i> |
| <del> | <s> |
排版标签
| 标签 | 描述 |
|---|---|
| <h1> ~ <h6> | 定义标题，h1最大，h6最小 |
| <font> | 定义文本的字体、字体尺寸、字体颜色 |
| <b> | 定义粗体文本 |
| <i> | 定义斜体文本 |
| <u> | 定义文本下划线 |
| <center> | 定义文本居中 |
| <p> | 定义段落 |
| <br> | 定义折行 |
| <hr> | 定义水平线 |
符号标签
| HTML 原代码 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号或显示标记 |
| > ; | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行的空白 |
三、媒体标签
1. 图片标签
<img src="目标图片的路径" alt="图片加载失败时，显示alt的文本" title="鼠标悬停时，显示的文本">
路径: 相对路径 （常用），绝对路径
- img：定义图片
- src：规定显示图像的 URL
- height：定义图像的高度
- width：定义图像的宽度
- 宽高：width=“800”，如果只设置一个，会等比例缩放
2. 音频标签
<audio src="路径" controls autoplay loop>
- audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls (显示播放的控件如速度)
- autoplay :自动播放
- loop :循坏播放
3. 视频标签
<video src="相对路径" controls autoplay loop>
- video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件
- autoplay：自动播放
- loop：循环播放
4. 超链接标签
链接标签a的显示特点：
- a标签默认文字有下划线
- a标签从未点击过，默认文字显示蓝色
- a标签点击过之后，文字显示为紫色
| 标签 | 描述 |
|---|---|
<a href = "#" target="_blank"> 点我就跳转</a> | 定义超链接，用于链接到另一个资源 |
四、列表
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
- type：设置符号的类型
1. 无序列表 <ul>
-
由两个标签ul,li组成
- ul表示无序列表的整体，包含多个li项。
- 显示特点：li前面默认显示圆点
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>水果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>
- 榴莲
- 香蕉
- 水果
- 哈密瓜
- 火龙果
2. 有序列表 <ol>
由两个标签ol,li组成
ol表示有序列表整体，li前默认显示序号标识
<ol>
<li>LGJ: 100分</li>
<li>LJG: 99分</li>
<li>GLJ: 98分</li>
</ol>
- LGJ: 100分
- LJG: 99分
- GLJ: 98分
3. 自定义列表 <dl> <dt>
- dl表示自定义列表整体，包裹dt,dd
- dt表示自定义列表主题，dd表示每一项dt的解释说明
- dd相对于dt会有缩进
<dl>
<dt>帮助中心dt</dt>
<dd>账户管理dd</dd>
<dd>购物指南dd</dd>
<dd>订单操作dd</dd>
</dl>
-
帮助中心dt
- 账户管理dd
- 购物指南dd
- 订单操作dd
五、表格
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <tr> | 定义行 |
| <td> | 定义单元格 |
| <th> | 定义表头单元格 |
- table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
- tr：定义行
- bgcolor：背景色
- align：对齐方式
- td：定义单元格
- colspan：合并列
- rowspan：合并行
- th：定义表头单元格
- <caption>：表格标题
<table border="2" width="300" height="300">
<caption>
<h3>表格大标题</h3>
</caption>
<thead>
<tr>
<th>1列索引</th>
<th>2列小标题</th>
<th>3列表头格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td rowspan="2">2.2合并了3.2</td>
<td>2行3列</td>
</tr>
<tr>
<td>3.1</td>
<!-- 删掉3.2，留给2.2 -->
<td>3.3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾巴</td>
<td colspan="2">总结，合并了右边</td>
<!-- 删除这格 -->
</tr>
</tfoot>
</table>
| 1列索引 | 2列小标题 | 3列表头格 |
|---|---|---|
| 1行1列 | 1行2列 | 1行3列 |
| 2行1列 | 2.2合并了3.2 | 2行3列 |
| 3.1 | 3.3 | |
| 尾巴 | 总结，合并了右边 | |
- 表格基本标签与相关属性
层层嵌套：table定义表格整体 > tr表格每一行 > td表格单元格 -
- 设置table的属性
- border：表格的边框
- width：表格的宽度
- height：表格的高度
实际开发样式宜用css
- 表格结构
table（设置表格属性）
1.caption（整个表格大标题）
2.thead：表格的头部
th:表头单元格（列标题/索引），替换td的位置
3.tbody：表格的身体
包裹行tr，行中为td
4.tfoot：表格的底部
-
4. 将水平或垂直多个单元格合并为一个
合并单元格
- 1.rowspan跨行合并（上下），colspan跨列合并（左右）
-
2.左上原则：保留左上的坐标
- 3.不能跨越结构：tbody的不能合并了tfoot！
六、表单
| 标签 | 描述 |
|---|---|
| <form> | 定义表单 |
| <input> | 定义表单项，通过type属性控制输入形式 |
| <label> | 为表单项定义标注 |
| <select> | 定义下拉列表 |
| <option> | 定义下拉列表的列表项 |
| <textarea> | 定义文本域 |
| type 取值 | 描述 |
|---|---|
| text | 默认值。定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| hidden | 定义隐藏的输入字段 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| button | 定义可点击按钮 |
input系列标签
< input type=“text” placeholder=“提示信息” name=“nickname” >
- type 为text文本框可显示内容；password密码框不显示输入内容
- placeholder=文本占位符，可放提示信息
- name=变量名
单选框
- <input type="radio" name="sex" value="男" checked>男
- type为radio表示单选框
- name的变量只能取选中的value
- checked表示该项默认选中
复选框
- <input type="checkbox" name="fruit" value="badminton">羽毛球
- type为checkbox表示多选
文件选择框
<input type=“file” multiple>
file：multiple可添加多个文件
按钮
submit提交，reset重置，button普通按钮，配合js添加功能
——form标签包裹整个表单才能交互，action后续学习
- 前后端数据交互:
- value属性：用户输入的内容，提交后发送给后端服务器
- name属性：value的变量名
<form action="">
昵称：<input type="text" placeholder="提示信息" name="nickname">
——————文本框text：placeholder=文本占位符，name=变量名<br>
密码框：<input type="password" placeholder="看不见我">
——————password:看不见输入的内容<br>
性别：
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" vlaue="女">女
——————单选框radio:name表示只能选中的一个，checked默认选中<br>
爱好：
<input type="checkbox" name="hobby" value="coding">敲代码
<input type="checkbox" name="hobby" value="stay_up">熬夜
<input type="checkbox" name="hobby" value="fair_down">掉头发
——————复选框checkbox:checked默认选中<br>
文件选择框：<input type="file" multiple>
——————file：multiple多文件选择<br>
<input type="submit">
<input type="reset">
<input type="button" value="value"><br>
——submit提交，reset重置，button普通按钮，配合js添加功能<br>
——form标签包裹整个表单才能交互，action后续学习<br>
——前后端数据交互:<br>
——value属性：用户输入的内容，提交后发送给后端服务器<br>
——name属性：value的变量名<br>
</form>
按钮，下拉菜单，文本域，label
button按钮标签
<button type=“submit”>提交</button>
类型可选submit提交,reset重置,button普通按钮
select下拉菜单
每一个选项为一个option标签，selected为默认选项
所在城市:<select>
<option value=“北京”></option>
<option value=“深圳” selected></option>
</select>
textarea文本域标签
请输入文本：<textarea cols=“10” rows=“2”></textarea>
label标签
使选择框点击文字也能选中，将文本与表单标签绑定
七、布局标签
1. 无语义的布局标签div，span
| 标签 | 描述 |
|---|---|
| <div> | 定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页 |
| <span> | 用于组合行内元素。 |
<div>我是div(一个独占一行)</div>
<div>我是div</div>
<span>我是span（一行显示多个）</span>
<span>我是span</span><br>
2. 有语义的布局标签
<header>网页的头部header</header>
<nav>网页的导航nav</nav>
<footer>网页的底部footer</footer>
<aside>网页的边栏aside</aside>
<section>网页的区块section</section>
<article>网页的文章article</article>
九、字符实体
- HTML中空格合并现象
代码中的多个空格或者换行，在网页中只显示一个空格
想要在网页中展示特殊符号效果，需要用字符实体代替 - &常见字符实体
空 格:  
展示标签：< a > 显示为 <a>
HTML5速查宝典
CSS学习笔记
使用github搭建个人网站
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
