HTML知识整理（二）

最新推荐文章于 2023-04-29 16:17:43 发布

丁一9527

最新推荐文章于 2023-04-29 16:17:43 发布

阅读量268

点赞数

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

本文链接：https://blog.csdn.net/qq_43383323/article/details/109106304

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML知识整理（二）

一.块元素<div>&<span>

大多数 HTML 元素被定义为块级元素（ block level element）或内联元素（ inline element）。

块级元素在浏览器显示时，通常会以新行来开始和结束。例如：<h1>, <p>, <ul>, <table>

内联元素在显示时通常不会以新行开始。例如：<b>, <td>, <a>, <img>

<div>

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器. 其没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

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

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

<span>

<span> 元素是内联元素，可用作文本的容器,用来组合文档中的行内元素。

元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

二.类 class

类是每个标签中都可以加入的一个属性，而类的名字也没有限制，对标签进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。例如：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 

</body>
</html>

三.响应式Web设计

什么是响应式Web设计（Responsive Web Design，RWD）呢？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

创建响应式设计的一个方法，是自己来创建它：

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
   //自己写div的大小
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>

<body>

<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

创建响应式设计的另一个方法，是运用已有的CSS框架：

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

四.框架标签<frameset>

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架结构标签（<frameset>）定义如何将窗口分割为框架 .每个 frameset 定义了一系列行或列 .rows/columns 的值规定了每行或每列占据屏幕的面积

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

五.内联框架<iframe>

iframe 用于在网页内显示网页。

<iframe src="URL"></iframe>
<!-- URL 指向隔离页面的位置。
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
设置属性frameborder值为 "0" 就可以移除边框
-->
<iframe src="URL" width="200" height="200"></iframe>

六.统一资源定位器URL

URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。

网站的链接遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

流行的一些Schemes

Scheme	访问	用于
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

七.XHTML简介

什么是 XHTML？

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

为什么使用 XHTML？

因特网上的很多页面包含了“糟糕”的 HTML。

如果在浏览器中查看，有的HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则，并没有正常关闭标签）。

与 HTML 相比最重要的区别：

1.文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

2.元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

3.属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

八.HTML表单<form>

表单的作用就是收集用户的输入，将用户的信息提交给服务器，form元素包含多种表单元素，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<label>元素

专门用来设置表单的提示文字,其中有一个for 属性，需要指定一个表单项(如input标签)的id值

<input> 元素

<input> 元素有很多形态，根据不同的 type 属性。

type类型	描述
text	定义常规文本输入(文本输入框)。
radio	定义单选按钮输入（单选框）
submit	定义提交按钮（提交表单，提交按钮）
password	定义密码字段
checkbox	定义复选框（允许用户在有限数量的选项中选择零个或多个选项）
button	定义按钮
number（HTML5）	定义输入字段，可以添加限制以应用到输入字段
date（HTML5）	根据浏览器的支持，日期选择器会出现输入字段中
color（HTML5）	根据浏览器的支持，颜色选择器会出现输入字段中
…	…

value属性：规定输入字段的初始值
readonly属性：规定输入字段为只读（不可修改），readonly 属性不需要值
disabled属性：规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交。disabled 属性不需要值。
size属性：规定输入字段的尺寸（以字符计）
maxlength属性：规定输入字段允许的最大长度
以下为HTML5中新加入的属性
autocomplete属性：规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
autofocus属性：布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
form属性：规定form标签之外的<input> 元素所属的一个或多个表单
formaction属性：规定当提交表单时处理该输入控件的文件的 URL。覆盖 <form> 元素的 action 属性。
formenctype属性：规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。覆盖 <form> 元素的 enctype 属性。
formmethod 属性:定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。覆盖 <form> 元素的 method 属性。

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

<input list="browsers">

<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

**pattern 属性:**规定用于检查元素值的正则表达式。

附：

1.单选属性radio通过name属性分组，同一个name同一个组，这种选择按钮必须指定一个value属性，value会被提交给服务器，如果希望指定单选或多选按钮中指定默认选项，用checked属性 checked=“checked”

2.下拉列表的name属性指定给select ，value指定给option，如果希望指定下拉列表中指定默认选项，用selected属性 selected=“selected”，select专有属性 multiple=“multiple” 下拉列表可以变为多选下拉列表。

Action属性

action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页（javaWeb中的Servlet等等）。

如果省略 action 属性，则 action 会被设置为当前页面。

Method属性

method 属性规定在提交表单时所用的 HTTP 方法（GET或 POST）

何时使用GET？

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，因为如果用GET方法，表单数据在页面地址栏中是可见的

GET 最适合少量数据的提交。浏览器会设定容量限制。

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

何时使用POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 更加具备安全性，因为在页面地址栏中被提交的数据是不可见的。

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签

POST 请求对数据长度没有要求

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

Name属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

<input type="text" name="lastname" value="Mouse">

下面是form标签的属性列表：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

<select>元素

<select> 元素定义下拉列表：

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

<option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。也可以通过添加 selected 属性来定义预定义选项。

<textarea>元素

<textarea> 元素定义多行输入字段（文本域）,多行文本输入框，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素

<button> 元素定义可点击的按钮

丁一9527

关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录