【第二阶段 day22 web前端】关于HTML 常用标签

最新推荐文章于 2024-08-13 20:57:25 发布
最新推荐文章于 2024-08-13 20:57:25 发布
阅读量109 收藏
点赞数
分类专栏： 第二阶段 文章标签： html5 html python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oriettahuiru/article/details/120656347
版权

1.关于HTML

  • 全称是超文本标记语言
    超文本:可以向网页中插入的元素类型丰富(图片,视频,音频,文字…)
  • 标记:HTML提供了各种标记是不同类型的元素img vidio
  • 语法:由很多的标签组成的,标签要一对写,有开始标签与结束标签
  • html标签
    HTML是一门标记语言,标签分为开始标签与结束标签
    如果开始和结束中间没有内容,可以合并成一个自闭标签
    注意:不能交叉嵌套
  • html属性
    HTML标签都可以具有属性,属性包括属性名与属性值,如果有多个属性,要以空格隔开
  • html注释
    格式:shift+Ctrl+/
  • 网页中的空格与换行
    换行: < br/ >
    空格:&nbsp
  • 学习网站

runoob.com
w3school.com.cn

2.常用标签

练习:测试常用标签

<!DOCTYPE html><!-- 文档的声明,声明文档的类型是HTML类型 -->
<html><!-- 根元素,标志这是HTML文档,标签是成对出现的 -->
	<head><!-- 头部分,用来存放HTML文档的基本信息,比如网页标题,编码格式,这一部分内容会被网页优先加载 -->
		<meta charset="utf-8"><!-- 声明网页的编码 -->
		<title>测试文件</title><!-- 声明网页的标题 -->
	</head>
	<body><!-- 体部分,用来存放网页要显示的数据 -->
		<!-- 标题标签 -->
		<h1 align="center">一号标题</h1>
		<h2 align="left">二号标题</h2>
		<h3 align="right">三号标题</h3>
		<h4 align="center">四号标题</h4>
		<h5 align="left">五号标题</h5>
		<h6 align="right">六号标题</h6>
		
		<!-- 列表标签 -->
		<!-- 有序 -->
		<ol>
			<li>菁菁</li>
			<li>苏苏</li>
			<li>双双</li>
		</ol>
		<!-- 无序 -->
		<ul type="circle">
			<li>声声</li>
			<li>暮暮</li>
			<li>妙妙</li>
		</ul>
		<ul type="square">
			<li>羽羽</li>
			<li>子期</li>
			<li>昇升</li>
		</ul>
		<ul type="disc"><!-- 默认就是disc -->
			<li>婉婉</li>
			<li>行之</li>
		</ul>
		
		<!-- 图片标签;在网页中插入图片 -->
		<img src="miaomiao.jpg" height="500px" width="600px"/><br />
		
		<!-- 超链接标签:给元素添加链接效果
				href指定跳转目标
				target指定网页的打开方式,默认是_self用当前窗口打开,_blank用新窗口打开-->
		<a href="#">可以点击,但是不跳转</a><br />
		<a href="http://www.baidu.com" target="_blank">
			<img src="miaomiao.jpg" height="500px" width="600px"/>
		</a>
		<br />
		<a name="top">java从入门到精通</a><br />
		<h6>婉婉</h6>
		<h6>行之</h6>
		<h6>婉婉</h6>
		<h6>行之</h6>
		<h6>婉婉</h6>
		<h6>行之</h6>
		<h6>婉婉</h6>
		<h6>行之</h6>
		<h6>婉婉</h6>
		<h6>行之</h6>
		<h6>婉婉</h6>
		<h6>行之</h6>
		<h6>婉婉</h6>
		<h6>行之</h6>
		<h6>婉婉</h6>
		<h6>行之</h6>
		<a href="#top">回到顶部</a><!-- 获取_top的位置,像书签 --><br />
		<ol>
			<li><a href="https://blog.csdn.net/u012932876/article/details/117429021">html</a></li>
			<li><a href="https://blog.csdn.net/u012932876/article/details/117441336">css</a></li>
			<li><a href="https://blog.csdn.net/u012932876/article/details/117441444">js</a></li>
		</ol>
		
		<a href=""></a>
		
		<!-- input标签 -->
		<input type="text" />普通文本框<br />
		<input type="password" />密码<br />
		<input type="radio" />男<br />
		<input type="checkbox" />miaomiao<br />
		<input type="number" />数字值<br />
		<input type="week" />日历(周)<br />
		<input type="date" />日历(年月日)<br />
		<input type="button" value="点我点我" />
		<input type="submit" value="提交" />
		<button type="submit">提交</button>
		
		<!-- 表格标签 -->
		<table border="1px" cellspacing="0" width="350px" bgcolor="beige">
			<tr>
				<td colspan="2">11</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
		</table>
		<table border="1px">
			<tr>
				<td>总页面流量</td>
				<td>共计来访</td>
				<td>会员</td>
				<td>游客</td>
			</tr>
			<tr>
				<td>456789</td>
				<td>456789</td>
				<td>456789</td>
				<td>456789</td>
			</tr>
			<tr>
				<td>456789</td>
				<td>456789</td>
				<td>456789</td>
				<td>456789</td>
			</tr>
			<tr>
				<td>平均每人浏览</td>
				<td colspan="3">1.45</td>
			</tr>
		</table>
	</body>
