文章目录
一、预备知识
- HTML是超文本标记语言（Hyper Text Markup Language） 的缩写,由一套标记标签（markup tag） 组成。HTML是一种用标记标签来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
- 所谓标记标签,就是由一对尖括号包围一个关键字构成的，如
<html>。标签通常成对出现，构成一个标签对，如，其中第一个标签称为开始标签，第二个标签称为结束标签 。标签的通常用法为：所谓标记标签,就是由一对尖括号包围一个关键字构成的，如。标签通常成对出现，构成一个标签对，如<html></html>，其中第一个标签称为开始标签，第二个标签称为结束标签 。标签的通常用法为：<标签关键字>内容</标签关键字>
不同的关键字会使标签对中的内容的呈现出不同的表现形式，从而达到各种各样的显示效果。一个完整的HTML文件应该至少包含<html>标签和<body>标签。 - 标签还可被属性修饰，如：
<h1 align="center">居中标题</h1>
其中，align为属性，center为属性值，在使用时属性值应用双引号括起来。 - HTML也有注释。注释的写法为：
<!--注释内容--> - 标签可嵌套使用。
二、各种标签介绍
1.基本元素
①标题（h标签）
示例：
<h5>这是一个5级标题</h5>
效果：
这是一个5级标题
说明：
标题会自动粗体，并带有换行效果。有h1~h6六级标题，其中h1为一级标题（字最大）。
②段落（p标签）
示例：
<p>这是一个段落</p>
效果：
这是一个段落
说明：
<p>标签即表示段落，且自带换行效果。
③粗体（b标签、strong标签）
示例：
<p>无粗体效果</p>
<b>b标签加粗的文本</b>
<br />
<strong>strong标签加粗的文本</strong>
效果：
无粗体效果
b标签加粗的文本strong标签加粗的文本
说明：
<b>和<strong>标签都可以达到粗体效果，区别是<strong>更强调语义上的加重，提醒用户该文本的重要性，而<b>仅表示该文本是粗体的，并不暗示文本的重要性。
④斜体（i标签、em标签）
示例：
<p>无斜体效果</p>
<i>i标签的斜体效果</i>
<br />
<em>em标签的斜体效果</em>
效果：
无斜体效果
i标签的斜体效果em标签的斜体效果
说明：
<i>和<em>标签都可以达到粗体效果，区别是<em>更强调语义上的加重，提醒用户该文本的重要性，而<b>仅表示该文本是斜体的，并不暗示文本的重要性。
⑤下划线（u标签、ins标签）
示例：
<p>无下划线效果</p>
<u>u标签的下划线效果</u>
<br />
<ins>ins标签的下划线效果</ins>
效果：
无下划线效果
u标签的下划线效果ins标签的下划线效果
⑥删除线（del标签）
示例：
<p>无删除线效果</p>
<del>del标签的删除线效果</del>
效果：
无删除线效果
⑦上下标(sup标签、sub标签)
示例：
<!--下标-->
H<sub>2</sub>O
<!--上标-->
2<sup>10</sup>
效果：
H2O
210
2. 进阶元素
①字体(font标签)
示例：
<!--字体颜色设置-->
<font color="green">带颜色的字</font>
<!--字体大小设置-->
<font size="+2">大2号字</font>
<!--字体种类设置-->
<font face="微软雅黑">微软雅黑字体</font>
效果：
带颜色的字
大2号字
微软雅黑字体
②图片(img标签)
示例：
<img src="https://img-blog.csdnimg.cn/20190114135711851.jpeg">
效果：
说明：
此标签并非成对使用的。还可以在标签内设置align、width、height等属性。
③表格(table标签)
示例：
<!--一个两行三列的表格-->
<table>
<!--第一行-->
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<!--第二行-->
<tr>
<td>90</td>
<td>95</td>
<td>97</td>
</tr>
</table>
效果：
| 语文 | 数学 | 英语 |
| 90 | 95 | 97 |
说明：
还可以设置align、valign、width、border、colspan、rowspan、bgcolor等属性。
④列表(ul标签、ol标签)
示例：
<!--无序列表-->
<p>无序列表</p>
<ul>
<li>水</li>
<li>阳光</li>
<li>空气</li>
</ul>
<!--有序列表-->
<p>有序列表</p>
<ol>
<li>水</li>
<li>阳光</li>
<li>空气</li>
</ol>
效果：
无序列表：
- 水
- 阳光
- 空气
有序列表：
- 水
- 阳光
- 空气
⑤超链接(a标签)
示例：
<a href="https://www.baidu.com">百度</a>
效果：
百度
⑥块(div、span)
示例：
<div>这是一个div</div>
<div>这是另一个div</div>
<span>这是一个span</span>
<span>这是另一个span</span>
效果：
这是一个div
这是另一个div
这是一个span 这是另一个span 说明：
<div>和<span>都是布局用的，本身并没有任何显示效果，通常用来结合css进行页面布局。其中，div自带换行效果，而span不具有。`
⑦内联框架(iframe标签)
示例：
<iframe src="https://www.baidu.com" width="600px" height="400px"><iframe>
效果：
<iframe src="https://www.baidu.com" width="600px" height="400px"><iframe> </iframe>3.表单元素
①文本框(<input type="text">)
示例：
<input type="text">
<!--设置宽度-->
<input type="text" size="10">
<!--设置初始值-->
<input type="text" value="123456">
<!--设置背景文字-->
<input type="text" placeholder="请输入密码">
效果：
②文本域(textarea标签)
示例：
<textarea>
123
456
789
</textarea>
效果：
123
456
789
说明：
文本框只可显示单行文本，而文本域可以显示多行文本。
③密码框（<input type="password">）
示例：
<input type="password">
效果：
④单选框(<input type="radio">)
示例：
A.男<input type="radio" checked="checked">
B.女<input type="radio">
效果：
补充：
为了使同一时间只能有一个单选框被选中，通常还需要使每个单选框的name属性值相同。checked属性可以设置默认选中。
⑤复选框（<input type="checkbox">）
示例：
<p>你喜欢吃什么水果？</p>
苹果<input type="checkbox">
香蕉<input type="checkbox">
橘子<input type="checkbox">
猕猴桃<input type="checkbox">
效果：
⑥下拉列表(select标签)
示例：
<p>你最喜欢哪座城市？</p>
<select>
<option>南京</option>
<option>北京</option>
<option>上海</option>
<option>合肥</option>
<select>
效果：
⑦按钮(button标签)
示例：
<p>你确认提交吗？</p>
<button>确认</button>
<button>取消</button>
效果：
版权声明：本文为qq_30748863原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。