系统化学习前端之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浏览器

<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. 列表标签

  1. 无序列表

  • 列表类型： <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 无标识；

  1. 有序列表

  • 列表类型： <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；

  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. 表单标签

  1. 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: 表单名称

  2. 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" 提供一个日期控件，用于选择月；

  3. textarea标签

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

  4. 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  深巷酒  阅读(30)  评论(0)  编辑  收藏  举报