</html>

练习:测试表单标签

<!DOCTYPE html><!-- 表单 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>测试:表单标签</title>
	</head>
	<body>
		<!-- 1.表单:本质就是表格,表单才能提交数据,把数据交给java程序处理
		     2.form标签专门用来提交数据:form标签+必须配置name属性+必须使用submit按钮
			 ?用来拼接用户输入的数据,user=jack,其中user是给标签配置的name属性的值,jack是用户从input方框输入的数据
			 
			 面试题:提交数据的两种方式:get方式和post方式
			 get方式:被拼接在地址栏,方便看,但是坏处是不安全,长度受限
			 
			 post方式:不方便看,但是安全
			 method---用来指定数据的提交方式,默认是get
			 action---用来指定数据将要交给哪个程序处理-->
		<form action="" method="post">
			<div align="center"><h1>注册表单</h1></div>
			<table border="1px" bgcolor="bisque"cellpadding="0" align="center">
				<tr>
					<td>姓名</td>
					<td><input type="text" name="user"/></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" name="repwd"/></td>
				</tr>
				<tr>
					<td>昵称</td>
					<td><input type="text" name="nick"/></td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td><input type="email" name="mail"/></td>
				</tr>
				<tr>
					<td>性别</td><!-- 问题1:提交的数据都是on,加value属性,区分提交的数据 -->
					<td><input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0"/>女</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<input type="checkbox" name="hobby" value="lq"/>篮球
						<input type="checkbox" name="hobby" value="zq"/>足球
						<input type="checkbox" name="hobby" value="ppq"/>乒乓球
					</td>
				</tr>
				<tr>
					<td>城市</td>
					<td>
						<select name="city">
							<option>--请选择--</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像</td>
					<td><input type="file" name="path"/></td>
				</tr>
				<tr>
					<td>验证码</td>
					<td><input type="text"/><img src="2.png" /><input type="button" value="点我换一张"/></td>
				</tr>
				<tr>
					<td>自我描述</td>
					<td><textarea placeholder="请输入描述信息" ></textarea></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="提交"/>
						<input type="reset" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

练习:测试块级元素和音频视频元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 块级元素,换行,中间间隔比较小 -->
		<div>北清</div>
		<div>北清</div>
		<div>北清</div>
		<!-- 块级元素,换行,段落标签,中间间隔比较大 -->
		<p>初央</p>
		<p>初央</p>
		<p>初央</p>
		<!-- 行内元素,不换行 -->
		<span>冬五</span>
		<span>冬五</span>
		<span>冬五</span>
		<br />
		<!-- 向网页中添加音频 -->
		<audio controls="controls">
			<source src=""></source>
		</audio>
		<br />
		<!-- 向网页中添加视频 -->
		<video controls="controls">
			<source src="GF.mp4"></source>
		</video>
	</body>
