HTML知识点

最新推荐文章于 2024-09-16 23:39:36 发布
最新推荐文章于 2024-09-16 23:39:36 发布
阅读量697 收藏 9
点赞数 21
分类专栏： 前端 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70314704/article/details/139319654
版权

HTML知识

页面构成

img

标题标签-h1~h6

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>一级标题</h2>
		<h3>一级标题</h3>
		<h4>一级标题</h4>
		<h5>一级标题</h5>
		<h6>一级标题</h6>
	</body>
</html>

段落标签-p

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<p>这是段落标签</p>
	</body>
</html>

文本标签-span

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<!-- 
		 span：文本标签
		 br：换行符
		 hr：分割线
		 -->
		<span>这是文本标签</span>
		<br>
		<span>这是文本标签</span>
		<hr>
	</body>
</html>

图片标签-img

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<!-- 
		 img：图片标签
		 	src：图片资源地址（相对地址或网络地址）
			width：宽度（像素值px或占当前页面的百分比%）
		 	height：高度（像素值px或占当前页面的百分比%）
		 	alt：图片加载失败的文字描述
		 -->
		<img src="img/hyg.jpg" width="100px" height=100px"" alt="图片加载错误" />
		<img src="img/hyg.jpg" width="30%" height=100%"" alt="图片加载错误" />
		<img src="https://pic3.zhimg.com/v2-b42970d7682c924d63d396b9ee503198_r.jpg?source=1940ef5c" width="100px" height=100px"" alt="图片加载错误" />
	</body>
</html>

无序列表-ul

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		
		<!-- 
		 ul：无序列表
			type：列表格式（circle-空心圆、disc-实心圆、square-实心方块）
		 li：项
		 -->
		<ul type="circle">
			<li>
				123
			</li>
			<li>
				123
			</li>
		</ul>
	</body>
</html>

有序列表-ol

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>

		<!-- 
		 ol：有序列表
		 li：项
		 type：列表样式（1-阿拉伯数字、a-小写英文字母、A-大写英文字母、i-小写希腊数字、I-大写希腊数字）
		 -->
		<ol type="i">
			<li>
				123
			</li>
			<li>
				123
			</li>
		</ol>
	</body>
</html>

自定义列表-dl

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<!-- 
		 dl：自定义列表
		 dt：列表头
		 dd：列标体
		 -->
		<dl>
			<dt>自定义列表</dt>
			<dd>123</dd>
			<dd>123</dd>
			<dd>123</dd>
			<dd>123</dd>
		</dl>
	</body>
</html>

超链接-a

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<!-- 
		 a：超链接
		 href：链接地址
		 target：展示页面（_blank：新页面展示、_self：本页面展示）
		 -->
		<a href="01标题标签.html" target="_blank">01标题标签</a>
		<a href="02段落标签.html" target="_self">02段落标签</a>
		<a href="https://www.bing.com" target="_blank">Bing</a>
		</dl>
	</body>
</html>

锚链接

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<!-- 
		锚链接：通过插入锚链接实现快速跳转 
		 -->
		
		<a href="#news01">国内新闻</a>
		<a href="#news02">国际新闻</a>
		<a href="#news03">娱乐新闻</a>
		
		<a name="news01"></a>
		<h1>国内新闻</h1>
		<a name="news02"></a>
		<h1>国际新闻</h1>
		<a name="news03"></a>
		<h1>娱乐新闻</h1>
		</dl>
	</body>
</html>

表格-table

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
	</head>
	<body>
		<!-- 
		 table：表格
				border：外边框宽度
				width：表格宽度
				height：表格高度
				
		thead：表头
				th：标题内容（加粗、居中对齐）
		tbody：表体
				td：单元格内容（无加粗、靠左对齐）
				
		rowspan：跨行展示(rowspan="2")
		colspan：跨列展示(colspan="2")
		 -->
		<table border="1" width="300px">
			<thead>
				<tr>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>表体</td>
					<td>表体</td>
					<td>表体</td>
					<td>表体</td>
					<td>表体</td>
				</tr>
				<tr>
					<td>表体</td>
					<td>表体</td>
					<td>表体</td>
					<td>表体</td>
					<td rowspan="2">表体</td>
				</tr>
				<tr>
					<td colspan="2">表体</td>
					<td>表体</td>
					<td>表体</td>
				</tr>
			</tbody>
		</table>
		</dl>
	</body>
</html>

