diff --git a/01-html/01-html标签.md b/01-html/01-html标签.md index 8fb2fab..c956749 100644 --- a/01-html/01-html标签.md +++ b/01-html/01-html标签.md @@ -1,5 +1,8 @@ +> 本文最初于2015-10-01发表于[博客园](http://www.cnblogs.com/smyhvae/category/740114.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。 + + 国庆节快乐,还在加班的童鞋,良辰必有重谢! ## 本文主要内容 @@ -37,7 +40,12 @@ web标准总结: 浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等。如下图所示: -20170628_1350.png +![](http://img.smyhvae.com/20170628_1350.png) + + + + + 浏览器内核: @@ -205,7 +213,7 @@ HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被 百度为了追求极致的显示速度,所以HTML标签都没有换行、都没有缩进(tab),HTML和换不换行无关,标签的层次依然清晰,只不过程序员不可读了。如下图所示: -20170629_2226.jpg +![](http://img.smyhvae.com/20170629_2226.jpg) #### 2、空白折叠现象 @@ -213,8 +221,7 @@ HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为 举例如下: -20170629_2230.jpg - +![](http://img.smyhvae.com/20170629_2230.jpg) #### 3、标签要严格封闭 @@ -222,9 +229,7 @@ HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为 标签不封闭的举例如下: -20170629_2244.jpg - - +![](http://img.smyhvae.com/20170629_2244.jpg) ## 三、HTML的各种标签 @@ -343,9 +348,16 @@ HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范 > 所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示“严格的”。 -总结一下,一共有6种DTD,说白了,HTML第一行语句一共有6种: +总结一下,HTML4.01一共有6种DTD,说白了,HTML第一行语句一共有6种: + + + +![](http://img.smyhvae.com/20170629_1600.png) + + + + -20170629_1600.png 下面对上图中的三种小规范进行解释: @@ -445,7 +457,7 @@ meta除了可以设置字符集,还可以设置关键字和页面描述。 如下图所示: -20170629_1743.png +![](http://img.smyhvae.com/20170629_1743.png) #### 定义`关键词` @@ -568,7 +580,8 @@ HTML标签是分等级的,HTML将所有的标签分为两种: 网页效果如下: -20170630_1100.png + +![](http://img.smyhvae.com/20170630_1100.png) 上图显示,浏览器不允许你这么做,我们使用Chrome的F12审查元素发现,浏览器自己把p封闭掉了,不让你去包裹h1。 @@ -797,7 +810,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫 **2、锚链接**: 指给超链接起一个名字,作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。 -首先我们要创建一个锚,也就是说,使用`name`属性给那个特定的位置起个名字。效果如下: +首先我们要创建一个**锚点**,也就是说,使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下: ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_18.png) @@ -825,6 +838,15 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫 - `href`:目标URL - `title`:悬停文本。 +- `name`:主要用于设置一个锚点的名称。 +- `target`:告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值: + - `_self`:在同一个网页中显示(默认值) + - `_blank`:**在新的窗口中打开**。 + - `_parent`:在父窗口中显示 + - `_top`:在顶级窗口中显示 + + + `title`属性举例: @@ -834,15 +856,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫 效果如下: -20170630_1415.png - -- `name`:主要用于设置一个锚点的名称。 -- `target`:告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值: - - `_self`:在同一个网页中显示(默认值) - - `_blank`:**在新的窗口中打开**。 - - `_parent`:在父窗口中显示 - - `_top`:在顶级窗口中显示 - +![](http://img.smyhvae.com/20170630_1415.png) `target`属性举例: @@ -945,7 +959,7 @@ aaa/../bbb/1.jpg 相对路径的面试题。现有如下文件层级图: -20170630_1131.png +![](http://img.smyhvae.com/20170630_1131.png) 问题:如果想在index.html中插入1.png,那么对应的img语句是?