前端基础 html5总结

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量335 收藏 2
点赞数
分类专栏： HTML5与CSS等前端基础学习 文章标签： html5 前端
by顾辞嘤嘤怪
本文链接：https://blog.csdn.net/qq_43636709/article/details/119316506
版权

文章目录

了解软件开发

前端（界面）：Html5，css，JavaScript，Ajax，Vue.js，Node.js，BootStrap（网页布局），Jquery（框架），laiyu…

业务（功能实现，BU）：Java，C++、C，Python，Go，Php…

底层（持久层，数据库，DB）：MySql，Oracle…

HTML简介

1.简介：

超文本标记语言（ Hyper text markup language）。简

超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

2.特点：
  1. 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
  2. 可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
  3. 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
  4. 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
3.开发工具（Hbuilder）：

链接：hbuilder官网

HTML5基础编码

1.整体写法：
<!-- 声明当前文档是html5文档 --> 
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签--> 
<html>
<!-- 
	head,头元素:
	作用: 
	1、用于指定HTML文章中的一些元数据，
	   例如元数据 meta:定义页面的编码格式 title:定义页面的标题
	2、引入外部的资源文件 <link href="......"/>
	3、引入外部CSS样式文件：<link ref="stylesheet" href="...css"/>
	-->
	<head>
		<meta charset="utf-8" /> 
         <link ref="stylesheet" href="...css"/>
         <title>这是我的第一个HTML页面			
		</title>
	</head>
<!--body，主体:浏览器显示的内容都将在这里编写 
	Hbuilder的格式化代码的快捷键:ctrl+shift+f(英文状态下使用)
-->
	<body>
		hello html 这是我的第一个HTML页面 
	</body>
</html>
2.网页头部元素简介：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" /><!-- 网页编码格式设置 -->
		<meta name="keywords" content="淘宝,网上购物,c2c......"/><!-- 搜索关键字设置 context搜索内容 -->
		<meta name="description" content="这是一个......的网站......" /><!-- 站点描述设置 context描述内容 -->
		<meta http-equiv="refresh" content="3;url=https://www.baidu.com" /><!-- 设置页面自动刷新和跳转 context设置秒数和跳转路径 -->
		<link href="img/T1OjaVFl4dXXa.JOZB-114-114.png" rel="icon"/><!-- 设置链接网页外部资源 -->
		<title>网页标题</title> <!-- 注释快捷键：ctrl+/  html注释会发到浏览器 服务端语言并不会-->
	</head>
	<body><!-- 网页主体信息 -->
			<h3>主体</h3>
	</body>
</html>
3.标签：
1.自封闭标签：

属性和属性值，属性值与属性名等号连接，简单来说不是一对的，比如 meta,input,link等标签。

2.块标签和行标签：

块标签独立占一行，行标签不能独立占一行，一行占满自动换行。

3.容器类标签（div、p）和非容器类标签
4.快标签：
1.(标题)文本标签：

<h1>到<h6> 是从大到小的

	<h1>标题1</h1> 
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题5</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
2.段落标签：

<p>...</p>: p里面不可用div块标签 div不可做块标签的副标签

<p>淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！</p>
3.水平线标签：

<hr /> :自封闭标签，有属性：宽度 位置（left，right，center）高度 阴影

<hr width="1000" align="left" size="10" noshade="noshade" />
4.有序列表：

<ol><li>...</li>...<li>...</li></ol>：可嵌套自动缩进，属性type=""可以控制排序的序号样式

<ol type="a">  <!-- 以小写的英文字母排序 -->
	<li> start </li>
		<ol type="I"> <!-- 以大写的罗马数字排序 -->
			<li>111</li>
             <li>2222</li>
		</ol>
    <li> content </li>
	<li> end </li>
</ol>
5.无序列表：

<ul> <li>...</li> ... <li>...</li> </ul>：可嵌套自动缩进，属性type可以控制每列前面的图形标志

