HTML学习小结

最新推荐文章于 2022-07-10 04:33:48 发布

Kevin2345

最新推荐文章于 2022-07-10 04:33:48 发布

阅读量278

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/qq_30748863/article/details/86469976

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、预备知识

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>

效果：

无删除线效果

~~del标签的删除线效果~~

⑦上下标(sup标签、sub标签)

示例：

<!--下标-->
H<sub>2</sub>O
<!--上标-->
2<sup>10</sup>

效果：
H₂O
2¹⁰

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

这是另一个div

这是一个span 这是另一个span

说明：
<div>和<span>都是布局用的，本身并没有任何显示效果，通常用来结合css进行页面布局。其中，div自带换行效果，而span不具有。`

⑦内联框架(iframe标签)

示例：

<iframe src="https://www.baidu.com" width="600px" height="400px"><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>

效果：
在这里插入图片描述

Kevin2345

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习小结

文章目录一、预备知识二、各种标签介绍1.基本元素①标题（h标签）②段落（p标签）③粗体（b标签、strong标签）④斜体（i标签、em标签）⑤下划线（u标签、ins标签）⑥删除线（del标签）⑦上下标(sup标签、sub标签)2. 进阶元素①字体(font标签)②图片(img标签)③表格(table标签)④列表(ul标签、ol标签)⑤超链接(a标签)⑥块(div、span)⑦内联框架(iframe...
复制链接

扫一扫