2. HTML Basic

来源：互联网发布：linux部署php网站编辑：程序博客网时间：2024/05/16 23:33

/* 本篇内容主要学习自w3schools(English，要翻墙)、w3school（中文)*/

1. 认识HTML

HTML，Hypertext markuplanguage, 超文本标记语言（并非一种编程语言），由一组标签（tags）组成。标签和内容共同组成一个Html文档，也就是网页。一个HTML文档是纯文本，需要进过Web浏览器解释才能够呈现出它的逻辑视图。

2. HTML基础概念

2.1 标签

一个HTML标签是指由“<>”包围的一个关键词，用来标记内容的呈现方式。标签通常成对出现，位于前面的标签为开始标签（开放标签），语法为“<tagname>”；后面的为结束标签（闭合标签），语法为“</tagname>”。有一些标签只有开始标签，如<br>。

注：

a. 一对标签如果缺失结束标签仍然会生效，但是失效的位置是不确定的（与后文相关），因此会造成很多意想不到的bug。同时XHTML、XML强制要求必须有闭合标签。因此书写HTML标签时不要漏掉闭合标签，包括只有开始标签的标签，他们在开始标签内闭合，如<br/>。

b. 标签大小写不敏感，但是在XHTML、XML、HTML5中强制使用小写，同时小写更便于阅读，因此使用小写的标签是一个良好的习惯。

2.2 元素

标签及其所包围的内容叫做一个HTML元素，如”<p>我们是一个元素</p>“。有些元素没有内容，并且其标签在开始标签内闭合，这种元素叫做空元素，如<br />、<img src=”” />。

大多数元素允许嵌套使用，即在一个元素中包含另外一个元素，如<a href=””><imgsrc=”” /></a>，它为一个图片建立了超链接。

2.3 元素属性

一个元素往往具有属性，属性为元素附加了许多额外的信息。属性总是定义在开始标签中，标签名之后，语法为name=”value”，如<p align=”center”>这是一个居中段落</p>。

下面是一些常用的可以被任意一个元素使用的属性：

class

为元素定义了一个或多个类名（指一个样式表中的类）

为元素定义了唯一的id

style

为元素定义了一个内联的CSS

title

为元素定义了关于这个这个元素的额外信息（出现在工具提示框中）

注：

a. 一个属性名尽管也是大小写不敏感的，但是仍然推荐使用小写，理由以上述一致。

2.4 基本框架

一个HTML的基本框架如下：

<!DOCTYPE html><html> <!--This is an html document --><head> <!-- headcomponent--></head><body> <!--body component --></body></html>

第一行告诉浏览器此文档类型是一个HTML5的文档。

html标签之间的内容描述这个网页，网页的描述部分都位于这中间。

head标签之间的内容声明了html文档的头部。

body之间声明了html将要呈现的部分。

中的内容是注释。

2.5 文档类型

网页的类型有：HTML 5、HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset、XHTML 1.0 Strict、XHTML 1.0 Transitional、XHTML 1.0 Frameset、XHTML 1.1等。

他们的具体声明方式见于：http://www.w3schools.com/tags/tag_doctype.asp

2.6 head

<head>标签为head元素提供了容器。在head元素中，可以为文档提供脚本、寻找样式表的指令、提供源信息等操作。

2.7 body

body中定义文档将要在浏览器中呈现的内容。

3. HTML常用内容

3.1 标题

标题的语法为”<hn>标题</hn>”，1 ≤ n ≤ 6。

标题除了为文字附加”粗体、更大的字号“以外，还回味文章建立索引，因此不要用标题标签来代替粗体和字号标签。

一个标题有可以有对齐属性，但是我们在之后将不会再使用它，他已经被HTML5禁用，同时CSS对此有完美的支持。对于文本样式的操作在此只举一例，之后的实现都将采用CSS。

<h1 align=”center”>我是一个居中的标题1.</h>

等价于

<h1 style=”text-align: center”>我是一个居中的标题1.</h>

值得一提的是<hr />标签，为文档插入一个水平分割线。

3.2 段落

段落的语法为”<p>段落</p>”。

段落本身并没有什么好说的，但是在段落、标题和其他文本中有一些值得我么注意的事项：

有许多字符在html中因为被标记语言所使用，因此我们无法直接打出。而在段落、标题中的多个空格、换行等至多算作一个空格。如果想打出这些符号一种方式使用预处理段落，语法规则为<pre></pre>这对于书写代码等对格式要求较高的文体较为实用。而另一种则是使用“实体”，后续将会介绍。

3.3 文本格式

