HTML基础知识
认知
五大浏览器
| 名称 | 内核 |
|---|---|
| IE、Edge | Trident |
| Opera（欧朋） | 最初是Presto，后来是Webkit，现在是Blink |
| Safari（苹果） | Webkit |
| Firefox（火狐） | Gecko |
| Chrome（谷歌） | 之前是Webkit，现在是Blink |
定义
HTML（HyperText Markup Language）是用来描述网页的一种超文本标记语言。浏览器不会显示标签，而是使用标签来解释页面的内容。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- 声明为HTML5文档 --> <!DOCTYPE html> <!-- html是页面根元素，且定义页面语言类型 --> <html lang="zh-CN"> <!-- head包含了文档的元数据 --> <head> <!-- 定义网页编码格式 --> <meta charset="UTF-8"> <!-- 描述网页标题内容 --> <title>html基础学习</title> </head> <!-- body包含了页面的课件内容 --> <body> <!-- 定义一个超链接 --> <a href="https://bysjb.cn">这是一个链接</a> </body> </html> |
标签
HTML标记标签通常被称为HTML标签（HTML tag）。分为双标签和蛋标签。
元素
HTML元素指的是从开始标签到结束标签的所有代码。
|
1 |
<p>Hello World</p> |
上面代码中，<p>表示开始标签（start tag），</p>表示结束标签（end tag）。<p>Hello World</p>内容整体则表示HTMl元素。
属性
属性为HTML元素提供附加信息。属性名建议使用小写，且使用双引号包含。
|
1 |
<a href="https://bysjb.cn">这是一个链接</a> |
上面代码中，a链接使用了href属性，用于指定链接跳转的地址。
排版标签
标题
通过<h1> - <h6>等标签进行定义的。
|
1 2 3 4 5 6 7 |
<h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <h6>Hello World</h6> <h7>Hello World</h7> |
搜索引擎使用标题为网页的结构和内容编制索引，所以不能乱用标题标签。浏览器会自动地在标题的前后添加空行。
段落
使用<p></p>标签表示。
|
1 |
<p>这是一个段落</p> |
浏览器会自动在段落的前后添加空行。
文本格式化
不强调
|
1 2 3 4 5 |
<!-- 加粗、倾斜、下划线、删除线 --> <b>加粗文字1</b> <i>倾斜文字1</i> <u>下划线文字1</u> <s>删除下文字1</s> |
强调
|
1 2 3 4 5 |
<!-- 加粗、倾斜、下划线、删除线 --> <strong>加粗文字1</strong> <em>倾斜文字1</em> <ins>下划线文字1</ins> <del>删除下文字1</del> |
换行
使用<br />进行换行
分割线
使用<hr />进行横线分割
媒体标签
图片
使用<img />标签表示。img是一个单标签，作用是显示一张图片。
| 属性名 | 作用 |
|---|---|
| src | 图片的路径位置 |
| alt | 替换文本，图片不显示时显示的文字 |
| title | 提示文本，鼠标悬浮在图片上显示的文字 |
| width/height | 设置图片的宽度/高度，后面主要使用css进行修饰 |
|
1 |
<img src="../../static/img/1.png" alt="错误时显示" width="300" title="这是一张图片"> |
音频
使用<audio></audio> 标签表示。audio是一个音频标签，作用是播放音频。
| 属性名 | 作用 |
|---|---|
| src | 文件路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
|
1 |
<audio src="../../static/media/audio.mp3" controls loop></audio> |
视频
使用<video></video> 标签表示。audio是一个视频标签，作用是播放视频。
| 属性名 | 作用 |
|---|---|
| src | 文件路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
|
1 |
<video src="../../static/media/video.mov" controls loop width="300"></video> |
超链接
定义一个超链接，可用于从一个页面跳转到另一个页面。使用<a href="链接地址">链接文本</a>表示。
|
1 |
<a href="https://www.baidu.com">百度搜索</a> |
上面代码中，“百度搜索”表示链接文本，链接文本不一定是文本， 可以是图像或者其他HTML元素；https://www.baidu.com表示链接地址，点击链接文本后则会跳转到这个链接地址。
| 属性名 | 作用 |
|---|---|
| href | 跳转的链接地址 |
| target | 控制页面打开的形式 |
_blank 新窗口打开 |
|
_self 本窗口打开（默认） |
锚点的使用实例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 创建一个名为img的锚点 --> <a href="#img">跳转图片</a> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <h6>Hello World</h6> <h7>Hello World</h7> <p>这是一个段落</p> <img src="../images/1.png" alt="" id="img"> <a href="https://www.baidu.com" name="img">百度搜索</a> |
上面代码中，首先创建了一个名为img的锚点，底部两个代码则是定义了锚点的跳转位置。当img图片未添加id="img"属性时，点击锚点会跳转到设置name="img"的a链接处，否则会跳转到img图片。锚点跳转到其他标签，只需要设置对应名称的id属性即可。
列表标签
以行的方式整齐的展示数据
无序列表
使用<ul><li></li></ul>表示。
ul中li标签每行默认有一个小圆点
- 每一项是没有顺序的
ul标签中只能有li标签li标签中可以有其他任意标签
|
1 2 3 4 5 6 7 8 9 |
<ul> <p>测试</p> <li>无序列表1</li> <li> <p>测试无序列表</p> </li> <li>无序列表2</li> <li>无序列表3</li> </ul> |
有序列表
使用<ol><li></li></ol>表示。
ol中每一项前面有默认的序号
- 每一项是有顺序的
ol标签中只能放li标签li标签中可以放其他任意标签
|
1 2 3 4 5 |
<ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> |
自定义列表
使用<dl><dd></dd></dl>表示。
dl整体包裹，dt是小标题，dd是每一项
dl中只能放dt和dddt和dd可以放任意标签
|
1 2 3 4 5 6 7 |
<dl> <dt> <p>自定义列表1</p> </dt> <dd>自定义列表2</dd> <dd>自定义列表3</dd> </dl> |
表格标签
使用<table></table>标签表示。以表格整齐的形式展示数据。
基本标签
table整体tr行td块
属性
border边框width宽度height高度
其他标签
caption表格的说明文字th替换td标签，表格一列的标题- 结构标签 包裹
tr标签，描述表格的结构theadtbodytfoot
合并单元格
上下合并保留上边，左右合并保留左边，删除其他
rowspan合并行colspan合并列
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table border width="300" height="300"> <caption>表格标签</caption> <thead> <tr> <th>这是一个单元格</th> <th>这是一个单元格</th> <th>这是一个单元格</th> </tr> </thead> <tbody> <tr> <td rowspan="2">这是一个单元格2</td> <td colspan="2">这是一个单元格2</td> <!-- <td>这是一个单元格2</td> --> </tr> <tr> <!-- <td>这是一个单元4</td> --> <td>这是一个单元4</td> <td>这是一个单元4</td> </tr> </tbody> <tfoot> <tr> <td>这是一个单元格3</td> <td>这是一个单元格3</td> <td>这是一个单元格3</td> </tr> </tfoot> </table> |
表单标签
使用<form></form>标签标识。收集用户数据，如登陆页、注册页等 。
input标签
type 属性值不同，显示不同的类型
| 类型 | 描述 |
|---|---|
| text | 文本框 |
| name 提交后台数据标识符 | |
| value 用户输入的数据，若设置则为默认值 | |
| placholder 占位符 | |
| password | 密码框 |
| name 提交后台数据标识符 | |
| value 用户输入的数据，若设置则为默认值 | |
| placholder 占位符 | |
| radio | 定义单选按钮 |
| name 提交后台数据标识符，相同name属性值的单选框为一组，一组中只能同时有一个被选中 | |
| value 用户选择的数据 | |
| checked 默认选中，一组只能设置一个 | |
| checkbox | 定义复选框，允许多选 |
| name 提交后台数据标识符 | |
| value 用户选择的数据 | |
| checked 默认选中 | |
| file | 定义普通按钮 |
| name 提交后台数据标识符 | |
| multiple 多文件选择 | |
| 表单按钮 | 需要配合form标签一起使用，将form标签包裹在最外层（value 设置按钮文字） |
| submit 提交数据 | |
| reset 让表单恢复默认值 | |
| button 普通按钮 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- 1.1 文本框 --> <input type="text" value="tom" name="name" placeholder="请填入姓名"> <br> <!-- 1.2 密码框 --> <input type="password" value="hello" name="pwd" placeholder="请填入密码"> <br> <!-- 1.3 单选框 --> <input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman" checked>女 <br> <!-- 1.4 多选框 --> <input type="checkbox" name="hobby" value="read" checked>看书 <input type="checkbox" name="hobby" value="travel">旅游 <input type="checkbox" name="hobby" value="tv" checked>追剧 <br> <!-- 1.5 文件选择框 --> <input type="file" name="file" multiple> <br> <!-- 1.6 表单按钮 --> <form action=""> <input type="text"> <input type="submit"> <input type="reset"> <button>点击</button> </form> |
表单属性
| 属性 | 描述 |
|---|---|
| action | 规定提交表单时将表单数据发送到何处 |
| target | 规定提交表单后在何处显示，默认为_self（在当前窗口） |
| method | 规定提交表单时要使用的HTTP方法 |
| name | 规定表单提交的名称 |
|
1 2 3 4 5 6 |
<form action="/" method="get" target="_blank"> 姓名 <input type="text" name="name"><br /> 性别 <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女<br> <input type="submit" value="提交"> </form> |
一个可以点击的按钮
| 属性名 | 作用 |
|---|---|
| submit | 提交数据 |
| reset | 让表单恢复默认值 |
| button | 普通按钮 |
|
1 2 3 4 5 6 |
<form action=""> <input type="text" name="name" value="tom" placeholder="请填写姓名"> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">提交2</button> </form> |
下拉菜单
使用<select><option></option></select>表示。select下拉选择框，option为每个选择项。
name提交后台数据标识符value用户选择的数据selected默认选择
|
1 2 3 4 |
<select name="province"> <option value="jiangsu">江苏省</option> <option value="zhejiang" selected>浙江省</option> </select> |
文本域标签
使用<textarea></textarea>表示，用于输入大量文字。
|
1 |
<textarea name="text" id="" cols="30" rows="10" placeholder="请输入文字"></textarea> |
label标签
使用<label></label>表示，用于绑定表单和文本。用法如下：
- 直接使用
label标签把文本和表单标签包裹起来，但是label标签不能有for属性 - 使用
label标签将文本和表单标签包裹后，在表单标签上添加id属性，并且在label标签的for属性设置id属性值
|
1 2 3 4 5 6 7 8 9 10 11 |
<label> <input type="radio" name="sex" value="man" id="">男 </label> <br> <label for="read"> <input type="checkbox" name="hobby" id="read">读书 </label> <label for="travel"> <input type="checkbox" name="hobby" id="travel">旅游 </label> |
语义化标签
| div | span |
|---|---|
| 块状标签 | 行内标签 |
| 独占一行 | 一行可以显示多个 |
| 宽度默认占满一行，高度默认由内容撑开 | 宽度和高度默认都由内容撑开 |
字符实体
常见的字符实体
| 名称 | 作用 |
|---|---|
|
空格 |
> |
大于号 |
< |
小于号 |