HTML

Posted Truth & Free

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML相关的知识,希望对你有一定的参考价值。

 

 

1. HTML元素

html 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

空元素在开始标签中关闭。

大多数 HTML 元素可拥有属性。

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

HTML标签列表:http://www.w3school.com.cn/tags/html_ref_byfunc.asp

2. HTML属性

属性为 HTML 元素提供附加信息。

属性总是以名称/值对的形式出现,比如:name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性值应该始终被包括在引号内。

HTML全局属性:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

3. HTML标题

标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

<hr /> 标签在 HTML 页面中创建水平线。

4. HTML段落

段落是通过 <p> 标签定义的。

<br /> 标签在不产生一个新段落的情况下进行换行。

所有连续的空格或空行都会被算作一个空格。

5. HTML样式

style 属性用于改变 HTML 元素的样式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

6. HTML格式化

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。

HTML文本格式化:http://www.w3school.com.cn/html/html_formatting.asp

7. HTML引用

<q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。

<blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

<abbr> 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<dfn> 元素定义项目或缩写的定义。

<address> 元素定义文档或文章的联系信息(作者/拥有者)。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<cite> 元素定义著作的标题。浏览器通常会以斜体显示 <cite> 元素。

<bdo> 元素定义双向重写(bi-directional override)。如果您的浏览器支持 bdo,则文本将从右向左进行书写(rtl).

HTML 引文、引用和定义元素

标签

描述

<abbr>

定义缩写或首字母缩略语。

<address>

定义文档作者或拥有者的联系信息。

<bdo>

定义文本方向。

<blockquote>

定义从其他来源引用的节。

<dfn>

定义项目或缩略词的定义。

<q>

定义短的行内引用。

<cite>

定义著作的标题。

8. HTML计算机代码

标签

描述

<code>

定义计算机代码文本

<kbd>

定义键盘文本

<samp>

定义计算机代码示例

<var>

定义变量

<pre>

定义预格式化文本

9. HTML注释

注释标签 <!-- --> 用于在 HTML 插入注释。

10. HTML CSS

CSS 可以通过以下方式添加到HTML中:

1) 内联样式 - 在HTML元素中使用"style" 属性。

2) 内部样式表 - 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS。

3) 外部样式表 - 使用外部 CSS 文件。

标签

描述

<style>

定义文本样式。

<link>

定义资源引用。

11. HTML链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML使用标签 <a>来设置超文本链接:

<a href="http://www.w3school.com.cn/">Visit W3School</a>

target 属性,定义被链接的文档在何处显示。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name/id 属性,规定锚(anchor)的名称,创建 HTML 页面中的书签。<a name="tips">基本的注意事项 - 有用的提示</a>

<a href="#tips">有用的提示</a>

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

12. HTML图像

在 HTML 中,图像由 <img> 标签定义。<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

Src属性,源属性的值是图像的 URL 地址。

<img src="url" />

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

标签

描述

<img>

定义图像。

<map>

定义图像地图。

<area>

定义图像地图中的可点击区域。

13. HTML表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。

表格中的空单元格:添加一个空格占位符&nbsp;,就可以将边框显示出来。

表格

描述

<table>

定义表格

<caption>

定义表格标题。

<th>

定义表格的表头。

<tr>

定义表格的行。

<td>

定义表格单元。

<thead>

定义表格的页眉。

<tbody>

定义表格的主体。

<tfoot>

定义表格的页脚。

<col>

定义用于表格列的属性。

<colgroup>

定义表格列的组。

14. HTML列表

1) 无序列表,始于 <ul> 标签。每个列表项始于 <li>。

2) 有序列表,始于 <ol> 标签。每个列表项始于 <li> 标签。

3) 自定义列表,以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

15. HTML

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

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

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

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

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

16. HTML

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式,或者为不同的类设置不同的样式。

1) 分类块级元素:设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类。

2) 分类行内元素:设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。

17. HTML布局

1) 使用<div>元素

<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

2) 使用HTML5

header

定义文档或节的页眉

nav

定义导航链接的容器

section

定义文档中的节

article

定义独立的自包含文章

aside

定义内容之外的内容(比如侧栏)

footer

定义文档或节的页脚

details

定义额外的细节

summary

定义 details 元素的标题

3) 使用<table>元素

<table> 元素的作用是显示表格化的数据,能够通过 CSS 设置表格元素的样式。

18. HTML响应式设计

RWD 指的是响应式 Web 设计(Responsive Web Design)。RWD 能够以可变尺寸传递网页。

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

19. HTML框架

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

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

使用框架的坏处:

û 开发人员必须同时跟踪更多的HTML文档

û 很难打印整张页面

为不支持框架的浏览器添加 <noframes> 标签。

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!

