html骨架以及常见标签

推荐一个网站mdn。

html语法

双标签：<标签属性="属性值">内容</标签>

属性：给标签提供附加信息。大多数属性以键值对的形式存在。如果属性名和属性值一样，可以致谢属性值。

单标签：<标签属性="属性值"/>

注释：

<!-- 这是注释 -->

注释的快捷键：ctrl+/

骨架

<!DOCTYPE html>        #声明文档遵循html5
<html>
	<head>
		<meta charset="utf-8">    #字符编码
		<title></title>         #网页的标签
	</head>
	<body>          #要写的就在body里面
	</body>
</html>

常用标签

文章标题标签

只有h1、h2、h3、h4、h5、h6六个标题标签，逐级递减，独占一行。

<h1> 内容 </h1>
<h2> 内容 </h2>
<h3> 内容 </h3>
<h4> 内容 </h4>
<h5> 内容 </h5>
<h6> 内容 </h6>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>我是h1标题标签</h1>
		<h2>我是h2标题标签</h2>
		<h3>我是h3标题标签</h3>
		<h4>我是h4标题标签</h4>
		<h5>我是h5标题标签</h5>
		<h6>我是h6标题标签</h6>
	</body>
</html>

段落标签

段落之间换行。

<p> 内容 </p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p>小米汽车发布会之后，如何将“泼天流量”转化为销量，
		成为首要课题。而销量实现的核心支撑，则是小米汽车工
		厂的产线产能。</p>
		<p>证券时报·e公司记者日前来到位于北京亦庄的小米汽
		车工厂探营，小米 SU7就是从这里诞生，而后走向全国。
		据悉，在产能爬满后，小米汽车工厂每小时可生产 40 
		辆小米 SU7，每 76 秒就可以有一辆新车下线。</p>
	</body>
</html>

文本格式化标签

加粗

<strong> 加粗的内容 </strong>
<b> 加粗的内容 </b>

给上段段落标签的第一段的小米汽车、第二段的证券时报加粗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p><strong>小米汽车</strong>发布会之后，如何将“泼天流量”转化为销量，
		成为首要课题。而销量实现的核心支撑，则是小米汽车工
		厂的产线产能。</p>
		<p><b>证券时报</b>·e公司记者日前来到位于北京亦庄的小米汽
		车工厂探营，小米 SU7就是从这里诞生，而后走向全国。
		据悉，在产能爬满后，小米汽车工厂每小时可生产 40 
		辆小米 SU7，每 76 秒就可以有一辆新车下线。</p>
	</body>
</html>

斜体

<i> 斜体 </i>
<em> 斜体 </em>

给上段文字的第一段的泼天流量、第二段的北京加斜体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p><strong>小米汽车</strong>发布会之后，如何将<i>“泼天流量”</i>转化为销量，
		成为首要课题。而销量实现的核心支撑，则是小米汽车工
		厂的产线产能。</p>
		<p><b>证券时报</b>·e公司记者日前来到位于<em>北京</em>亦庄的小米汽
		车工厂探营，小米 SU7就是从这里诞生，而后走向全国。
		据悉，在产能爬满后，小米汽车工厂每小时可生产 40 
		辆小米 SU7，每 76 秒就可以有一辆新车下线。</p>
	</body>
</html>

删除线

<del> 删除线 </del>
<s> 删除线 </s>

给上段文字的第一段的产线产能、第二段的汽车工程加删除线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p><strong>小米汽车</strong>发布会之后，如何将<i>“泼天流量”</i>转化为销量，
		成为首要课题。而销量实现的核心支撑，则是小米汽车工
		厂的<del>产线产能。</del></p>
		<p><b>证券时报</b>·e公司记者日前来到位于<em>北京</em>亦庄的小米<s>汽
		车工厂</s>探营，小米 SU7就是从这里诞生，而后走向全国。
		据悉，在产能爬满后，小米汽车工厂每小时可生产 40 
		辆小米 SU7，每 76 秒就可以有一辆新车下线。</p>
	</body>
</html>

上标/下标

<sup> 上标的内容 </sup>
<sub> 下标的内容 </sub>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		x<sup>2</sup>
		x<sub>2</sub>
	</body>
</html>

水平线

<hr />

