二、HTML的文档结构
1、基本结构
1.1简介
- html标签是由尖括号的关键词,如
<html>
,通常标签都是成对出现的,如:<html><html>
; - 以
<html>
为根标签,包含:<head>
头部和<body>
主体部分; - 头部提供关于网页的相关信息,如标题、文档类型、字符编码、关键词等摘要信息摘要信息;
- 主体部分提供网页要显示的内容,真正显示页面中的;
- 合理的缩进;
- 标签名不区分大小写,但一般要用小写。
1.2开发工具:
-
记事本(notepad),sublime,notepad++,Dreamweaver,VScode,webstorm等
-
sublime的使用:
第一:打开sublime
第二:在里面进行新建文件(ctrl+N),然后在进行保存(ctrl+S),保存的时候,记得将扩展名输入上去(扩展名:.html或者.htm 都可以),不然的话,写出的代码,在网页上显示不出来。
在输入根标签或者头部标签等会特别麻烦,那么,可以使用Tab键,来进行快速生成,例如:根标签,输入html然后在按Tab,之后会直接生成
<html></html>
,只要是标签类型,都可以这样操作。第三:将代码输入完后,课进行在浏览器中打开,进行 验证。
代码:
<html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> welcome to html! </body> </html>
案例:
-
为了方便在sublime里面打开文件或图片等,可以单独建立一个文件夹(project),在这个文件夹中,可以再次创建三个文件夹(code,document,image)这三个,code里面可以放我们编写的代码,image里面可以放入我们需要的图片,可以方便我们打开以及使用。
将创建好的project文件夹直接拖进sublime里面,这样就可以更方便的使用了。
1.3浏览器
- 常见的浏览器:IE浏览器微软,chrome谷歌(开发人员常用的浏览器),firefox火狐,safari苹果;
- 浏览器的作用:读取html文件,并以网页的形式进行显示;
- 浏览器不会直接显示html标签,而是使用标签来解释网页的内容。
2标签
2.1标签的组成
-
一个完整的html标签的组成:
<标签名 属性名="属性值">内容</标签名>
属性值要用双撇号括起来,一般用双撇号(双撇号就是英文的双引号)
代码:
<html> <head> <title>标签的组成</title> <meta charset="utf-8"> </head> <body bgcolor="yellow" text="red"> 标签的组成 </body> </html>
案例:
2.2标签的分类
根据标签是否关闭,分为:关闭型和非关闭型
-
关闭型:有开始标签,有结束标签,即标签成对出现
<html></html> <head></head> <title>标题</title> <body>主体<body> <h1>一级标题</h1> <h1>...<h6>
-
非关闭型:只有开始标签,没有结束标签
<meta> <br> <hr>
根据标签是否独占一行,分为:块级标签和行级标签
- 块级标签:显示为块状,独占一行
<h1>大家好</h1>
<h1>一级标题<h1>
...
<h6>六级标题<h6>
<hr>
- 行级标签:在行内显示,可以与其他文本 内容在同一行显示
<span></span>
代码:
<html>
<head>
<title>标签的组成</title>
<meta charset="utf-8">
</head>
<body bgcolor="yellow" text="red">
标签的组成
<hr>
HTML从入门到精通
<hr>
<h1>一级标题</h1>
<hr>
<h2>二级标题</h2>
<hr>
<h5>五级标题</h5>
咪咪 <br> 佛佛
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
案例:
2.3注释
注释在浏览器中不会显示,是用来标注解释html语句,但通过查看代码源可以看到的
<!--注释--> 注释的快捷键是:Ctrl+/
如图:
2.4 实体字符
实体字符也称为特殊字符,用于显示一些特殊符号:如< > & 空格等
-
语法:
语法格式:
& + 实体字符的名称;
常用的实体字符:
< < 小于号 less than > > 大于号 great than 两个小于号和大于号,就构成了书名号 空格 space 在html中对于连续的空白字符(空格、缩进、换 行等),在浏览器中显示时,只能显示一个空格。 & & 与 " " 英文状态下的双引号 也可以直接打双引号,浏览器中可以显示。 © 版权符号 copyright ® 注册符号 register × 关闭符号
注意:实体字符,是严格区分大小写,即敏感大小写。如果大小写写错的话是没有办法显示的。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 这是我们的第一个html的注释 --> html从入门到精通 <hr> 图书:<<HTML从入门到精通>> <hr> 北京 上海 广州 <hr> 在html中用&lt;表示<小于号 <hr> "HTML语言" 或者 "HTML语言" <hr> 版权所有 © 2000-2020 高教培训 <hr> ® <hr> ×关闭符号 <hr> &;<br> &aMp; 实体字符名称是区分大小写,大小写敏感 </body> </html>
案例:
2.5文档类型
在HTML文档的第一行,使用来声明html文档的类型;
主要的功能就是:告诉浏览器页面的html文档的类型,简单来说,用来指定使用的html版本规范。
目前基本都使用的是html5,
快速出现构架的方法:
-
1、输入:html:5然后再按Tab键 或者输入!再按tab
如图:
或者
最后都可以生成:
-
2、输入:html:4s然后再按Tab键
如图:
生成:
由于第二中特别麻烦,所以现在大多数都用的是第一个。
若有什么问题,可以在下面进行评论。谢谢!