HTML结构详解

最新推荐文章于 2023-06-01 13:20:02 发布

云杰8了

最新推荐文章于 2023-06-01 13:20:02 发布

阅读量734

点赞数 2

分类专栏：笔记 HTML基础知识文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_50821119/article/details/110495375

版权

笔记同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

HTML基础知识

5 篇文章 1 订阅

订阅专栏

HTML结构详解

<!DOCTYPE ……文档声明头

任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE html开头，声明是不区分大小写的。

<!DOCTYPE html>

开头的语句。
这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

html标签

html元素是 HTML 页面的根元素，所有内写在html标签中。
lang属性规定书写的是一个什么网站。
en 英文网站，zh中文网站，fr法语网站等等。

<html lang="en">

</html>

head标签

head 元素是所有头部元素的容器。

head 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。

以下列出的元素能被用在元素内部：

title（页面标题）
style 样式标签
base 规定页面上所有链接的默认 URL 和默认目标：
link 定义文档与外部资源的关系。
meta SEO优化浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
script script文件
noscript

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>

 </body>
</html>

上面的<meta>标签都不用记，但是另外还有一个<meta>标签是需要记住的：

<meta http-equiv="refresh" content="3;http://www.baidu.com">

上面这个标签的意思是说，3秒之后，自动跳转到百度页面。

head中的头标签进行介绍。

base标签

规定页面上所有链接的默认 URL 和默认目标；
文档中只能有一个base标签，如果有必须写在head中的第一行。

如果使用了标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

  <base href="http://baidu.com" target="_blank">

meta标签

charset属性（字符集）

规定 HTML 文档的字符编码：

<meta charset="UTF-8">

UTF-8万国码，几乎所有字符都可以。
gb2312简单中文编码。
gbk 包含中文繁体。

我们发现，在头标签中，有下面这种标签：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签中的charset定义，meta表示“元”。“元”配置，就是表示基本的配置项目。

charset就是charactor set（即“字符集”），这里采用的是。这个meta不用背，用sublime生成就行。

定义关键字

举例如下：

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

定义页面描述

meta除了可以设置字符集，还可以设置关键字和页面描述。

我们把含有meta标签的这一行代码抽象一下：

<meta name=" " content=" ">

name即“名字”，content即“内容”。

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

设置页面描述的举例：

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

效果如下：

title标签

		<title>网页的标题</title>

title也是有助于SEO搜索引擎优化的。

html的完整骨架：

综上所述，html的比较完整的骨架是这样：

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
		<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
		<title>Document</title>
	</head>
	<body>

	</body>
	</html>

面试题：

问：网页的head标签里面，表示的是页面的配置，有什么配置？
答：字符集、关键词、页面描述、页面标题。（今后我们还能看见一些其他的配置：IE适配、视口、iPhone小图标等等）

3、`<body>`标签的属性

其属性有：

bgcolor：设置整个网页的背景颜色。
background：设置整个网页的背景图片。
text：设置网页中的文本颜色。
leftmargin：网页的左边距。IE浏览器默认是8个像素。
topmargin：网页的上边距。
rightmargin：网页的右边距。
bottommargin：网页的下边距。

<body>标签另外还有一些属性，这里用个例子来解释：

上方代码中，当我们对点我点我这几个字使用超链时，link属性表示默认显示的颜色、alink属性表示鼠标点击但是还没有松开时的颜色、vlink属性表示点击完成之后显示的颜色。效果如下：

接下来，我们讲一下<body>里的各种标签的属性。

一、字体标签

h1标题

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
作用:告诉浏览器这些内容是标题, 给内容添加标题语义
容器级标签。
什么是容器级标签？
几乎可以放置所有标签
什么是文本级标签？
只能放置文字，图片，超链接，表单元素等。
格式:

…

知识点：
1.级别依次降低，重要性也随之降低。
2.都会被加粗，字体从大到小。
3.会独占一行
4.h标签虽然是一个容器级标签，但是最好不要加嵌套关系。
5.h标签慎用，特别是h1标签。一个网页最多只能出现一个。会影响网站的SEO。

seo：网站在搜索引擎中的自然排名。
想要提高SEO：
    1.交钱 给百度 按照点击量 （按照IP，以及浏览时间）
    2.页面代码要规范。

字体标签`<font>`（已废弃）

属性：

color="红色"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜色。
设置方式：单词 \ #ff00cc \ rgb(0,0,255)
size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
设置：用’+2’代表值是5 或直接给值
face="微软雅黑"：设置字体类型。注意在写字体时，“微软雅黑”这个字不能写错。
举例：

<font face="微软雅黑" color="#FF0000" size="10">vae</font>

特殊字符（转义字符）

&nbsp;：空格 （non-breaking spacing，不断打空格）
&lt;：小于号（less than）
&gt;：大于号（greater than）
&amp;：符号&
&quot;：双引号
&apos;：单引号
&copy;：版权©
&trade;：商标™

要求背诵的特殊字符有:

&nbsp;&lt;&gt;&copy;

比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：

这是一个HTML语言的&lt;p&gt;标签

特殊字符	描述	字符的代码(; 结尾)
	空格符	`&nbsp`
<	小于号	`&lt`
>	大于号	`&gt`
&	和号	`&amp`
￥	人民币	`&yen`
©	版权	`&copy`
®	注册商标	`&reg`
°	摄氏度	`&deg`
±	正负号	`&plusmn`
×	乘号	`&times`
÷	除号	`&divide`
²	平方2（上标2）	`&sup2`
³	立方3（上标3）	`&sup3`

