HTML 表单、布局、id、头部

韩未零

已于 2023-09-22 12:23:28 修改

阅读量363

点赞数 2

分类专栏：前端文章标签： html 前端

于 2023-09-19 10:25:45 首次发布

本文链接：https://blog.csdn.net/qq_60271706/article/details/133015674

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单使用表单标签 <form> 来设置

<form>

    <input type="button" value="登录1" />

    ...
</form>

HTML 表单用于收集不同类型的用户输入。

输入元素

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。

大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

		<from>
			姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="fristname"><br>
			电话号码: <input type="text" name="lastname">
		</from>

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。

密码字段

密码字段通过标签 <input type="password"> 来定义:

		<from>
			密码：<input name="password" type="password" />
		</from>

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项。

<form>        

    <input type="radio" name="sex" value="male">男<br>      

    <input type="radio" name="sex" value="female">女       
    
</form>

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>      

    <input type="checkbox" name="vehicle" value="Bike">我有自行车<br>      

    <input type="checkbox" name="vehicle" value="Car">我有小车

</form>

提交按钮 (Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">

    Username: <input type="text" name="user">

    <input type="submit" value="Submit">

</form>

假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

HTML 表单标签

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>表单</h1>
		<form action="" method="get">
			<!-- <form action="https://www.baidu.com" method="get"> -->
			<fieldset>
				<legend>登录系统</legend>
				<p>
					<!-- input 输入文本框 -->
					用户名：<input name="username" />
				</p>
				<p>
					<!-- type=password 密码框-->
					密&nbsp;&nbsp;码：<input name="password" type="password" />
				</p>
				<p>
					<input type="button" value="登录1" />
					<input type="submit" value="登录2" />
				</p>
			</fieldset>

			<fieldset>
				<legend>调查表</legend>
				<h5>请问你喜欢做什么?</h5>
				<!-- 多个选项给的name需要相同 -->
				<input type="checkbox" value="dance" name="hobby1">舞蹈
				<input type="checkbox" value="sing" name="hobby1">唱歌
				<h5>请问你喜欢做什么?</h5>
				<input type="radio" value="dance" name="hobby2">舞蹈
				<input type="radio" value="sing" name="hobby2">唱歌
				<h5>你什么时候有时间?</h5>
				<input type="date" name="when" />
				<input type="email" placeholder="请输入一个邮箱地址" />
				<input type="url" />
				<input type="number" />
				<input type="image" src="./imgs/1.jpg" height="50px" />
				<textarea rows="5" cols="40">xxxx</textarea>
				<selct>
					<!-- value值是提交给后端的，唱歌用来展示 -->
					<option value="">请选择你的爱好</option>
					<option value="sing">唱歌</option>
					<option value="dance">跳舞</option>
				</selct>
			</fieldset>
		</form>
	</body>
</html>

练习

		<form action="" method="get">
			<fieldset>
				<b>
					<h4>·&nbsp;编写一个问卷调查表单-python学习调查问卷</h4>
				</b>
				<ol>
					<li>
						<h5>您的年龄(单选项)</h5>
						<input type="radio" value="0-10" name="age1">0-10
						<input type="radio" value="10-20" name="age1">10-20
						<input type="radio" value="20-30" name="age1">20-30
					</li>
					<li>
						<h5>您的爱好(多选项)</h5>
						<input type="checkbox" value="football" name="hobby1">足球
						<input type="checkbox" value="basketball" name="hobby1">篮球
						<input type="checkbox" value="swim" name="hobby1">游泳
					</li>
					<li>
						<h5>您有什么建议(多行文本框)</h5>
						<textarea rows="5" cols="40"></textarea>
					</li>
					<li>			
						<h5>您对本次活动是否满意(下拉框)</h5>
						<select>
							<option value="satisfied">满意</option>
							<option value="no">不满意</option>
						</select>
						<p>
							<input type="submit" value="提交" />
						</p>
					</li>
				</ol>
			</fieldset>
		</form>

HTML 布局

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

注意：虽然我们可以使用HTML table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的 - 表格不是布局工具。

使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

注意：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

布局标签

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>流式布局</h1>
		<div style="background-color: aliceblue;height:50px;">
			div01 导航
		</div>
		<div style="background-color: aqua;height:auto;">
			<h2>左右布局</h2>
			<div style="width:30%;height:100px;background-color: red; float:left">left</div>
			<div style="width:30%;height:100px;background-color: green; float:right">right</div>
			<div style="width:30%;height:100px;background-color: bisque; float:right">right</div>
			<div style="clear:both;"></div>
<!-- 			<h2>左右布局</h2>
			<div style="width:70%;height=50px;background-color: red; float:right">right</div>
			<div style="width:30%;height=50px;background-color: green;">left</div> -->
		</div>
		<div style="background-color: azure;height:50px;">
			div03 版权
		</div>
	</body>
</html>

练习

		<h1>布局</h1>
		<div style="background-color: darkturquoise; height:50px;">top</div>
		<div >
			<div style="width:30%;height:150px;background-color: red; float:left">left</div>
			<div style="width:70%;height:150px;background-color: greenyellow; float:right">
				<div style="width:50%;height:50px;background-color: darkcyan; float:left">left</div>
				<div style="width:50%;height:50px;background-color: chartreuse; float:right">right</div>
				<div style="width:50%;height:50px;background-color: darkmagenta; float:left">left</div>
				<div style="width:50%;height:50px;background-color: blue; float:right">right</div>
				<div style="width:50%;height:50px;background-color: bisque; float:left">left</div>
				<div style="width:50%;height:50px;background-color: darkkhaki; float:right">right</div>
				<div style="clear:both;"></div>
			</div>		
			<div style="clear:both;"></div>
		</div>
		<div style="background-color: rebeccapurple; height:50px;">
			div03 版权
		</div>

HTML id

HTML id 属性用于为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。

使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

下面的例子中我们有一个 <h1> 元素，它指向 id 名称 "myHeader"。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

注释：id 名称对大小写敏感！

注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

HTML 头部

HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

HTML <title> 元素

<title> 标签定义了不同文档的标题。

title 在 HTML/XHTML 文档中是必须的。

title 元素:

1. 定义了浏览器工具栏的标题

2. 当网页添加到收藏夹时，显示在收藏夹中的标题

3. 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html>      

<html>        

<head>        

<title>标题</title>        

</head>                

<body>       

学习HTML     

</body>                

</html>

HTML <base> 元素

<base> 标签描述了基础的链接地址/链接目标，该标签作为HTML文档中所有的链接规定默认地址或默认目标（target）：

<head>       

<base href="//www.w3cschool.cn/images/" target="_blank">      

</head>

提示：在 HTML 中，<base> 标签没有绑定标签；在 XHTML 中，<base> 标签必须被正确关闭。

HTML <link> 元素

<head>       

<link rel="stylesheet" type="text/css" href="mystyle.css">        

</head>

HTML <style> 元素

在<style>元素中你需要指定格式的文件来自流染HTML文件：

<head>        

<style type="text/css">        

body {background-color:yellow}        

p {color:blue}        

</style>        

</head>

HTML <meta> 元素

元数据（元数据）是关于数据的信息。

典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

针对搜索引擎的关键词

一些搜索引擎使用元素的名称和内容属性来搜索您的页面。

下面的元元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的元元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

HTML <script> 元素

HTML头元素

韩未零

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录