HTML简单应用

最新推荐文章于 2021-12-04 22:34:20 发布

Uniago

最新推荐文章于 2021-12-04 22:34:20 发布

阅读量471

点赞数

文章标签： html 列表

本文链接：https://blog.csdn.net/qq1912238134/article/details/106737711

版权

一、HTML概述

HTML：（Hyper Text Markup Language）超文本标记语言，超文本是指页面可以包含图片、链接、音乐、程序等非文字元素。HTML实际上就是一组浏览器能够识别的标签。

1、基本标签

基本结构

<html>
	<head>
		<title>标题</title>
	</head>
	<body>
	</body>
</html>
其中 <body>、</body>等成对的标签，分别叫开放标签和闭合标签
单独程先的标签（空元素）,如<hr />：意为用/来关闭空元素

<title>标题</title>
<!-- meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。-->
<meta charset="utf-8" />

<!--h1~h6 从大到小-->
<h1>内容标题标签</h1>
<p>段落标签</p>
<!--换行标签-->
<br /> 
<!--分割线-->
<hr />
<strong>加粗标签</strong>
<em>斜体标签</em>
<u>下划线标签</u>

单标签：仅一个标签
双标签：成对出现的标签
行级元素：内容撑开宽度，左右都是行内元素的可以排在一行，不具备段落处理能力，即不会换行。如a、strong、em、u标签用来修饰文本的标签。
块元素：无论内容又多少，该元素独占一行的标签，如p、h1~h6、li标签。

<div>块标签</div>

div可定义文档中的分区或节（division/section），div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。

<!-- 注释 -->
<!-- 特殊符号 -->
&nbsp; 空格
&gt; 大于号(>)
&lt; 小于号(<)
&quot; 引号(")
&copy; 版权符号

2、其他标签

IMG标签：将图片加入到网页中
<img src="图片地址" alt="如果图片没有正常显示，图片的代替文字" title="鼠标悬停提示文字" width="图片宽度px" height="图片高度px" />

a标签：超链接，通过点击跳转到另一个页面
<a href="链接路径" target="目标窗口位置"> 链接文本或图片</a>
target="_blank": 在新窗口打开
target="_self":当前窗口打开

音频标签：将音频插入到网页中
<audio src="音频路径" controls="controls"></audio>
controls: 提供播放、暂停和音量的控件
autoplay: 自动播放
loop：循环播放
preload：预加载，页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

视频标签：将视频插入到网页中，手机端或者IE浏览器中有效
<movie src="视频路径" controls="controls" muted="muted" autoplay="autoplay"></movie>
width：设置视频播放器的宽度。
height：设置视频播放器的高度。
muted： 静音，视频中，自动播放(autoplay)的前提是静音(muted)

二、列表与表格

1、列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

<!-- 无序列表 -->
<ul>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
	<li>内容n</li>
</ul>

<!-- 有序列表 -->
<ol>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
	<li>内容n</li>	
</ol>

ul：一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。
ol：一般用于排序类型的列表，如试卷、问卷选项等

2、表格

表格简单通用、结构稳定。

表格由table标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由td标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!-- broder边框大小为1 -->
<table border="1"> <!-- 表 -->
	<tr> <!-- 行 -->
		<!-- colspan跨n列合并 -->
		<th colspan="n">表头的内容</th> <!-- th表头，粗体、居中 -->
		<th>表头的内容</th>
	</tr>
	<tr>
		<!-- rowspan跨n行合并 -->
		<td rowspan="n">第1个单元格的内容</td> <!-- 单元格 -->
		<td>第2个单元格的内容</td>
	</tr>
</table>

跨列：colspan=“横向跨的单元格数量”
跨行：rowspan=“纵向跨的单元格数量”

三、页面布局

网页内容变多之后网页会非常混乱,那么这个时候就需要网页布局。一般情况一个网页都会有上、左、下、右、中的布局风格。

在这里插入图片描述

<!-- 用于页面或页面中的一块区域 -->
<header>标记头部区域的内容</header>
<!-- 用于页面或页面的一块区域-->
<footer>标记脚步区域的内容</footer>
<section>Web页面中一块独立的区域</section>
<article>独立的文章内容</article>
<!-- 常用于侧边栏 -->
<aside>相关内容或应用</aside>
<nav>导航类辅助内容</nav>

四、表单

表单在网页中主要负责数据采集功能。一组标签

表单是网页中非常重要的组成部分,是我们与网站进行数据交互的一种非常重要的手段,表单通常会封装我们输入的很多内容然后打包上传给服务器,然后服务器根据我们提交的内容再做出相应的回应。

1、method提交方式：

get : 明文传输数据，传输速度非常快，但是传输内容有限，一次请求的数据大小限制在2K，并且只能传输字符。
post : 密文传输，传输速度比较慢，但是可以传输非常多的内容，正常情况下传输字符，非正常情况下经过设置连声音，视频，图片都可以传输,这个get请求是做不到的。
post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用post方式提交表单数据。

2、表单元素

表单是封装了好多输入的一个集合,我们在表单中输入内容的时候就需要用到各种接收数据的网页标签,这些标签统称为输入(input)标签。

<input type="input元素类型" name="input元素的名称" id="input元素的id" value="input元素的值" />

type：指定元素的类型。text、password、checkbox、radio、submit、file、hidden、image和button，默认为text
name：指定表单元素的名称
value：表单元素的值。type为radio时必须指定一个值。
size：指定表单元素的初始宽度，当type为text或password时，便当元素的大小以字符为单位，其他类型宽度以像素为单位
maxlength：type为text或password时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单元素的用法</title>
	</head>
	<body>
		<form action="demo07.html" method="get">
			<p>案例1：传输文本</p>
			<p>
				<input type="text" name="input1" />
			</p>
			<p>案例2：传输密码</p>
			<p>
				<input type="password" name="input2" />
			</p>
			<p>案例3：单选按钮</p>
			<p>
				<!-- 一组单选按钮中 name应该是相同的 -->
				<input type="radio" name="input3" value="1" />男
				<input type="radio" name="input3" value="0" />女
			</p>
			<p>案例4：多选按钮</p>
			<p>
				<!-- 一组复选框中 name应该是相同的 -->
				<input type="checkbox" name="input4" value="1" />高<br />
				<input type="checkbox" name="input4" value="2" />富<br />
				<input type="checkbox" name="input4" value="3" />帅<br />
			</p>
			<p>案例5：列表框</p>
			<p>
				<select name="select">
					<option value="0">--请选择--</option>
					<option value="1">北京</option>
					<option value="2">上海</option>
				</select>
			</p>
			<p>案例6：文本域</p>
			<p>
				<textarea rows="6" cols="50" name="textarea"></textarea>
			</p>
			<p>特殊输入框1：数字</p>
			<p>
				<input type="number" name="input5" min="0.0" max="10.0" step="0.1"/>
			</p>
			<p>特殊输入框2：邮箱</p>
			<p>
				<input type="email" name="input6"/>
			</p>
			<p>特殊输入框3：电话</p>
			<p>
				<input type="tel" name="input7" />
			</p>
			<p>特殊输入框4：日期</p>
			<p>
				<input type="date" name="input8"/>
			</p>
			<p>特殊输入框5：时间</p>
			<p>
				<input type="time" name="input9" />
				<input type="datetime" name="input10" />
				<input type="datetime-local" name="input11" />
			</p>
			<p>
				<!-- button 普通按钮 -->
				<input type="button" value="表单的普通按钮" onclick="javascript:alert('这是一个普通按钮触发的弹窗');" />
				<!-- submit 提交表单 -->
				<input type="submit" value="表单的提交" />
				<!-- reset 重置表单 -->
				<input type="reset" value="表单的重置" />
			</p>
		</form>
	</body>
</html>

此处我们介绍了三种按钮
1) 普通按钮(button) : 页面上的普通按钮,需要自己定义按钮的事件才能发挥作用，如onclick事件
2) 提交按钮(submit) : 页面上的提交按钮,必须在表单中,可以帮助我们提交包含这个按钮的form表单
3) 重置按钮(reset) : 页面上的重置按钮,必须在表单中,可以帮助我们瞬间清空表单内容