一些小标签/小标记

<u>：下划线标记
<s>或<del>：中划线标记（删除线）
<i>或<em>：斜体标记

粗体标签`<b>`或`<strong>`（已废弃）

上标`<sup>` 下标`<sub>`

上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部
举例：

O<sup>2</sup>    5<sub>3</sub>

二、排版标签

注释标签

<!-- 注释  -->

段落标签`<p>`

<p>This is a paragraph</p>
<p>This is another paragraph</p>

属性：

align="属性值"：对齐方式。属性值包括left center right。

段落，是英语paragraph“段落”缩写。

HTML标签是分等级的，HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

错误写法：（尝试把 h 放到 p 里）

	<p>
		我是一个小段落
		<h1>我是一级标题</h1>
	</p>

网页效果如下：

上图显示，浏览器不允许你这么做，我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h1。

PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。

换行标签`<br>`（已废弃）

当你打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论你将它置于何处，<br>标签都会产生一个强制的换行。

This <br> is a para<br>graph with line breaks

水平线标签`<hr>`（已废弃）

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

属性：

align="属性值"：设定线条置放位置。属性值可选择：left right center。
size="2"：设定线条粗细。以像素为单位，内定为2。
width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
color="#0000FF"：设置线条颜色。
noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。

内容居中标签 `<center>`

此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。

预定义（预格式化）标签：`<pre>`

含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

效果演示：

上图中，好像红框部分的字体变小了，而且还出现了缩进，好吧，这个其实是浏览器搞的鬼。
为什么要有<pre>这个标签呢？答案是：

所有的浏览器默认情况下都会忽略空格和空行。

其实这个标签也用的比较少。

三、超链接

超链接有三种形式：

1、外部链接：链接到外部文件。举例：

<a href="02页面.html">点击进入另外一个文件</a>

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

效果：

当然，我们也可以直接点进链接，访问一个网址。举例如下；

	<a href="http://www.baidu.com" target="_blank">点我点我</a>

2、锚链接：
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。效果如下：

上图中解释：

11行代码表示，顶部这个锚的名字叫做name1。
然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#name1）。注意上图中红框部分的#号不要忘记了，表示跳到名为name1的特定位置，这是规定。如果少了#号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。

如果我们将上图中的第28行代码写成：

<a href="a.html#name1">回到顶部</a>

那就表示，点击之后，跳转到a.html页面的name1锚点中去。

说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

3、邮件链接：
代码举例：

<a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>

效果：点击之后，会弹出outlook，作用不大。

超链接的属性

href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
```
target
```
：告诉浏览器用什么方式来打开目标页面。
```
target
```
属性有以下几个值：
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示
- _top：在顶级窗口中显示
title属性举例：
```
<a href="09_img.html" title="很好看哦">结婚照</a>
```
效果如下：

target属性举例：
```
<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
```
blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

备注1：分清楚img和a标签的各自的属性

区别如下：
```
<img src="1.jpg" />
<a href="1.html"></a>
```
备注2：a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该是p包裹a：
```
<p>
	<a href="">段落段落段落段落段落段落</a>
</p>
```
而不是a包裹p：
```
<a href="">
	<p>
		段落段落段落段落段落段落
	</p>
</a>
```
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。

四、图片标签

img: 代表的就是一张图片。是单边标记。

img是自封闭标签，也称为单标签。

能插入的图片类型：

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

`src`属性：图片的相对路径和绝对路径

这里涉及到图片的一个属性：

src属性：指图片的路径。

在写图片的路径时，有两种写法：相对路径、绝对路径

1、写法一：相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。

举例1：

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg">
<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

img 是image“图片”的简写，src 是英语source“资源”的缩写。

相对路径不会出现这种情况：

aaa/../bbb/1.jpg

../要么不写，要么就写在开头。

举例2：

<img src="images/1.jpg">

上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg

2、写法二：绝对路径

绝对路径包括以下两种：

（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">

（2）网络路径。举例：

<img src="http://img.smyhvae.com/2016040102.jpg">

大家打开上面的img中的链接，扫一扫，可能有惊喜哦。

相对路径和绝对路径的总结

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案：用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：

<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />

总结一下：

我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
相对路径，就是…/ image/ 这种路径。从自己出发，找到别人；
绝对路径，就是http://开头的路径。
绝对不允许使用file://开头的东西，这个是完全错误的！

img标签的其他属性

width：宽度
height：高度
Align：指图片的水平对齐方式，属性值可以是：left、center、right
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
border：给图片加边框（描边），单位是像素，边框的颜色是黑色
Hspace：指图片左右的边距
Vspace：指图片上下的边距
Alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

图片的align属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。我们来分别看一下这align属性的这几个属性值的区别。

align=""，图片和文字低端对齐。即默认情况下的显示效果
align="center"：图片和文字水平方向上居中对齐
align="top"：图片与文字顶端对齐。
align="left"：图片在文字的左边
align="right"：图片在文字的右边

注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性

**后续明天再发，点个关注呗！！！！

云杰8了

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML结构详解

三、HTML结构详解备注：所有的浏览器默认情况下都会忽略空格和空行每个标签都有私有属性。也都有公有属性。html中表示长度的单位都是像素。HTML只有一种单位就是像素。HTML标签通常是成对出现的（双边标记），比如 <div> 和 </div>，也有单独呈现的标签（单边标记），如：<br />、<hr />和<img src=“images/1.jpg” />等。属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
复制链接

扫一扫