给上面两段之间加一个水平线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p><strong>小米汽车</strong>发布会之后，如何将<i>“泼天流量”</i>转化为销量，
		成为首要课题。而销量实现的核心支撑，则是小米汽车工
		厂的<del>产线产能。</del></p>
		<hr />
		<p><b>证券时报</b>·e公司记者日前来到位于<em>北京</em>亦庄的小米<s>汽
		车工厂</s>探营，小米 SU7就是从这里诞生，而后走向全国。
		据悉，在产能爬满后，小米汽车工厂每小时可生产 40 
		辆小米 SU7，每 76 秒就可以有一辆新车下线。</p>
	</body>
</html>

强制换行

<br />

在上面第二段据悉前强制换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<p><strong>小米汽车</strong>发布会之后，如何将<i>“泼天流量”</i>转化为销量，
		成为首要课题。而销量实现的核心支撑，则是小米汽车工
		厂的<del>产线产能。</del></p>
		<hr />
		<p><b>证券时报</b>·e公司记者日前来到位于<em>北京</em>亦庄的小米<s>汽
		车工厂</s>探营，小米 SU7就是从这里诞生，而后走向全国。
		<br />据悉，在产能爬满后，小米汽车工厂每小时可生产 40 
		辆小米 SU7，每 76 秒就可以有一辆新车下线。</p>
	</body>
</html>

图片标签

相对路径：

../ ：代表当前文件的上一级别

./：代表当前文件

绝对路径：你电脑的图片的位置（不建议使用）

网络路径：直接在src="图片链接"

<img src="路径" />

img常用属性
属性	作用
width	设置图片的宽
height	设置图片的高
alt	当图片因为某些原因不可见时，显示的文字
title	移动到图片显示的文字
align	控制同行文字与图片的对齐方式
hspace	控制同行文字和图片的水平距离
vspace	控制文字与图片的垂直距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>懒洋洋</h1>
		<img src="./images/懒洋洋.jpg" width="300px" height="150px" title="我是懒洋洋"/ align="middle" hspace="200px" vspace="200px"> 我要与懒洋洋水平居中对齐并且水平距离他200px垂直距离200px
		<h1>狗子</h1>
		<img src="../images/dog1.jpg" width="300px" height="150px" alt="糟糕,消失不见了"/>
	</body>
</html>

无序列表

<ul>
	<li>选项1</li>
	<li>选项2</li>
    <li>选项3</li>
</ul>

type属性：控制列表前面的图形。

circle：空心圆

square：正方形

<ul type="circle">
	<li>选项1</li>
	<li>选项2</li>
    <li>选项3</li>
</ul>

<ul type="square">
	<li>选项1</li>
	<li>选项2</li>
    <li>选项3</li>
</ul>

有序列表

<ol>
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
</ol>

属性：type 切换序号样式

将“1、2.....”换成“a、b....”（也可以换成“A、B.....）

<ol type="a">
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
</ol>

start 从几开始

从5开始

<ol start="5">
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
</ol>

自定义列表

<dl>
	<dt>可以是文字和图片</dt>
	<dt><img src="./images/懒洋洋.jpg" width="300px" height="150px"/></dt>
	<dd>公司地址</dd>
	<dd>投诉电话</dd>
</dl>

超链接

<a href="目标链接">提示文字</a>

a标签属性
属性	作用
target="属性值"	超链接方式，_self:本页面加载 _blank:新建一个页面加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com" target="_self">去百度</a>
	</body>
</html>

锚标签

利用超链接实现，需要给特定标签取id，id唯一不重复；也可以取name，可以重复。

