一篇笔记总结HTML底子知识

徐锦洪 · 2024-8-21 08:43:44

目录
一、底子熟悉
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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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系列来设定一般文本信息的格式。
这样可以使代码更加的清晰明了，增加可读性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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标签（单）表现。

<img src="" alt="">

复制代码

可以看到img标签中含有src、alt。它们都是标签的属性，许多标签都必要借助标签的属性来设置标签对应的展示效果。此中src、alt叫做属性名，而""中必要填写的内容叫做属性值。src的属性值是图片的路径。alt的属性值是替换文本，就是说假如图片表现成功，就不会表现替换文本。仅当图片表现失败时，替换文本才会表现。替换文本可以在错误时提示用户展示的内容，实现很好的容错性。主动提示的src和alt并不是img标签的所用属性，还有许多其他属性可以添加到标签中来设置信息的表现格式。
属性注意点:

标签的属性写在标签的内部。
一个标签可以同时存在多个属性。
属性之间要用空格隔开，属性与标署名要用空格隔开。
属性之间没有次序之分，仅将属性在标签中的次序更改，并不影响标签的表现。
属性在标签之间具有通用性，许多属性可以在多个标签中使用。

width和height属性：
width和height属性的属性值均为数字，可以分别改变表现的宽度和高度。必要注意的是，当仅设置它们此中一个时，另一个属性会主动等比例缩放，以保证图片宽高保持原有比例不变形。
title属性：
title属性可以提供给用户额外的信息，title中的信息仅在用户鼠标悬停在到元素上时表现出来。
（3）音频标签

音频同样也是网页内容的重要组成部分，所对应的音频标签就是audio（双）。

<audio src=""></audio>

复制代码

同样的默认src路径属性，除此之外，audio还有一些常用的属性：

属性名	功能	属性值
controls	表现播放控件（带有进度条、开关等）	无
autoplay	主动播放（部分浏览器不支持）	无
loop	循环播放	无

<audio src="" autoplay loop controls></audio>

复制代码

这三种属性都没有值将对应的属性名填入标签内并以空格隔开即可生效。思量到用户的体验，许多浏览器不支持音频的主动播放。
注意：音频一般仅支持三种格式（MP3、Wav、Ogg）
（4）视频标签

假如想要在网页中插入视频，就可以使用video视频标签。

<video src=""></video>

复制代码

视频标签同样支持autoplay、loop、controls三种属性，用法相同。此中不同于音频的是，autoplay属性可以与muted属性配对使用，实现主动的无声播放（声音可以通过controls属性添加的开关打开）。
注意：视频标签一般仅支持三种格式：MP4、WebM、Ogg。
（5）链接标签

当必要实现网页的跳转时，可以使用 a（双）链接标签。

<a href="#">超链接</a>

复制代码

a标签带有主动的href属性，href的属性值为要跳转到的网页的路径。而a标签中包裹的笔墨就属于超链接跳转的范围。假如在网页开辟时并不知道要跳转到的路径，可以使用#暂时添补。
同时，可以使用target属性来控制目标网页的打开方式。target属性的属性值有两个：

_self：默认值，在当前的窗口跳转，也就是说会在当前的窗口覆盖原有的网页。
_blank：保留原网页窗口，在新窗口中打开网页。

a标签并不会独占一行。
4、列表标签

列表就是一系列同级元素线性分列而成的聚集。列表可以分为有序列表、无序列表、自定义列表。
无序列表：及没有次序之分的列表。这种列表的表现特点是列表每一项前都有默认的圆点标识。通过ul（双）和li（双）两个标签实现。此中ul标签代表列表团体，li标签代表列表中的每一项。ul标签是li标签的父级。并且，ul标签中只能包含li标签，但是li标签中可以包含任何内容。

<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>

复制代码

有序列表：当列表元素有一定的先后次序时，可以设置为有序列表。有序列表使用ol（双）标签和li标签实现。使用和无序列表相同。ol代表列表团体，li代表列表的每一项。有序列表表现时会在每项前添加序号（根据li的先后次序）。ol标签中只能包含li标签，li标签中可以包含任意内容。

<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>

复制代码

自定义标签：网页底部的导航常常是使用自定义列表实现的。自定义列表由dl（双）、dt（双）、dd三个标签实现。此中dl代表列表的团体，此中仅能包含dt、dd标签。dt标签代表自定义列表的主题，dd标签代表针对主题的每一项内容。而且，dd标签会主动表现缩进效果。dt、dd标签中可以包含任意内容。

<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标签内部。

<table border="3" width="300" height="300">
<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。

<table border="3" width="300" height="300">
<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标签的父级。

<table border="3" width="300" height="300">
<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">
<caption>表格</caption>
<thead>
<tr>
<td>姓名</td>
<td>年级</td>
<td>分数</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">3</td>
<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添加功能

