html常用标签，html骨架标签 html文章标题标签 html空格、换行、段落、注释、加粗、倾斜、删除键标签、img标签、超链接、绝对路径和相对路径、列表、布局标签、音视频标签

最新推荐文章于 2023-09-05 17:56:17 发布

好好学习昂

最新推荐文章于 2023-09-05 17:56:17 发布

阅读量139

点赞数

分类专栏：软件测试学习笔记 # 阶段1测试基础文章标签： html html5

本文链接：https://blog.csdn.net/m0_46442882/article/details/119481114

版权

软件测试学习笔记同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

阶段1测试基础

17 篇文章 0 订阅

订阅专栏

html常用标签

html骨架标签

骨架标签：新建的时候默认生成的那些标签
meta:标签可以设置网页的字符集（utf-8,国际编码）
title:标签设置网页的标题
body:标签设置网页的主题内容部分

html文章标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<h7>标签7，只有标签1-6，所以标题7不是标题</h7>
		普通文字			
	</body>
</html>

在这里插入图片描述

html空格、换行、段落、注释

&nbsp;  代表一个空格
<br />  一次换行
<p>段落p</p>

语义化：在核实的地方使用合理的标签，就叫满足标签语义化，可以在搜索引擎排名中更靠前，点击率更高。
注释:是程序员给自己提醒的用的，快捷键ctrl+?，再按一次可以取消注释。

加粗、倾斜

<body>
普通文字<br />
<b>这是加粗文字</b><br />
<strong>这也是加粗文字,strong不仅加粗，又代表特别强调</strong><br>
<i>倾斜标签i</i><br />
<em>倾斜标签，有倾斜，又有一般强调</em>
</body>

在这里插入图片描述

删除键标签

<!--删除键标签-->
		<!--w3c 明确说明，s要被del替代，替代之后，只能用del-->
		原价<s>998</s><br />
		原价<del>999</del><br />
		现价99.8

在这里插入图片描述

img标签

<body>
		<!--src代表资源，他后面的值应该写想要加载的图片地址-->
		<!--width 宽度， height高度-->
		<!--title 鼠标悬停的时候的提示文字-->
		<!--alt （1）当图片不能正常加载的时候，文字才会被看到（2）网页阅读器读取此内容-->
		<img src="三坊七巷.jpg" width="500" height="500" title="三坊七巷" alt="这是三坊七巷"/>
	</body>

超链接

<body>
		
		<a href="http://www.baidu.com">点击可以打开百度</a>
		<br />
		<a href="文字相关的标签.html">点击可以打开本地的文字相关的标签.html</a>
		<br />
	<!--打开本地的文件，直接再href中写目标文件的名字即可，		
	本地文件是这个电脑的文件，和当前的文件需要在同一个文件夹里面-->
	
	<!--
		新窗口打开链接，默认超链接都是在当前窗口打开，
		如果想在新窗口打开，需要添加target属性
		
		新窗口打开，就是原来的界面还在，出现了一个新的百度界面，没有把原来的界面给覆盖
		不加target属性，点击超链接，新的界面会把原来的界面覆盖
	-->
	
	<a href="http://www.baidu.com" target="_blank">点击可以在新窗口打开百度</a>
	<br />
	<!--		
		空连接，展示不知道点击之后跳转到哪里，使用空连接占位		
	-->					
	<a href="#">这是一个空连接</a>
	</body>

绝对路径和相对路径

<!-- 
    相对路径：相当于当前html文件去找其它资源的方式
    （1)同级查找，当前html和目录在同一级目录中。语法:直接写资源的名字即可
    （2）上级查找，当前hyml和目录在上级目录中。语法：../直接写资源的名字即可
    （3）下级查找，当前html和目录在下级目录中。语法：文件夹名/写资源的名字
 -->
 <!-- （1）同级 -->
 <img src="三坊七巷.jpg" >
 <!-- （2）上级 -->
 <img src="../三坊七巷.jpg" >
 <!-- （3） 下级-->
 <img src="tu/三坊七巷.jpg" >
 <!-- 绝对路径 ，在前端里面，不推荐使用绝对路径-->
 <img src="C:\Users\Administrator\Desktop\好好学习\王俊凯.jpg"/>

列表

<body>
    <!-- 无序列表 -->
    <ul>
        <li>学习</li>
        <li>看书</li>
        <li>听歌</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>王俊凯</li>
        <li>王源</li>
        <li>易烊千玺</li>
    </ol>
</body>

运行结果
在这里插入图片描述

布局标签

<body>
    <!-- 布局标签， 当没有任何语义的时候，
        就可以使用div或者span来进行内容的包裹，
        目的是后期css代码可以找到对应标签中的内容来设置样式-->
    <!-- div独占一行，称之为大盒子 -->
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <!--  span 一行可以放置多个内容，称之为小盒子-->
    <span>span1</span>
    <span>span1</span>
    <span>span1</span>
    <span>span1</span>
</body>

音视频标签

<body>
    <audio src="周杰伦 - 晴天.mp3" controls="controls"></audio>
    <video src="海边视频.mp4" controls="controls"></video>
</body>

好好学习昂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html常用标签，html骨架标签 html文章标题标签 html空格、换行、段落、注释、加粗、倾斜、删除键标签、img标签、超链接、绝对路径和相对路径、列表、布局标签、音视频标签

html常用标签html骨架标签骨架标签：新建的时候默认生成的那些标签meta:标签可以设置网页的字符集（utf-8,国际编码）title:标签设置网页的标题body:标签设置网页的主题内容部分html文章标题标签<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> &
复制链接

扫一扫