<a href="#id">提示文字</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#zhengzhi">整治</a>
		<h1>莫莫格湿地上空飞翔的灰鹤。</h1>
		　　潘晟昱摄（人民视觉）
		　　编者按：一年之计在于春。春风送暖，万物复苏，在广袤的国土上，候鸟北飞、鲜花盛放、草木葱茏……
		　　即日起，本版推出“美丽中国·春天来了”系列报道，让我们在观赏春日美景的同时，看忙碌的人们如何在美丽中国建设中用辛勤的工作迎接春天的到来。		
		　　碧波荡漾，鸟鸣啾啾。4月1日国际爱鸟日前夕，吉林白城莫莫格湿地内，鸟儿飞翔的身影倒映在波光粼粼的水面上，映出春日里的勃勃生机。
		　　“看！那就是白鹤，国家一级重点保护野生动物！”摄影爱好者姜海涛兴奋地指着远处飞起的鸟群，“我最近在莫莫格湿地看到的白鹤就有200多只，我还拍到了东方白鹳、白枕鹤、苍鹭……鸟儿齐齐‘返乡’，春天真的来了！”
		　　<h1>枝头染绿，鸟儿衔来春讯</h1>
		　　春风拂过莫莫格湿地，原本干瘦的树枝变得柔软，树皮泛出绿意。走进吉林莫莫格国家级自然保护区，姿态各异的鸟儿随处可见——白鹤漫步浅滩悠闲觅食，黑尾塍鹬成群结队展翅翱翔，一对灰雁正准备在芦苇湿地筑巢……
		　　“每年春季，会有大量候鸟从南方飞回，来到莫莫格湿地停留、繁殖。”吉林莫莫格国家级自然保护区管理局科研科科长王波介绍。大多数候鸟的繁殖地在北方的湿地、草原。北方冬季天气寒冷，食物来源减少，候鸟便飞往南方水草丰茂的区域越冬。天气转暖之后，候鸟们再纷纷北归，回到繁殖地繁衍后代。
	　　“候鸟的归来是春天到来的信号之一。”王波介绍，以国家一级重点保护野生动物东方白鹳为例，这种鸟类是大型涉禽，以鱼虾、蛙类、昆虫等为食，只有气温回升、冰面解冻时，才会从鄱阳湖等越冬地启程，途经江西、江苏、山东、天津等地，最终在东北等地停歇、繁殖。
		　　随着候鸟迁徙高峰期的到来，王波的工作也愈发忙碌。“现在我们每天都要把适合候鸟栖息的地方跑一遍，观测东方白鹳等重点保护鸟类的数量、种群构成、栖息地生态环境，以及有无人为干扰情况等。”王波说，据监测，截至目前，在莫莫格湿地迁徙停歇的鸟类约7万只，其中重点保护鸟类有77只东方白鹳、308只白鹤、1700只灰鹤等。“从数据来看，经过多年扎实的保护工作，来到莫莫格湿地的白鹤、灰鹤的数量有了较大增长。”
		　　迎来大批候鸟“返乡”的，不止莫莫格湿地。吉林省地处东亚—澳大利西亚全球候鸟迁徙路线上，鸟类种类繁多，已记录到的候鸟达320余种，是我国候鸟停歇和繁殖的重要栖息地。每年3月中旬开始，成群候鸟就由越冬地北迁至吉林，为北方大地衔来久违的春讯。
		　　<h1>植物丰富，保证食物来源</h1>
		　　雪融冰消，万物复苏。树杈上，一只苍鹭正在补巢。
		　　“近年来，随着湿地生态环境持续向好，越来越多候鸟选择在莫莫格湿地繁殖。”王波说。
		　　莫莫格湿地位于松嫩平原和科尔沁草原的交汇地带，是吉林省西部面积最大、最为典型的湿地类型保护区。保护区14.4万公顷的土地上河网密布，有着多种典型优势湿地植物群落，为诸多候鸟提供了适宜的栖息场所。
		　　万鸟翔集的景致，吸引了许多像姜海涛一样的摄影爱好者。“最近几年，每年到莫莫格停留的鸟类一共有298种，包括白鹤、丹顶鹤、大鸨、东方白鹳等22种国家一级重点保护野生动物，小天鹅、灰鹤、白琵鹭等49种国家二级重点保护野生动物。”谈起鸟儿，姜海涛如数家珍。
		　　“这里面，我最喜欢拍摄白鹤，特别是展翅飞翔的白鹤。”姜海涛兴高采烈地向记者展示他拍到的照片，“那时能看到白鹤的黑色翅尖，像露在白袍外面的一节黑袖。”
		　　白鹤是莫莫格湿地的“名片”。“我们保护区入口就有白鹤的雕塑。”王波介绍，成年白鹤体长可达1.3米以上，头顶和脸部是鲜红色。一般为群居，喜欢在浅水湿地漫步觅食。
		　　白鹤主要以水生植物的根茎为食，莫莫格湿地内的大量藨草为其提供了重要的食物来源。如今，莫莫格国家级自然保护区内大大小小的河湖泡沼，到处可见白鹤的踪迹，高峰期时一天最多统计到3800余只白鹤停歇。
		　　“来到莫莫格湿地的鸟主要以雁鸭类、鸻鹬类为主，还有白鹤、东方白鹳等鹤鹳类。”王波说，“让候鸟来得了、吃得好、留得住，是我们共同的心愿。”
		　　<h1 id="zhengzhi">综合整治，维护栖息环境</h1>
		　　“20年前我刚参加工作那会儿，遇见白鹤是件稀罕事儿。”王波说，过去，因气候变化、上游水库限流等原因，莫莫格湿地的水域面积连年缩小，藨草等植物数量骤减。食物不易寻觅，候鸟越来越少。
		　　为了恢复生态，吉林省启动河湖连通工程，以西部现有大型水利工程为“主动脉”，打通湖泡间的“毛细血管”，来自嫩江的活水涌入莫莫格湿地，恢复了湿地水文连通性，持续增强湿地生态稳定性。与此同时，莫莫格国家级自然保护区管理局开展生态环境综合整治，实施禁牧、禁耕，推动实施退耕还草还湿等工程建设。多措并举下，莫莫格湿地面积增加约5000公顷。
		　　湿地恢复生机，鸟儿飞回这里，保护也在持续。“我现在还是中国野生动物保护协会吉林白城护飞队副队长呢。”姜海涛对记者说，2018年，白城市10余位摄影爱好者牵头成立了候鸟护飞队，在候鸟停歇区域志愿开展巡护、宣传。如今，护飞队已发展到200多人。“经过多年宣传，当地居民的候鸟保护意识有了很大提高。今年，我们志愿者团队打算划分网格开展候鸟保护，为候鸟创造更好的栖息环境。”
		　　王波说，近年来，一升一降的两个数据最令他欣慰。“升”的是数量，来到莫莫格国家级自然保护区的白鹤从20年前的几百只，发展到如今的3000多只，数量大大提升。“降”的是比例，3000多只来到莫莫格国家级自然保护区的白鹤，占全球白鹤种群数量的比例由此前的90%以上降至60%左右。“数量多了，比例降了，说明整个白鹤的种群数量在提升，许多白鹤飞到了吉林向海国家级自然保护区、内蒙古科尔沁国家级自然保护区等地。”王波露出了欣慰的笑容。
		　　春回大地，东方白鹳在莫莫格湿地衔枝筑巢，苍鹭在查干湖上翩翩起舞，绿头鸭在天桥岭林区梳理羽毛……北飞的候鸟如同跳动的音符，谱写出人与自然和谐共生的美妙乐章。
		　　“吉林省监测到的中华秋沙鸭数量已经由2018年时的不足300只增长到600余只。”吉林省林业和草原局野生动植物保护处副处长汪永兴介绍，吉林省坚持维护生物多样性，多措并举保护候鸟及其栖息地，划定并公布32个重要候鸟迁徙通道，全天候开展护鸟工作，组织开展2023年度迁徙期水鸟同步调查，深入开展受伤野生鸟类收容救护……维护候鸟栖息地安全。
		　　《 人民日报 》（ 2024年04月01日 14 版）
		(责编：赵欣悦、袁勃)
		分享让更多人看到 
		推荐阅读
	世界水日｜守护“流动”的美景 数览各地河湖生态治理成效
		　　河湖是水的重要载体，是生态系统的重要组成部分。近年来，我国坚持“节水优先、空间均衡、系统治理、两手发力”治水思路，不断完善河湖生态系统保护治理体系，加快复苏河湖生态环境。…
		南水北调东中线工程累计调水量突破700亿立方米
		　　人民网北京3月19日电 （记者王仁宏）据水利部消息，3月18日，南水北调东中线工程累计调水量突破700亿立方米（含生态补水超108亿立方米），其中中线调水625.93亿立方米，东线调水67.77亿立方米，东线北延工程调水6.30亿立方米，惠及沿线7省市40多座大中城市，受益人口超1.76亿。 据悉，东、中线一期工程全面通水以来，水利部持续加强工程调度管理，强化运行监管，全力保障工程安全、供水安全、水质安全。…
	</body>
