您的位置：首页 > Web前端

Derek的成长之路——前端与移动开发之HTML（总结篇）

2017-06-19 11:06 411 查看

1、HTML骨架

标准的骨架

一个标准的HTML页面，第一行一定是一个以

<!DOCTYPE ……

开头的语句，就是文档声明头，DocTypeDeclaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

到底有哪些规范呢？

现在学习的是HTML4.01版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。手机、移动端的网页，可以使用HTML5。

HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下面）：

HTML4.01里面规定了普通、XHTML两大种规范。
HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？

1 <H1></H1>

所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。

HTML第一行语句一共有6种：

大规范	里面的小规范
HTML4.01	Strict 严格的，体现在一些标签不能使用，比如u Transitional 普通的 Frameset 带有框架的页面
XHTML1.0 严格体现在小写标签、闭合、引号	Strict 严格的，体现在一些标签不能使用，比如u Transitional 普通的（我们学习的版本） Frameset 带有框架的页面

strict表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
比如，u标签，就是可以让一个本文加上下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。

1 <u>加下划线的效果</u>

HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了：

<!DOCTYPE html>

2. meta 字符

字符集用meta标签定义，meta表示“元”，表示基本的配置项目。

中文能够使用的字符集两种：

第一种：UTF-8

1 <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">

第二种：gb2312

1 <meta http-equiv="Content-Type"content="text/html;charset=gb2312">

也可以写成gbk

2 <meta http-equiv="Content-Type"content="text/html;charset=gbk">

有两个字库UTF-8和gb2312。
UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字。
gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。

字库规模： UTF-8（字全） > gb2312（只有汉字）

我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）

使用sublime时默认类型就是UTF-8。若改为gb2312的时候，就一定要记得设置一下sublime的保存类型：文件→ set File Encoding to→Chinese
Simplified(GBK)

记住两者匹配：

注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。

UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。

总结：
UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
一般我们使用都用 UTF-8，因为。。。懒得改

浏览器就是通过meta来识别你是什么字符集的，比如你保存的时候meta写的和声明的不匹配，浏览器就会乱码。

meta除了可以设置字符集，还可以设置关键字和页面描述。

设置页面描述：

只要设置的Description页面描述，百度搜索结果，就能够显示这些语句（SEO）搜索引擎会抓取关键字

例：

定义了一个名字是“Description”（描述）的meta。内容是……

定义关键词：

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

所以，一个比较完整的骨架是这样：

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>

         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <meta name="Keywords" content="前端学习，移动开发，全栈工程师" />

         <meta name="Description" content="本博客旨在记录前端与移动开发与交流学习" />

         <title>Document</title>

  </head>

  <body>

  </body>

</html>

第4行：   字符集设置

第5行：       关键词

第6行：       描述

3.title 标签

<title>网页的标题</title>

title也是有助于SEO搜索引擎优化的：

<title>web前端培训与移动开发</title>

网页的head标签里面，表示的是页面的配置，有那些什么配置？

字符集
关键词
页面描述
页面标题

4.HTML的基本语法特性

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

也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，良好的缩进，代码更易读。正确缩进标签是良好的代码规范。

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

代码：里面有空格、缩进、换行

标签不封闭是灾难：

错误示例 <title>欢迎<title>

h标签和p标签

<h1> 到 <h6> 都是标签：

<h1></h1>一级标题

<h2></h2>二级标题

……

<h6></h6>六级标题

h标签没有嵌套关系的。由于h3跟着一个h2，所以，我们自己就知道了这个h3是h2子标题。

1                 <h1>前端开发与学习</h1>

2                 <h2>一、学习内容</h2>

3                 <h2>二、学习目标</h2>

4                 <h3>2.1 HTML学习</h3>

5                 <h3>2.2 字符集</h3>

6                 <h3>2.3 关键字和页面描述</h3>

7                 <h3>2.4 title标签</h3>

8                 <h2>三、HTML的基本语法特性       </h2>

9                 <h3>3.1 HTML对换行不敏感，对tab不敏感</h3>

10             <h3>3.2 空白折叠现象</h3>

11             <h3>3.3 标签要严格封闭</h3>

         <h2>四、h和p标签</h2>

p是段落，是英语paragraph“段落”缩写。

HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。
顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。

审查元素功能：

试着把h放到p到里（这是错误的）：

        <p>

                我是一个小段落

                <h1>我是一个主标题</h1>

    </p>

正确的：

         <h3>个人简历</h3>

         <p>

               哈佛大学毕业，在蓝翔深造

         </p>

错误的：

1                 <p>

2                       <h3>个人简历</h3>

3            哈佛大学毕业。在蓝翔深造

4                 </p>

页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是：psd、ai

5.img 标签

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

插入方法：

img是英语image“图片”的简写

src 是英语source“资源”的简写，千万不要写成scr。

src是img标签的属性，007.jpg是这个属性的值。

img 标签不是“对儿”。自封闭标签，也称为单标签。

<img/>

meta也是自封闭标签：

alt属性：

alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。

HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。

我们关心的就是这两个文件的相对位置。只要相对路径不变。图片一定能够正常显示。

当图片在文件夹里面的时候：

如果在很深的文件夹中，也不怕，可以一直罗列下去：

如果情况变得复杂，我们的图片在浅一层的文件夹中：

如果是上两级：

还可以更为复杂：

6.超链接标签

一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。

语法：

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href是英语hypertextreference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

title 悬停文本

target 是否在新窗口中打开

target实际上是“目标”的意思。

blank就是“空白”的意思，就表示新建一个空白窗口。为毛有一个_，就是规定，没啥好解释的。

也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。

完整的超级链接：

<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

分清楚img和a标签的各自的属性：

页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。

锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。

那么网址：

1.html#wdwy

就能够让这个锚点在页面最顶端显示，此时页面有卷动。

这样子，用户体验会好一点，用户可以直接看到页面的内容。

如果有一个超级链接，指向页面中的锚点，那么就是：

<a href="#wdwy">点击我就查看我的网页</a>

比如一个段落中的所有文字都能够被点击，那么应该：

p包裹a：

  <p>

         <a href="">段落段落段落段落段落段落</a>

  </p>

而不是a包裹p：

  <a href="">

         <p>

                段落段落段落段落段落段落

         </p>

  </a>

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

----------------------------------总结就这些，下一篇写一些实例-------------------------------------

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航