<ul type="disc">
	<li> 项目1 </li>
	<li> 项目2 </li>
    <li> 项目3 </li>
</ul>
6.描述标签：

dl（description list） dt（title） dd（detail）：描述列表，描述标题，描述细节

<dl>
	<dt>描述标题是图片</dt>
	<dt><img src="img/T1OjaVFl4dXXa.JOZB-114-114.png"/></dt>
		<dd>描述的细节：这是一张淘宝网址的图片！</dd>
</dl>
7.容器标签：

<div>...</div>：div块级容器标签，里面可以包含块级元素和行级元素，与p段落标签的区别是p只能包含行级元素标签

<div style="background-color: aquamarine;">
	div容器标签学习！<hr/>
	<p> 描述p标签元素，是一个段落，行级元素容器！</p>
	<ol type="a">
		<li> start </li>
			<ol type="i">
				<li>111</li>
				<li>2222</li>
			</ol>
		<li> end </li>
	</ol>
</div>
5.行级元素：
1.范围标签：

<span>...</span>：专门用来修饰文本的行级标签，可以对该部分文本样式进行设置

<dl>
	<dt>描述标题1淘宝图片</dt>
	<dt><img src="img/T1OjaVFl4dXXa.JOZB-114-114.png"/></dt>
    <!-- img/....表示当前目录，../表示当前目录的上一级目录，/表示根目录 -->
		<dd><span style="color: aqua;">描述的细节：</span>这是一张淘宝网址的图片！</dd>
</dl>
2.换行符：

<br />：类似于回车，对行级元素强制换行

<div style="width: auto;color: blue;background-color: aqua;">
	描述的详细信息：<br />
	这是一个用于行级元素换行的行级标签，只会从这行回车到下一行。<hr />
	<p style="color: mediumvioletred;font-size: 20px;">p标签是一个块级标签，上下都会有空格，p容器里面只能包含<br/><span style="color: grey;">行级元素</span></p>
</div>
3.图片标签：

<img src="图片路径" title="鼠标悬浮显示的文字" width/height="宽度和高度"/>

<img src="img/T1OjaVFl4dXXa.JOZB-114-114.png" title="淘宝图片"/>
<!-- 说明：src属性：
‘-->
4.链接：

1、 超链接：

<a href="路径" title="鼠标悬浮时显示的文本信息" target="_self" >跳转到</a>
<!-- target的属性值介绍：
1._self：默认的，表示当前窗口下面打开链接
2._blank：指在新窗口打开链接，不会覆盖本窗口
3._name：是指指定窗口的名称为_name的窗口来打开链接
4._parent：用父窗口来打开链接
5._top：用顶级父窗口来打开链接
-->

2、锚点：

一般本页锚点用在底部回到顶部功能实现上，顶部定义锚点，底部链接锚点

不同页面的锚点链接在具体实现上的功能有别的页面跳到本页面的底部，在本页面底部定义锚点，别的页面什么地方需要则链接到改锚点

  1. 定义锚点

    <a name="top">定义锚点</a>
<!-- 用a标签与它的属性name来定义锚点 -->

  2. 链接到锚点

    <a href="#top">同一页面链接到锚点</a>
<a href="路径#定义锚点的name值">不同页面链接到锚点</a>
<!-- 与a标签用法基本一致，不同点是href的值，用#加锚点名来跳转 -->
5、图片标签：

图片类型（了解）：