</html>

div标签

没有具体含义，用来划分页面区域。独占一行。可以div嵌套div。

<div>内容</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>春风拂过莫莫格湿地，</div>原本干瘦的树枝变得柔软
	</body>
</html>

span标签

没有特定含义，给某几个字加特定属性使用，可以理解为一个小盒子。

<span>文字</span>

视频标签

<video src="地址" </video>

或者

<video >
	<source src="地址"/>
</video>

video标签属性
属性	作用
controls	控制框架，例如播放、声音大小、倍速
autoplay	自动播放
muted	静音播放
loop	循环播放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>下面是视频</h1>
		<video src="./video1.mp4" controls autoplay muted loop></video>
		<video >
			<source src="./video1.mp4"/>
		</video>
	</body>
</html>

音频标签

<audio src="地址" ></audio>

需要配合控制框架（controls）使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		下面是音频标签
		<audio src="./可以了-陈奕迅.mp3" controls></audio>
	</body>
</html>

表单

是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。

表单里常用的类型
类型	作用
text	文本
password	密码，输入之后显示黑色圆点
radio	单选，几个选项之间的name值需要一样，value也要写上值
checkbox	多选，几个选项之间的name值需要一样，value也要写上值
submit	提交按钮
button	无用提交按钮
url	网址，且只能输入网址，否则不能提交
time	时间，选择时间

