HTML骨架及基本语法特性

最新推荐文章于 2024-04-01 20:34:15 发布

mintsolace

最新推荐文章于 2024-04-01 20:34:15 发布

阅读量620

点赞数

分类专栏： html 学习笔记文章标签： html

本文链接：https://blog.csdn.net/mintsolace/article/details/77844716

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

标准骨架：

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

Strict：严格的。
一些标签不能使用，比如u标签可以让一个文本加上下划线，但这同HTML本质有冲
突，因为HTML只能负责语义，不能负责样式，而u下划线是样式。
2.Transitional：普通的
Frameset：带有框架的页面
二、XHTML1.0——严格体现在小写标签、闭合、引号
Strict：严格的。一些标签不能使用，如u
Transitional：普通的
Frameset：带有框架的页面

字符集：用meta标签定义，meta表示“元”。“元”配置表示基本配置。
< meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
charset：charactor set“字符集”
中文能够使用的字符集：

UTF-8
< meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
（< meta charset=“UTF-8”>）
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是国标，中国字库，仅涵盖汉字和一些常用的外文及符号。

HTML标签的语义化：方便代码的阅读和维护；方便浏览器或者网络爬虫解析；具有更好的搜索引擎优化。

使用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一样，是自封闭标签）
src：图像的路径
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.
< a href = “./index.html”>index.html < /a>
也可以省略"./"直接引用。

表示上级目录
…/表示源文件所在目录的上一级目录，…/…/表示源文件所在目录的上上级目录，以此类推。/…/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>，则点击我的作品会超链接到此作品。