HTML⽹页设计：⼀、HTML的基础
⼀、HTML的基础结构
1、HTML⽂档的组成
HTML⽂档主要由3部分组成。
HTML部分：HTML部分以<HTML>标签开始，以<HTML>标签结束。<html>标签⽤来告诉浏览器这两个标签中间的内容是HTML⽂档。
头部：头部以<head>标签开始，以</head>标签结束。这部分包含显⽰在⽹页标题栏中的标题和其他在⽹页中不显⽰的信息。标题包含在<title>和</title>标签之间。
主体部分：主体部分包含在⽹页中显⽰的⽂本、图像和链接。主体部分以<body>标签开始，以</body>标签结束。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第⼀个⽹页</title>
</head>
<body>
</body>
</html>
⼆、HTML的基本标签
1、标题标签
基本标题标签：⼀级标题最⼤，依次越来越⼩。
<h1>⼀级标签</h1>
<h2>⼆级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!DOCTYPE html>
<html lang="en">
html网页设计的标题<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>⼀级标签</h1>
<h2>⼆级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>
2、段落标签
<p>段落</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处
<p>众⾥寻他千百度</p>
<p>蓦然回⾸，正在灯⽕阑珊处</p>
</body>
</html>
3、换⾏标签
<br/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换⾏</title>
</head>
<body>
众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处
众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处
<br>众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处    <br>
<br>众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处</body>
</html>
段落标签和换⾏标签的不同：在⽣成的⽹页中，段落段前段后具有间距，⽽换⾏每⾏之间没有间距。
4、⽔平线标签
<hr/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⽔平线</title>
</head>
<body>
众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处
<hr>
众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处
</body>
</html>
5、注释
<!–这是⼀段注释。注释不会在浏览器中显⽰。–>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注释</title>
</head>
<body>
<!-- 这是⼀段注释。注释不会在浏览器中显⽰。 -->
众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处
<p>众⾥寻他千百度，蓦然回⾸，正在灯⽕阑珊处</p>
</body>
</html>
6、特殊符号
空格：   ⼤于号>：>  ⼩于号<：<  版权符号：©；商标：®；
<title>特殊符号</title>
</head>
<body>
空      ；格<br/> <!--⼤于号-->
x>y<br/>
<!--⼩于号-->
1<2<br/>
<!--版权符号-->
这是⼀个版权符号：© <br/>
这是⼀个商标符号:®
</body>
</html>
7、超链接
<a href="baidu">这是⼀个超链接</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="baidu">这是⼀个超链接</a>
</body>
</html>
8、图⽚
<img src="../img/pic3.png">
<title>图⽚</title>
</head>
<body>
<img src="../img/pic3.png">
</body>
</html>
9、有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<p>有序列表</p>
<ol>
<li>好好学习，天天向上</li>
<li>⼀⽇不学，脑袋空空如也</li>    </ol>
<p>⽆序列表</p>
<ul>
<li>好好学习，天天向上</li>
<li>⼀⽇不学，脑袋空空如也</li>    </ul>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。