姓名：<input type="text"> <br>
密码为：<input type="password"> <br>
性别为：<input type="radio">男<input type="radio">女 <br>
爱好：<input type="checkbox">吃
<input type="checkbox">喝
<input type="checkbox">拉
<input type="checkbox">撒
<input type="checkbox">睡 <br>
相关证明：<input type="file"> <br>
<input type="submit" >
<input type="reset">

复制代码

（2）placeholder属性：文本框占位符

placehoder属性可以与type属性配合使用，主要用于提示用户输入内容的文本。可与文本框、密码框等配合使用。

姓名：<input type="text" placeholder="请输入真实姓名"> <br>
密码为：<input type="password" placeholder="输入六位密码">

复制代码

（3）单选功能和默认选中

假如仅编写几个单选框而不加以任何操纵，那么实际上单选的功能并没有实现，也就是说这一个单选框还是可以同时选择的。这是因为这几个单选框之间并没有直接的接洽，体系并不知道哪几个单选框是配对使用的。因此当type的属性值为radio时，不要忘了使用name属性来给它们分组。规定name属性值相同的为一组，一组中同时只能有一个被选中。这样才能真正实现单选框的功能。

性别: <input type="radio" name="sex" >男
<input type="radio" name="sex" >女

复制代码

此中name属性的属性值可以自定义，可以由字母数字下划线组成，并且区分大小写。
假如明确了单选的效果会偏向某一单选框，可以在其input标签中添加checked属性（无属性值）。这样用户在使用时就会默认选中此单选框。

性别: <input type="radio" name="sex" checked >男
<input type="radio" name="sex" >女

复制代码

（4）上传多个文件

当input标签的type属性属性值为file时，就可以实现上传文件的功能。但是这样默认仅能上传单个文件。假如想要同时上传多个文件，就要使用multiple属性（无属性值）。

<input type="file" multiple >

复制代码

（5）按钮

input标签的按钮有三种，即对应type属性的属性值为submit、reset、button。要想真正的实现以上按钮的功能还必要与form标签（双）配合使用。form标签的action属性的属性值为后台服务器的地点，这样用户使用了提交按钮后就可以真的把用户的信息传递到后端服务器，使用了重置按钮后输入的信息才会真的重置。form标签的必要包裹全部必要传递的信息（整个表单）。
假如想要更改按钮的占位符，可以使用value属性。

<form action="">
用户名：<input type="text" placeholder="汉字"> <br>
密码：<input type="password" placeholder="六位密码"> <br>
性别：<input type="radio" name="sex">
<input type="radio" name="sex"> <br>
<input type="submit"> <input type="reset"><input type="button" value="普通按钮">
</form>

复制代码

除了通过input标签来表现按钮，也可以使用button标签（双）。button标签同样有type属性，属性值有三种，还是submit（默认）、reset、button。button标签包裹的内容为按钮的占位符。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通标签</button>

复制代码

（6）select下拉菜单标签

假如必要用户在我们提供的有限个确定选项中选择一个，就可以使用select标签（双）添加下拉菜单控件。下拉菜单控件由两个标签实现：select和option（双）。此中select标签代表下拉菜单的团体，option代表下拉菜单中的某一项。
假如想要默认选中某一项，可以使用selected属性。

<select>
<option>北京</option>
<option selected>上海</option >
<option>广东</option>
<option>深圳</option>
</select>

复制代码

（7）textarea 文本域标签

textarea标签（双）可以在网页中提供可输入多行文本的表单控件。它的cols属性和rows属性分别设定了文本域的初始可见宽度和初始可见行数。用户在使用时可以拖拽右下角改变文本域的大小。

<textarea cols="30" rows="10"></textarea>

复制代码

（8） label标签

label（双）用于绑定内容与表单标签的关系，大概意思是label标签的作用范围中的内容有与此中标签相同的功能。使用时，用label标签包裹内容和和其关联的标签即可。

性别：
<label>
<input type="radio" name="sex">男
</label>
<label>
<input type="radio" name="sex">女
</label>

复制代码

7、语义化标签

（1）没有任何语义的布局标签

div（双）：独占一行
span（双）：一行可表现多个

<div>1</div>
<div>2</div>
<span>1</span> <span>2</span>

复制代码

（2）有语义的布局标签

标署名	语义
header（双）	网页头部
nav（双）	网页导航
footer（双）	网页底部
aside（双）	网页侧边栏
section（双）	网页区块
article（双）	网页文章

以上标签的表现特点与div标签一样，就是比div多了不同的语义。一般常用于手机端网页的制作。

<header>头部</header>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>区块</section>
<article>文章</article>

复制代码

8、字符实体

假如在一段笔墨中间添加大量的空格，检察表现效果就会发现这些空格仅生效了一个。

爱的福利卡机的发哦经发局打发时间父级

复制代码

这是因为在网页有些特别符号必要用字符实体来取代。字符实体都以 &英文组成。
常见的字符实体：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

一篇笔记总结HTML底子知识

0 个回复

快速回复

楼主热帖

标签云