表单-form

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 请求方式：get、post
		 				get：http://127.0.0.1:8848/H5_Demo/%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9C%B0%E5%9D%80?键=值&键=值....
		 				post：http://127.0.0.1:8848/H5_Demo/%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9C%B0%E5%9D%80 + 数据包（不会显示）
		 				
		 			表单数据具有一定的隐私性，一般选择post请求
		 			表单数据要想传输给服务器，必须有name属性
		 -->
		<form action="服务器地址" method="get">
    <!-- <form action="服务器地址" method="post"> -->

			账号：<input type="text" name="username" /><br />
			密码：<input type="password" name="password" /><br />
			性别：
			<input type="radio" name="sex" value="man" checked />男
			<input type="radio" name="sex" value="woman" />女
			<br />
			爱好：
			<input type="checkbox" name="hobbies" value="football" checked />足球
			<input type="checkbox" name="hobbies" value="basketball" />篮球
			<input type="checkbox" name="hobbies" value="shop" />购物
			<br />
			省份：
			<select name="province">
				<option value="hn">湖南</option>
				<option value="hb">湖北</option>
				<option value="sc" selected>四川</option>
				<option value="gd">广东</option>
			</select>
			<br />

			<input type="submit" value="提交" />
		</form>
	</body>
	<script>
		function fun01() {
			alert("这是功能1");
		}
	</script>
</html>
拖把湛屎，戳谁谁死
关注
专栏目录
html知识点
07-26
一、HTML知识点 1. HTML基本结构：一个HTML文档通常由<!DOCTYPE>声明、<html>根元素、头部元素和主体元素组成。<!DOCTYPE>声明指定了文档类型，中包含元数据如标题、字符集等，则包含实际的网页内容。 2. HTML标签...
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
HTML知识点汇总
01-19
一、HTML基础知识；二、文字与图像；三、超级链接；四、表单；五、表格；六、框架；七、网页多媒体；附录、HTML标签列表
HTML知识点总结（思维导图）
03-02
HTML知识点总结（思维导图）
html知识点.xmind
09-08
html css js
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1262
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 587
【代码】HTML、CSS实现树状图。
Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:
Liszter
09-12 523
原因是引用的图层得配置跨域问题。这是浏览器对canvas 设置的导出安全策略。每个引用的图层添加一个。即可、、、 不用谢、、
【HTML】Html标签
千里之行，始于足下
09-12 1072
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
Requests-HTML模块怎样安装和使用？
2301_79698214的博客
09-11 674
上述代码中，首先创建了一个HTMLSession对象，然后使用get()方法发送GET请求，获取网页的HTML内容。最后，使用response.html.text属性获取HTML文本，并将其打印输出。以上就是使用Requests-HTML模块的基本步骤。在Python脚本中导入Requests-HTML模块。使用Requests-HTML模块发送HTTP请求和解析HTML内容。使用pip命令安装Requests-HTML模块。系统会自动下载并安装Requests-HTML模块及其依赖项。
reader-lm：小模型 html转markdown
weixin_42357472的博客
09-12 403
输入网址：https://www.galaxy-geely.com/E5。
甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-12 966
本文将为大家介绍在使用DHTMLX Gantt时如何实现持久UI状态，欢迎下载新版组件体验！
介绍一些免费 的 html 5模版网站 和配色 网站
小 tom的博客
09-16 582
提示：以下是本篇文章正文内容，下面案例可供参考以下是一些提供免费网站模板的网站，适用于各种类型的网站（如个人博客、企业站点、电子商务等）。这些模板通常带有响应式设计，适用于桌面、平板和移动设备。Wix网站：Wix特点：Wix 提供了大量免费的、可自定义的网站模板，涵盖博客、商业、艺术作品集、在线商店等多种类型。使用他们的拖放式编辑器，可以轻松调整布局和风格。适用对象：新手和不熟悉代码的人。TemplateMo网站：TemplateMo。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 817
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
通过鼠标移动来调整两个盒子的宽度(响应式)
最新发布
qq_57423665的博客
09-16 144
就可以完成拖动那根线，实现两边的盒子的宽度根据线的移动而变化；
requests-html的具体使用方法有哪些？
2301_79698214的博客
09-12 644
requests-html库还支持使用XPath表达式来查找元素，提供了丰富的功能来满足各种网页数据抓取和分析的需求‌。‌：通过pip安装requests-html库，命令为。‌：通过继续跟踪网页中的链接，可以获取到更多相关内容。
javaWeb三剑客：html,css
2301_80112070的博客
09-09 1418
**注意布局标签的使用可以配合CSS来使用，如果只需要某一个方位的边框·内边距·外边距，可以在属性名后加上 -位置 ，如 ：padding-top , padding-left , padding-right。rgb表示法：红绿蓝三原色，每项取值范围：0~255 rgb(红，绿，蓝) ， rgb(0,0,0) , rgb(255,255,255) , rgb(255,0,0)">焦点访谈：中国底气 新思想夯实大国粮仓</h1><h1 style="***：***，***：***;
Html css样式总结
qq_36158551的博客
09-15 787
布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，本章节为定位在布局中的使用技巧和注意事项。position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位–相对于浏览器窗口）。
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 362
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
前端开发：深入理解HTML知识点
"前端之HTML知识点整理汇总(推荐)" 在HTML（HyperText Markup Language）学习中，首先要理解HTML的性质和作用。HTML是一种用于创建网页的标准标记语言，它允许我们在文档中嵌入各种元素，如文本、图像、链接、音频...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拖把湛屎，戳谁谁死

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值