图片格式：png jpg jpeg gif svg webp
.bmp 无压缩位图  不推荐使用
.jpg .jpeg  压缩图片 支持颜色多
.png  压缩图片 支持颜色多  支持背景透明
.gif  压缩图片 支持颜色256色 
.svg .webp 有损压缩 支持颜色多 大多数浏览器都支持
标签：
<image src="路径" title="鼠标悬浮显示的文本" alt="图片不能正常显示时的提示文字" width="100" helight="100" border="1"></image>
代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" /><!-- 网页编码格式设置 -->
		<meta name="keywords" content="淘宝,网上购物,c2c......"/><!-- 搜索关键字设置 context搜索内容 -->
		<meta name="description" content="这是一个......的网站......" /><!-- 站点描述设置 context描述内容 -->
		<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com" /> --><!-- 设置页面自动刷新和跳转 context设置秒数和跳转路径 -->
		<link href="img/T1OjaVFl4dXXa.JOZB-114-114.png" rel="icon"/><!-- 设置链接网页外部资源 -->
		<title>网页标题</title> <!-- 注释快捷键：ctrl+/  html注释会发到浏览器 服务端语言并不会-->
	</head>
	<body><!-- 网页主体信息 -->
	<!-- 块标签：一对标签占一行 -->
		<!-- 标题标签 -->
		<h1>标题1</h1> <h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题5</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		
		<!-- 内容 -->
		这是一段内容！
		
		<!-- <p> ... </p>:段落标签，上下有空行 p里面不可用div块标签 div不可做块标签的副标签 -->
		<p>你好！淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！</p>
		
		<!--<hr />:水平线标签（自封闭标签） 宽度 位置（left，right，center）高度 阴影-->
		<hr width="900" align="left" size="5" noshade="noshade"/>
		
		<!-- 有序列表（可嵌套自动缩进） <ol> <li>...</li> ... <li>...</li> </ol>  属性type=""控制前面排序的标号-->
		<ol type="a">  
			<li> start </li>
				<ol type="I">
					<li>111</li>
					<li>2222</li>
				</ol>
			<li> end </li>
		</ol>
		
		<!-- 无序列表 （可嵌套自动缩进）<ul> <li>...</li> ... <li>...</li> </ul> 属性type="" 控制列表内容前面的标志-->
		<ul type="disc">
			<li> 项目1 </li>
			<li> 项目2 </li>
		</ul>
		
		<!-- 描述标签：dl（description list） dt（title） dd（detail） 一般用于图文并茂-->
		<dl>
			<dt>描述标题1淘宝图片</dt>
			<dt><img src="img/T1OjaVFl4dXXa.JOZB-114-114.png" title="淘宝图片"/></dt>
				<dd>描述的细节：这是一张淘宝网址的图片！</dd>
		</dl>
		
		<!-- <div>...</div>容器标签:一般css设置样式，与p标签区别使用，p是行级标签容器，div行与块都可以 -->
		<div style="background-color: aquamarine;">
			div容器标签学习！<hr/>
			<p> 描述p标签元素，是一个段落，行级元素容器！</p>
			<ol type="a">
				<li> start </li>
					<ol type="i">
						<li>111</li>
						<li>2222</li>
					</ol>
				<li> end </li>
			</ol>
		</div>
		
		
	<!-- 行级元素，行级标签 -->
		<!-- <span>...<span/>:专门用来修饰文本的行级标签 -->
		<dl>
			<dt>描述标题1淘宝图片</dt>
			<dt><img src="img/T1OjaVFl4dXXa.JOZB-114-114.png"/></dt>
				<dd><span style="color: aqua;">描述的细节：</span>这是一张淘宝网址的图片！</dd>
		</dl>
		
		<!-- <br />:换行符类似于回车,对行级元素换行 -->
		<div style="width: auto;color: blue;background-color: aqua;">
			描述的详细信息：<br />
			这是一个用于行级元素换行的行级标签，只会从这行回车到下一行。<hr />
			<p style="color: mediumvioletred;font-size: 20px;">p标签是一个块级标签，上下都会有空格，p容器里面只能包含<br/><span style="color: grey;">行级元素</span></p>
		</div>
	</body>
</html>

在这里插入图片描述

6、媒体标签：
视频：
<video src="路径" controls="controls" loop="loop" poster="初始加载显示的图片" autoplay="autoplay" muted="muted"></video>

