系统化学习前端之HTML（基础）

前言

一直有写博客的想法，一方面是希望好好梳理一下自己的知识，另一方面是希望通过记录的方式来激励自己前行。但是这个想法一想就是好几年过去了，知识是越来越散了，记忆是越来越差了。如今，需要梳理巩固一下自己，争取让自己更上一个台阶。

HTML的基本知识

HTML全称 Hyper Text Markup Language 超文本标记语言，网页的基本“骨架”。网页的文档（HTML）结构基本可以划分为两个部分：

1. 文档类型定义（DTD）

<!DOCTYPE html>

用于标记文档规则，告知浏览器如何解析文档。~~上述为HTML5.0文档声明，此外还有HTML4.0文档声明，如strict DTD，transitianal DTD，frameset DTD等。~~

2. 根节点

<html></html>

文档的根节点，网页中所有内容都包含在根节点之中，包括网页的标题和内容等等信息。而根节点下包含两个元素：head和body元素，正是由这两部分，完善了整个网页的结构和内容。

head元素

head元素即<head></head>标签，主要包含文档标题以及文档内容之外的元信息；

head元素主要包含以下元素：

1. title

<title></title>标签用于定义网页标签，用法：<title>标题</title>。

2. base

<base />标签用于设定网页跳转页面基准，用法如下，代码可测试，打开链接跳转为https://www.baidu.com/web ，用法：<base href="xxx.com/" target="_blank" />。target为base的属性，值为_blank表示新窗口打开，值为_self表示本窗口打开（~~后面bom中会详细了解~~）。

点击查看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<base href="https://www.baidu.com/">
	<title>base</title>
</head>
<body>
	<a href="web">base</a>
</body>
</html>

3. meta

<meta />标签用于设定网页内容之外的元信息等，常见用法如下：

<meta charset="utf-8" /> 设定文档字符集；
<meta name="keywords" content="xxx" />,<meta name="description" content="xxx" /> SEO搜索引擎优化相关；
<meta http-equiv="Content-Type" content="text/plain" /> 设定http请求头相关；
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 移动端视口适配；
<meta http-equiv="X-UA-Compatible" content="IE=6" /> 兼容IE浏览器

4. link

<link />标签用于引入外部元素，常见用法如下：

<link rel="stylesheet" href="../xxx.css"> 引入外部css样式，css引入方式：外链，内联，行内。link标签引入属于外链式；
<link rel="shortcut icon" href="../favicon.ico"> 引入icon图标；

5. style

<style></style>标签用于定义内联css，用法如下：

点击查看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>style</title>
	<style type="text/css">
		.text {
			color: red;
			font-size: 16px;
			font-weight: 500;
		}
	</style>
</head>
<body>
	<div class="text">style</div>
</body>
</html>

6. script

<script></script>标签用于引入js文件，用法如下：

<script>js</script> 内联js方式；
<script src="./xxx.js"></script> 外链js方式；

body元素

body元素即<body></body>标签，主要包含文档内容，文档内容可以是多种形式，如文字，图片，音视频（HTML5），链接，以及列表和表格等；

body元素主要包含以下元素：

1. 标题标签

<h1></h1>~<h6></h6>六级标题，标题字号大小逐渐减小，用法：<h3>标题</h3>，此标题区分title标题，title为窗口标题，此标题为文章标题；

注意：标题标签不能嵌套其他元素。

2. 文本标签

常用文本标签：

<p></p> 段落标签，用法：<p>段落</p>；
<br /> 换行标签，用法：<br />；
<hr /> 分割线标签，用法：<hr />；
<div></div> 块级标签，块级元素：表示连续两个div标签，实际显示为两个div各占一行，用法：<div>块</div>；
<span></span> 行内标签，行内元素：表示连续两个span标签，实际显示为两个span共占一行，用法：<span>行内</span>；

<strong></strong> 文本加粗标签，用法：<strong>加粗</strong>；
<em></em> 文本斜体标签，用法：<em>斜体</em>；
<ins></ins> 文本下划线标签，用法：<ins>下划线</ins>；
<del></del> 文本删除线标签，用法：<del>删除线</del>；

<sup></sup> 文本上标线标签，用法：<sup>上标</sup>；
<sub></sub> 文本下标线标签，用法：<sub>下标</sub>；

注意：段落标签不能嵌套其他元素。

3. 图片标签

<img />标签用于引入图片资源，用法：<img src="./xxx.jpg" alt="">，src属性值为图片资源地址，alt属性值为图片加载失败的提示文本；

5. 链接标签

<a></a>标签用于引入链接，用法：<a href="https://www.baidu.com">百度</a>, href属性值为链接地址；
链接标签的其他使用方式：

<a href="x.rar" download>下载</a> 用于资源下载；
<a href="mailto:xxx@xx.com">联系我们</a> 用于电子邮件；
<a href="#">返回顶部</a> 用于返回页面顶部；
<a href="javascript:js脚本">执行JS</a> 用于执行JavaScript代码片段；
用于锚点定位，步骤如下：
1. 用任意标签的id属性设置锚点位置，如<div id="anchor">跳转这里</div>；
2. 使用链接标签的href属性跳转，如<a href="#anchor"></a>;

6. 列表标签

无序列表

列表类型： <ul></ul>

列表项： <li></li>

点击查看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>无序列表</title>
</head>
<body>
	<ul type="disc">
		<li>长江</li>
		<li>湘江</li>
		<li>黄河</li>
		<li>钱塘江</li>
	</ul>
</body>
</html>

注意：无序列表可以通过type属性改变列表项标识符号，属性值有：disc 默认，实心圆；circle 空心圆；square 实心矩形；none 无标识；

有序列表

列表类型： <ol></ol>

