HTML

发布时间：2023-09-06 01:54责任编辑：彭小芳关键词：HTML

HTML标签

HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的。

什么是标签呢？

1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。2. HTML中标签通常都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。3. 标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。4. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。

View Code

注意：不是所有标签都支持互相嵌套。

HTML文档结构

<!DOCTYPE HTML><html> ???<head>...</head> ???<body>...</body></html>

让我们来解释一下上面的代码：

首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head></head>标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

HTML注释

HTML中注释的格式:

<!--这里是注释的内容-->

注意：注释中可以直接使用回车换行。

并且我们习惯用注释的标签把HTML代码包裹起来。如：

<!-- xx部分 开始 --> ???这里放你xx部分的HTML代码<!-- xx部分 结束 -->

HTML注释的注意事项：

HTML注释不支持嵌套。
HTML注释不能写在HTML标签中。

head标签

head标签的主要内容和作用，文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。以下标签是可以用在head标签中的：

<head lang="en"> ???<title>标题信息</title> ???<meta charset="utf-8"> ???<link> ???<style type="text/css"></style> ???<script type="text/javascript"></script></head>

title标签

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

meta标签

Meta标签介绍：

元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

常用的meta标签：

http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号--><meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"><!--指定文档的内容类型和编码类型 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><!--告诉IE浏览器以最高级模式渲染当前网页--><meta http-equiv="x-ua-compatible" content="IE=edge">

　　2.name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"><meta name="description" content="路飞学城">

meta其他标签属性

<!--标题--><title>路飞学城</title><!--icon图标（网站的图标）--><link rel="icon" href="fav.ico"><!--定义内部样式表--><style></style><!--引入外部样式表文件--><link rel="stylesheet" href="mystyle.css"><!--定义JavaScript代码或引入JavaScript文件--><script src="myscript.js"></script>

body标签

想要在网页上展示出来的内容一定要放在body标签中。

<!DOCTYPE html><html><head> ???????<title>测试</title> ???????<meta charset="utf-8"></head> ???</head> ???<body> ???<!--在<body>内部的都是在网页上展示的--> ???????<h1>这是标题</h1> ???????<p>这是内容</p> ???</body></html>

标题标签 h1~h6

<h1>-<h6>标签可定义标题。<h1>定义最大的标题。<h6>定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。标题标签通常用来制作文章或网站的标题。

h1~h6标签的默认样式：

<!DOCTYPE HTML><html> ???<head lang=‘en‘> ???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ???????<title>路飞学城</title> ???</head> ???<body> ???????<h1>一级标题</h1><h2>二级标题</h2> ???????<h3>三级标题</h3> ???????<h4>四级标题</h4> ???????<h5>五级标题</h5> ???????<h6>六级标题</h6> ???</body></html>

上面代码<h1>和<h2>书写在一行上展示，但是在浏览器的效果却是换行了。因为标题属于块级元素，会独占一行。

文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...1. `<b></b>`：加粗2. `<i></i>`：斜体3. `<u></u>`：下划线4. `<s></s>`：删除线5. `<sup></sup>`：上标 6. `<sub></sub>`：下标现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调

段落标签 p

<p>,paragraph的简写。定义段落

浏览器展示特点：

跟普通文本一样，但我们可以通过css来设置当前段落的样式
是块级元素独占一行

超链接标签 a

超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像

<body> ???<h1> ???????<!-- a链接 超链接 ?????????target:_blank 在新的网站打开链接的资源地址 ???????????????_self 在当前网站打开链接的资源地址 ???????title: 鼠标悬停时显示的标题 ???????--> ???????<a href="http://www.baidu.com" target="_blank" title="百度">百度</a> ???????<a href="a.zip">下载包</a> ???????<a href="邮箱地址">联系我们</a> ???????<!-- 返回页面顶部的内容 --> ???????<a href="#">跳转到顶部</a> ???????<!-- 返回某个id --> ???????<a href="#p1">跳转到p1</a> ???????<!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 --> ???????<a href="javascript:alert(1)">内容</a> ???????<a href="javascript:;">内容</a> ???</h1></body>

View Code

target:_blank 在新的网站打开链接的资源地址 target：_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题

链接其他表现形式：

目标文档为下载资源例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)
电子邮件链接前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。例如：<ahref="邮箱地址">联系我们</a>
返回页面顶部的空链接或具体id值的标签例如：<ahref="#">内容</a>或<ahref="#id值">内容</a>
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<ahref="javascript:alert()">内容</a>
javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<ahref="javascrip:;">内容</a>

列表标签 ul，ol

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容