<!-- 属性说明：
1.src：媒体文件路径
2.controls：控制面板
3.loop：控制循环播放
4.poster：设置初始加载显示的图片
5.autoplay：自动播放（由于自动播放会使浏览器缓存而变慢，所有谷歌浏览器禁止了，但设置muted静音属性还是可以自动播放的。）
6.muted：静音设置
-->
音频：
<audio src="路径" controls="controls" loop="loop" autoplay="autoplay" muted="muted"></audio>

<!-- 与视频属性效果基本一样 -->
e.g:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<video src="video/video1.mp4" controls="controls" muted="muted" autoplay="autoplay"></video>
		<hr/>
		<audio src="mp3/G.E.M.%20邓紫棋%20-%20再见%20(Live%20Piano%20Session%20II).mp3" controls="controls"></audio>
	</body>
</html>

fSdort.png

7、相对路径与绝对路径
../：表示当前目录的上一级目录
/：表示根目录
 ：表示当前目录
file1/image/img.png：表示在当前目录的image目录下的img.png图片

相对路径：当前文件所在的位置为参考点建立的路径
e.g:"image/img.png"
绝对路径：该文件以硬盘根目录或者站点根目录为参考点而建立的路径 
e.g:"D:/大学/云创Java/Html Sun/Hbuilder/htmlproject/image/img.png"
8、label标签：
<label for="username">指定输入项的文字描述信息</label>
<!-- label的for属性会与input的id属性对应 如果值对应上 点击label区域 会让input输入框获取焦点 -->
<input id="username">
9、控制文本样式：

  1. 加粗：<b>文本</b>或者 <strong>文本</strong> (strong标签常用)

  2. 斜体：<i>文本</i>

  3. 文本下划线：<u>文本</u>

  4. 文本删除线：<s>文本</s>

  5. 公式常用的上下标：<sup>上标字符</sup> <sub>下标字符</sub>

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>美国家<s>标准协会</s><strong><i>(American National Standard Institute，ANSI)</i></strong>的数据库管理系统研究小组于1978年提出了标准化的建议，
		将<u>数据库结构分为3级</u> </p>
		<h3> x <sup> 2 </sup> + x <sub>0</sub> + y <sup> 2 </sup> = z </h3>
	</body>
</html>

在这里插入图片描述

10、HTML5里面常用的特殊字符
字符html5代码
空格 
<<
>>
&&
“”"
版权（圆c）©
注册（圆R）®
e.g:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3> 你好！ &nbsp;&nbsp; 号的很！</h3>
		<h3>版权属于&copy;云创</h3>
		<h3>注册&reg;</h3>
		<h3>小于大于号(x小于1并且大于-1)：x&lt;1 &amp; &gt; -1</h3>
	</body>
</html>
<!-- 小于等于：&le;
	大于等于：&te;
-->

在这里插入图片描述

表格、表单、框架

1、表格：
表格标签介绍：

其实可以直接

…
来写

  • <table>...</table>：表格标签

  • <caption>表格标题</caption>：表格的标题

  • <thead><tr><th>...</th>...<th>...</th></tr></thead>：表头又叫页眉，tr是行；th是每一列的表头

  • <tbody> <tr><td>...</td>...<td>...</td></tr> ... <tr><td>...</td>...<td>...</td></tr> <tbody>：表体又叫正文，tr是行；td是列

  • <tfoot><tr><th>...</th>...<th>...</th></tr></tfoot>：表尾又叫页脚，tr是行；th是每一列的表尾

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" background="img/T1OjaVFl4dXXa.JOZB-114-114.png"> <!-- background背景图 -->
			<caption> 表格标题 </caption>
			<thead>
				<tr>
					<th bgcolor="aqua">序号</th> <!-- 单元格背景颜色 可覆盖table里面设置的背景颜色和背景图 -->
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
			<tr>
				<td>&nbsp;1</td>
				<td>&nbsp;顾</td>
				<td>&nbsp;男</td>
				<td>&nbsp;22</td>
			</tr>
			
			<tr>
				<td>&nbsp;2</td>
				<td>&nbsp;刘</td>
				<td>&nbsp;男</td>
				<td>&nbsp;23</td>
			</tr>
			
			<tr>
				<td>&nbsp;3</td>
				<td>&nbsp;刘</td>
				<td>&nbsp;女</td>
				<td>&nbsp;20</td>
			</tr>
			</tbody>
			<tfoot>
				<tr>
					<th colspan="3" >年龄总计</th>
					<th> 65 </th>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

