文章目录
一、预备知识
- 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://i-blog.csdnimg.cn/blog_migrate/b730a69575c2a03b1f06c3f9e139fed5.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>
和<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>
效果: