语法规范:
1.HTML中不区分大小写,但一般都用小写
2.HTML中的注释不能嵌套
3.HTML标签必须结构完整,要么成对出现,要么是自结束标签。
4.HTML标签可以嵌套,但是不能交叉嵌套
5.HTML中的属性必须有值,且值必须加引号(单引号和双引号都可以)
以上仅仅是规范,不按照规范写可能浏览器也能解析。
虽然浏览器尽最大努力正确的解析页面,你一些不符合语法规范的内容浏览器会为你自动修正,但是有一些情况会修正错误。
title标签:
用于设置网页的标题
meta标签:
meta标签是用来设置网页的一些要元数据,比如网页的字符集,关键字,简介。下面是设定网页的字符集。
meta是一个自结束标签,编写一个自结束标签时可以在开始标签中添加一个/
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<!--
使用meta标签设置网页的关键字
-->
<meta name="keywords" content="html, java" />
<!--
使用meta标签设置网页的描述
搜索引擎在检索页面时会同时搜索关键字和描述
但这两个不会影响页面在搜索引擎中的排名
-->
<meta name="description" content="学习HTML" />
<!--
使用meta做重定向(跳转页面)
<meate http-equiv="refresh" content="秒数; url:=目的网址"/>
-->
<meate http-equiv="refresh" content="2;url=http://www.baidu.com"/>
<title>网页的标题</title>
</head>
<body>
</body>
</html>
标题标签:
在HTML中一共有六级标题标签, h1到h6。在显示效果上h1最大,h6最小。但是文字的大小我们并不关心(可以使用CSS修改),使用HTML标签时,关心的是标签的语义,我们使用的标签都是语义化标签。
六级标签中h1最重要,表示一个网页中的主要内容,h2到h6的重要性依次降低。对于搜索引擎来说,h1的重要性仅次于title,搜索引擎检索完title,会立即查看h1中的内容。
所以h1标签非常重要,它会影响到页面在搜索引擎中的排名,一般页面只能写一个h1
一般页面中标题标签只使用h1, h2, h3, 以后的基本不使用。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>常用标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
</body>
</html>
效果如图:
段落标签:
段落标签用于表示内容中的一个自然段,使用p标签来表示一个段落。
p标签中的文字默认会独占一行,并且段与段之间会有一个间距。
在HTML中,字符之间写再多的空格,浏览器也会当成一个空格解析,换行也会当成一个空格解析。
在页面中可以使用br标签来表示一个换行,br标签是一个自结束标签。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>常用标签</title>
</head>
<body>
<p>这是一个段落<br/>用于展示网页内容</p>
</body>
</html>
效果如下:
实体:
在HTML中,一些特殊符号是不能使用的,
需要使用一些特殊的符号来表示这写特殊字符,
这些特殊符号称为实体(转义字符)。
浏览器解析到实体时,自动将实体转换为对应的字符。
实体的语法:& 实体的名字;(注意后面要加分号)
下表示常用的实体:
< | < |
---|---|
> | > |
空格 |   |
版权符号 | © |
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>实体</title>
</head>
<body>
a<b>c
<p>©÷这是一个段落 用于展示网页内容</p>
</body>
</html>
效果如下:
图片标签:
使用img标签来想网页中引入一个外部图片,
img标签也是一个自结束标签
属性:
src: 设置一个外部图片的路径
alt: 可以用来图片不能显示时用来对图片描述
能显示时不会出现文字(可能有些浏览器不行)
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性,搜索引擎就不会对img中的图片进行搜索
width: 可以用来修改图片的宽度,一般使用px作为单位
height: 可以用来修改图片的高度,一般使用px作为单位
宽度和高度两个属性如果只设定一个,另一个也会同时等比例修改
如果两个同时指定就按照指定的值俩设置
注意:一般开发中除了自适应的页面,不建议设置with和height
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>图片标签</title>
</head>
<body>
<img sc="1.jpg" alt="程序员图片" width="100px" hight="150px" />
</body>
</html>
效果如下:
常用的图片格式说明:
JPEG(JPG):
图片支持的格式比较多,图片可以压缩,但不支持透明。
一般用来保存照片等颜色丰富的图片。
GIF:
支持颜色比较少,只支持简单的透明,支持动态图。
图片颜色单一或者是动态图时可以使用。
PNG:
支持颜色比较多,并且支持复杂的透明。
可以用来显示颜色复杂的透明的图片。
一般使用原则:效果一致的情况下使用小的。
内联框架标签:
使用内联框架标签可以引用一个外部的页面;
使用iframe来创建一个内联框架;
属性:
src: 指定一个外部页面的路径,可以使用相对路径
width和height: 与图片标签类似
name: 可以为内联框架指定一个名字
在现实开发中不推荐使用内联框架,因为内联框架中的内容不会被搜素引擎检索。
<!doctype>
<html>
<head>
<meta charset="utf-8">
<titil>内联框架</titil>
</head>
<body>
<iframe src = "word.html" name = "内联框架">
</bofy>
</html>
效果如下:
超链接:
使用超链接可以让我们从一个页面跳转到另一个页面;
使用a标签可以创建一个超链接;
属性:
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个绝对路径。
target:可以用来指定打开链接的位置
可选值:
1._self:表示在当前窗口中打开(默认值)
2._blank:在新窗口中打开链接
3.可以设置一个内联框架的name属性值,链接将会在指定的内联框架中打开。
创建超链接是如果地址不确定可以先写一个#号作为占位符。点击链接时会自动回到顶部。也可以在#后加一个标签的ID,这样点击链接时就会跳转到ID所在的位置。
<!doctype>
<html>
<head>
<meta charset="utf-8" />
<titil>超链接</titil>
</head>
<body>
<a href = "http://www.baidu.com" target=_blank>百度超链接</a>
<br/>
<a href = "test1.html" target="ton">显示在内联框架中超链接</a>
<br/>
<iframe src = "word.html" name = "ton"> </frame>
</bofy>
</html>
效果如下:
居中标签:
canter标签中的内容会默认在页面中显示居中;
<!doctype>
<html>
<head>
<meta charset="utf-8" />
<titil>超链接</titil>
</head>
<body>
<center>
<a href = "http://www.baidu.com" target=_blank>百度超链接</a>
<br/>
<a href = "test1.html" target="ton">显示在内联框架中超链接</a>
<br/>
<iframe src = "word.html" name = "ton"> </frame>
</center>
</bofy>
</html>
无序列表ul:
作用:创建一个无序列表 可以通过type属性修改无序列表的项目符号 可选择值: disc,默认值,属性的圆点 square,实心的方块 circle,空心的圆 注意:默认的项目符号一般都不使用。如果需要设项目符号可以采用为li设置背景图片的方式来设置。
有序列表ol:
type属性,可以指定序号的类型 可选值: 1,默认值,使用阿拉伯数字 a/A,采用小写或者大写的字母 i/I,采用小写或者大写的罗马数字
有序列表和无序列表可以相互嵌套。
定义列表dl:
使用dl来创建一个定义列表 dl中有两个子标签 dt:被定义的内容 dd:对定义的描述
块元素div和内联元素span:
div是一个块元素。
块元素就是独占一行的元素,无论它内容有多少都会独占一行。比如:p, h1, h2, h3, br这些标签都是块元素。
div这个块元素是没有任何语义的,就是一个纯粹的块元素,并且不会为它里面的元素设置任何的默认样式。
div元素主要是用来对页面进行布局的。
span是一个内联元素(行内元素)。
行内元素就是只占自身大小的元素,不会占用一行。
常见的内联元素有: a, img, iframe, span
span是没有任何语义的,span标签专门用来选中文字,然后为文字设置样式。
一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含块元素。但也有些特殊情况。
a元素可以包含任何元素,出来它本身。
p元素不可以包含任何其他的块元素。
其余常用标签见下表:
em | 主要表示语气上的强调,默认为斜体表示 |
---|---|
strong | 表示强调的内容,比em更强烈,默认用粗体表示 |
i | 单纯的斜体 ,无强调的意思 |
b | 单纯的粗体, 无强调的意思 |
small | 比父元素中的文字小一点 |
cite | 书名号 |
q | 行内引用,默认加引号 |
blockquote | 块级引用 |
sup | 设置上标 |
sub | 设置下标 |
del | 添加删除线 |
ins | 插入内容,默认添加下划线 |
pre | 预格式标签,怎么写就怎么显示 |
code | 表示代码,一般结合pre一起使用 |