《python全栈工程师 - web开发前端基础》：网页标签

最新推荐文章于 2024-05-14 14:11:15 发布

五月的霾

最新推荐文章于 2024-05-14 14:11:15 发布

阅读量442

点赞数 1

原文链接：https://blog.csdn.net/u014257214/article/details/103822837

版权

《python全栈工程师 - web开发前端基础》：网页标签

课程目标
详情解读
- 1.前奏：

课程目标

网页编辑工具介绍
网页的基本结构
网页的标签规范
网页常用标签

前面网页学习内容是从事web开发必须掌握的技能，凡是以此为就业目标的，必须完成每一个练习与作业。
爬虫开发的小伙伴必须掌握网页结构与样式选择器
其余小伙伴必须看完每一个视频，了解网页在web中的作用以及相关特性（哎…对坐入号）

详情解读

1.前奏：

1.1前段工作流程

在这里插入图片描述

1.2网页的基本结构

在这里插入图片描述

1.3页面常用标签

标签	标签含义
h1~h6	网页内容标题，数字表示内容的重要性
p	段落
br	换行
a	超链
img	网页中插入图片
audio	网页中插入声音
video	网页中插入视频
hr	水平分隔线

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--块标签，不能同一行显示
		html标签是一个语义性的标签
		-->
		<h1>hello world</h1>
		<h2>hello world</h2>
		<h6>hello world</h6>
		<p>python 是一门易学强大的语言</p>
		<p>其实光靠懂一点python是解决不了问题</p>
		不管你学什么语言，<br />都需要下功夫！
		<hr />
		水平分割线
	</body>
</html>

运行结果：
在这里插入图片描述

1.4网页常用标签-格式化文本标签

标签	标签含义
b	字体外观加粗
strong	重要部分内容，外观加粗
i	斜体
em	重要部分内容，外观斜体
ins	下划线
del	删除线
small	比周围的小一号
big 比周围的大一号
mark	高亮显示
sub	字体下标
sup	字体上标
pre	预格式化文本
blockquote	文本引用

1.5网页常用标签-列表标签

标签	标签含义
ul	无序列表
ol	有序列表
li	列表条目
dl	定义列表，包含两个子标签
dt	列表项目词条
dd	项目词条的定义部分

1.6网页常用标签-表格标签

标签	标签含义
table	表格，包含多个子标签
caption	表格标题
tr	表格行
th	表头
td	表格单元格
colspan	值为合并的列数量
rowspan	值为合并的行数量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<caption>表格示例</caption>
			<tr><th>header</th><th>header</th><th>header</th><th>header</th></tr>
			<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>
			<tr><td colspan='2'>data</td><td>data</td><td>data</td></tr>
			<tr><td>data</td><td rowspan="2">data</td><td>data</td><td>data</td></tr>
			<tr><td>data</td><td>data</td><td>data</td></tr>
		</table>
	</body>
</html>

运行结果：
在这里插入图片描述

1.7网页常用标签-表单标签

标签	标签含义
from	表单标签
input	根据不同属性，表示为输入、按钮、复选
select	选择菜单，包含option子标签
option	选择菜单的选择项
button	按钮
textarea	多行文本框

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!--向后台提交数据-->
	<form action="">
		<input type="text" name="" id="" />
		<input type="color" name="" id="" />
		<input type="data" name="" id=""/>
		<input type="email" name="" id=""/>
		<input type="file" name="" id=""/>
		<input type="hidden" name=""/>
		<input type="image" scr="" alt=""/>
		<input type="submit" name="" id=""/>
		<input type="password" name="" id=""/>
		<input type="number" name="" id="">
		男<input type="radio" name="sex" id="" value="1" />
		女<input type="radio" name="sex" id="" value="0" />
		爱好：唱歌<input type="checkbox" name="" id="" />
		跳舞<input type="checkbox" name="" id="" />
		钓鱼<input type="checkbox" name="" id="" />
		睡觉<input type="checkbox" name="" id="" />
		<input type="range" name="" id=""/>
		<input type="reset" value="重置" />
		<input type="search" name="" id=""/>
		<select name="city">
			<option value ="shanghai">上海</option>
			<option value ="beijing">北京</option>
		</select>
		<textarea name="" id="" rows="10" cols="30">
			
		</textarea>
	</body>
</html>

运行结果：

在这里插入图片描述

五月的霾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《python全栈工程师 - web开发前端基础》：网页标签

《python全栈工程师 - web开发前端基础》：网页标签课程目标详情解读1.前奏：1.1前段工作流程1.2网页的基本结构1.3页面常用标签1.4网页常用标签-格式化文本标签1.5网页常用标签-列表标签1.6网页常用标签-表格标签1.7网页常用标签-表单标签课程目标网页编辑工具介绍网页的基本结构网页的标签规范网页常用标签前面网页学习内容是从事web开发必须掌握的技能，凡是以此为就业目标的，必须完成每一个练习与作业。爬虫开发的小伙伴必须掌握网页结构与样式选择器其余小伙伴必须看完每一个视
复制链接

扫一扫