HTML基础

最新推荐文章于 2022-03-07 17:07:36 发布

kuaileboy1989

最新推荐文章于 2022-03-07 17:07:36 发布

阅读量1.1k

点赞数

分类专栏： html/html5 文章标签： html

html/html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础

元素

HTML 元素指的是从开始标签到结束标签的所有代码。大小写不敏感，未来强制使用小写。

例如：

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题（共h1到h6六种标题）

<p> 与 </p> 之间的文本被显示为段落

<a href="www...">与 </a>之间的文本表示链接名称

<img src="***.jpg" width="***" height="***" /> 表示图片及尺寸

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。因此对于换行元素<br>，推荐使用<br/>，另如<link ... />、<img />。

html完整标签参考：http://www.w3school.com.cn/tags/index.asp

属性（包括事件）

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。

例如：

<a href=" http://weibo.com">新浪微博 </a>中href的指定。

<h1 align="center">表示标题居中，align已不赞成被使用。

<p style="color:red">This is a paragraph.</p>设置内容颜色。

属性值推荐使用双引号，除非值本身有双引号才使用单引号。

核心属性：class，id，style，title。

class：规定元素的类名（classname），大多数时候用于指向样式表中的类（class），也可以利用它通过 JavaScript 来改变带有指定 class 的 html元素。

id：规定元素的唯一id，id 属性可用作链接锚，通过 JavaScript或 CSS 为带有指定 id 的元素改变或添加样式。

style：规定元素的行内样式，覆盖任何全局的样式设定，value由一个或多个由分号分隔的 CSS 属性和值。区别于<style>标签只能用在<head>中，<style>标签见html样式章节。

title：规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。

备注：base、head、html、meta、param、script、style 以及 title 元素无以上4种属性。

语言属性：dir，lang，xml:lang。

dir：规定元素内容的文本方向。lrt从左到右（默认），rtl从右向左。

lang：规定元素内容的语言（网页或指定内容）。html网页：<html lang="en">...</html>，xhtml网页：<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">...</html>.

xml:lang：设置 XHTML 文档中元素内容的语言代码。

ISO 639-1 语言缩略词：http://www.w3school.com.cn/tags/html_ref_language_codes.asp

备注：base、br、frame、frameset、hr、iframe、param 以及 script 元素无以上3种属性。

键盘属性：accesskey，tabindex。

accesskey：设置访问元素的键盘快捷键。

tabindex：设置元素的 Tab 键控制次序。

事件属性：

窗口事件：onload, onunload(仅body, frameset有效)。

表单元素事件：onchange, onsubmit, onreset, onselect, onblur, onfocus（仅表单元素有效）。

图像事件：onabort（图像加载中断事件，仅img有效）。

键盘事件：onkeydown按下, onkeypress按下又松开, onkeyup松开（base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素无效）。

鼠标事件：onclick, ondbclick, onmousedown, onmousemove, onmouseout, onmouseover指针悬停, onmouseup(base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素无效)

html标准属性及事件属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

标题与段落

标题：<h1>到<h6>，html会自动地在块级元素（标题、段落<p>）前后添加空行。搜索引擎使用标题为网页的结构和内容编制索引。

水平线：<hr /> 标签在 HTML 页面中创建水平线。（但不是唯一办法。）

注释：

空格与空行：键盘打出的所有连续的空格或空行都会被算作一个空格。要完整显示空格与空行，可使用<pre>标签或者空格占位符‘  ’。

HTML 文本格式化标签

常用文本格式标签：

<b> 定义粗体文本。

<big> 定义大号字。

<em> 定义着重文字。

<i> 定义斜体字。

<small> 定义小号字。

<strong> 定义加重语气。

<sub> 定义下标字。

<sup> 定义上标字。

<ins> 定义插入字。

<del> 定义删除字。

更多参考：http://www.w3school.com.cn/html/html_formatting.asp

HTML 样式（CSS）

外部样式表：适合控制整体

<head>

</head>

内部样式表：在 head 部分通过 <style> 标签定义内部样式表，适合单个文件。

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式：在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。适合元素级的样式控制。

This is a paragraph

</p>

常用样式标签：

<head>

h1 {color:red}

p {color:blue}

</style>

</head>

<head>

</head>

<div> ：是一个块级元素，定义文档的分区或节，如果用 id 或 class 来标记 <div>，该标签的作用会更灵活。其align属性将被放弃。

<h3>This is a header</h3>

<p>This is a paragraph.</p>

</div>

div、id 和其他帮手参考：http://www.w3school.com.cn/xhtml/xhtml_structural_02.asp#div-class-id

<span>：格式化文档中的行内的小块或区域，可以为 span 应用 id 或 class 属性。

<p><span>some text.</span>some other text.</p>

<font>：规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。

<basefont>：定义基准字体。不赞成使用。请使用样式。

<center>：对文本进行水平居中。不赞成使用。请使用样式。

html使用<div>或<table>来布局：http://www.w3school.com.cn/html/html_layout.asp

HTML链接与图像

<a>：有两种使用该标签的方式：1、通过使用 href 属性 - 创建指向另一个文档的链接；2、通过使用 name 属性 - 创建文档内的书签。"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

Target 属性可以定义被链接的文档在何处显示。 target="_blank"表示在新窗口打开。

name 属性用于创建内部的标记，用来跳到本页面的某个区域或节。