</html>
是九九鸭~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day19_9 前端入门之HTML标签、VScode安装配置
weixin_43717536的博客
09-19 1037
解析：1.不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异，在解析成网页时可能会存在差异导致用户体验极差。2.让不同的浏览器按照相同的标准显示结果，让展示的效果统一！1.html标签的结构 你好小可爱 其中：为开始标签，你好小可爱为包裹的内容，为结束标签结构说明：1. 标签由，/、英文单词或字母组成；并且把标签中包括起来的英文单词或字母称为标签名 2. 常见标签由两部分组成，我们称之为：双标签。
web前端day-04标签属性
weixin_52368930的博客
04-14 195
form标签： 用于前后端交互的数据输入界面 比如：搜索，注册登录 form属性； action：数据提交到那里去，#或者空表示提交当前页面，如果是网址在跳转的时候会跳转到这个网址页面 methon：提交数据方式， get：明文传输，在地址上看得到 post：暗文传输，用于传输大量数据 name:表单名 表单input组件： text：默认的text password： value：提交给系统的值 submit：自动跳转相当于刷新 <form action="#" me
【Web前端第二阶段--Html】Day01
weixin_48310754的博客
05-09 79
【Web前端第二阶段–Html】 文章目录【Web前端第二阶段--Html】一、前言二、什么是Html？html常用标签 一、前言 超 二、什么是Html？ 超文本标记语言，定义页面上的内容，如：表格，文字，图片，音频视频，超链接 以.html或.htm后缀 html常用标签 单标记标签 双标记标签 ...
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
小宇y的博客
08-24 1563
目录一、表单的定义二、输入标签（一）文本框和密码框三、四、结语 一、表单的定义 表单用于收集用户的输入信息，它是一个区域，在这个区域里添加表单元素即可收集用户的信息，表单元素可以是文本、单选框、复选框、按钮、下拉菜单等等。 比如下面的qq登录页面，它就是一个表单： 表单用from标签表示，它有个重要的属性为action属性，action后跟数据处理网页的URL，表示收集用户的数据交由该页面进行处理，它表示为<from action="">表单元素</from>；也可以跟metho
【Web前端第一阶段--数据库】--Day01
weixin_48310754的博客
06-07 337
【Web前端第二阶段–数据库】–Day01 文章目录【Web前端第二阶段--数据库】--Day01前言功能需求分析 前言 功能需求分析 前台子系统： 商品模块：首页、列表、详情 用户模块：注册、登录、用户中心、个人收藏、退出 购物车模块:添加、列表、修改、删除、下单结算 后台子系统： 商品模块：添加、列表、修改、删除、搜索 用户模块：列表、修改、删除、搜索 订单模块：列表、修改、删除、搜索 移动端子系统 商品模块：首页、列表、详情 用户模块：注册、登录、用户中心、个人收藏、退出 购物车模块：添加、列表、修
2022黑马程序员-前端学习第一阶段（Day01-HTML的认知）
sakura22123的博客
01-29 4419
#HTML认知 ##1.认识网页 ➢ 问题1：网页由哪些部分组成？ ✓ 文字、图片、音频、视频、超链接 ➢ 问题2：我们看到的网页背后本质是什么？ ✓ 前端程序员写的代码 ➢ 问题3：前端的代码是通过什么软件转换成用户眼中的页面的？ ✓ 通过浏览器转化（解析和渲染）成用户看到的网页 ...
Web前端一套全部清晰 ④ day3 HTML.3 列表 表格 表单标签
m0_73983707的博客
04-28 738
列表标题列表描述/详情……
Web前端一套全部清晰 ② day2 HTML.1 标签之文字排版，图片、链接、音视频链接
m0_73983707的博客
04-26 1319
HTML超文本标记语言超文本 ——链接标记 ——标记也叫标签，带尖括号的文本①保存HTML标签的文件扩展名是？.html②HTML标签名要放到什么括号里面？尖括号③结束标签比开始标签多什么？④标签包裹的内容放在什么位置？开始标签和结束标签之间VS Code如何快速生成HTML骨架？!
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）
热门推荐
BudingCode的博客
03-30 8万+
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
Web前端学习day01(HTML)
weixin_42135811的博客
10-22 1470
教学导航 了解什么是标记语言 了解HTML主要特性，主要变化以及发展趋势 了解HTML的结构标签 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签） ### 1.网站信息页面 #### 1.1需求分析: 我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息 #### 1.2技术分析: ##### HTML概述: HTML: Hyper Tex...
Day22:第22天的作业
03-30
在“Day22:第22天的作业”这个主题中，我们可以假设这是学习HTML的一部分，可能涉及了进一步的技术深化或者特定任务的实践。 HTML由一系列元素组成，这些元素通常由标签定义。例如，`<html>`标签标志着文档的开始，...
06day_前端学习资料_
09-30
这个压缩包包含了第六天的学习内容，可能是一个系统的前端学习计划的一部分，通过逐日递增的方式让学习者逐步深入。 在前端开发中，主要涉及到以下几个关键知识点： 1. HTML（HyperText Markup Language）：HTML ...
笔记-day07-前端基础CSS第五天.pdf
10-11
使用切片工具手动划分切片，然后通过“文件”->“导出”->“存储为Web所用格式”，选择合适的格式和切片进行导出。 3. **插件切图**：如Cutterman，这是一款方便快捷的插件，能自动导出所需图层，支持多种尺寸、...
前端移动Web第二天知识点：Flex伸缩布局.zip
04-16
在前端开发领域，移动Web设计是一项至关重要的技能。在当今多设备、多屏幕尺寸的环境中，灵活的布局设计显得尤为重要。本知识点聚焦于"Flex伸缩布局"，这是现代Web开发中实现响应式布局的一种强大工具。让我们深入...
高级软件人才培训专家-day11-SpringBootWeb案例-2
03-10
### 高级软件人才培训专家-day11-SpringBootWeb案例-2 #### 知识点一：Spring Boot Web框架中的员工信息管理功能扩展 在本案例中，我们基于之前的员工信息管理系统，继续深入探讨其功能拓展。之前的学习中，我们...
HTML5+CSS3-HTML5入门
2302_77230857的博客
08-06 814
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
HTML5+JavaScript绘制彩虹和云朵
cnds123的专栏
08-10 404
HTML5+JavaScript绘制彩虹和云朵，改进版云彩能动——从左向右不停地移动
软件设计之HTML5
thm19990903的博客
08-04 1965
HTML：Hyper Text Markup Language 超文本标记语言。
【python】使用字符串格式化渲染html
最新发布
longforone的博客
08-13 378
将 CSS 中的“{}”全部替换为“{{}}”，这种方法是可行的。在 Python 进行字符串格式化时，“{{}}”中的“{}”及其他内容会被当作普通字符串处理，不会被格式化。但当我开启 PyCharm 的代码格式化功能时，原本的“{{}}”会被转换为“{\n{ }\n}”，因此使用起来较为麻烦，甚至不太能用。然而，由于 HTML 模板中存在 CSS 样式，其“{}”语法与 Python 格式化字符串的语法产生了冲突。接着，针对“body”部分使用关键字参数进行字符串格式化，如此一来，看起来也更为直观。
Web前端Day1学习笔记：关键概念与标签解析
"这是一份关于web前端学习的笔记，主要涵盖了HTML基础标签和属性的使用，包括文本格式化、链接、表格、列表、注释以及一些基本样式控制。" 在web前端开发中，HTML（HyperText Markup Language）是构建网页内容的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值