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; 空格
> 大于号
< 小于号
© 版权符号©️
三、常用标签
关注语义,而不是样式!!!
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="好漂亮的跑车" />
效果:
![好漂亮的跑车 这是一辆红色的跑车](img/car.jpg)
![好漂亮的跑车 这是一辆红色的跑车](https://i-blog.csdnimg.cn/blog_migrate/5e70828d0a2d76336d04acabca2681d4.jpeg)
四、行内与块元素
注意:
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 | |
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 />
效果:
快速到达底部
111111111111111111111111111111
111111111111111111111111111111
111111111111111111111111111111
111111111111111111111111111111
111111111111111111111111111111
底部