<ul>:unordered lists的缩写无序列表<ol>:ordered listsde的缩写有序列表

 <!-- 无序列表 type可以定义无序列表的样式--> ???<ul type="circle"> ???????<li>我的账户</li> ???????<li>我的订单</li> ???????<li>我的优惠券</li> ???????<li>我的收藏</li> ???????<li>退出</li> ???</ul> ???<!-- 有序列表 type可以定义有序列表的样式 --> ???<ol type="a"> ???????<li>我的账户</li> ???????<li>我的订单</li> ???????<li>我的优惠券</li> ???????<li>我的收藏</li> ???????<li>退出</li> ???</ol>

View Code

ol标签的属性：

type：列表标识的类型

1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符

列表标识的起始编号

默认为1

ul标签的属性： type：列表标识的类型

disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识

盒子标签`div`

<div>可定义文档的分区 division的缩写译：区<div>标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区

<div id=‘wrap‘> ???<div class=‘para‘></div> ???<div class=‘anchor‘></div> ???<div class=‘para‘></div> ???<div class=‘lists‘></div> ???</div>

将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’n1 n2‘

图片标签`<img/>`

一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。

语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

注意：

src设置的图片地址可以是本地的地址也可以是一个网络地址。
图片的格式可以是png、jpg和gif。
alt属性的值会在图片加载失败时显示在网页上。

还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度

 <div> ????<span>与行内元素展示的标签</span> ????<span>与行内元素展示的标签</span> ????<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px"> ????<img src="./finance-right.png" alt="人工智能实战" ?style="width: 200px;height: 200px"> </div>

View Code

浏览器查看效果：行内块元素

与行内元素在一行内显示
可以设置宽度和高度
span标签可以单独摘出某块内容，结合css设置相应的样式

其他标签

换行标签`<br>`

<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

分割线`<hr>`

<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容

特殊符号

浏览器在显示的时候会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。

常用特殊字符

空格　　　　&nbsp

>　　　　　　&gt

<　　　　　　&lt

&　　　　　　&amp

￥　　　　　　&yen

表格标签 table

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

<div > ???????<table> ???????????<!--表格头--> ???????????<thead> ???????????????<!--表格行--> ???????????????<tr> ???????????????????<!--表格列，【注意】这里使用的是th--> ???????????????????<th></th> ???????????????</tr> ???????????</thead> ???????????<!--表格主体--> ???????????<tbody> ???????????????<!--表格行--> ???????????????<tr> ???????????????????<!--表格列，【注意】这里使用的是td--> ???????????????????<td></td> ???????????????</tr> ???????????????<tr> ???????????????????<td></td> ???????????????</tr> ???????????</tbody> ???????????<!--表格底部--> ???????????<tfoot> ???????????????<tr> ???????????????????<td></td> ???????????????</tr> ???????????</tfoot> ???????</table></div>

View Code

表格行和列的合并

rowspan 合并行(竖着合并)
colspan 合并列(横着合并)

<body> ???<div > ???????<table border="1" cellspacing="0"> ???????????<!--表格头--> ???????????<thead> ???????????????<!--表格行--> ???????????????<tr> ???????????????????<!--表格列，【注意】这里使用的是th--> ???????????????????<th></th> ???????????????????<th>星期一</th> ???????????????????<th>星期二</th> ???????????????????<th>星期三</th> ???????????????????<th>星期四</th> ???????????????????<th>星期五</th> ???????????????</tr> ???????????</thead> ???????????<!--表格主体--> ???????????<tbody> ???????????????<!--表格行--> ???????????????<tr> ???????????????????<td rowspan="3">上午</td> ???????????????????<!--表格列，【注意】这里使用的是td--> ???????????????????<td>语文</td> ???????????????????<td>数学</td> ???????????????????<td>英文</td> ???????????????????<td>生物</td> ???????????????????<td>化学</td> ???????????????</tr> ???????????????<tr> ???????????????????<!--表格列，【注意】这里使用的是td--> ???????????????????<td>语文</td> ???????????????????<td>数学</td> ???????????????????<td>英文</td> ???????????????????<td>生物</td> ???????????????????<td>化学</td> ???????????????</tr> ???????????????<tr> ???????????????????<!--表格列，【注意】这里使用的是td--> ???????????????????<td>语文</td> ???????????????????<td>数学</td> ???????????????????<td>英文</td> ???????????????????<td>生物</td> ???????????????????<td>化学</td> ???????????????</tr> ???????????????<tr> ???????????????????<td rowspan ="2">下午</td> ???????????????????<!--表格列，【注意】这里使用的是td--> ???????????????????<td>语文</td> ???????????????????<td>数学</td> ???????????????????<td>英文</td> ???????????????????<td>生物</td> ???????????????????<td>化学</td> ???????????????</tr> ???????????????<tr> ???????????????????<!--表格列，【注意】这里使用的是td--> ???????????????????<td>语文</td> ???????????????????<td>数学</td> ???????????????????<td>英文</td> ???????????????????<td>生物</td> ???????????????????<td>化学</td> ???????????????</tr> ???????????</tbody> ???????????<!--表格底部--> ???????????<tfoot> ???????????????<tr> ???????????????????<td colspan="6">课程表</td> ???????????????</tr> ???????????</tfoot> ???????</table> ???</div></body>