由于CSS对文本提供了便捷、完美、可充用的支持，一般我们不会在body区对文本进行额外的标记。但是<b>粗体</b>、<i>斜体</i>标签使用很广泛且很方便，因此我们仍然会继续使用。

3.4 超链接

语法为<a href=”链接地址”>附加超链接的内容</a>。（a 是 anchor的简写）

万维网是由相互连接的超文本文档组成的系统，使它们相互连接的正是超链接。因此超链接十分的有用，并且被广泛的使用在各个网页之中。

超链接的常用的属性有target——标明的文档将被打开的方式、id——为页内设置超链接id等属性。

targe的属性值如下：

_blank

在一个新窗口或选项卡中打开该网页

_self

在同一个框架中打开该网页（默认值）

_parent

在父框架中打开该网页

_top

在全屏窗口中打开该网页（似乎没用）

framename

在一个有名框架中打开该网页

id的用法是在一个将要被连接的页内位置中设置<a id=”xx”>内容</a>。在使用此连接地方<a href=”#xx”>链接</a>。

如：

<a href=”#sex”>性别是什么？</a><p><a id=”sex”>公</a></p>

点击超链接页面会跳转到名为”原网址#sex”的地方。

注意：

a. 确保你的每一个超连接后面（除id）都以一个斜杠“/”结尾，否则浏览器将会自动补充此斜杠，造成效率降低。

3.5 图片

基本语法为<img src=”url” />

可添加的属性有很多如对齐（HTML5舍弃），变化文字（当图片无法正常显示时的文字），宽度（width），高度（heigth），映射等。

下面这个例子设置了一个图片的长宽和如果它未被正常显示将会出现的文字。

<img src="./smiley.gif"alt="Smiley face" width="32" height="32" />

img中的映射属性较为有趣，它为图片建立了一张映射表。下面是一个例子（我没钱买%>_<%，求土豪包养）。

看到这张图我一个很自然的想法是点击“DNF品牌站”这行文字我就能进入DNF品牌站点，“查看详情GO”处我能去查看详情。所以我们可以写如下代码：

<img src="./dnf.jpg" alt="DNF背景" width="594" height="254"usemap="#main_map" /><!-- main_map is a name of the client-sidemap --><map name="main_map"><area shape="rect" coords="60, 175, 186, 201" alt="DNF品牌站" href=http://www.qq.com/ /><area shape="rect" coords="360, 195, 480, 215" alt="土豪飞机" href="http://www.tuhao.com/" /></map>

3.6 列表

