HTML骨架及基本语法特性
2017-09-04 23:10
211 查看
标准骨架：
< !DOCTYPE…>:DocType Declaration，告知浏览器使用哪种HTML或XHTML规范。
HTML第一行语句DTD一共有六种：
一、HTML4.01
1. Strict：严格的。
一些标签不能使用，比如u标签可以让一个文本加上下划线，但这同HTML本质有冲
突，因为HTML只能负责语义，不能负责样式，而u下划线是样式。
2.Transitional：普通的
3. Frameset：带有框架的页面
二、XHTML1.0——严格体现在小写标签、闭合、引号
1. Strict：严格的。一些标签不能使用，如u
2. Transitional：普通的
3. Frameset：带有框架的页面
字符集：用meta标签定义，meta表示“元”。“元”配置表示基本配置。
< meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
charset：charactor set“字符集”
中文能够使用的字符集：
1. UTF-8
< meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
（< meta charset=”UTF-8”>）
2. gb2312或gbk
< meta http-equiv=”Content-Type” content=”text/html;charset=gb2312”>
< meta http-equiv=”Content-Type” content=”text/html;charset=gbk”>
UTF-8是国际通用字库，涵盖所有语言文字。而gb2312是国标，中国字库，仅涵盖汉字和一些常用的外文及符号。
使用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样。当我们不设置时，sublime默认类型就是UTF-8，若要更改为gb2312，就要将保存类型设置为：文件→set File Encoding to→Chinese Simplified(GBK)
meta设置页面描述：< meta name=”Description” content=”……”/>，通过搜索引擎显示页面描述的内容。
meta定义关键字：< meta name=”Keywords” content=”……”/>，关键字能够提高搜索命中率。
完整骨架：
语法特性：
HTML对换行不敏感，对tab不敏感：HTML并非依靠缩进来表示嵌套，换不换行、tab不tab，都不影响页面的结构，而是看标签的包裹关系，但是缩进会让代码更清晰。
所以
等价于
html中的空白折叠：HTML中所有文字之间，如果有空格、换行，tab都将被折叠为一个空格。
h和p标签：
< h1>到< h6>都是标签，h标签没有嵌套关系。
p标签是文本级标签，里面只能放文字、图片、表单元素。
图片
页面上能够插入的图片格式有：jpg(jpeg)、gif、png、bmp，不能插入的图片格式有：psd、ai。HTML页面不是直接插入图片，而是插入图片的地址，所以要把图片上传到服务器中。
插入方法：< img src=”…….jpg”>（img标签和meta一样，是自封闭标签）
alt属性
< img src=”…….jpg” alt=”XXX”>即当图片无法显示时出现的替代文字。
相对路径指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。相对路径不会出现aaa/../bbb/1.jpg，../要么不写，要么写在开头。
同目录文件引用：
“.”——代表目前所在的目录。
建一个源文件info.html，在info.html里引用index.html文件作为超链接。
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
html文件路径是：c:\Inetpub\wwwroot.
index.html
也可以省略”./”直接引用。
表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。/../include.php ：第一个杠表示是指根目录下。
假设index.html路径是：c:\Inetpub\wwwroot\index.html
< a href=”../../index.html”>index.html< /a>
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
html路径是：c:\Inetpub\wwwroot\sites.
< a href = “../wowstory/index.html”>index.html< /a>
表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
< a href = “html/index.html”>index.html< /a>
相对路径是从自己出发找到别人，相对路径的优点是站点文件可以拷着走，站点不管拷贝到哪里，文件和图片的相对路径关系不变。
相对路径的使用前提：网页文件和你的图片必须在一个服务器上。比如现在想插入一个新浪网上的图片，就不能用相对路径，而应用绝对路径。
绝对路径是以http://开头的路径。如：
< img src=”http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png” alt=”” />
下面的方法是行的，但是没有任何工程上的意义，因为服务器和Linux系统都没有盘符：
< img src=”file://C:\Users\Danny\Pictures\明星\1.jpg” alt=”” />
总结：
无论是a标签还是img标签，如果要用路径，只有相对路径和绝对路径两种。
相对路径，就是../ .image/ 。从自己出发，找到别人；
绝对路径，就是http://开头的路径。
不允许以file://开头。
6.超链接：html网页之间是通过超链件互相跳转的
语法：< a href=”XXX.html”>YYY< /a>
a: anchor，锚，文本级标签，在html中，a的语义小于p，a可以当作文本来处理。
href: hypertext reference，超文本地址。
title悬停文本：鼠标放在abc中的超链接上会显示字符YYY
< a href=”XXX.html” title=”YYY”>abc< /a>
target是否在新窗口中打开：
< a href=”XXX.html” title=”YYY” target=”_blank”>abc< /a>
如果不写target=”_blank”就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。
一个完整的超链接：
< a href=”XXX.html” title=”悬停文本” target=”_blank”>链接内容< /a>
页面内的锚点：用name属性来设置，一个a标签如果name属性（或者id属性），即是页面的一个锚点。
如: < a name=”wdzp”>我的作品< /a>或< a id=”wdzp”>我的作品< /a>，则网址1.html#wdzp能够让这个锚点显示在页面最顶端，用户可直接看到页面内容。
如果有一个超链接指向页面中的锚点：< a href=”#wdzp”>我的作品< /a>，则点击我的作品会超链接到此作品。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
< !DOCTYPE…>:DocType Declaration，告知浏览器使用哪种HTML或XHTML规范。
HTML第一行语句DTD一共有六种：
一、HTML4.01
1. Strict：严格的。
一些标签不能使用，比如u标签可以让一个文本加上下划线，但这同HTML本质有冲
突，因为HTML只能负责语义，不能负责样式，而u下划线是样式。
2.Transitional：普通的
3. Frameset：带有框架的页面
二、XHTML1.0——严格体现在小写标签、闭合、引号
1. Strict：严格的。一些标签不能使用，如u
2. Transitional：普通的
3. Frameset：带有框架的页面
字符集：用meta标签定义，meta表示“元”。“元”配置表示基本配置。
< meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
charset：charactor set“字符集”
中文能够使用的字符集：
1. UTF-8
< meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
（< meta charset=”UTF-8”>）
2. gb2312或gbk
< meta http-equiv=”Content-Type” content=”text/html;charset=gb2312”>
< meta http-equiv=”Content-Type” content=”text/html;charset=gbk”>
UTF-8是国际通用字库，涵盖所有语言文字。而gb2312是国标，中国字库，仅涵盖汉字和一些常用的外文及符号。
使用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样。当我们不设置时，sublime默认类型就是UTF-8，若要更改为gb2312，就要将保存类型设置为：文件→set File Encoding to→Chinese Simplified(GBK)
meta设置页面描述：< meta name=”Description” content=”……”/>，通过搜索引擎显示页面描述的内容。
meta定义关键字：< meta name=”Keywords” content=”……”/>，关键字能够提高搜索命中率。
完整骨架：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <meta name="Keywords" content="XX,XX,XX" /> 6 <meta name="Description" content="…………………………" /> 7 <title>Document</title> 8 </head> 9 <title>网页标题</title> 10 <body> 11 12 </body> 13 </html>
语法特性：
HTML对换行不敏感，对tab不敏感：HTML并非依靠缩进来表示嵌套，换不换行、tab不tab，都不影响页面的结构，而是看标签的包裹关系，但是缩进会让代码更清晰。
所以
< div> < h1>< /h1> < p>< /p> < /div>
等价于
< div> < h1>< /h1> < p>< /p> < /div>
html中的空白折叠：HTML中所有文字之间，如果有空格、换行，tab都将被折叠为一个空格。
h和p标签：
< h1>到< h6>都是标签，h标签没有嵌套关系。
p标签是文本级标签，里面只能放文字、图片、表单元素。
图片
页面上能够插入的图片格式有：jpg(jpeg)、gif、png、bmp，不能插入的图片格式有：psd、ai。HTML页面不是直接插入图片，而是插入图片的地址，所以要把图片上传到服务器中。
插入方法：< img src=”…….jpg”>（img标签和meta一样，是自封闭标签）
alt属性
< img src=”…….jpg” alt=”XXX”>即当图片无法显示时出现的替代文字。
相对路径指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。相对路径不会出现aaa/../bbb/1.jpg，../要么不写，要么写在开头。
同目录文件引用：
“.”——代表目前所在的目录。
建一个源文件info.html，在info.html里引用index.html文件作为超链接。
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
html文件路径是：c:\Inetpub\wwwroot.
index.html
也可以省略”./”直接引用。
表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。/../include.php ：第一个杠表示是指根目录下。
假设index.html路径是：c:\Inetpub\wwwroot\index.html
< a href=”../../index.html”>index.html< /a>
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
html路径是：c:\Inetpub\wwwroot\sites.
< a href = “../wowstory/index.html”>index.html< /a>
表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
< a href = “html/index.html”>index.html< /a>
相对路径是从自己出发找到别人，相对路径的优点是站点文件可以拷着走，站点不管拷贝到哪里，文件和图片的相对路径关系不变。
相对路径的使用前提：网页文件和你的图片必须在一个服务器上。比如现在想插入一个新浪网上的图片，就不能用相对路径，而应用绝对路径。
绝对路径是以http://开头的路径。如：
< img src=”http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png” alt=”” />
下面的方法是行的，但是没有任何工程上的意义，因为服务器和Linux系统都没有盘符：
< img src=”file://C:\Users\Danny\Pictures\明星\1.jpg” alt=”” />
总结：
无论是a标签还是img标签，如果要用路径，只有相对路径和绝对路径两种。
相对路径，就是../ .image/ 。从自己出发，找到别人；
绝对路径，就是http://开头的路径。
不允许以file://开头。
6.超链接：html网页之间是通过超链件互相跳转的
语法：< a href=”XXX.html”>YYY< /a>
a: anchor，锚，文本级标签，在html中，a的语义小于p，a可以当作文本来处理。
href: hypertext reference，超文本地址。
title悬停文本：鼠标放在abc中的超链接上会显示字符YYY
< a href=”XXX.html” title=”YYY”>abc< /a>
target是否在新窗口中打开：
< a href=”XXX.html” title=”YYY” target=”_blank”>abc< /a>
如果不写target=”_blank”就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。
一个完整的超链接：
< a href=”XXX.html” title=”悬停文本” target=”_blank”>链接内容< /a>
页面内的锚点：用name属性来设置，一个a标签如果name属性（或者id属性），即是页面的一个锚点。
如: < a name=”wdzp”>我的作品< /a>或< a id=”wdzp”>我的作品< /a>，则网址1.html#wdzp能够让这个锚点显示在页面最顶端，用户可直接看到页面内容。
如果有一个超链接指向页面中的锚点：< a href=”#wdzp”>我的作品< /a>，则点击我的作品会超链接到此作品。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 02-HTML 基本骨架 、基本语法特性、 h 和 p 标签、图片、超级链接
- HTML基本语法一页面(PAGE)标记
- HTML基本基础语法知识
- 学习HTML 基本语法二
- html基本语法
- HTML 5 canvas —— 基本语法
- HTML基本语法
- HTML基本语法二 字体(FONT)标记
- 十五分钟让你了解Python套路 ---- Python的基本语法和部分特性
- HTML基本基础语法知识
- 学习HTML 基本语法二
- HTML 基本语法 方便刚开始学习html的朋友
- 浅谈HTML基本语法
- 【HTML+CSS】(1)基本语法
- HTML基本语法总结
- Java基础 - 1.1-Java 语言特性及其基本语法
- Html语言——基本语法的速查列表
- C++ 容易忘的基本语法和特性
- HTML基本语法三 文字布局标记
- iOS开发OC基本语法、类和对象、三大特性