列表项： <li></li>

点击查看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>无序列表</title>
</head>
<body>
	<ol type="a">
		<li>长江</li>
		<li>湘江</li>
		<li>黄河</li>
		<li>钱塘江</li>
	</ol>
</body>
</html>

注意：有序列表可以通过type属性改变列表项标识符，属性值有：i，I，A，a，1；

自定义列表

列表类型： <dl></dl>
列表项1： <dt></dt>

列表项2： <dd></dd> 相对dt有缩进，一般用于dt的名词解释

点击查看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>自定义列表</title>
</head>
<body>
	<dl>
		<dt>长江</dt>
		<dd>属太平洋水系，是中国第一大河。</dd>
		<dt>黄河</dt>
		<dd>位于中国北方地区的大河，属世界长河之一，中国第二长河。</dd>
	</dl>
</body>
</html>

7. 表格标签

表格标签使用如下：

点击查看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格</title>
</head>
<body>
	<table border="1" cellpadding="0" cellspacing="0">
		<caption>公司人员表</caption>
		<thead>
			<tr>
				<th>工号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>部门</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>张三</td>
				<td>男</td>
				<td>25</td>
				<td>研发部</td>
			</tr>
			<tr>
				<td>002</td>
				<td>李四</td>
				<td>男</td>
				<td>24</td>
				<td>产品部</td>
			</tr>
			<tr>
				<td>003</td>
				<td>刘楠</td>
				<td>女</td>
				<td>22</td>
				<td>销售部</td>
			</tr>
			<tr>
				<td>004</td>
				<td>王娜</td>
				<td>女</td>
				<td>24</td>
				<td>运营部</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="5">部分部门人员暂未统计</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

注意：td标签属性colspan表示跨列，rowspan表示跨行，用于生成不规则表格，上例表示跨5列。

8. 表单标签

form标签

用于包裹所有表单控件（input，textarea，select）
注意：当表单控件在form标签之外时，可以使用表单控件的form属性关联上表单，使用：
- <form id="pos"></form> form标签定义id属性；
- <input type="text" form="pos"> 表单控件input设置form属性关联至form标签id；
form标签核心属性：
- action: 定义表单数据提交至服务器的地址；
- method：定义表单数据提交方式，如 get，post方式；
- enctype：定义表单数据编码格式，如 application/x-www-form-urlencoded 默认；multipart/form-data 上传文件使用；text/plain 基本不使用；
- name: 表单名称
input标签

输入标签，核心属性type，根据type属性值不同，表现出不同用法，毫无疑问HTML章节中最强大的标签；

type属性值对应下来，近20种，其中部分属于实验属性，可根据实际开发场景自行使用：
- type="text" 常规文本框
- type="password" 密码框
- type="radio" 单选框，为保证多个单选框选择一个，使用相同name属性；
- type="checkbox" 复选框，同radio单选框，使用checked属性表示选中；
- type="submit" 提交按钮；
- type="reset" 重置按钮；
- type="button" 普通按钮；
- type="hidden" 隐藏域；
- type="file" 文件选择域；
- type="image" 结合src使用，图片按钮；
- type="email" 电子邮件类型，提交会验证数据是否符合数据规范（存在兼容性）；
- type="search" 搜索类型，文本框基础上提供快速清除标识；
- type="url" URL类型，提交时会验证数据是否符合站点url规范；
- type="tel" 在移动端吊起数字键盘，PC端无效；
- type="number" 只能输入或选择数字；
- type="range" 提供一个滑块，用户拖动滑块操作；
- type="color" 提供一个颜色拾取控件；
- type="date" 提供一个日期输入或选择控件；
  
  注意：type=“date”提供日期控件输入年份时可以输入6位，可以使用min和max属性限制输入，如 <input type='date' min="1970-01-01" max="9999-12-31">
- type="week" 提供一个日期控件，用于选取周；
- type="month" 提供一个日期控件，用于选择月；
textarea标签

<textarea></textarea> 文本域标签，可以输入多行文本，使用 cols，rows 属性来指定宽高；

select标签

点击查看代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>下拉列表</title>
</head>
<body>
	<select multiple>
		<option>JAVA</option>
		<option>JavaScript</option>
		<option selected>Python</option>
		<option>Ruby</option>
		<option>GO</option>
		<option>C</option>
	</select>
</body>
</html>

注意：select可以通过multiple属性开启多选，option可以通过selected标记选中；

后记

基础HTML梳理至此也算结束了，当然HTML标签的一些非必要的属性没有在文章中表现出来，我个人认为是没有必要的，能用css表现的样式，还是使用css比较好，毕竟术业有专攻，也一定程度减轻我们的学习压力。后续，我准备根据HTML5的新特性更新一下HTML 02 篇，当然还有一些工作中发现的比较有意思的琐碎知识点，我会考虑更新《碎片化学习前端之HTML篇（xxx知识点）》。

posted @ 2023-02-08 17:25 深巷酒阅读(32) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 系统化学习前端之HTML（HTML5）

· 碎片化学习前端之HTML（webComponent）

· 【3.0】HTML基础

· 【11.0】前端基础之阶段性复习

· 前端开发学习之html

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码：从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结

公告

昵称：深巷酒
园龄： 2年6个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

深巷酒香

All the growth is a leap in the dark.

系统化学习前端之HTML（基础）

前言

HTML的基本知识

1. 文档类型定义（DTD）

2. 根节点

head元素

1. title

2. base

3. meta

4. link

5. style

6. script

body元素

1. 标题标签

2. 文本标签

3. 图片标签

5. 链接标签

6. 列表标签

7. 表格标签

8. 表单标签

后记

公告

搜索

最新随笔

我的标签

积分与排名

随笔分类 (29)

相册 (94)