HTML基本知识-补充

最新推荐文章于 2022-11-05 14:32:45 发布
最新推荐文章于 2022-11-05 14:32:45 发布
阅读量497 收藏 23
点赞数 3
分类专栏： html 文章标签： html 标签 表单 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42079388/article/details/103456017
版权

HTML基本知识-补充

HTML补充

上次说到了HTML的表格（table）标签，这次继续补充完。

列表

含义：默认显示从上到下的显示数据
组成：列表类型和列表项
分列：有序列表：ol li
无序列表：ul li
自定义列表：dl dt dd

用法：

<body>
		<!--有序列表
			语法：ol li-->
		<ol>
			<li>我是第一个</li>
			<li>我是第二个</li>
			<li>我是第三个</li>
		</ol>
		<!--无序列表
			语法：ul li-->
		<ul>
			<li>我是第1个</li>
			<li>我是第2个</li>
			<li>我是第3个</li>
		</ul>
		<!--自定义列表
			语法： dl dt dd-->
		<dl>
			<dt>我是一只</dt>
			<dd>小狗</dd>
			<dt>我是一只</dt>
			<dd>小猫</dd>
		</dl>
	</body>

实现界面：
代码实现界面

表单

  1. 作用：
    用于显示，收集信息，并将信息提交给服务器。
  2. 组成：
    2.1 表单元素：负责将用户数据提交给服务器
    2.2 表单控件：负责接收用户的数据（和用户进行交互的）
  3. 定义：
    3.1 form属性：
    action： 主要就是服务器上要处理数据 的应用程序URL找谁处理（提交地址）
    method：指定数据提交的方式
    3.2 表单控件：提供多个类型的表单控件，并具有可视化的外观
    3.2.1 input控件
	type:	   类型
	value:	   值
	name：	   控件的名称
	disabled： 禁用控件
	text：	   普通的文本框
	password： 密码框
	email：    邮箱框
	submit：   提交按钮
	radio      单选
	checkbox   多选
	image      图片提交
  1. 2.2 select控件
 	select控件（下拉列表）
 		size： 显示如果不为1的则变成滚动列表
 		option  : selected: 默认选中
  1. 2.3 文本域textarea
	属性：
		cols  指定文本的列数 （宽度）
		rows  指定文本的行数 （高度）
  1. 2.4 关联文本于控件 label
	1.首先在要关联的input控件上加上一个id
	2.用label标签包含住文本并且加上 for属性

示例

		<body style=" margin: 10px auto;min-width: 780px;max-width: 1260px;">
		<img src="img/bg.jpg" />
		<form action="#">
			<table border="0" cellpadding="20px" cellspacing="0" width="40%" height="800px" align="center"> 
				<tr>
					<td align="right">邮箱账号</td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td align="right">昵称</td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td align="right">密码</td>
					<td><input type="password" /></td>
				</tr>
				<tr>
					<td align="right">确认密码</td>
					<td><input type="password" /></td>
				</tr>
				<tr>
					<td align="right">性别</td>
					<td>
						<input type="radio" name="sex" />男
						<input type="radio" name="sex" />女
					</td>
				</tr>
				<tr>
					<td align="right">生日</td>
					<td>
						<select name="">
							<option>公历</option>
							<option>农历</option>
						</select>
						<select name="">
							<option>1996</option>
							<option>1997</option>
							<option>1998</option>
							<option>1999</option>
							<option>2000</option>
						</select>
						<select name="">
							<option>1</option>
							<option>2</option>
							<option>3</option>
						</select>
						<select name="">
							<option>1</option>
							<option>11</option>
							<option>12</option>
							<option>...</option>
							<option>31</option>
						</select>
					</td>
				</tr>
				<tr>
					<td align="right">所在地</td>
					<td>
						<select name="">
							<option>中国</option>
							<option>外国</option>
						</select>
						<select name="">
							<option>湖北</option>
							<option>湖南</option>
						</select>
						<select name="">
							<option>武汉</option>
							<option>长沙</option>
						</select>
					</td>
				</tr>
				<tr>
					<td align="right">验证码</td>
					<td>
						<input type="text" />
						<img name="img" src="img/getimage.jpg" width="80px" height="30px" align="middle" />
						<!--<img name="img" src="img/check.jpg" width="80px" height="30px" align="middle" />-->
						<a href="#" name="img">点击换一张</a>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="checkbox" id="suer" /> 
						<label for="suer">我已阅读并同意服务条款</label>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="image" src="img/btn.jpg" />
					</td>
				</tr>
			</table>
		</form>
	</body>