向WEB服务器提交数据的时候,我们提交的数据都是以 key=value的形式传递,WEB服务器只需要根据我们设置的KEY来取值即可

3、表单的初级验证

placeholder：输入框提示消息，可以描述文本框期待用户输入何种内容，提示语默认显示，当文本框中输入内容时提示语消失。
适用于input标签：text、search、url、email和password等类型
required : 规定是否允许为空值，规定文本框填写内容不能为空，否则不允许用户提交表单。
适用于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
readonly：只读标签，可以提交到服务器
disabled：禁用标签，不会提交到服务器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单</title>
	</head>
	<body>
		<div>
			<form action="demo08.html" method="get">
				<p>
					<input type="text" name="text" placeholder="请在这输入您的姓名"/>
				</p>
				<p>
					<!-- 隐藏域 -->
					<input type="hidden" name="hidden" value="隐藏的值" />
				</p>
				<p>
					<input type="submit" value="提交"/>
				</p>
			</form>
		</div>
		<div>
			<form action="demo08.html" method="get">
				<p>
					<input type="text" name="input1" required="required" placeholder="请在这输入内容..."/>
				</p>
				<p>
					<input type="text" name="input2" value="只读内容,会提交" readonly="readonly" />
				</p>
				<p>
					<input type="text" name="input3" value="禁用内容,无法提交" disabled="disabled" />
				</p>
				<p>
					<input type="submit" value="确定"/>
				</p>
			</form>
		</div>
	</body>
</html>

Uniago

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML简单应用

一、HTML概述HTML：（Hyper Text Markup Language）超文本标记语言，超文本是指页面可以包含图片、链接、音乐、程序等非文字元素。HTML实际上就是一组浏览器能够识别的标签。1、基本标签基本结构<html> <head> <title>标题</title> </head> <body> </body></html>其中 <body>、</bo
复制链接

扫一扫