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

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

五月的霾

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

阅读量445

点赞数 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>