<!DOCTYPE html>
<html lang="en">
<head>
<!--name的keywords的content内容用来便于搜索引擎机器人查找信息和信息分类用-->
<meta name="keywords" content="meta的content属性内容说明">
<!--name的description勇于描述网页，content为描述的内容-->
<meta name="description" content="description网页描述信息">
<!--网页访问30秒后自动跳转刷新至百度网页-->
<!--http-equiv相当于http的文件头作用，可以向浏览器传回一些用的信息，
以帮助正确和精确地显示网页内容，与之对应的内容为content，content中的内容其实就是各个参数的变量值-->
<meta http-equiv="refresh" content="30;URL=https://www.baidu.com">
<!--content-type告诉浏览器解析该页面的编码方式-->
<meta http-equiv="content-type" charset="UTF-8">
<title>Title标签:网页标题</title>
<!--link标签的rel的icon属性显示网页标题中的图标-->
<link rel="icon" href="//www.jd.com/favicon.ico">
<style>
div{
color: blueviolet!important;
background-color: chartreuse;
}
span{
color: green!important;
background-color: cyan;
}
#div1{
height: 500px;
background-color: red;
}
#div2{
height: 500px;
background-color: orange;
}
#div3{
height: 500px;
background-color: green;
}
#div4{
height: 500px;
background-color: forestgreen;
}
#div_top{
color: black;
background-color: burlywood;
}
</style>
</head>
<body>
hello world，body标签：网页内容
<div id="div_top" aria-current="location">目录</div>
<a href="#div1">第一章节</a>
<a href="#div2">第二章节</a>
<a href="#div3">第三章节</a>
<a href="#div4">第四章节</a>
<br>
<hr>hr标签：显示一条横线，表示结束，不闭合标签
<h1 style="color: red">h1标签:标题标签</h1>
<h2 style="color: orange"> h2标签:小于h1的标题标签</h2>
<h3 style="color: yellow"> h3标签:小于h2的标题标签</h3>
<h4 style="color: green"> h4标签:小于h3的标题标签</h4>
<h5 style="color: forestgreen"> h5标签:小于h4的标题标签</h5>
<h6 style="color: blue"> h6标签:小于h5的标题标签</h6>
<p>p标签:段落标签 换行，隔行，块级</p>
<p>p标签:段落标签 换行，隔行</p>
<div style="color: red">div标签:块级标签，什么功能都没有的标签,需要自己设定属性格式</div>
<div>使用head中的div css样式</div>
<span style="color: blue">span标签:内联标签，接着后面显示，显示长度取决于内容的长度； 块级标签</span>
所有的标签分为：块级标签和内联标签
div：block 块级
span：in-line 内联
<!--下面的标签都是内联标签接着之前的显示在同一行上-->
<b>b标签：加粗的作用</b>
<em>em标签：字体变为斜体</em>
<strike>strike标签:去除效果</strike>
<!--sub标签为下标，sup标签为上标，br标签为换行标签，del标签为删除标签-->
<div>
sub下标：2<sub>3</sub><br>
sup上标：2<sup>3</sup><br>
<del>del标签：删除效果，类似于stricke标签效果</del>
</div>
<img src="http://pic1.win4000.com/wallpaper/2019-12-17/5df8a14493926.jpg" width="500px" alt="图片加载失败" title="美女图片点击有惊喜">
<br>
a标签:1.超链接标签，
2.锚: 用来设置类似小说目录跳转到对应章节
<a href="https://baike.baidu.com/item/%E5%96%9C%E7%B3%96%E9%9F%B3%E4%B9%90/1469446?fr=aladdin" target="_blank" title="喜糖音乐">喜糖音乐,target="_blank"设置从新的标签中打开超链接</a>
<br>
<div id="div1">第一章节
<br>
<img src="https://img-blog.csdnimg.cn/2022010614544455890.jpeg" height="400px" title="卡通动漫">
</div>
<a href="#div_top">返回顶部</a>
<div id="div2">第二章节
<br>
<img src="http://img5.imgtn.bdimg.com/it/u=2512863397,2193113276&fm=26&gp=0.jpg" title="昆虫" alt="图片加载失败" height="400px">
</div>
<a href="#div_top">返回顶部</a>
<div id="div3">第三章节
<br>
<img src="http://img3.imgtn.bdimg.com/it/u=4211583159,4118431348&fm=26&gp=0.jpg" height="400px" title="胡萝卜">
</div>
<a href="#div_top">返回顶部</a>
<div id="div4">第四章节
<br>
<img src="http://img5.imgtn.bdimg.com/it/u=1142277570,1251772169&fm=26&gp=0.jpg" alt="图片加载失败" title="人物合影" height="400px">
</div>
<a href="#div_top">返回顶部</a>
<br>
ul标签：无序列表显示的标签，其中嵌套li标签
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<br>
ol标签：有序列表显示的标签，显示序号，其中嵌套li标签
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<br>
dl标签:章节显示标签，依次嵌套dt和dd标签
<dl>
<dt>第一章</dt>
<dd>第1节</dd>
<dd>第2节</dd>
<dd>第3节</dd>
<dd>第4节</dd>
<dt>第二章</dt>
<dd>第1节</dd>
<dd>第2节</dd>
<dd>第3节</dd>
<dd>第4节</dd>
</dl>
<br>
</body>
</html>
15万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
