1、HTML基础
1.1、什么是网页？
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。
1.2、什么是HTML？
HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
1.3、常用的浏览器有哪些？
常用的五大浏览器有：IE浏览器、火狐浏览器（Firefox）、g谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全浏览器、360急速浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Blink其实是Webkit的分支 |
1.4、什么是web标准？
web 标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。
1.5、web标准的构成
| 标准 | 作用 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，主要指的是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，主要指的是Javascript |
1.6、web标准的好处有哪些？
- 提高兼容性：对于浏览器开发商和web程序开发人员在开发新的应用程序时遵守指定的标准更利于web的发展。
- 提高开发效率：开发人员按照web标准制作网页，这样对于开发者来说就更简单了，可以很容易了解彼此的代码。
- 跨平台：使用web标签，将确保所有浏览器正常的显示网页，无需费时重写。
- 加快网页解析速度：遵守web标准可以使网页更利于搜索引擎搜索。
- 易于维护：页面的样式和布局信息保存在单独的CSS文件中，想改变页面外观时，仅需要修改CSS文件即可。
2、HTML基本标签
2.1、HTML页面固定结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主题内容
</body>
</html>
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
2.2、HTML标签分类
2.2.1 按闭合特征分类
-
闭合标签：由开始标签和结束标签共同组成，成对出现；常见的闭合标签有
<div></div><p></p>、<span></span>等。标签之间的关系可以存在并列及嵌套关系。 -
单标签：指没有内容的标签，在开始标签中自带闭合标识符。常见的单标签有
<img/>、<hr/>、<link/>、<meta/>、<input/>、<br/>等。
2.2.2 按显示模式分类
- 块级元素：块级元素是指本身属性为display: block的元素。
- 行内元素：行内元素是指本身属性为display: inline的元素，其宽度随着元素的内容变化而变化，也叫内联元素。
- 行内块元素：行内块级元素是指本身属性为display: inline-block的元素
块级元素特点：
- 每一个块级元素独占一行，从上到下排布。
- 块级元素可以直接控制宽高。
- 不设置宽度的情况下，块级元素的宽度是其父元素内容的宽度。
- 不设置高度的情况下，块级元素的高度是他本身内容的高度。
常见的块级元素：
| 标签 | 描述 |
|---|---|
| div | 常见的块级容器，也是css和layout的主要标签 |
| h1~h6 | 一二三四五六级标题 |
| hr | 水平分割线 |
| menu | 菜单列表 |
| ol、ul、li | 有序列表、无序列表、列表项 |
| dl、dt、dd | 自定义列表、定义分类、类项描述 |
| table | 表格 |
| address | 定义地址 |
| p | 段落 |
| form | 交互表单 |
行内元素特点：
- 行内元素会和其他元素从左到右的显示在一行。
- 行内元素不能直接设置宽高，只可以设置内外边距的水平方向的值。也就是说，对行内元素设置margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的。垂直方向的margin和padding是无效的。
- 行内元素只能容纳文本或者其他行内元素，不允许在行内元素中嵌套块级元素
- 行内元素的宽高是由内容本身大小决定的。
常见行内元素：
| 标签 | 描述 |
|---|---|
| a | 锚点，链接标签 |
| span | 常用的行内标签容器，定义文本内区块 |
| sup | 上标文本 |
| sub | 下标文本 |
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除 |
| label | input元素的标注 |
行内块级元素特点：
- 和其他行内或行内块级元素放置在同一行上
- 元素的宽高和内外边距都可以设置
常见行内块级元素：
| 标签 | 描述 |
|---|---|
| button | 按钮 |
| input | 输入框 |
| textarea | 多行文本输入框 |
| img | 图片 |
| select | 下拉列表 |
3、路径的介绍
- 绝对路径：指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如：D:\BaiduNetdisk\BaiduNetdisk.exe
- 相对路径：从当前文件开始出发找目标文件的路径。
3.1、 相对路径的三种情况
- 同级目录：直接写目标文件的名字，vscode在前面加./快速查找
- 下级目录：直接写文件夹名/目标文件名字！，vscode在前面加在前面加./快速查找
- 上级目录：…/目标文件的名字
4、HTML媒体和链接
4.1、 img图片标签
| 属性 | 说明 |
|---|---|
| src | 指定需要展示的图片路径 |
| alt | 替换文本，当图片加载失败时，才显示的文字 |
| title | 提示文本，当鼠标悬停时，才显示的文字 |
| width | 图片的宽度 |
| height | 图片的高度 |
4.2 audio音频标签
| 属性 | 说明 |
|---|---|
| src | 指定需要播放的音频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
4.3 video视频标签
| 属性 | 说明 |
|---|---|
| src | 指定需要播放的视频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需要配合muted实现静音播放） |
| loop | 循环播放 |
4.4 a链接标签介绍
| 属性 | 说明 |
|---|---|
| href | 目标网页的路径 |
| target | 跳转目标网页的打开形式。_self：默认值，在当前窗口跳转；_blank：在新窗口中跳转 |
5、列表标签
5.1、 无序列表
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
代码示例
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>凤梨</li>
<li>葡萄</li>
<li>桃子</li>
</ul>
效果
- 香蕉
- 苹果
- 凤梨
- 葡萄
- 桃子
5.2、 有序列表
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
代码示例
<ol>
<li>斗破苍穹</li>
<li>斗罗大陆</li>
<li>遮天</li>
<li>盘龙</li>
<li>仙逆</li>
</ol>
效果
- 斗破苍穹
- 斗罗大陆
- 遮天
- 盘龙
- 仙逆
5.3、 自定义列表
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
代码示例
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行</dd>
<dd>常见问题</dd>
</dl>
效果
-
购物指南
- 购物流程
- 会员介绍
- 生活旅行
- 常见问题
6、table表格
6.1、 表格的标签
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹caption、thead、tbody、tfoot或直接包裹多个tr |
| caption | 表格整体大标题，默认在表格整体顶部居中位置显示 |
| thead | 表格头部，用于包裹th |
| tbody | 表格主体，用于包裹td |
| tfoot | 表格底部，用于包裹td |
| tr | 表格每行，可用于包裹th,td |
| th | 表格小标题，通常用于表格第一行，默认内部文字加粗并且居中显示 |
| td | 表格单元格，可用于包裹内容 |
代码示例
<table>
<caption>成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>诸葛亮</td>
<td>100分</td>
<td>98分</td>
<td>99分</td>
</tr>
<tr>
<td>司马懿</td>
<td>97分</td>
<td>98分</td>
<td>99分</td>
</tr>
<tr>
<td>周瑜</td>
<td>97分</td>
<td>96分</td>
<td>98分</td>
</tr>
<tr>
<td>贾诩</td>
<td>97分</td>
<td>98分</td>
<td>99分</td>
</tr>
<tr>
<td>郭嘉</td>
<td>99分</td>
<td>99分</td>
<td>99分</td>
</tr>
</tbody>
<tfoot>
<td>平均分</td>
<td>98分</td>
<td>98.2分</td>
<td>98.8分</td>
</tfoot>
</table>
效果
| 姓名 | 语文 | 数学 | 英语 |
|---|---|---|---|
| 诸葛亮 | 100分 | 98分 | 99分 |
| 司马懿 | 97分 | 98分 | 99分 |
| 周瑜 | 97分 | 96分 | 98分 |
| 贾诩 | 97分 | 98分 | 99分 |
| 郭嘉 | 99分 | 99分 | 99分 |
| 平均分 | 98分 | 98.2分 | 98.8分 |
6.2、 表格相关属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
| align | left、right、center | 表格水平位置，也可以用于tr和td中，表示的是单元格内容的水平位置 |
| bordercolor | rbg、rbga、十六进制 | 边框的颜色 |
| cellpadding | 单元格的内容和边框之间的距离 | |
| cellspacing | 两个单元格之间距离的大小 | |
| bgcolor | 表格的背景色，也可以用于tr和td | |
| background | 表格的背景图片，也可以单独的用于某一个单元格 |
6.3、 表格合并单元格
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
代码示例
<table>
<caption>成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>诸葛亮</td>
<td>100分</td>
<td rowspan="2">98分</td>
<td rowspan="2">99分</td>
</tr>
<tr>
<td>司马懿</td>
<td rowspan="3">97分</td>
</tr>
<tr>
<td>周瑜</td>
<td>96分</td>
<td>98分</td>
</tr>
<tr>
<td>贾诩</td>
<td>98分</td>
<td>99分</td>
</tr>
<tr>
<td>郭嘉</td>
<td align="center" colspan="3">99分</td>
</tr>
</tbody>
<tfoot>
<td>平均分</td>
<td>98分</td>
<td>98.2分</td>
<td>98.8分</td>
</tfoot>
</table>
效果
| 姓名 | 语文 | 数学 | 英语 |
|---|---|---|---|
| 诸葛亮 | 100分 | 98分 | 99分 |
| 司马懿 | 97分 | ||
| 周瑜 | 96分 | 98分 | |
| 贾诩 | 98分 | 99分 | |
| 郭嘉 | 99分 | ||
| 平均分 | 98分 | 98.2分 | 98.8分 |
7、form表单
7.1、 input系列标签的基本介绍
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交表单 |
| input | reset | 重置按钮，用于重置表单 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
7.2、 button系列标签的基本介绍
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮。点击之后提交数据给后台服务器 |
| button | reset | 重置按钮。点击之后恢复表单默认值 |
| button | button | 普通按钮。默认无功能 |
7.3、 select下拉菜单标签
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性： - selected：下拉菜单的默认选中
代码示例
<select>
<option>长海</option>
<option selected>重庆</option>
<option>西安</option>
</select>
效果
长海 重庆 西安
7.4、 textarea文本域标签
常见属性：
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
7.5、 label标签
使用场景：常用于绑定内容与表单标签的关系
使用方法一
- 使用label标签把内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法二
- 直接使用label标签把内容和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
8、常见字符实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
' ' |
空格 | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ’ | 撇号 | ' |
| ¢ | 分（cent） | ¢ |
| £ | 榜（pound） | £ |
| ¥ | 元（yen） | ¥ |
| € | 欧元（euro） | € |
| § | 小节 | § |
| © | 版权（copyright） | © |
9、有语义的布局标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)