HTML基础知识概括

1.html的概念

HTML是用来描述网页的一种语言.

HTML指的是超文本标记语言(HyperText Markup Language)

HTML不是一种编程语言,而是一种标记语言(markup language)

标记语言是一套标记标签

HTML使用标记标签来描述网页

2.HTML文档

HTML文档描述网页

HTML文档包含HTML标签和纯文本

HTML文档也被称为网页

WEB浏览器的作用是读取HTML文档,并以网页的形式显示出来.浏览器不会显示HTML标签,而是使用标签来解释页面的内容;

一个新建的HTML模板如下所示:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

	<title></title>

</head>

<body>

</body>

</html>

声明位于文档的最前面的位置,处于标签之前.此标签告诉浏览器使用什么样的html或者xhtml规范.

作用:声明文档的解析类型(document compatMode),避免浏览器的怪异模式.

document compatMode有两种:

BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面.

CSS1Compat:标准模式,浏览器使用W3C的标准解析页面.

这个属性会被浏览器识别并使用,但是如果网页没有使用DOCTYPE的声明,那个默认使用怪异模式.

3.HTML标签

HTML标记标签通常被称为HTML标签(HTML tag).

HTML标签是由尖括号包围的关键词,比如

HTML标签通常是成对出现的,比如

标签分为两个部分:开始标签和结束标签,标签之间的部分也叫做标签体

开始和结束标签也被称为开放标签和闭合标签

标签可以有若干个属性,也可以不带属性

标签可以嵌套,但是不能交叉嵌套

标签的语法:

<标签名 属性1="属性值1" 属性2="属性值2"...>内容部分</标签名>

<标签名 属性1="属性值1" 属性2="属性值2".../>

HTML元素

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

与之间的文本描述网页

<p></p>                     指定一个段落

<a href="b.html"></a>       指向另外一个链接

<br/>

开始标签常被称为开放标签(opening tag)

结束标签常被称为闭合标签(closing tag)

HTML元素语法:

HTML元素以开始标签起始

HTML元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些HTML元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数HTML元素可拥有属性

1.head内常用的标签:

元素出现在文档的开头部分,在它之间的元素在特殊意义,但是不会出现在浏览器的文档窗口里
####1.``标签

<meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词.

<meta>标签位于文档的头部,不包含任何内容.

<meta>提供的信息是用户不可见的

<meta>标签的组成:meta标签共有两个属性,分别是http-equiv属性和name属性.

不同的属性有不同的参数值,不同的参数值提供不同的网页功能.

http-equiv属性相当于http的文件头作用,可以向浏览器传回一些有用的信息,以帮助正确的显示网页内容.

与之对应的属性值为content,content中的内容其实就是各个参数的变量值.

这个标签会使用浏览器打开本网页2s后打开url中指定的网址

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要便于搜索引擎机器人查找信息和分类信息用的.

<meta name="keywords" content="meta总结,html meta,meta属性">

<meta name="desciption" content="html content">

2.非meta标签

<title>test</title>定义网页的标题,在浏览器标题栏显示

<link res="icon" href="http://www.baidu.com">指定网页标题前面的小图标

<link res="stylesheet" href="css.css"> 指定运行的css文件

<script src="hello.js"></script>指定运行的javascript脚本文件

2.内常用的标签

与之间的文本是可见的网页主体内容

基本标签:

<hn>        n的取值范围是1~6,从大到小,用来表示标题

<p>         段落标签,里面的内容被换行,并且其上下内容之间有一行空白

<b><strong> 加粗标签

<strike>    为文字加上一条中线

<em>        文字变成斜体

<sup>       上角标

<sub>       下角标

<br>        换行

<hr>        水平线

1.HTML标题

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

<h1>This is a heading</h1>	指定一级标题

<h2>This is a heading</h2>	指定二级标题

<h3>This is a heading</h3>	指定三级标题

<h4>This is a heading</h4>	指定四级标题

<h5>This is a heading</h5>	指定五级标题

<h6>This is a heading</h6>	指定六级标题

2.HTML超链接标签

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,

还可以是一个图片,一个电子邮件,一个文件,甚至是一个应用程序.

HTML链接通过<a>标签来进行定义的

<a href="http://www.baidu.com">百度</a>

在href属性中指定链接的地址

绝对URL地址:指向另一个站点(href="http://www.baidu.com")

相对URL地址:指向当前站点中的确切路径(href="index.html")

锚URL地址:指向页面中的锚(href="#top")

3.HTML图像

HTML图像是通过标签进行定义的

<img src="a.jpg" />

在src属性中指定图片的地址,可以是本地地址,也可以是网络地址.

中可以使用的属性有:

src         要显示的图片的路径

alt         图片没有加载成功时的提示

title       鼠标悬浮时的提示信息

width       图片的宽

height      图片的高(图片的宽和高两个属性只用一个会自动等比缩放)

图像的尺寸是以属性的形式提供

<img src="a.jpg" alt="test1" title="test2" width="128" height="128" />

表示图片正常加载时会加载名为"a.jpg"的图片,鼠标停在图片时会显示"test2";

当图片加载失败时会显示"test1"的信息.

4.列表标签

HTML支持有序列表,无序列表和定义列表

无序列表:

	无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记

	无序列表始于<ul>标签.每个列表项始于<li>.

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

有序列表

	有序列表也是一列项目,列表项目使用数字进行标记

	有序列表始于<ol>标签,每个列表始于<li>标签.

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

定义列表

	自定义列表不仅仅是一列项目,而是项目及其注释的组合

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

	定义列表的列表项内部可以使用段落,换行符,图片,链接以及其他列表等.

5.表格标签:

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成.

单元格里可以包含文字,列表,图案,表单,数字符号,预置文本和其他的表格等内容.

表格最重要的目的是显示表格类数据,表格类数据是指最适合组织为表格格式(即按行和列组织)的数据.

表格的基本结构:

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

字母td指表格数据(table data),即数据单元格的内容.

数据单元格可以包含文本,图片,列表,段落,表单,水平线,表格等.

表格的表头使用<th>标签进行定义.浏览器会把表头显示为粗体居中的文本.

表格标签:

<table>         定义表格

<caption>       定义表格标题

<th>            定义表格的表头

<tr>            定义表格的行

<td>			定义表格的单元

<thread>		定义表格的页眉

<tbody>         定义表格的主体

<tfoot>         定义表格的页脚

<col>           定义用于表格列的属性

<colgroup>      定义表格列的组

属性:

border:表格边框

cellpadding:内边距

cellspacing:外边距

width:像素百分比(最好通过css来设置长宽)

rowspan:单元格紧跨多少行

colspan:单元格横跨多少列(即合并单元格)

6.HTML中的`<div>`和`<span>`

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

块元素

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

块级元素:block level element

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

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

内联元素:inline element

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

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

7.HTML的`<div>`元素

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

<div>元素没有特定的含义,由于属于块级元素,浏览器会在其前后显示拆行.

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

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

使用<table>元素进行文档布局不是表格的正确用法。

<table>元素的作用是显示表格化的数据。

8.HTML`<span>`元素

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

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