一篇笔记总结HTML基础知识
鬼多不菜 2024-08-18 08:33:01 阅读 88
目录
一、基础认识
1、铺垫
2、HTML初认识
（1）HTML骨架
（2） HTML语法规范
二、标签学习
1、排版标签
（1）标题标签
（2）段落标签
（3）换行标签与水平线标签
（4）整体展示
编辑
2、文本格式化标签
3、媒体标签
（1）路径
（2）图片
（3）音频标签
（4）视频标签
（5）链接标签
4、列表标签
5、表格标签
6、表单标签
（1）基本使用
（2）placeholder属性：文本框占位符
（3）单选功能和默认选中
（4）上传多个文件
（5）按钮
（6）select下拉菜单标签
（7）textarea 文本域标签
（8） label标签
7、语义化标签
（1）没有任何语义的布局标签
（2）有语义的布局标签
8、字符实体
一、基础认识
1、铺垫
HTML、CSS和JavaScript常常一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。大家都知道，网页一般由文字、图片、音频、视频、超链接等组成。而一个HTML文件经过浏览器的解析和渲染之后就变成了用户看到的可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，因此使其成为一种标记语言而不是编程语言。其超文本标记语言（HTML全称HyperTextMarkupLanguage）的名称也表明这一点。
由于市面上的浏览器并不统一，其对应的渲染引擎也大相径庭，因此对于相同代码的解析效果也存在一定的差异。为了保证用户的体验，一般使用web标准进行网页开发。web标准由三部分构成：
| 构成 | 语言 | 说明 |
| 结构 | HTML | 网页元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式 |
| 行为 | JavaScript | 网页模拟的定义与页面交互 |
2、HTML初认识
（1）HTML骨架
HTML是一种标记语言，它通过使用一系列的标签来实现其一系列的功能。而这些标签的排版也并不是杂乱无章的，它们有一定的骨架结构（如整体、头部、标题、主体等）。
可以看到，整个HTML代码都被包含在<html></html>标签中。html标签中包含了head（头部）和body（主体） 标签。而head标签中又包含了title（标题）标签。这就是HTML的基础骨架。其中title标签中的内容就对应网页的标题。例如：
（2） HTML语法规范
注释：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码。在VS code中一般使用 ctrl+/ 添加注释。
<!-- 这是一个注释 -->
结构构成：标签主要有<、>、/和一些英文字母组成。其中把由<>包起来的单词或者字母叫做标签名。 大多数标签由两部分组成，被称为双标签。前部分是开始标签，后半部分时结束标签。还有一些标签由一部分组成，被称为单标签，单标签无法包裹内容。
<h1>双标签</h1>
<!-- 双标签 -->
<hr>
<!-- 单标签 -->
标签之间的关系：HTML标签与标签之间的关系可以分为两种：父子关系（嵌套关系）、兄弟关系（并列关系）。很好理解，父子关系就是父标签包裹子标签之间的关系，而兄弟关系两个标签相互并列，共处同级的关系。
二、标签学习
提要：网页一般由文字、图片、音频、视频、超链接组成。而作为一种超文本标记语言，HTML实际上就是通过标签来展现这些内存的。因此，标签的学习可以分为四个部分：排版标签、文本格式化标签、媒体标签、链接标签。
1、排版标签
（1）标题标签
标题是文章的重要部分，有其独特的显式格式，如独占一行、文字有加粗效果，并且可以分为多级标题。
在代码上使用的就是 h系列 标签（双标签）。h系列标签一般有6级。在使用时，将对应级数标注在h后面即可。
<h1>文本标签1级</h1>
<h2>文本标签2级</h2>
<h3>文本标签3级</h3>
<h4>文本标签4级</h4>
<h5>文本标签5级</h5>
<h6>文本标签6级</h6>
（2）段落标签
文章有标题也就有段落。段落标签的特点是段落之间存在缝隙，同样的独占一行。
代码上使用p（双标签）标签，用于文字分段显示。需要注意的是，当文字超出文本框长度时，文本会自动换行。
<p>一段文字</p>
（3）换行标签与水平线标签
当需要在指定长度或文字换行时，就可以使用换行标签br（单标签）。
文本显示时也经常使用水平分割线，如大标题与段落之间。可以使用hr（单标签）。
<br>
<hr>
（4）整体展示
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<h1>台风要么不来，一下来俩！上海“退烧”能指望吗？“热辣滚烫”还将持续几日？</h1>
<hr>
<p>上海的高温热浪天气延续，今天多云天气为主，升温迅速， <br>
午后依然需要提防局部短时雷阵雨。预计今天最高气温可 <br>
达38~39℃。</p>
<p>上海中心气象台8时40分发布高温橙色预警信号，防暑、防 <br>
暑、再防暑！今天风力略增大，偏南风4-5级，雷雨时阵风 <br>
7-9级，风向偏北。相对湿度85%-40%。</p>
</body>
</html>
2、文本格式化标签
当需要对文字加粗、加下划线、加倾斜、加删除线等文本格式效果操作时，可以使用文本格式化标签。常用的文本格式化标签有以下几种：
| 作用 | 标签1 | 标签2 |
| 加粗 | b | strong |
| 下划线 | u | ins |
| 倾斜 | i | em |
| 删除线 | s | del |
从表格中可以看到两种不同的标签对应的作用却是相同的。这是因为相同格式效果文字的重要性并不相同。例如文章中的普通文字效果和价格、人数等重要信息的格式。因此一般使用更加醒目的标签2系列设定较为重要信息的文本格式，使用更加简化的标签1系列来设定一般文本信息的格式。
这样可以使代码更加的清晰明了，增加可读性。
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
</body>
</html>
注意：以上文本格式化标签均为独占一行，没有换行效果。
3、媒体标签
（1）路径
要显示图片、视频、音频等信息，首先要知道它们的存储位置。那么表明如何到达存储位置的信息就是路径。路径可以分为绝对路径和相对路径。
其中绝对路径指的是目录下的绝对位置，通常从盘符到达目标位置（例如：C:\Users\LENOVO\Pictures\Saved Pictures\微信图片_20240409212048.jpg）。同时，完整的网络地址也属于绝对路径。
先比较与绝对路径，在开发中一般使用相对路径。及从当前的HTML文件出发到目标文件的过程。
其中“走”的方式有三种：./（向同级目录）， /（向下级目录，）， ../（向上级目录）。每次走后都要带上“到达”的文件夹或文件名，直到找到目标文件为止。
（2）图片
图片使用img标签（单）显示。
<code><img src="" alt="">code>
可以看到img标签中含有src、alt。它们都是标签的属性，很多标签都需要借助标签的属性来设置标签对应的展示效果。其中src、alt叫做属性名，而""中需要填写的内容叫做属性值。src的属性值是图片的路径。alt的属性值是替换文本，就是说如果图片显示成功，就不会显示替换文本。仅当图片显示失败时，替换文本才会显示。替换文本可以在错误时提示用户展示的内容，实现很好的容错性。自动提示的src和alt并不是img标签的所用属性，还有很多其他属性可以添加到标签中来设置信息的显示格式。
属性注意点:
标签的属性写在标签的内部。一个标签可以同时存在多个属性。属性之间要用空格隔开，属性与标签名要用空格隔开。属性之间没有顺序之分，仅将属性在标签中的顺序更改，并不影响标签的显示。属性在标签之间具有通用性，许多属性可以在多个标签中使用。
width和height属性：
width和height属性的属性值均为数字，可以分别改变显示的宽度和高度。需要注意的是，当仅设置它们其中一个时，另一个属性会自动等比例缩放，以保证图片宽高保持原有比例不变形。
title属性：
title属性可以提供给用户额外的信息，title中的信息仅在用户鼠标悬停在到元素上时显示出来。
（3）音频标签
音频同样也是网页内容的重要组成部分，所对应的音频标签就是audio（双）。
<audio src=""></audio>code>
同样的默认src路径属性，除此之外，audio还有一些常用的属性：
| 属性名 | 功能 | 属性值 |
| controls | 显示播放控件（带有进度条、开关等） | 无 |
| autoplay | 自动播放（部分浏览器不支持） | 无 |
| loop | 循环播放 | 无 |
<code><audio src="" autoplay loop controls></audio>code>
这三种属性都没有值将对应的属性名填入标签内并以空格隔开即可生效。考虑到用户的体验，许多浏览器不支持音频的自动播放。
注意：音频一般仅支持三种格式（MP3、Wav、Ogg）
（4）视频标签
如果想要在网页中插入视频，就可以使用video视频标签。
<video src=""></video>code>
视频标签同样支持autoplay、loop、controls三种属性，用法相同。其中不同于音频的是，autoplay属性可以与muted属性配对使用，实现自动的无声播放（声音可以通过controls属性添加的开关打开）。
注意：视频标签一般仅支持三种格式：MP4、WebM、Ogg。
（5）链接标签
当需要实现网页的跳转时，可以使用 a（双）链接标签。
<a href="#">超链接</a>code>
a标签带有自动的href属性，href的属性值为要跳转到的网页的路径。而a标签中包裹的文字就属于超链接跳转的范围。如果在网页开发时并不知道要跳转到的路径，可以使用#暂时填充。
同时，可以使用target属性来控制目标网页的打开方式。target属性的属性值有两个：
_self：默认值，在当前的窗口跳转，也就是说会在当前的窗口覆盖原有的网页。_blank：保留原网页窗口，在新窗口中打开网页。
a标签并不会独占一行。
4、列表标签
列表就是一系列同级元素线性排列而成的集合。列表可以分为有序列表、无序列表、自定义列表。
无序列表：及没有顺序之分的列表。这种列表的显示特点是列表每一项前都有默认的圆点标识。通过ul（双）和li（双）两个标签实现。其中ul标签代表列表整体，li标签代表列表中的每一项。ul标签是li标签的父级。并且，ul标签中只能包含li标签，但是li标签中可以包含任何内容。
<code><ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
有序列表：当列表元素有一定的先后顺序时，可以设置为有序列表。有序列表使用ol（双）标签和li标签实现。使用和无序列表相同。ol代表列表整体，li代表列表的每一项。有序列表显示时会在每项前添加序号（根据li的先后顺序）。ol标签中只能包含li标签，li标签中可以包含任意内容。
<code> <ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
自定义标签：网页底部的导航常常是使用自定义列表实现的。自定义列表由dl（双）、dt（双）、dd三个标签实现。其中dl代表列表的整体，其中仅能包含dt、dd标签。dt标签代表自定义列表的主题，dd标签代表针对主题的每一项内容。而且，dd标签会自动显示缩进效果。dt、dd标签中可以包含任意内容。
<code> <dl>
<dt>帮助中心</dt>
<dd>购物指南</dd>
<dd>账户管理</dd>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自动服务</dd>
</dl>
5、表格标签
表格标签可以再网页中以行+列的单元格方式展示数据。由table（双）、tr（双）、td（双）三个标签实现。其中table代表表格整体，tr代表表格的每行，td代表表格的每个单元。它们是层层嵌套的，table包裹tr、tr包裹td。默认的表格并没有边框线等效果，可以通过一些属性来设置这些效果。
border属性：border的属性值为数字，代表的是边框宽度。
同时表格也可以使用width和height属性来设置表格宽和高。
以上属性都写到table标签内部。
<code><table border="3" width="300" height="300">code>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>分数</td>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>99</td>
</tr>
</table>
除了基本的表格标签外，如果想要在表格中设置表格大标题和表头单元格（表格的第一行内容），可以使用caption（双）和th（双）标签来设置。其中caption标签代表大标题，显示于表格顶部居中位置。th代表小标题，包裹的文字有加粗与单元格居中效果。caption标签写在table标签内部，与tr标签同级。th标签写在第一tr标签内部，用于替换其中的td。
<code> <table border="3" width="300" height="300">code>
<caption>表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>99</td>
</tr>
</table>
如果想要更加清晰的突出表格的结构，可以使用表格的结构标签将表格分为三部分：头部、主体、底部。代表的标签为thead（双）、tbody（双）、tfoot（双）。它们并不会影响表格的显示，但可以更加清晰的显示出标的的结构。它们用来包裹tr标签（可包裹多个），是table标签的子级，tr标签的父级。
<code> <table border="3" width="300" height="300">code>
<caption>表格</caption>
<thead>
<tr>
<td>姓名</td>
<td>年级</td>
<td>分数</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>3</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>99</td>
</tr>
</tbody>
</table>
除了以上的基本使用外，合并单元格也是对表格的常见操作。合并单元格可以分为跨行合并（上下）和跨列合并（左右）两种。因此合并单元格也是通过两个属性来实现的：rowspan（跨行）、colspan （跨列）。它们的属性值都为要合并的单元格的数目。并且，合并单元格遵循左上原则，即左右单元格合并仅保留最左边的，上下单元格合并仅保留最上边的。确定了保留的单元格位置后，就要在该单元格标签（td）中添加rowspan或者colspan属性并给值，最后将其余要合并的单元格标签删除。这样就实现单元格的合并。
<table border="3" width="300" height="300">code>
<caption>表格</caption>
<thead>
<tr>
<td>姓名</td>
<td>年级</td>
<td>分数</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">3</td>code>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>99</td>
</tr>
</tbody>
</table>
注意：如果表格有结构标签，那么单元格不能跨结构标签合并，仅允许在某结构标签范围内合并。
6、表单标签
（1）基本使用
表单标签可以用来让用户传递一些信息给我们，网页中的登录、注册、搜索等功能都是通过表单标签来实现的。所有的这些功能都是通过input（单）标签来实现的。input标签可以通过改变其type属性的属性值的改变，来实现各种各样的功能：
| type属性值 | 说明 |
| text | 文本框，用于输入单行的文字 |
| password | 密码框，用于输入密码 |
| radio | 单选框（多个中选多个） |
| checkbox | 多选框（多个中选多个） |
| file | 文件选择，用于上传文件 |
| submit | 提交按钮，用于提交 |
| reset | 重置按钮，用于重置信息 |
| buttom | 普通按钮，通过JS添加功能 |
<code> 姓名：<input type="text"> <br>code>
密码为：<input type="password"> <br>code>
性别为：<input type="radio">男<input type="radio">女 <br>code>
爱好：<input type="checkbox">吃code>
<input type="checkbox">喝code>
<input type="checkbox">拉code>
<input type="checkbox">撒code>
<input type="checkbox">睡 <br>code>
相关证明：<input type="file"> <br>code>
<input type="submit" >code>
<input type="reset">code>
（2）placeholder属性：文本框占位符
placehoder属性可以与type属性配合使用，主要用于提示用户输入内容的文本。可与文本框、密码框等配合使用。
<code> 姓名：<input type="text" placeholder="请输入真实姓名"> <br>code>
密码为：<input type="password" placeholder="输入六位密码">code>
（3）单选功能和默认选中
如果仅编写几个单选框而不加以任何操作，那么实际上单选的功能并没有实现，也就是说这一个单选框还是可以同时选择的。这是因为这几个单选框之间并没有直接的联系，系统并不知道哪几个单选框是配对使用的。因此当type的属性值为radio时，不要忘了使用name属性来给它们分组。规定name属性值相同的为一组，一组中同时只能有一个被选中。这样才能真正实现单选框的功能。
<code> 性别: <input type="radio" name="sex" >男code>
<input type="radio" name="sex" >女code>
其中name属性的属性值可以自定义，可以由字母数字下划线组成，并且区分大小写。
如果明确了单选的结果会偏向某一单选框，可以在其input标签中添加checked属性（无属性值）。这样用户在使用时就会默认选中此单选框。
性别: <input type="radio" name="sex" checked >男code>
<input type="radio" name="sex" >女code>
（4）上传多个文件
当input标签的type属性属性值为file时，就可以实现上传文件的功能。但是这样默认仅能上传单个文件。如果想要同时上传多个文件，就要使用multiple属性（无属性值）。
<input type="file" multiple >code>
（5）按钮
input标签的按钮有三种，即对应type属性的属性值为submit、reset、button。要想真正的实现以上按钮的功能还需要与form标签（双）配合使用。form标签的action属性的属性值为后台服务器的地址，这样用户使用了提交按钮后就可以真的把用户的信息传递到后端服务器，使用了重置按钮后输入的信息才会真的重置。form标签的需要包裹所有需要传递的信息（整个表单）。
如果想要更改按钮的占位符，可以使用value属性。
<form action="">code>
用户名：<input type="text" placeholder="汉字"> <br>code>
密码：<input type="password" placeholder="六位密码"> <br>code>
性别：<input type="radio" name="sex">code>
<input type="radio" name="sex"> <br>code>
<input type="submit"> <input type="reset"><input type="button" value="普通按钮">code>
</form>
除了通过input标签来显示按钮，也可以使用button标签（双）。button标签同样有type属性，属性值有三种，还是submit（默认）、reset、button。button标签包裹的内容为按钮的占位符。
<code><button type="submit">提交</button>code>
<button type="reset">重置</button>code>
<button type="button">普通标签</button>code>
（6）select下拉菜单标签
如果需要用户在我们提供的有限个确定选项中选择一个，就可以使用select标签（双）添加下拉菜单控件。下拉菜单控件由两个标签实现：select和option（双）。其中select标签代表下拉菜单的整体，option代表下拉菜单中的某一项。
如果想要默认选中某一项，可以使用selected属性。
<select>
<option>北京</option>
<option selected>上海</option >
<option>广东</option>
<option>深圳</option>
</select>
（7）textarea 文本域标签
textarea标签（双）可以在网页中提供可输入多行文本的表单控件。它的cols属性和rows属性分别设定了文本域的初始可见宽度和初始可见行数。用户在使用时可以拖拽右下角改变文本域的大小。
<code><textarea cols="30" rows="10"></textarea>code>
（8） label标签
label（双）用于绑定内容与表单标签的关系，大概意思是label标签的作用范围中的内容有与其中标签相同的功能。使用时，用label标签包裹内容和和其关联的标签即可。
<code> <!-- 点击文字‘男’、‘女’同样会选中对应单选框 -->
性别：
<label>
<input type="radio" name="sex">男code>
</label>
<label>
<input type="radio" name="sex">女code>
</label>
7、语义化标签
（1）没有任何语义的布局标签
div（双）：独占一行
span（双）：一行可显示多个
<code><div>1</div>
<div>2</div>
<span>1</span> <span>2</span>
（2）有语义的布局标签
| 标签名 | 语义 |
| header（双） | 网页头部 |
| nav（双） | 网页导航 |
| footer（双） | 网页底部 |
| aside（双） | 网页侧边栏 |
| section（双） | 网页区块 |
| article（双） | 网页文章 |
以上标签的显示特点与div标签一样，就是比div多了不同的语义。一般常用于手机端网页的制作。
<code><header>头部</header>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>区块</section>
<article>文章</article>
8、字符实体
如果在一段文字中间添加大量的空格，查看显示效果就会发现这些空格仅生效了一个。
<code>爱的福利卡机的发哦经 发局打发时间父级
这是因为在网页有些特殊符号需要用字符实体来代替。字符实体都以 &英文 组成。
常见的字符实体：
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。