fSwKZ6.png

table的属性：
<!-- 
1.bgcolor：表示表格背景颜色
2.background：表示背景图
3.width/height/border：表示表格的宽度，高度，边框宽度单位是像素px
4.cellspacing：单元格之间的距离，单位是像素
5.cellpadding：单元格与边框的距离，一般默认为0
6.th与td的bgcolorbi属性表示单元格的背景色
7.th与td的width与height表示单元格的宽度与高度，同一列所有行宽度一样，同一行所有列高度都一样，取较大的值
8.rowspan与colspan表示当前单元格跨行与列的个数
-->
表格跨行与跨列：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="400" border="1" align="center">
			<tr>
				<td width="150" align="center">手机充值</td>
				<td colspan="3" align="center">办公耗材</td>
			</tr>
			<tr>
				<td rowspan="3" align="center" valign="center">各种卡的汇总</td>
				<td align="center">铅笔</td>
				<td align="center">彩笔</td>
				<td align="center">粉笔</td>
			</tr>
			<tr align="center">
				<td>打印</td>
				<td>刻录</td>
				<td>墨盒</td>
			</tr>
			<tr align="center">
				<td>笔记</td>
				<td>钢笔</td>
				<td>墨水</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

2、表单：
表单标签：

语法：<form name="表单名称" method="提交方式" action="处理表单数据的文件" >...</form>

表单中有上传的文件时必须写属性 enctype="multipart/form-data" 且值固定

语法解析：

属性名称属性值属性作用
name字符串表单的名称
methodget或者post用来明确提交表单的方式
action文件路径表单信息提交后做处理的页面
enctypemultipart/form-data等有文件传输时用这个属性与该属性值
get与post区别：【传输的均为二进制数据】
  • get传送数据量大约在2k，发送的是字符串，相较于post不太安全，数据以?和&连接在地址栏
  • post传送数据理论上没限制，相对传输速度比较慢，数据类型不受限制，提交的数据量较大
表单元素：
属性名称作用
依据type属性值的不同，表示多种输入方式
表示多行文本框
下拉列表框
表示按钮
表示搜索自动对齐列表
input的属性
属性名属性值作用
mutiple布尔 默认false 写该属性不用属性值则默认为true用于控制file与email的多个上传或输入
readonlyreadonly只读，不可改，可用于表单的元素项，可获取焦点，可用value设置初始值
disableddisabled不能获取焦点，背景灰色，value可设置初始值
typesubmit，reset，text，password，hidden，date(年月日)，datetime-local(年月日加时间)，time（时间），color，radio，checkbox等控制不同输入
name字符串名称（post提交时必须要有该属性）
value字符串初始值
id字符串客户端唯一识别id值
size数字以字符个数设定元素宽度
maxlength数字元素接受的字符数上限
checkedchecked元素是否被选中
requiredrequired内容不为空，必填
placeholder提示文本提示信息
pattern正则表达式输入内容匹配正则
autofocusautofocus页面加载后自定获取焦点
登录页面：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form method="post">
		<table width="600" height="300" align="center">
			<tr>
				<td background="images/title_login_2.png" width="150" helight="50">&nbsp;</td>
				<td colspan="3">&nbsp;</td>
			</tr>
			<tr>
				<td rowspan="3">&nbsp;</td>
				<td>&nbsp;用户名：</td>
				<td>&nbsp;<input type="text" name="uname" value="" style="border:1;width:145;height:20;padding-left:20;"></td>
				<td>&nbsp;请输入用户名！</td>
			</tr>
			<tr>
				<td>&nbsp;密&nbsp;&nbsp;码：</td>
				<td>&nbsp;<input type="password" name="passwd" value="" style="border:1;width:145;height:20;padding-left:20;"></td>
				<td>&nbsp;请输入密码！</td>
			</tr>
			<tr>
				<td colspan="3">&nbsp;<input type="image" name="button" value="登录" align="center" src="images/login.gif"></td>
			</tr>
		</table>
		</form>
	</body>
