HTML 网页结构及常用标签

Glensea

已于 2022-07-29 11:29:07 修改

阅读量1.3k

点赞数 2

分类专栏： html 文章标签： html 前端 css

于 2022-07-29 10:48:38 首次发布

本文链接：https://blog.csdn.net/sparkstark/article/details/126050833

版权

html 专栏收录该内容

4 篇文章

订阅专栏

HTML 网页结构及常用标签

一、网页结构

1. 构成

<!doctype html>
<html>
    <!-- 头部 -->
    <head>
    	<meta charset="utf-8" name="" keywords=""/>
    </head>
    <!-- 主体 -->
    <body>我的第一个页面</body>
</html>

<!-- 硬写 也可以显示 但浏览器默认会把你放在一个根标签内，属于叫怪异模式(不推荐这么写) -->
<html>
    <head></head>
    <body>我的第二个页面</body>
</html>

2. 文档声明

<!doctype html>

告诉浏览器，当前页面是按照html5规范写的。

如果不写，浏览器解析页面的时候，可能会进入怪异模式，导致无法正常显示页面。

3. 头部标签

<html></html>

所有的标签都应该写在html中，一个页面只有一个根标签。

3.1 meta标签

用来设置网页的元数据，不会变的数据，是给浏览器看的，是自结束标签

编码	王老师 ======>01110111

解码	01110111======>王老师 

字符集（密码本）	常见的有：

GB2312	中国的

GBK		  中国扩充版

UTF-8	   万国码

xxxxxxxxxx HTML

<meta charset="utf-8" name="" keywords=""/>

(1) charset属性

设置网页的字符集，避免乱码问题。

(2) name，keywords

也是帮助浏览收录网页的。

3.1.2 移动端

<meta charset="UTF-8" />
<!-- 以下两个meta 是针对移动端的设置 -->
<meta name="viewport" content="width=device-width", initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no />

4.头部标签

<head></head>

保存一些元信息，元数据，这标签内的内容，不会在页面中展示，它是用来帮助浏览器解析页面的

5.主内容区

<body></body>

硬写也可以显示但浏览器默认会把你放在一个根标签内，属于叫怪异模式(不推荐这么写)。

注意：

html当中不区分大小写，但一般我们用小写比较多。
html中的注解不能嵌套。
html标签结构必须完整，要么成对出现，要么是自结束标签。
浏览器会修正你的代码，你所有不符合语法规范的内容浏览器会帮你修正，但有些情况，会修正错误，而且会影响网站的性能，所以要避免。
html标签可以嵌套，但不可交叉嵌套。

二、实体

在网页编写中多个空格会被浏览器默认为一个空格

eg：3<5>4

在html中，一些特殊的字符是不能直接使用的，比如空格，大于号，小于号，©，像这些特殊的没有办法直接打出来的字符，我们需要用其他的字符来表示，这些字符就叫做实体。

1. 语法

&实体的名字;

2. 常用的实体

nbsp;  空格 
&gt;   大于号
&lt;   小于号 
&copy;  版权符号©️

三、常用标签

关注语义，而不是样式！！！

1. 注释标签

不会在页面中显示

1.做一些简单的注释，帮助理解记忆代码

2.注解符号，不可以嵌套

3.养成注释习惯

4.简单明确

2. 标题标签

块元素

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

效果：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

3. 段落标签

块元素

一般情况，用来包裹文字，注意段与段之间有间隔

<p>
    否釜害才天挟知人人我赠第她，我在和什玉或间主后韩留由是才历壬中样，特夭葬人何骨血死天嗣派让护，一颜留，间负要丈有国其娇种土沫办自是生，回措人主笔同于亡这都生高好兼，负了他了非清创招为五化，得个言葬保屯未考了战徒己快者张之留解，当文君，我始快死杨，我人承非。
</p>
<p>
   胜三人的，哥说杨国县可，活要求就生统我，仍就藏一诗认一兴们爱圣人二才韩有，谭君极普处日了同三气憾会作锐此临洪王送，即虽有颜才少当方土主才圣，乏前善出尝才未领制帝法九揽要，报哉在活过什设人始洪冒同郭的不则，作极生意案必看首极说盲程要秦，第乡方的办山，法那便。
</p>

效果：

否釜害才天挟知人人我赠第她，我在和什玉或间主后韩留由是才历壬中样，特夭葬人何骨血死天嗣派让护，一颜留，间负要丈有国其娇种土沫办自是生，回措人主笔同于亡这都生高好兼，负了他了非清创招为五化，得个言葬保屯未考了战徒己快者张之留解，当文君，我始快死杨，我人承非。

胜三人的，哥说杨国县可，活要求就生统我，仍就藏一诗认一兴们爱圣人二才韩有，谭君极普处日了同三气憾会作锐此临洪王送，即虽有颜才少当方土主才圣，乏前善出尝才未领制帝法九揽要，报哉在活过什设人始洪冒同郭的不则，作极生意案必看首极说盲程要秦，第乡方的办山，法那便。

4. hgroup标签

用于为标题分组，可以将一组相关的标题同时放入到hgroup

<hgroup>
	<h1>古诗一首</h1>
	<h3>杜甫</h3>
</hgroup>

效果：

古诗一首

杜甫

5. 强调标签

行内元素

5.1 em标签

从样式看，有倾斜，强调语音语调。

<em>必须</em>

效果：

必须

5.2 strong标签

强调内容的重要性，从样式看，文字有加粗的效果。

<strong>作业写完</strong>
<b>abc</b>

效果：

作业写完

abc

6. 换行标签

br标签，强制换行，是自结束标签。