<a href="#C4">查看 Chapter 4。</a> 点击后跳到下面这节：

<h2><a name="C4">Chapter 4</a></h2>

<img />：空标签，只包含属性，没有闭合标签。语法：<img src="url" alt="" />

alt属性用来在无法载入图像时，用来自定义作为替代显示的文本。

<map> ：定义一个带有可点击区域的图像映射。id属性必须有，name可以有。

<area />：永远在<map>内部，shape形状，coords坐标值。

</map>

HTML表格与列表

<table>：每个表格由 <table>开始，每个表格行由<tr>开始，每个表格数据由 <td> 标签开始，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

如果不定义边框属性border，表格将不显示边框。表格的表头使用 <th> 标签进行定义。

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<col>定义列的属性，如align对齐，width宽度。

更多表格操作：http://www.w3school.com.cn/html/html_tables.asp

列表：包括无序列表和有序列表。<ul>标签定义无序列表，粗体圆点排列，每项用<li>标签。<ol> 定义有序列表，使用数字开头，<li>标签。

自定义列表： <dl> 标签定义，每项以<dt>开始，项的定义以<dd>开始。

HTML表单

<form>：表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

<form>

用户：

<br />

密码：

</form>

单选按钮：

<form>

<input type="radio" name="sex" value="male" /> Male

<br />

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

</form>

复选框：

<form>

<input type="checkbox" name="bike" />I have a bike

<br />

<input type="checkbox" name="car" />I have a car

</form>

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

用户名:

</form>

更多表单：http://www.w3school.com.cn/html/html_forms.asp

HTML框架

使用框架，可以在同一个浏览器窗口显示多个页面。

<frameset>框架结构标签，定义如何将窗口分割为框架，每个 <frameset>定义了一系列行或列，属性rows或cols设定每行或列的面积比例。框架可以嵌套。不能与<body>同用，但考虑到浏览器不支持框架时添加 <noframes> 标签给予提示，此时提示内容嵌套在<body>内。

<frame>框架标签，定义了放置在每个框架中的 HTML 文档。加上属性noresize="noresize"后边框禁止拖动。

HTML背景与颜色

背景：包括bgcolor背景颜色和background背景图像两个属性，bgcolor属性值可以是十六进制数、RGB 值或颜色名，background属性值为图像的URL。<body>当中的以上属性已在最新标准中废弃。

颜色：分为颜色值和颜色名。颜色值又分为十六进制数和RGB值，分别由红、绿、蓝三色的十六进制或十进制组合而成，如#00FF00，rgb(0,255,0)。颜色名只有16种被最新的html标准支持：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow，其它颜色只能用颜色值。

HTML 颜色名与值对应表：http://www.w3school.com.cn/html/html_colornames.asp

HTML 4.01 快速参考源码

http://www.w3school.com.cn/html/html_quick.asp

高级进阶：

HTML文档声明

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML5：

<!DOCTYPE HTML>

HTML 4.01：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML头部元素：

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

<title>：定义文档的标题，在所有HTML/XHTML 文档中都是必需的。作用：定义浏览器工具栏中的标题；提供页面被添加到收藏夹时显示的标题；显示在搜索引擎结果中的页面标题。

<base /> ：为页面上的所有链接规定默认地址或默认目标（target）。

document.write("Hello World!")

</script>

为了确保在 XHTML 文档中脚本正确进行解析（内容含保留字），使用CDATA声明：

document.write("Hello World!")

//]]></script>

HTML 字符实体

html中，有些字符是预留的，必须使用字符实体名 &entity_name; 或字符实体号 &#entity_number; 来显示。不间断空格使用‘ ’。

HTML ISO-8859-1 字符实体完整参考手册：http://www.w3school.com.cn/tags/html_ref_entities.html

HTML URL及WEB主机

URL规则：

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

scheme - 定义因特网服务的类型: http, https, ftp, file等等。

URL编码：URL 只能使用 ASCII 字符集来通过因特网发送。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。

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

Web 主机教程：http://www.w3school.com.cn/hosting/index.asp

HTML DOM

HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。HTML 文档中的每个成分都是一个节点，节点之间彼此存在等级关系。通过 DOM，可访问 HTML 文档中的每个节点，两种方法：（1）通过使用 getElementById() 和 getElementsByTagName() 方法；（2）通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性。

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）；nodeValue（节点值）；nodeType（节点类型）。元素节点的 nodeName 是标签名称，属性节点的 nodeName 是属性名称，文本节点的 nodeName 永远是 #text，文档节点的 nodeName 永远是 #document。对于文本节点，nodeValue 属性包含文本；对于属性节点，nodeValue 属性包含属性值；nodeValue 属性对于文档节点和元素节点是不可用的。nodeType 属性可返回节点的类型。innerHTML指标签对中间的文本。

HTML DOM 对象参考手册：http://www.w3school.com.cn/htmldom/htmldom_reference.asp

常见错误纠正：

1、HTML 文档的字符编码未声明。如果该文件包含 US-ASCII 范围之外的字符，该文件将在某些浏览浏览器配置中呈现为乱码。页面的字符编码必须在文档或传输协议层声明。

所以要声明文件头，否则中文有可能乱码！！如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

转自：http://note.youdao.com/share/?id=415fb4030cd5e5d76815d71ba1e360d9&type=note