1 HTML介绍

1.1 介绍

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

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

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

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

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

网页文件的扩展名：.html或.htm

1.2 HTML的网络术语

网页：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： <p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。

1.3 HTML 标签

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

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1.4 HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

1.5 HTML 网页结构

1.6 HTML版本

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

从初期的网络诞生后，已经出现了许多HTML版本:

1.7 编写HTML的规范

（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>

（2）所有的标记都必须小写。

（3）所有的标记都必须关闭。

双边标记：<span></span>
单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />

（4）所有的属性值必须加引号。<h1 id="head"></h1>

（5）所有的属性必须有值。<input type="radio" checked="checked" />

2 HTML基本语法特征

2.1 html标签特征：

2.1.1 空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

2.1.2 对空格和换行，tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。

2.1.3 标签要严格封闭

标签对大小写不敏感。

<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

推荐使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

3 HTML结构详解

3.1 案例

 1 <html> <!--HTML 页面的根元素-->
 2     <head>
 3         <meta charset="UTF-8">
 4         <title>
 5             <!--元素描述了文档的标题-->
 6         </title>
 7     </head>
 8     <body><!--元素包含了可见的页面内容-->
 9         <h1><!--定义一个大标题--></h1>
10         <p><!--定义一个段落--></p>
11     </body>
12 </html>

4 HTML元素

4.1 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 文档由嵌套的 HTML 元素构成。

4.2 HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

5 HTML标签

5.1 文档声明头

<!DOCTYPE html>

5.2 头标签

head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>

<title>：指定整个网页的标题，在浏览器最上方显示。
<meta>：提供有关页面的基本信息
<link>：定义文档与外部资源的关系。
<style>:定义内部样式表与网页的关系

5.2.1 meta标签

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

（1）http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

（2）name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

<meta name=viewport content="width=device-width, initial-scale=1">

上面这个标签，是让我们网页支持移动端，移动设备优先（了解即可）

5.2.2 title标签

<title>test</title>

5.2.3 link 标签

<link rel="shortcut icon" href="http://hcdn1.luy.com/s-study-logo.png"> //网页标题旁边的小图片
<link rel="stylesheet" href="./index.css">    //链接外部css文件

css样式也可以这么写：　　　　

        <style type="text/css">
            h2{
                color: blue;
            }
        </style>

5.2.4 script标签

<script src="pro.js"></script>   //链接外部js文件

5.3 body　　

5.3.1 字体标签

　　h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

6 HTML属性

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

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

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

注意：属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性

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

双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditableNew	规定是否可编辑元素的内容。
contextmenuNew	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggableNew	指定某个元素是否可以拖动
dropzoneNew	指定是否将数据复制，移动，或链接，或删除
hiddenNew	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheckNew	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translateNew	指定是否一个元素的值在页面载入时是否需要翻译

p标签的嵌套多注意！！！！！！

p中只能存放字体、图片、表单控件不能放盒子标签

7 html中标签的分类：

7.1 行内标签

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

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

（1）在一行内显示 span strong em i del a

(2)不能设置宽高默认的宽和高是内容填充

1.1 行内块标签 img input

(1) 在一行内显示

(2) 可以设置宽高

7.2 块级标签

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>< div >

（1）独占一行

(2）可以设置宽高,如果不设置宽和高，默认的宽是父亲的100%。高度是内容的高度

注意：p标签不能包含容器标签

总结：

一：标签

1：行内标签(a span I em strong b label)

（1）在一行内显示

（2）不能设置宽高，默认的宽高是内容的宽高

（3）行内块标签：(td img)

input（表单控件） img

-在一行内显示

-可以设置宽高

2：块级标签(h1 div ul li ol dl dd form table )

（1）独占一行

（2）可以设置宽高

（3）h1~h6

h1：页面中只有一个h1，为了这个搜索引擎

补充：如何将行内标签转为块级标签

二：div模型（division）

div+span网页布局

注意：p标签只能放文本 /图片/文字/表单元素

posted on 2018-09-16 23:09 诚意阅读(123) 评论(0) 收藏举报

刷新页面返回顶部

导航

1 HTML介绍

1.1 介绍

1.2 HTML的网络术语

1.3 HTML 标签

1.4 HTML 元素

1.5 HTML 网页结构

1.6 HTML版本

1.7 编写HTML的规范

2 HTML基本语法特征

2.1 html标签 特征：

2.1.1 空白折叠现象

2.1.2 对空格和换行，tab不敏感

2.1.3 标签要严格封闭

3 HTML结构详解

3.1 案例

4 HTML元素

4.1 元素语法

4.2 HTML 空元素

5 HTML标签

5.1 文档声明头

5.2 头标签

5.2.1 meta标签

5.2.2 title标签

5.2.3 link 标签

5.2.4 script标签

5.3 body

5.3.1 字体标签

6 HTML属性

7 html中标签的分类：

7.1 行内标签

7.2 块级标签

总结：

一：标签

二：div模型（division）

2.1 html标签特征：

5.3 body　　