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>
作用:声明文档的解析类型(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中的内容其实就是各个参数的变量值.
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:外边距
像素百分比(最好通过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>元素可用于部分文本设置样式属性