HTML网页设计：一、HTML的基础

最新推荐文章于 2024-05-28 22:57:50 发布

少可爱

最新推荐文章于 2024-05-28 22:57:50 发布

阅读量770

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/weixin_43776126/article/details/118708978

版权

一、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">
<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、特殊符号
空格：  大于号>：> 小于号<：< 版权符号：&copy；商标：&reg；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>
<body>
    空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
	<!--大于号-->
	x&gt;y<br/>
	<!--小于号-->
	1&lt;2<br/>
	<!--版权符号-->
	这是一个版权符号：&copy; <br/>
    这是一个商标符号:&reg;
</body>
</html>

7、超链接

<a href="http://baidu.com">这是一个超链接</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <a href="http://baidu.com">这是一个超链接</a>
</body>
</html>

8、图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

少可爱

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML网页设计：一、HTML的基础

一、HTML的基础结构1、HTML文档的组成HTML文档主要由3部分组成。HTML部分：HTML部分以<HTML>标签开始，以<HTML>标签结束。<html>标签用来告诉浏览器这两个标签中间的内容是HTML文档。头部：头部以<head>标签开始，以</head>标签结束。这部分包含显示在网页标题栏中的标题和其他在网页中不显示的信息。标题包含在<title>和</title>标签之间。主体部分：主体部分包
复制链接

扫一扫