全球网络搜索总量达662亿次，在排名前十的网站中，谷歌以62.4%的份额高居榜首，搜索量是排名第二的雅虎的近五倍。<br />非美国公司占据四席，其中，中国搜索引擎百度以5.2%的市场份额排名第三，比排名第四的微软高出2个百分点。<br>排行第五的是韩国最大搜索引擎NHN，第八为俄罗斯搜索引擎Yandex，另一家中国网络公司阿里巴巴位居第十，其搜索流量包括中国雅虎。

效果：

全球网络搜索总量达662亿次，在排名前十的网站中，谷歌以62.4%的份额高居榜首，搜索量是排名第二的雅虎的近五倍。
非美国公司占据四席，其中，中国搜索引擎百度以5.2%的市场份额排名第三，比排名第四的微软高出2个百分点。
排行第五的是韩国最大搜索引擎NHN，第八为俄罗斯搜索引擎Yandex，另一家中国网络公司阿里巴巴位居第十，其搜索流量包括中国雅虎。

7. 分割线标签(水平线标签)

<hr color="red" width="30%" size="20px" align="right" />

效果：

8.删除线标签

<p>原价：<del>9999</del></p>
<p>现价：<s>9.9</s></p>

效果：

原价：~~9999~~

现价：~~9.9~~

9. 居中效果

<center>
    <h1>故事一个</h1>
    <p>情智唯，位变答，价。</p>
    <p>让土投的不找准千他。</p>
    <em>则特学</em>
</center>

10.图像标签

<!-- alt:图片未加载时显示的信息 -->
<img src="https://i-blog.csdnimg.cn/blog_migrate/5e70828d0a2d76336d04acabca2681d4.jpeg" width="300px" alt="这是一辆红色的跑车" title="好漂亮的跑车" />

效果：

四、行内与块元素

注意：

1：一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素。

2：块元素中基本什么都能放。

3：p元素中不能放任何块元素特殊的存在。

1. 块元素

display:block

特点：主要用来布局，它会独占一行

例如：h1-h6标签、p、div、header、footer ··· ···

2. 行内元素

display:inline

特点：主要用来包裹文字的，不会独占一行

例如：em、strong、span、a ··· ···

3. 行内块元素

display:inline-block

例如： img ··· ···

五、结构化标签

header：网页的头部。

main：网页的主体部分（一般就一个）。

footer：网页的底部。

nav：网页的导航。

aside：和主体相关的内容，侧边栏。

article：文章之类的。

section：独立的区块，上面的标签都不合适，就用这个。

div：没有语义，就用来表示一个区块，目前来讲div还是主流的布局元素。

span：行内元素，也是没有任何语义，一般用于在网页中选中文字。

<!-- 第一种 -->
<header></header>
<main>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</main>
<footer></footer>
<!-- 第二种 -->
<div></div>
<div></div>
<div></div>

六、列表

列表（list），以一组一组的形式出现。

1：有序列表用ol标签创建，li表示列表项。

2：无序列表用ul标签创建，li表示列表项。

3：定义列表用dl标签创建，使用dd对内容进行解释说明。

注意：列表之间是可以互相嵌套的。

1. ol标签和ul标签

type属性可以更改项目符号，可选值：1（默认值）、a、A、I、i

<ol type="i">
    <h3>起床三件事</h3>
    <li>刷牙</li>
    <li>吃早餐</li>
    <li>准备上班</li>
</ol>

效果：

起床三件事
刷牙
吃早餐
准备上班

type属性可以更改项目符号，可选值：
disc：默认实心圆点
square：实心的方块
circle：空心的圆

<ul type="circle">
    <h3>最喜欢的三件事</h3>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

效果：

最喜欢的三件事
吃饭
睡觉
打豆豆

2. dl标签

<dl>
    <dt>HTML</dt>
    <dd>内容的详解1</dd>
    <dd>内容的详解2</dd>
    <dd>内容的详解3</dd>
    <dt>CSS</dt>
    <dd>内容的详解1</dd>
    <dd>内容的详解2</dd>
    <dd>内容的详解3</dd>
</dl>

效果：

HTML

内容的详解1

内容的详解2

内容的详解3

CSS

内容的详解1

内容的详解2

内容的详解3

3. 表格标签

<table border="1px" cellspacing="0" width="300px" height="200px" cellpadding="10px" align="center">
    <!-- 第1行 -->
    <tr align="right">
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>

    <!-- 第2行 -->
    <tr>
        <td align="right">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>

    <!-- 第3行 -->
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

    <!-- 第4行 -->
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

效果：

1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

行合并与列合并

<table border="1" cellspacing=0 height="300px" width="500px" >
    <tr>
        <td rowspan="2">1-1</td>
        <td>1-2</td>
        <td colspan="2">1-3</td>
        <!-- <td>1-4</td> -->
    </tr>
    <tr>
        <!-- <td>2-1</td> -->
        <td>2-2</td>
        <td rowspan="3">2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <!-- <td>3-3</td> -->
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <!-- <td>4-3</td> -->
        <td>4-4</td>
    </tr>
</table>

效果：

1-1	1-2	1-3
1-1	2-2	2-3	2-4
3-1	3-2		3-4
4-1	4-2		4-4

七、超链接

href:设置超链接跳转的位置
target：设置网页打开位置
_self:在当前窗口中打开网页
_blank:在新建窗口中打开网页

<a href="http://www.baidu.com" target="_blank">百度</a>

效果：

百度

锚链接

<a href="#down">快速到达底部</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<!-- 自己可以多复制几行"<a href="#">111111111111111111111111111111</a><br />"看看效果 -->
<a href="#">111111111111111111111111111111</a><br />
<a href="#" id="down">底部</a><br />