html（Hyper Text Markup Language）基本标签

最新推荐文章于 2022-11-26 10:25:04 发布

永不被定义

最新推荐文章于 2022-11-26 10:25:04 发布

阅读量117

点赞数

文章标签： html5 前端开发语言

本文链接：https://blog.csdn.net/weixin_51526948/article/details/125144103

版权

必备标签

根标签

<html></html>：代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点
文档元数据
代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。

头标签

<head></head>:head标签是网页的HEAD(头)部分中包含有的内置标签，一般用来申明使用的脚本语言，以及网页传输时使用的方式等。它是所有头部元素的容器。

body标签

<body></body>:body 元素是定义文档的主体。表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！

尾标签（非必要）

网页创建的基本格式

<html>
	<head>
		<title>我的第一个网页</title>
		我在head里面
	</head>

	<body>
		我的第一个网页
        Helloword 
        我在body里面
	</body>

	<footer>
		我在footer里面
	</footer>
</html>

其他标签

<br>：

换行标签

<hr>:

水平标签，生成一条水平线

标签级

段落标签

<p></p>

   
<body>
    <!--br换行-->
    hello,word!!!<br>
    <hr>

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

    <p>段落标签</p>
    
</body>

运行效果图

p标签中的文字标签：

<strong>加粗文字</strong>

<em>变为斜体</em>

特殊符号类：

>大于号，

<小于号，

 空格，

"引号，

©版权符号。

<img>图像标签</img>

图像标签中的样式：

src图像地址，

alt图像的替代文字，用以解释说明图像

title图像的悬停文字，

width图像的的宽度，

height图像的高度

代码演示

<body>
    <h2>醉后不知天在水，满船清梦压星河</h2>
    <hr/>
    <p>
        <!--
            strong加粗字体，
            em变为斜体，
            &gt;大于号，
            &lt;小于号，
            &nbsp;空格，
            &quot;引号，
            &copy;版权符号。
        -->
        <strong>明月之夜，天地之间，</strong><br>
        醉后的人，清冷的船，<br>
        痴迷的梦，令人心醉。<br>
        <em>这就是诗词的魅力，短短两句,</em><br> 
        便能让人置身于唯美梦幻的情景空间内，令人心驰神往。<br>
        <img src="D:/huashan/qianduan/img/wang.jpg" alt="这是一张美女图片" title="meinv" width="400" height="300">
    </p>
    
    <p>
            如果时间&gt;晚上六点就回家<br>
            如果时间&lt;早上八点就可以去吃饭<br>
            这是n个空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;。<br>
            &quot;这是一对引号&quot;<br>
            &copy;2003-3013北大青鸟<br>
    </p>
</body>

代码效果图

<a></a>超链接标签：

通过使用href属性，创建指向另外一个文档的链接（或超链接）通过使用name或id属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）

target：

用来指向超链接展示页面的，_self在当前页展示，_blank用新页面展示等。

代码实现

<body>
    <a href="class04小测试.html" target="_blank">
        <img src="D:/huashan/qianduan/img/wang.jpg" alt="这是一张美女图片" title="点击查看图片背后内容" width="400" height="300">
    </a>
    <br>

    <a href="class04小测试.html" target="_self">点击查看图片背后内容</a><br>
</body>

运行效果图

点击图片或者下面的链接会有不同的页面展示