内联框架:

<iframe> 标签用于在网页内显示网页。

height 和 width 属性用于规定 iframe 的高度和宽度。

frameborder 属性规定是否显示 iframe 周围的边框。

iframe 可用作链接的目标(target)。链接的 target 属性必须引用 iframe 的 name 属性。

20. HTML背景

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

1) bgcolor:背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

2) background:背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

21. HTML脚本

<script> 标签用于定义客户端脚本,比如 javascript。script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

22. HTML头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

标签

描述

<head>

定义关于文档的信息。

<title>

定义文档标题。

<base>

定义页面上所有链接的默认地址或默认目标。

<link>

定义文档与外部资源之间的关系。

<meta>

定义关于 HTML 文档的元数据。

<script>

定义客户端脚本。

<style>

定义文档的样式信息。

23. HTML实体

HTML 中的预留字符必须被替换为字符实体。

显示结果

描述

实体名称

实体编号

 

空格

&nbsp;

&#160;

<

小于号

&lt;

&#60;

>

大于号

&gt;

&#62;

&

和号

&amp;

&#38;

"

引号

&quot;

&#34;

\'

撇号

&apos; (IE不支持)

&#39;

&cent;

&#162;

£

&pound;

&#163;

¥

日圆

&yen;

&#165;

欧元

&euro;

&#8364;

§

小节

&sect;

&#167;

©

版权

&copy;

&#169;

®

注册商标

&reg;

&#174;

商标

&trade;

&#8482;

×

乘号

&times;

&#215;

÷

除号

&divide;

&#247;

24. HTML URL

网址遵守以下的语法规则:

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

clip_image001 scheme - 定义因特网服务的类型。最常见的类型是 http。

clip_image001[1] host - 定义域主机(http 的默认主机是 www)

clip_image001[2] domain - 定义因特网域名,比如 w3school.com.cn

clip_image001[3] :port - 定义主机上的端口号(http 的默认端口号是 80)

clip_image001[4] path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

clip_image001[5] filename - 定义文档/资源的名称

Scheme

访问

用于...

http

超文本传输协议

以 http:// 开头的普通网页。不加密。

https

安全超文本传输协议

安全网页。加密所有信息交换。

ftp

文件传输协议

用于将文件下载或上传至网站。

file

 

您计算机上的文件。

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

URL编码参考手册:http://www.w3school.com.cn/tags/html_ref_urlencode.html

25. HTML表单

<form> 元素定义 HTML 表单,HTML 表单用于收集用户输入。

1) 表单元素

clip_image001[6] <input> :输入域

Input属性:http://www.w3school.com.cn/tags/tag_input.asp

Type属性值

描述

button

定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。

checkbox

定义复选框。

file

定义输入字段和 "浏览"按钮,供文件上传。

hidden

定义隐藏的输入字段。

image

定义图像形式的提交按钮。

password

定义密码字段。该字段中的字符被掩码。

radio

定义单选按钮。

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

text

定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

clip_image001[7] <lable> :<input> 元素的标签,一般为输入标题

clip_image001[8] <optgroup> :定义选项组

clip_image001[9] <textarea> :文本域(多行输入)

clip_image001[10] <fieldset> :一组相关的表单元素,并使用外框包含起来

clip_image001[11] <legend> :定义了 <fieldset> 元素的标题

clip_image001[12] <select> :下拉列表

clip_image001[13] <option> :定义下拉列表中的选项

clip_image001[14] <button> :点击按钮

HTML5新增的输入类型:color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week

HTML表单标签:http://www.runoob.com/html/html-forms.html

2) 表单属性

属性

描述

accept-charset

规定在被提交表单中使用的字符集(默认:页面字符集)。

action

规定向何处提交表单的地址(URL)(提交页面)。

autocomplete

规定浏览器应该自动完成表单(默认:开启)。

enctype

规定被提交数据的编码(默认:url-encoded)。

method

规定在提交表单时所用的 HTTP 方法(默认:GET)。

name

规定识别表单的名称(对于 DOM 使用:document.forms.name)。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标(默认:_self)。

何时使用GRT?

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。当您使用 GET 时,表单数据在页面地址栏中是可见的:

何时使用POST?

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

<fieldset> 元素组合表单中的相关数据,<legend> 元素为<fieldset> 元素定义标题

以上是关于HTML的主要内容,如果未能解决你的问题,请参考以下文章

HTMLHTML 标签 ③ ( 链接标签 | 注释标签 )

HTMLHTML 表单 ⑤ ( form 表单域 )

HTMLHTML 网页自动刷新

HTMLHTML 网页自动刷新

HTMLHTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )

PHP-HTMLhtml重要知识点笔记