View Code

表单标签 form

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）

表单的作用

表单用于显示、收集信息，并将信息提交给服务器

语法：

<from>允许出现表单控件</from>　　

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

浏览器显示如下：

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>Password: <input type="password" name="pwd"></form>

浏览器显示效果如下:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form> ???????<input type="radio" name="choice" value="left">左边<br/> ???????<input type="radio" name="choice" value="right" checked="">右边 ???</form>

浏览器显示效果如下:

左边
右边

radio为单选，checked 是默认选择

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

浏览器显示效果如下:

 ???<form action="http://www.baidu.com" method="get"> ???????<!--文本和密码--> ???????Username:<input type="text" name="user"><br/> ???????password:<input type="password" name="pwd"><br/> ???????<!--单选--> ???????<input type="radio" name="choice">选项一<br/> ???????<input type="radio" name="choice">选项二<br/> ???????<!--多选--> ???????<input type="checkbox" name="choice">多选一<br/> ???????<input type="checkbox" name="choice">多选二<br/> ???????<!--下拉选项--> ???????<select>城市 ???????????<option name="上海">上海</option> ???????????<option name="江西">江西</option> ???????????<option name="北京">北京</option> ???????</select><br/> ???????<!--文本域--> ???????<textarea style="width: 100px;height: 150px;">这是文本域 ???????</textarea><br/> ???????<!--创建按钮--> ???????<input type="button" value="Button"><br/> ???????<!--重置按钮--> ???????<input type="reset" value="reset"><br/> ???????<!--提交按钮--> ???????<input type="submit" value="Submit"> ???</form>

总结

浏览器显示内容：

Username:
password:
选项一
选项二
多选一
多选二

HTML标签属性

HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中。如

<div >这是一个div标签</div><p class=‘p1 p2 p3‘>这是一个段落标签</p><a href="http://www.baidu.com">这是一个链接</a><input type=‘button‘ onclick=‘addclick()‘>

为什么能设置属性呢？

其实呢，你可以这样简单理解，因为最终我们这些标签会通过css去美化，通过javascript来操作，那么这些标签我们可以看成是一个对象，对象就应该有它自己的属性和方法。那么你像上面说到input标签，type=‘button’就是它的属性，onclick=‘addclick()’就是它的方法。后面会详细讲JavaScript和css

关于标签属性的注意事项：

1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
2.属性值要用引号包裹起来，通常使用双引号也可以单引号。
3.属性和属性值不区分大小写，但是推荐使用小写。

标签分类

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

常用的块状元素：<div>　　<h1>~<h6>　　<p>　　<table>　　<ol>　　<ul>　　<li>

常用的行内元素：span　　<strong>　　<em>　　<a>　　<label>

常用的行内块元素：<img>　　<input>

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

注意

我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。

标签嵌套规则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div>??

<ahref=”#”><span></span></a>??

<span><div></div></span>?

块级元素不能放在p标签里面，比如

<p><ol><li></li></ol></p>?

<p><div></div></p>?

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p

li元素可以嵌入ul，ol，div等标签

HTML

原文地址：https://www.cnblogs.com/zzhhtt/p/9029281.html

HTML

HTML标签

什么是标签呢？

HTML文档结构

HTML注释

head标签

title标签

meta标签

meta其他标签属性

body标签

标题标签 h1~h6

段落标签 p

超链接标签 a

列表标签 ul，ol

盒子标签`div`

图片标签`<img/>`

图片标签`<img/>`

其他标签

换行标签`<br>`

分割线`<hr>`

特殊符号

常用特殊字符

表格标签 table

表单标签 form

表单的作用

文本域（Text Fields）

密码字段

单选按钮（Radio Buttons）

复选框（Checkboxes）

提交按钮(Submit Button)

HTML标签属性

为什么能设置属性呢？

关于标签属性的注意事项：

标签分类

注意

标签嵌套规则

知识推荐

HTML

HTML标签

什么是标签呢？

HTML文档结构

HTML注释

head标签

title标签

meta标签

meta其他标签属性

body标签

标题标签 h1~h6

段落标签 p

超链接标签 a

列表标签 ul，ol

盒子标签div

图片标签<img/>

图片标签<img/>

其他标签

换行标签<br>

分割线<hr>

特殊符号

常用特殊字符

表格标签 table

表单标签 form

表单的作用

文本域（Text Fields）

密码字段

单选按钮（Radio Buttons）

复选框（Checkboxes）

提交按钮(Submit Button)

HTML标签属性

为什么能设置属性呢？

关于标签属性的注意事项：

标签分类

注意

标签嵌套规则

知识推荐

盒子标签`div`

图片标签`<img/>`

图片标签`<img/>`

换行标签`<br>`

分割线`<hr>`