实现界面：
在这里插入图片描述

浮动框架

作用：可以在一个浏览器窗口中同时显示多个页面文档
第一种用法：

<iframe src="http://www.4399.com" width="500px" height="500px"></iframe>

第二种用法 和超链接的结合使用：
1.创建超链接标签
2.创建iframe标签
3.在iframe加上一个name属性
4.改变超链接的target属性 改变为name的值
代码实现：

<a href="http://www.baidu.com" target="bd">百度</a>
<a href="http://www.4399.com" target="bd">4399</a>
<iframe src="" name="bd" frameborder="0" height="500px" width="60%"></iframe>

实现界面：
在这里插入图片描述
在这里插入图片描述

摘要与细节

作用：允许将页面某部分内容进行展开或收缩
语法：第一步写上 摘要标签 details
第二步 写上标题 summary
第三步 写内容
代码实现：

<details>
	<summary>用户信息</summary>
	姓名<input />
	<br />
	年龄<input />
</details>

度量标签及高亮标签

	min：最小值
	max：最大值
	value：当前显示的度量值0

代码实现：

	<!--度量标签-->
	<meter min="0" max="100" value="66"></meter>
	<!--高亮标签-->
	<mark>我卢本伟没有开挂</mark>

实现界面：
在这里插入图片描述

总结

method值定的数据提交方式尽量选择post方式传输，由于他是隐式传输，所有数据提交时都看不见，相对于get传输方式的显式提交来说比较安全。
在表单里面插入图片，如没必要用到图片提交的需求，则尽量不要用image图片提交的方式插入图片。