</html>

在这里插入图片描述

注册页面：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="login.jsp" method="get" enctype="multipart/form-data">
		<table width="500" border="1" align="center">
			<tr>
				<td align="right">用户名：</td>
				<td>
					<!-- placeholder：文本框中的提示内容 -->
					<input type="text" name="username" id="un001" placeholder="请输入用户名"/>
				</td>
			</tr>
			<tr>
				<td align="right">隐藏域：</td>
				<td>
					<input type="hidden" name="userid" id="001" />
				</td>
			</tr>
			<tr>
				<td align="right">密码：</td>
				<td>
					<!-- required：必须填，不填报错 -->
					<input type="password" name="password" id="un001" required="required"/>
				</td>
			</tr>
			<tr>
				<td align="right">性别：</td>
				<td>
					<!-- checked：初始状态选中  name属性值相同来表示同一组 -->
					<input type="radio" name="gender" id="radio0" checked="checked" value="female"/>女
					<input type="radio" name="gender" id="radio1" value="male"/>男
					<input type="radio" name="gender" id="radio2" />未知
				</td>
			</tr>
			<tr>
				<td align="right">年龄：</td>
				<td>
					<input type="number" name="age" id="age" value="21" min="0" max="120"/>
				</td>
			</tr>
			<tr>
				<td align="right">出生日期：</td>
				<td>
					<input type="date" name="birthday" id="date" value="2020-01-01" />
				</td>
			</tr>
			<tr>
				<td align="right">籍贯：</td>
				<td>
                    <!-- value：被选中的项对应的值；selected="selected"表示 默认被选中 -->
					<select name="province" id="province">
						<option value="甘肃">甘肃</option>
						<option value="山东">山东</option>
						<option value="上海">上海</option>
					</select>
				</td>
			</tr>
			<tr>
				<td align="right">爱好：</td>
				<td>
					<!-- checked：初始状态选中  name属性值相同来表示同一组 -->
					<input type="checkbox" name="hobby" id="radio0" checked="checked" value="ball"/>打球
					<input type="checkbox" name="hobby" id="radio1" value="dance"/>跳舞
					<input type="checkbox" name="hobby" id="radio2"  value="music"/>唱歌
				</td>
			</tr>
			<tr>
				<td align="right">爱好的颜色：</td>
				<td>
					<input type="color" name="color" id="color1"/>
				</td>
			</tr>
			<tr>
				<td align="right">电子邮件：</td>
				<td>
					<input type="email" name="email" id="email"/>
				</td>
			</tr>
			<tr>
				<td align="right">个人网址：</td>
				<td>
					<input type="url" name="url" id="url"/>
				</td>
			</tr>
			<tr>
				<td align="right">简介：</td>
				<td>
				<!-- disabled="disabled" 表示只读不可用-->
					<textarea name="textarea" rows="11" cols=50"></textarea>
				</td>
			</tr>
			<tr>
				<td align="right">注册时间：</td>
				<td>
					<input type="time" name="time" id="time"/>
				</td>
			</tr>
			<tr>
				<td align="right">注册星期：</td>
				<td>
					<input type="week" name="week" id="week"/>
				</td>
			</tr>
			<tr>
				<td align="right">注册月份：</td>
				<td>
					<input type="month" name="month" id="month"/>
				</td>
			</tr>
			<tr>
				<td align="right">滑动：</td>
				<td>
					<input type="range" name="range" id="range"/>
				</td>
			</tr>
			<tr>
				<td align="right">搜索：</td>
				<td>
					<input type="search" name="search" id="search"/>
				</td>
			</tr>
			<tr>
				<td align="right">操作：</td>
				<td>
					<input type="submit" name="submit" id="submit" value="注册"/>
					<input type="reset" name="reset" id="reset" value="重置"/>
					<input type="image" name="image" id="image" value="登录" src=""/>
					<button type="submit">注册</button>
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>

