熟练使用常用标签，网页可以这么轻松搞定

最新推荐文章于 2024-01-17 11:35:19 发布

码歌大大

最新推荐文章于 2024-01-17 11:35:19 发布

阅读量230

点赞数 2

分类专栏：前端必会文章标签： Html 前端

本文链接：https://blog.csdn.net/u014332333/article/details/88414196

版权

前端必会专栏收录该内容

11 篇文章 0 订阅

订阅专栏

开篇寄语：

人们最常犯的错误就是用自己的尺子去丈量别人。

有些感情是指甲，剪掉了还会重生，无关痛痒；而有些感情是牙齿，失去以后，永远无法弥补。

接《只需3分钟，轻松明白一个网页是如何制作的》，关于HTML的介绍。这一篇解决实际使用的常用标签。

四、HTML常用标签和属性

HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即可。大致可分为如下几类：头标签、标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span、格式化文字的。

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

1、HTML标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<body>

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>

2、HTML段落

HTML 段落是通过 <p> 标签进行定义的。

<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

注意：浏览器会自动地在标题和段落的前后添加空行。

3、HTML水平线

<hr />标签在 HTML 页面中创建水平线。<hr /> 元素可用于分隔内容。

4、HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会

显示它们。

5、HTML换行

<br />元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

<br> 还是 <br />您也许发现 <br> 与 <br /> 很相似。在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使 <br /> 在所有浏览器中的显示都没有问题，使用<br /> 也是更长远的保障。

6、HTML链接

HTML 链接是通过 <a> 标签进行定义的。

<body>

<a href="http://www.shsxt.com">This is a link</a>
</body>

7、HTML图像

HTML 图像是通过 <img />标签进行定义的。

图像的名称和尺寸是以属性的形式提供的。

<body>

<img src="img/1.jpg" title="这是一个图片" />
</body>

8、HTML格式化(了解)

文本格式化标签

标签	描述
<b>	定义粗体文本
<big>	定义大号字
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

9、HTML元素

HTML 文档是由 HTML 元素定义的HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<br />	This is a paragraph	</p>

注意：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

上面的例子包含三个 HTML 元素。

HTML 实例解释

<p> 元素

<p>This is my first paragraph.</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：This is my first paragraph.

<body>元素

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html>元素

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签</html>。

元素内容是另一个 HTML 元素（body 元素）。不要忘记结束标签。

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。

<p>This is my first paragraph.
<p>This is my first paragraph.

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注意：未来的 HTML 版本不允许省略结束标签。

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br>标签定义换行）。

在未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML提示：使用小写标签

HTML 标签对大小写不敏感：<P>等同于<p>。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，在未来 HTML 版本中强制使用小写。

10、div和span

<div>是一个块级元素，通常与css配合使用，用于布局。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式

表现。可以通过 <div> 的class 或 id 应用额外的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML_div_span</title>
</head>
<body>

<div style="border: 1px solid black;width: 200px;height: 200px;text-align: center;">这是一个div</div>


<span style="color: red;">这是一个span</span>
</body>
</html>

标签的分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素特点：元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。可通过浏览器查看是何种元素，后期也可以通过CSS进行修改。

11、HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符 ，就可以将边框显示出来。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML表格</title>
</head>

<body>

<table border="1">

<caption><h3>这是一个表格</h3></caption>

<tr>

<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>

<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>

</html>

12、HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于<li>。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>

<body>

<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

</body>

</html>

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>

<body>

<h4>一个有序列表：</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

</body>

</html>

13、HTML表单

<form> 元素

HTML 表单用于收集用户输入。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

表单用于向服务器传输数据。form 元素是块级元素。

常用属性

属性	值	描述
action	URL	规定当提交表单时向何处提交表单数据
method	get、post	规定用于发送form-data的HTTP方法
name	Form_name	规定表单的名称

<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

常用属性

属性	值	描述
alt	text	定义图像输入的替代文本
checked	checked	规定此input元素首次加载应当被选中
disabled	disabled	当input元素加载时禁用此元素
readonly	readonly	当input元素加载时禁用此元素
maxlength	number	规定输入字段中的字符的最大长度
value	value	规定input元素的值
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

text 文本输入

<input type="text">` 定义用于文本输入的单行输入字段

<form>
First name:<br>
<input type="text" name="firstname" />
<br> Last name:<br>
<input type="text" name="lastname" />
</form>

password 密码输入

<input type="password"> 定义密码字段

radio 单选按钮输入

<input type="radio"> 定义单选按钮

<form>
<input type="radio" name="sex" value="male" checked />Male
<br>
<input type="radio" name="sex" value="female" />Female
</form>

checkbox 复选框

<input type="checkbox"> `定义复选框

复选框允许用户在有限数量的选项中选择零个或多个选项。

submit 提交按钮

<input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指

定。

action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

如果省略 action 属性，则 action 会被设置为访问当前页面。

<form action="http://www.pxcoder.com">
First name:
<input type="text" name="firstname" value="Mickey" />
<br/>
Last name:
<input type="text" name="lastname" value="Mouse" />
<br/><br/>
<input type="submit" value="Submit" />
</form>

select 下拉列表

定义一个下拉列表。

textarea 文本域

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定

textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

button 按钮

<button>元素定义可点击的按钮

常用属性

属性	值	描述
disabled	disabled	禁用该按钮
type	button、submit、reset	规定按钮的类型
value	text	规定该按钮的初始值
name	button_name	规定该按钮的名称