努力奔跑的蜗牛
关注
专栏目录
电路串联和并联图解_串并联电路的识别方法图解
weixin_35658042的博客
12-24 8342
初中物理学科中，电学是最简单也是最难的一部分，简单的原因是如果弄明白了电路图，就会做所有的题目，难的原因是没明白电路图，就什么都不会。所以解电学的关键就是学会区分串、并联电路，知道串、并联电路的特点，会分析电路图，会将复杂的电路图简化为简单的串、并联电路。本期就给大家介绍几种串、并联电路的识别方法。一起来学习吧！串联电路定义：两个或两个以上的用电器顺次连接到电路中，这种连接方式叫做串联。(用电器“...
vue v-html 参数,vue基础知识详解
weixin_30424427的博客
07-02 3076
步骤：准备一个被vue挂载的容器divnew vue实例对象1.Vue 实例的作用范围？vue会管理el命中的元素及其后代内部的后代元素，注意是内部的可以看出vue 作用范围仅限于el 命中的元素的内部2.是否可以选择其他选择器？可以，但是建议选择id选择器默认选择的是id选择器。那是否可以是其他的选择器呢？可以看得出不管是id选择器还是class选择器或者是标签选择器都是没有发生变化的，所以它可...
吐血整理--VI编辑器常用操作汇总
全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
06-02 1万+
VI编辑器基础操作1、前言2、vi基础操作1、概念2、插入命令3、删除命令4、撤销命令5、重复命令3、区域选择 替换 搜索 1、前言 相信不少小伙伴在写SHELL脚本或者编辑一些文件的时候，用到的vim编辑器还蛮多的，VIM编辑器用好了真的很方便用不好真的闹心！ 我总结了日常工作常用的VI编辑器常用操作供大家一起学习！记得点赞收藏加关注哦！(^ _ ^) 2、vi基础操作 1、概念 vi的三种模式 1.命令模式 2.编辑模式 3.末行模式（命令模式下，按“：”即可进入末行模式） 默认情况下，VI编辑器是
苹果QQ免越狱5.2.1
01-14
苹果老版本qq，运行流畅，喜欢低版本的朋友可以用一下。
Computer Networking Problems and Solutions An innovative approach to 无水印原版pdf
12-29
Computer Networking Problems and Solutions An innovative approach to building resilient, modern networks 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
jar包直接当做web服务，netty负责http协议，配合springMVC，再也不用tomcat了
10-19
jar包直接运行，对外提供web服务，netty负责http协议，配合springMVC，再也不用tomcat了，因为没办法支持jsp，适合纯web服务的项目。
HTML5网页设计样式-CSS基础知识
m0_66168318的博客
03-21 3442
CSS概念 CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页内容的外观（样式），并允许将样式信息和网页内容分离的一种标记语言。 HTML与CSS的关系：“结构”与“表现”，即HTML确定网页的结构，CSS确定网页的表现形式。HTML是CSS的前提和基础，CSS实现HTML的美化和更灵活地控制页面标记。 样式规则（基本语法） 注： HTML与CSS样式规则的符号区别 HTML CSS 标签用尖括号<> 标签用大括号{}
html+css基础知识
weixin_52682120的博客
05-10 2187
0、前提 80%知识，只有20%的场景可以用到； 20%的知识，有80%的场景可以用到。 1 、HTML & CSS 到底是什么，有什么用？ 它们是两门语言。 HTML + CSS + Javascript = 网页 HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。 CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。 1.1 执行HTML CSS HTML、CSS -> 浏览器内核 -> 页面
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
html入门基础-边框设计(入门级)
最新发布
m0_74637610的博客
11-05 2553
1、如何给控件添加样式？ 2、如何让一个控件在页面居中？ 3、设置控件之间边距的关键字是什么？ 4、如何给区块（div）设置一个实心的边框？ 5、在区块中，如何让文本居中显示（横向居中、纵向居中）？
模拟 qq 消息气泡 demo
08-01
qq 消息气泡，http://blog.csdn.net/qq_18983205/article/details/76166576 对应代码
QQ头像情侣```下载````
04-16
QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像QQ头像
mplayer，最好用的影音播放器，超越暴风和QQ影音
09-22
一款免费的影音播放软件，绿色版，解压即可运行，无需安装。占用内存超小，｛7000k左右）
办公软件W.P.S.7311.12012.0
04-28
免费的日常办公软件，比微软的office好用，支持国产软件。有云存储功能。
QQclient
06-22
本客户端是小组内其他同学写的，本人没有参与，版权归相应开发者所有。
关于HTML的基础知识的介绍
qq_43698078的博客
12-12 3548
一、导读      首先感谢一下一直以来支持我的读者，你们对文章的阅览以及点赞评论是我不断去努力学习的动力，如果我写的文章热度可以继续上升，我决定在写完关于前端的知识的博文后写一个带有高科技含量的表白墙和一个对你喜欢的人表白的网站，以此来回报大家。今天，我们先来先来聊聊前端的“三剑客”之一的“HTML”.     在开始正文之前，为了让小白也能看懂后面的知识，咱们先引入一点Web的基本概念和常识。 1.1.Web应用      所谓的Web应用特指我们平时用浏览器打开的一些应用，也就是网站。 1.2.浏览器
html5基础知识，期末复习大全
zm321917的博客
06-02 6841
html，css，js超详细基础知识及响应式设计，动画等进阶
html表格的基础知识及源代码-尚硅谷
weixin_58264104的博客
07-13 2598
html表格的基础知识及源代码-尚硅谷
HTML相关知识－－补充
10-28
在这个"HTML相关知识－－补充"的压缩包中，很可能是提供了关于HTML的一些进阶概念、实践代码以及示例，旨在帮助用户进一步提升对HTML的理解和应用能力。 首先，HTML的基础结构由一系列的标签组成，这些标签定义了...
HTML基础知识详解与标记语法
"HTML基础知识及其在.NET环境中的补充讲解" HTML，全称为超文本标记语言（HyperText Markup Language），是创建网页内容的基础。它是一种描述性的标记语言，而非编程语言，这意味着HTML并不执行计算或逻辑，而是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值