在这里插入图片描述

3、框架:

可以将一个浏览器窗口分割成多个子窗口，每个子窗口显示一个网页，并在子窗口之间可以实现导航

FrameSet与Frame（框架集）：

使用这两个标签时，标签得删除，用标签代替body标签，与 <frame>子框架标签搭配使用。 和表格一样已经被html5淘汰了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="100,*,100">
		<frame src="top.html" name="mytop"/>
		<frameset cols="150,*">
			<frame src="left_dh.html" id="leftframe" title="显示" frameborder="no"/>
			<frame src="right_content.html" name="main"/>
		</frameset>
		<frame src="foot.html" name="myfoot"/>
	</frameset>
</html>

frameset标签属性说明：

  • rows：垂直方向分割的窗口，属性值是分割的数字或百分比，有几个值就将窗口分成几部分，星号表示全部
  • clos：水平方向分割的窗口，属性值是分割的数字或百分比，有几个值就将窗口分成几部分，星号表示全部
  • frameborder：是否展现边框，属性值是yes或no
  • border：边框的宽度，需要设置frameborder="yes"
  • framespacing：框架之间的距离，一般设置：framespacing="0"

frame子框架标签属性说明：

  • src：显示的文件地址
  • name：子框架名称，与链接标签的target="框架属性name值"结合使用可指定跳转页面显示位置
  • scrolling：设置滚动条，参数是auto自动匹配，yes显示滚动条，no不显示滚动条
  • noresize：不让该框架变化（不可调整大小）
  • frameborder：该子框架边框设置（0，1，no，yes）
  • id：框架页面的唯一标识
IFrame(嵌入式框架)：

正常的使用，可用嵌套在h5的标签容器里面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div>
		<div style="width: 100px;height: 800px;background-color: aquamarine;float: left;" align="left">
			<span><strong>导航条</strong></span>
			<hr />
			<ul>
				<li><a href="../index.html" target="main1">导航1</a></li>
				<li>导航2</li>
			</ul>
		</div>
		<div style="clear: all;background-color: aliceblue;margin-left: 105px;height: 800px;" align="right">
			<h3 align="left"><span>主页面</span></h3>
			<iframe frameborder="0" noresize="yes" scrolling="auto" src="main.html" name="main1">
			</iframe>
		</div>
	</div>
	</body>
</html>

iframe标签属性说明：

属性名属性值功能
width数字框架宽度
height数字框架高度
name字符串框架名字
frameborder0或1框架边框的无有
src网页文件路径或者文件名框架中打开的网页文件
scrollingyes、no、auto是否有滚动条，还是浏览器自己（放不下内容加滚动条，能放下不加）放
marginheight数字框架上下边距
marginwidth数字框架左右边距

明：

