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;代表版权信息

相关推荐
开心工作室_kaic13 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā14 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js