其他的功能：

①提交

<button>点击提交</button>

②输入框

<textarea name="" id="" cols="" rows=""></textarea>

③下拉框

<select name="city" id="">
		<option value="西安">西安</option>
		<option value="南京"selected>南京</option>
		<option value="延安">延安</option>
</select>

注：

背景提示文字：placeholder

禁止输入/选择：disabled

单选默认选择：checked

下拉框默认选择：selected

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#">
			用户名：<input type="text" name="username" placeholder="请输入用户名" />
			密码：<input type="password" name="pwd" placeholder="请输入密码"/>
			性别：男<input type="radio" name="sex" value="男"/> 女 <input type="radio" name="sex" value="女" checked/>
			你在干嘛？吃饭 <input type="checkbox" name="hobby" value="吃饭" />
			睡觉 <input type="checkbox" name="hobby" value="睡觉" />
			<input type="submit" />
			<button>点击提交</button>
			<input type="button" name="wuyong" value="提交"/>
			<textarea name="area1" id="" cols="30" rows="10"></textarea>
			<select name="city" id="">
				<option value="西安">西安</option>
				<option value="南京"selected>南京</option>
				<option value="延安">延安</option>
			</select>
		</form>
	</body>
</html>

当作为单选或者多选时，若想要点击字就选择上该项，则可使用label全部包起来该选项；也可以只包字，但是需要使用for选择为谁使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#">
			性别：<label><input type="radio" name="sex"/>男</label>
			<input type="radio" name="sex" id="sex1"/><label for="sex1">女</label>
		</form>
	</body>
</html>

表格标签

表格的关键词
table	表格
caption	表标题
thead	表头
tr	行
th	表头里面的单元格，字体会加粗
tbody	表体
td	表体的单元格
tfoot	表尾

注：每一行的单元格数需要相等。thead、tbody、tfoot可以省略，直接按行写。

<table>
	<caption></caption>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tfoot>
</table>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0" width="300px"" height="200px">
			<caption>学生信息表</caption>
			<thead height="200px" align="right" valign="top">
				<tr bgcolor="pink">
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td rowspan="2">张三</td>
					<td>男</td>
					<td>13</td>
				</tr>
				
				<tr>
					<!-- <td>要跨行，所以把这个单元格删除</td> -->
					<td>女</td>
					<td>15</td>
				</tr>
				
				<tr>
					<td>王五</td>
					<td>男</td>
					<td>20</td>
				</tr>
				
				<tr>
					<td>老六</td>
					<td>男</td>
					<td>33</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2"></td>
					<!-- <td>要跨列，所以把单元格删除</td> -->
					<td>共计4人</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

table常用属性
属性	作用
border="1px"	边框设为1px
cellspacing="0px"	设置单元格之间的距离
width=""	设置表格的宽
height	设置表格的高

thead\tbody\tbody\tr的属性
属性	作用
height=""	设置行高
align=""	设置水平对齐方式，有left、center、right
valign=""	设置垂直对齐方式，有top、middle、buttom
bgcolor=""	设置背景颜色

td属性
属性	作用
rowspan=""	跨行
rolspan=""	跨列

iframe标签

嵌入广告或其他页面使用。也可以使用width、height设置宽和高。

<iframe src="地址" frameborder="0"></iframe>

可以配合a使用，例如：只有点击超链接之后才会出现表格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="./表格.html" target="ee">前往表格</a>
		<iframe frameborder="0" name="ee"></iframe>
	</body>
</html>

全局属性

全局属性
属性	作用
id	唯一，标记
class	可以多个标签用一个，一个标签也可以用多个
tabindex	可以使用tab键选择，-1（不可遍历）1（按顺序遍历）
contenteditable	原本不可修改的文字变得可以修改