属性名属性值功能
width数字框架宽度
height数字框架高度
name字符串框架名字
frameborder0或1框架边框的无有
src网页文件路径或者文件名框架中打开的网页文件
scrollingyes、no、auto是否有滚动条，还是浏览器自己（放不下内容加滚动条，能放下不加）放
marginheight数字框架上下边距
marginwidth数字框架左右边距
bigdata7
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础 HTML思维导图 （h5）
04-01
前端基础学习过程中的总结，分享，希望对初学者有所帮助； 同时思维导图的方式也有助于思维的梳理，阶段性的总结，适合所有的学习阶段， 贵在坚持
web前端——HTML5知识总结
一条小黑龙的博客
08-27 497
HTML5知识总结
前端——HTML5简介与知识点总结
nO0b
09-18 1126
HTML5于2014年10月28号正式发布，全称为Hyper Markup Language(超文本标记语言)。 从HTML 4.01、XHTML到HTML5不是革命性的升级，而是规范向习惯的妥协，HTML5增加了很多实用的新功能，将吸引开发者投入HTML5的怀抱。 HTML5的优势： 解决跨浏览器问题 部分替代了原来的JavaScript 更明确地语义支持 增强了Web应用程序的功能 ...
前端学习总结（一）HTML5基础
浩时代的博客
02-20 4020
html5总结
HTML5 之 Link 标签
热门推荐
无
06-16 1万+
概述   link 元素用于链接外部css样式表等其他相关外部资源。 link   其中link中包括如下属性。 href：指明外部资源文件的路径，即告诉浏览器外部资源的位置 hreflang：说明外部资源使用的语言 media：说明外部资源用于哪种设备 rel：必填，表明当前文档和外部资源的关系 sizes：指定图标的大小，只对属性rel="icon"生效 type：说明外部资源的 MIME 类型，如text/css、image/x-icon rel   rel核心属性的参数值如下，也可参考 MDN.
前端html5学习小总结
qq_51878644的博客
08-05 658
HTML5 知识点 小总结
前端基础学习总结（看大佬文章）
12-02
【前端基础学习总结】 在前端开发中，HTML和CSS是构建网页的基础。本文将围绕HTML中的`caption`标签、CSS中的锚点链接、表格样式、浮动以及清除浮动的方法进行总结。 1. `caption`标签 `caption`标签是HTML中用于...
前端小白-HTML基础知识学习总结
03-23
前端小白-HTML基础知识学习总结
前端网站HTML5页面模版
04-02
【前端网站HTML5页面模版】是现代网页设计的基础，尤其在互联网技术日新月异的今天，HTML5已经成为了构建交互式、响应式和高性能网站的首选标准。本资源包含一组HTML5页面模版，旨在帮助开发者快速构建美观且功能...
前端最强总结最全html.pdf
05-18
html最全总结，包含常见面试题
前端开发指南：HTML5与CSS3知识点总结
Robod的博客
01-26 2321
HTML5 CSS3 HTML5 CSS3 HTML5 CSS3 HTML5 CSS3 HTML5 CSS3
html5标签属性ref_HTML5数据标签和属性
cungui5726的博客
08-19 3061
html5标签属性refWhat if I told you that it was possible for you to make an HTML attribute with any name you wanted, set to any value, while always being assured that it was valid code? 如果我告诉过您，可以始终确保它是有效...
HTML5笔记
喵喵的博客
07-19 1648
HTML5 什么是HTML5 定义 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改 环境 支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力 目的 HTML5的设计目的是为了在移动设备上支
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 925
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML5应用的安全防护策略与实践
@云安全小杜
07-17 469
随着HTML5及其相关技术（如CSS3和JavaScript）的普及，Web应用变得越来越强大和复杂，同时也成为黑客攻击的目标。本文将探讨HTML5应用面临的常见安全威胁，以及如何通过最佳实践和代码示例来增强应用的安全性。
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 354
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1194
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1684
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 518
【代码】博客前端项目学习day03——框架页。
HTML前端与CSS基础总结
"这篇资料是关于在校学习HTML前端知识的总结，涵盖了HTML基本标签、CSS样式设置、JavaScript和jQuery的基础内容，以及相关的案例笔记。" HTML是超文本标记语言，用于构建网页结构，其常用标签包括： 1. `a`标签用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值