HTML自学手册-基础篇4

HTML <div> 和<span>

HTML 可以通过 <div> 和 <span>将元素组合起来;

大多数 HTML 元素被定义为块级元素内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束);

实例: <h1>, <p>, <ul>, <table>


内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>


HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器;

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行;

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性;

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法;使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据;


HTML <span> 元素是内联元素,可用作文本的容器

<span> 元素也没有特定的含义;

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性;


标签描述
<div>定义了文档的区域,块级 (block-level)
<span>用来组合文档中的行内元素, 内联元素(inline)

网页布局对改善网站的外观非常重要

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

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

虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 – 表格不是布局工具;


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>
 
</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>

</body>
</html>

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

下面的例子使用五个 div 元素来创建多列布局:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权-元宇宙 liboven.cn</div>
 
</div>
 
</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

上面的 HTML 代码会产生如下结果:

HTML自学手册-基础篇4 插图1

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

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

即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 – 表格不是布局工具!

下面的例子使用三行两列的表格 – 第一和最后一行使用 colspan 属性来横跨两列:


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权-元宇宙 liboven.cn</td>
</tr>
</table>
 
</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

上面的 HTML 代码会产生以下结果:

HTML自学手册-基础篇4 插图2

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

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


标签描述
<div>定义文档区块,块级(block-level)
<span>定义 span,用来组合文档中的行内元素。

在 css 里面定义:

p {margin:0; padding:0}

即可,用全局样式把 p 的边距给归零;

不过这样的副作用是网页所有的 p 都被重置了,所以你也可以指定专门标签下的 p。例如,如果这个 p 是在一个 class 为 content 的 div 下的,想去掉它的边距,就这么定义:

.content p {margin:0; padding:0;}

HTML 表单和输入

HTML 表单用于收集用户的输入信息;

单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器


实例

以下实例创建了一个表单,包含两个输入框

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

实例

以下实例创建了一个表单,包含一个普通输入框和一个密码输入框:

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

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

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等;

我们可以使用 <form> 标签来创建表单:

<form>
.
input 元素
.
</form>

多数情况下被用到的表单标签是输入标签 <input>

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

接下来我们介绍几种常用的输入类型。


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

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下:

First name: 
Last name: 

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


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

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password: 

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


<input type=”radio”> 标签定义了表单的单选框选项:

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

浏览器显示效果如下:



<input type=”checkbox”> 定义了复选框。

复选框可以选取一个或多个选项:

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

浏览器显示效果如下:

我喜欢自行车
我喜欢小汽车


<input type=”submit”> 定义了提交按钮;

当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名;

action 属性会对接收到的用户输入数据进行相关的处理:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:Username: 

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

以上实例中有一个 method 属性,它用于定义表单数据的提交方式,可以是以下值:

  • post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。
  • get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.runoob.com/?page=1,这里的 page=1 就是 get 方法提交的数据。
实例
<!-- 以下表单使用 GET 请求发送数据到当前的 URL,method 默认位 GET。 -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>注意:</b>当用户点击一个单选按钮时,它就会被选中,其他同名的单选按钮就不会被选中。</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
本例演示如何创建文本域(多行文本输入控件),用户可在文本域中写入文本,可写入字符的字数不受限制
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>
HTML 表单标签

New : HTML5新标签

标签描述
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签,一般为输入标题
<fieldset>定义了一组相关的表单元素,并使用外框包含起来
<legend>定义了 <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist>New指定一个预先定义的输入控件选项列表
<keygen>New定义了表单的密钥对生成器字段
<output>New定义一个计算结果

【技术笔记-1】定义重置按钮

<input type=”reset”>定义重置按钮

<input type=”reset” name=”button” id=”button” value=”重置”>

点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值;

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
</form>

<p>点击重置按钮重新设置表单。</p>

</body>
</html>

表单中的单选按钮可以设置以下几个属性:value、name、checked

  •  value:提交数据到服务器的值(后台程序PHP使用)
  •  name:为控件命名,以备后台程序 ASP、PHP 使用
  •  checked:当设置 checked=”checked” 时,该选项被默认选中
<form>
<p>你生活在哪个国家?</p>
<input type="radio" name="country" value="China" checked="checked">中国<br />
<input type="radio" name="country" value="the USA">美国
</form>

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“country”,这样同一组的单选按钮才可以起到单选的作用

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

如何使用隐藏在下拉列表中的默认空白值实现SELECT标记

只需使用禁用和/或隐藏属性:

<form>
  <select>
    <option selected disabled hidden style="display: none" value=""></option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
 </select>
</form>
  • selected:使此选项成为默认选项。
  • disabled:使此选项无法点击。
  • style=”display:none”:使此选项不在旧版浏览器中显示。 
  • hidden:使此选项不显示在下拉列表中

HTML 框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面

HTML 框架 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。 iframe语法: <iframe src=’URL’></iframe> 该URL指向不同的网页。 Iframe – 设置高度与宽度 height 和 width 属性用来定义iframe标签的高度与宽度。 属性默认以像素为单位, 但是你可以指定其按比例显示

iframe语法:

<iframe src="URL"></iframe>

该URL指向不同的网页;


height 和 width 属性用来定义iframe标签的高度与宽度;

属性默认以像素为单位, 但是你可以指定其按比例显示 (如:”80%”);

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

iframe 可以显示一个目标链接的页面

目标链接的属性必须使用 iframe 的属性,如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://liboven.cn" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

X-Frame-Options

他有三个可配置值

DENY:表示该网站页面不允许被嵌套,即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN:表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri:表示该页面可以在指定来源页面中进行嵌套展示。

温馨提示:本文最后更新于2022-12-27 10:03:29,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞18赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容