html骨架以及常见标签

推荐一个网站mdn。

html语法

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

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

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

注释:

html 复制代码
<!-- 这是注释 -->

注释的快捷键:ctrl+/

骨架

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

常用标签

文章标题标签

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

html 复制代码
<h1> 内容 </h1>
<h2> 内容 </h2>
<h3> 内容 </h3>
<h4> 内容 </h4>
<h5> 内容 </h5>
<h6> 内容 </h6>
html 复制代码
<!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>

段落标签

段落之间换行。

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

文本格式化标签

加粗

html 复制代码
<strong> 加粗的内容 </strong>
<b> 加粗的内容 </b>

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

html 复制代码
<!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>

斜体

html 复制代码
<i> 斜体 </i>
<em> 斜体 </em>

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

html 复制代码
<!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>

删除线

html 复制代码
<del> 删除线 </del>
<s> 删除线 </s>

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

html 复制代码
<!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>

上标/下标

html 复制代码
<sup> 上标的内容 </sup>
<sub> 下标的内容 </sub>
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		x<sup>2</sup>
		x<sub>2</sub>
	</body>
</html>

水平线

html 复制代码
<hr />

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

html 复制代码
<!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>

强制换行

html 复制代码
<br />

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

html 复制代码
<!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="图片链接"

html 复制代码
<img src="路径" />

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

html 复制代码
<!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>

无序列表

html 复制代码
<ul>
	<li>选项1</li>
	<li>选项2</li>
    <li>选项3</li>
</ul>

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

circle:空心圆

square:正方形

html 复制代码
<ul type="circle">
	<li>选项1</li>
	<li>选项2</li>
    <li>选项3</li>
</ul>
html 复制代码
<ul type="square">
	<li>选项1</li>
	<li>选项2</li>
    <li>选项3</li>
</ul>

有序列表

html 复制代码
<ol>
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
</ol>

属性:type 切换序号样式

将"1、2....."换成"a、b...."(也可以换成"A、B.....)

html 复制代码
<ol type="a">
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
</ol>

start 从几开始

从5开始

html 复制代码
<ol start="5">
	<li>选项1</li>
	<li>选项2</li>
	<li>选项3</li>
</ol>

自定义列表

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

超链接

html 复制代码
<a href="目标链接">提示文字</a>

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

html 复制代码
<!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,可以重复。

html 复制代码
<a href="#id">提示文字</a>
html 复制代码
<!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。

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

span标签

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

html 复制代码
<span>文字</span>

视频标签

html 复制代码
<video src="地址" </video>

或者

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

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

html 复制代码
<!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>

音频标签

html 复制代码
<audio src="地址" ></audio>

需要配合控制框架(controls)使用。

html 复制代码
<!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 | 时间,选择时间 |
[表单里常用的类型]

其他的功能:

①提交

html 复制代码
<button>点击提交</button>

②输入框

html 复制代码
<textarea name="" id="" cols="" rows=""></textarea>

③下拉框

html 复制代码
<select name="city" id="">
		<option value="西安">西安</option>
		<option value="南京"selected>南京</option>
		<option value="延安">延安</option>
</select>

注:

背景提示文字:placeholder

禁止输入/选择:disabled

单选默认选择:checked

下拉框默认选择:selected

html 复制代码
<!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选择为谁使用。

html 复制代码
<!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可以省略,直接按行写。

html 复制代码
<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>
html 复制代码
<!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>

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

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

|------------|----|
| 属性 | 作用 |
| rowspan="" | 跨行 |
| rolspan="" | 跨列 |
[td属性]

iframe标签

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

html 复制代码
<iframe src="地址" frameborder="0"></iframe>

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

html 复制代码
<!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 | 原本不可修改的文字变得可以修改 |
[全局属性]

特殊字符

&nbsp;代表一个空格

&lt;代表小于号

&gt;代表大于号

&copy;代表版权信息

相关推荐
zhougl99616 分钟前
html处理Base文件流
linux·前端·html
花花鱼20 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_23 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript