HTML网页开发10.14

HTML概念

--HTML (Hypertext Markup Language):超文本标记语言。使用来制作网页的一种标记语言。

--HTML是一种纯文本格式的文件，内部只能书写文组内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，像这种效果就是HTML语言区别于其他文件的不同之处。

--HTML的重要概念有两个：一个是超文本一个是标记。超文本是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等。标记，又叫做标签（HTML Tag），有特殊的写法和规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示。

--HTML的语义化 HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文本添加了不同的语义，能够让网站的结构划分更加清晰。语义化网页的优势：1.方便代码的阅读和后期维护2.便于浏览器或是网络爬虫更好地解析网站内容3.使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

HTML版本规范和标签语法

--HTML规范版本

W3C : world wide web consortium,万维网联盟。专门发布和维护互联网的规范和标准。

--HTML标签：

HTML标签通常被称为HTML标签（HTML Tag）。标签在书写和使用过程中，必须遵循特定的语法。

--HTML标签语法：

1. 标签名必须书写一对尖括号<>内部。 <html></html>

2.标签名分为但标签和双标签，双标签必须成对出现。

<p></p> 双标签 <br />单标签

3.双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签也需要进行自封闭书写。在HTML5中单标签可以不写关闭符号。 <br>

元素内容

1.元素内容可以是纯文本，也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况，我们可以称为嵌套，也就是div标签元素内部嵌套了p标签元素。

<div><p>div元素内部嵌套p元素</p></div>

2.一个HTML元素div的内容可能是多个其他元素组成，例如p和h1，此时我们习惯称div是p和h1的父级元素，p和h1是div的子级元素，而p和h1属于同级元素，这种嵌套关系可以有多层。

3.单标签是不能添加元素内容的，可以称为空元素。

-- 标签级别

根据标签内部可以存放的内容不同，可以将双双标签划分为两个级别

容器级: 标签内部可以存放任意内容，包含容器级标签。比如h1，div等。

文本级：标签内部只能存放文本或类似文字的内容，比如存放图片、表单元素等。

--HTML元素特性

1. 元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和借宿以及互相之间的嵌套关系。

等价于： <p>段落内容</p>

2.空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，链接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。

HTML属性

HTML属性规范

1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔。

2.属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=“v”。XHTML要求属性值必须在双引号内部。

3.一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分割，每个属性的价值对写法都是 k="v"

4.部分标签属性k可以设置多个属性值v ，所有属性值v都必须卸载同一个双引号内，值与值之间需要使空格分隔。

HTML的基本结构（基本骨架、DTD、命名空间、字符集）

--基本骨架

HTML文件最基本的四个标签，组成了网页的基本骨架，包括<html>,<head>,<title>,<body>

<html>作用定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在<html>内部

<head>作用存放<title>,<meta>,<base>,<style>,<script>,<link>。内部用于对网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上。我们必须要设置的是title。

<title>作用一:让羊肉面拥有一个属于自己的标题。作用二：title中的关键字可以作为搜索引擎抓取的关键字，提高SEO搜索引擎的优化。作用三：内部的内容会显示在搜索结果的标题部分。作用四：作为浏览器收藏夹默认的网页标题。

<body>作用网页的主体部分，用于存放所有的HTML显示内容的标签。该内部的元素内容会显示在浏览器的窗口中。

--DTD

作用是告知浏览器该网页使用的是那个版本的HTML规范，让浏览器按照对应的版本HTML语法进行解析页面。

--命名空间

<html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。

--字符集

<head>标签内部的<meta>标签通过http-equiv属性定义了当前的网页所使用的字符变法charset

扩张

{国际通用字库

• UTF-8：以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字

为3个字节大小。

中文国标字库

• gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语

西里尔字母在内的682个。

• gbk：是gb2312的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包

括部首和构件）21003 个，图形符号 883 个，一个汉字为2个字节大小

}

字符集常见的问题1.如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8.

2.如果含有大量中文汉字的网站，而且要求网页加载速度快使用gbk