HTML中的列表有三种：有序列表(ol），无序列表（ul）和描述列表（dl）。

有序列表将会自动为内容编序号，语法是

<ol>     <li>这一行的内容</li></ol>

我们可以为有序列表设置一些有用的属性，比如开始的序号<ol start=”0”>。

无序列表不会为内容编号，取而代之的是在之前添加某些图形或图片来标识每一条内容。它的语法与有序列表相似，只是将ol变为ul。

描述列表它是由一系列的术语/名称和对应的术语/名称组成的列表，相当于是一种词典。它会为后者自动缩进。语法如下：

<dl>     <dt>术语/名称</dt>     <dd>解释</dd></dl>

有序列表的序号样式、无序列表的图案都可以用type属性来改变，但是CSS对此有更好的支持，且HTML5舍弃了这些属性，因此我们将会在CSS部分学习这些属性。

3.7 表格

一个表格由一行行的表格<tr>组成，每一行的表格由表头<th>异或表格元素<td>组成。因此我们先声明行，再声明行中的每一列。

<table>    <tr>         <th>表头</th>     </tr>     <tr>         <td>内容</td>     </tr></table>

表格除了用于制表之外，另一个功能是用于排版（当然，这被认为是一种不正确的使用）。而表格也有不同的样式、表框等等，这些内容将在CSS中学习。

注意：如果该行只有一个item，同样需要使用<tr><td></td></tr>的形式，因为<tr>标明的是行，<td>才标明的是呈现的内容。

3.8 排版

HTML元素可以分为块元素和行内元素（内联元素）。块元素将会在之前的内容后的新的一行来呈现，并且它会中断外围元素的属性的影响，并以自己的属性来呈现。如<h1>、<p>。

一个具体的例子：

<p style="color: red">你好吗？<ul>     <li>好</li></ul>大家好才是真的好</p>

它的输出结果有三行，“你好吗？”是绿色，而“大家好才是真的好”变为了黑色。原因是<p>在<ul>前被浏览器默认补充了</p>（<p>不允许嵌套块元素），段落再次就中断了。后续的</p>之前的内容是按照一般的段落来写的。如果是外层标签是允许嵌套块颜色的（如body），则在嵌套的块元素外会恢复父元素属性（参见HTML标签嵌套表）。

行内元素将会继续呈现上一个元素对此的影响。于上一个元素后呈现，如果没有特别改变，将会继续沿用上个元素的属性。如<a>、<img>、<td>等。

<body><p style="background-color: red">你好吗？<a href="">好</a>大家好才是真的好</p>

这里会在一行呈现，背景颜色都为红色。

HTML中<div>标签是一个块元素，它除了对内容分块以外没有任何其他意义。<span>是一个行内元素，同样是不具有任何的格式信息。利用这两个标签，可以很方便的对网页进行排版。

下面代码将会呈现这样的视图：

<div id="container"style="width: 500px"><div id="head" style="height:35px; background: red;"><h1>这是一个标题</h1></div><div id="menu" style="height: 200px; width: 100px; background: pink;float: left">     <b>Menu</b></br/>     HTML<br/>     CSS<br/></div><div id="context" style="height:200px; width:400px; background: gray;float: left; text-align: center; vertical-align: bottom">     <p>这是一行段落<p></div></div>

如果使用table来实现：

<table style="width:500px;border-collapse:collapse"><tr>     <td colspan="2" style="height:35px; background-color:red">     <h1>这是一个标题</h1>     </td></tr><tr style="height:200">     <td style="width:100px; height:200px; background-color:pink">         <b>Menu<b><br/>         HTML<br/>         CSS<br/>     </td>     <td style="width:400px; height:200px; background-color:gray">         <p>这是一个段落</p>     </td></tr></table>

table的实现，逻辑上稍显复杂，并且效果并非很好。而div的物理分区就是其逻辑视图中的分区，较为直观易操作。而div最大的优点在于，使用非内联的CSS（上面的代码中使用的是内联的CSS，并非是好的习惯）来控制div的样式，可以十分方便的修改排版。只需要修改CSS中的内容，排版的问题就能够解决。而使用table需要重新在table处进行修改。

span的使用常见于修改一个段落、标题中部分关键字的样式，用法较简单。

3.9 head

<head>标签是一个容器，其中包含着这个HTML文档的头部的信息。下列是一些简单的head信息。

<title>文档的标题</title>告知浏览器此文档的标题。

<base />。base为文档中的相对url提供了基url，以及页面中的url提供了打开方式。它包含两个属性：href，target。如果herf未提供，则基url为与此网页所在基url相同；target未提供，则默认为”_self”；它们两者至少提供一个。注意：base应写做head块中的第一个元素，这样确保之后的所有url都遵循这一规则，否则易产生混淆。

Attribute

Value

Description

charset

character_set

设置浏览器呈现此文档的字符集

content

text

给出相关http-equiv或name属性的值

http-equiv

content-type

default-style

refresh

指定在http响应中，服务器返回给浏览器的内容的头部。

name

application-name
author
description
generator
keywords

指定了一个元数据的名称

尽管meta信息不会在实际网页中显示，但是不意味它不会显示。比如谷歌搜索w3schools可以看到：

网址下面的一行描述就是由下面的代码得到的

<meta name=”description” content=”HTML CSSJavaScript jQuery AJXA XML ASP.NET SQL Tutorials References Examples”>

这行代码就出现在网址所对应网页的head中。

4. 其他

4.1 颜色

颜色在html和CSS中用途很广，比如背景颜色background-color,文本颜色color，边框颜色border-color等等。

为了表示一个颜色我们可以使用它的名称来指代，如green、red、blue；或者使用它24位RGB色的16进制数，并在前面加上#，如#00ff00、#ff0000、#0000ff；或者使用RGB序偶，如rgb(0,255, 0)、rgb(255, 0, 0)、rgb(0, 0255）。

4.2 实体

实体就是html的保留字符。因为html占用了许多符号来组织自己，因此这些符号不能够直接被使用。如果想要在非预处理段落中使用，则需要使用特殊方式来表示。一个实体可以用两种方式来使用。第一种是“&+实体名”，如”&pound”会显示一个英镑的符号；第二种是”&+#+实体数值”，如”&#174”也会显示英镑符号。而一个实体数值就是该实体在ISO-8859-1中的编号。

注意：实体的名称大小写敏感，实体的数值为10进制。

常用的实体有：

实体

名称

数值

&nbsp

&#160

&lt

&#60

&gt

&#62

&amp

&#38

&cent

&#162

&pound

&#174

&yen

&#165

€

&euro

&#8364

&sect

&#167

&copy

&#169

&reg

&#174

™

&trade

&#8482