HTML常用标签

最新推荐文章于 2024-04-09 08:00:00 发布

北方有梦_hsp

最新推荐文章于 2024-04-09 08:00:00 发布

阅读量341

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_30245525/article/details/108272369

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基本结构

- HTML⽂件的扩展名为 .html 或者 .htm
- HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息，“主体”部分提供⽹⻚的具体内容
- HTML是由： 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层
是 <html>...</html> 标签包裹
- HTML标签（标记）的语法是由 < 和 > 括起来。
- HTML标签有两种： 双标签 ： <标签名>....</标签名> 和 单标签 ： <标签名 />
- HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</
标签名>
- HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果  。

<!DOCTYPE html>
<html lang="en">
	<head>
 		<meta charset="UTF-8">
		<title>⽹⻚标题</title>
 		<!-- 此处可以写各种⻚头属性设置、CSS样式和JavaScript脚本等... -->
 	</head>
 <body>
 		⽹⻚显示内容
 </body>
</html>

HTML注释

html⽂档代码中可以插⼊注释，注释是对代码的说明和解释

 <!-- 这就是唯⼀的⼀种HTML注释了 -->

HTML中HEAD头部设置

head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置
在head中常包含如下⼦标签：
具体示例如下：

<!DOCTYPE html>
<html lang="en">
	<head>
			<meta charset="UTF-8">
			<title>⽹⻚标题</title>
			<meta name="Keywords" content="关键字" />
			<meta name="Description" content="简介、描述" />
			<link type="text/css" rel="stylesheet" href="**.css"/>
		<style type="text/css">
			嵌⼊css样式代码
		</style>
		<script >
			JavaScript脚本程序
		</script>
	</head>
	<body>
		<h3>⽹⻚显示内容</h3>
	</body>
</html>

文本标签

<hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独⽴⾏）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引⽤）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	 <title>⽂本标题示例</title>
</head>
<body>
	 <h3>HTML标签实例--⽂本标签</h3>
	 <h1>h1标题</h1>
	 <h2>h2标题</h2>
	 <h3>h3标题</h3>
	 <h4>h4标题</h4>
	 <h5>h5标题</h5>
	 <h6>h6标题</h6>
	 <i>i: 斜体标签</i> <br/>
	 <em>em: 强调斜体标签</em> <br/>
	 <b>b: 加粗标签</b><br/><br/>
	 <strong>strong: 强调加粗标签</strong><br/>
	 <del>del: 删除线</del><br/>
	 <u>u: 下划线</u> <br/><br/>
	 ⽔分⼦：H<sub>2</sub>O <br/>
	 4<sup>2</sup>=16
</body>
</html>

运行效果

HTML格式化标签

<br/> 换⾏
<p>...</p> 换段
<hr /> ⽔平分割线
列表：
	<ul>...</ul> ⽆序列表
	<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
	<li>...</li> 列表项
			<dl>...</dl> ⾃定义列表
			<dt>...</dt> ⾃定义列表头
			<dd>...</dd> ⾃定义列表内容
<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化
<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对
它进⾏操作。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	 <title>HTML标签实例--格式化标签</title>
</head>
<body>
	 <h3>HTML介绍</h3>
	 <p>超⽂本标记语⾔(Hyper Text Markup Language)，标准通⽤标记语⾔下的⼀个应⽤。HTML 不
	是⼀种编程语⾔，⽽是⼀种标记语⾔ (markup language)，是⽹⻚制作所必备的。</p>
	 <p>“超⽂本”就是指⻚⾯内可以包含图⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。<br/>
	 超⽂本标记语⾔的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提
	供关于⽹⻚的信息，“主体”部分提供⽹⻚的具体内容。</p>
	 <hr/>
	 <!-- 列表标签 -->
	 你的爱好：
	 <ul>
	 <li>看书</li>
	 <li>上⽹</li>
	 <li>爬⼭</li>
	 <li>唱歌</li>
	 </ul>
	 <ol type="a">
	 <li>看书</li>
	 <li>上⽹</li>
	 <li>爬⼭</li>
	 <li>唱歌</li>
	 </ol>
	 <dl>
	 <dt>问：HTML?</dt>
	 <dd>答：超⽂本标记语⾔</dd>
	 <dt>问：HTML?</dt>
	 <dd>答：超⽂本标记语⾔</dd>
	 <dt>问：HTML?</dt>
	 <dd>答：超⽂本标记语⾔</dd>
	 </dl>
	 <div>aaa</div>
	 <div>bbb</div>
	 <span>aaaa</span><span>bbbb</span>
</body>
</html>

运行效果

HTML图像标签

在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签： <img />
其中img标签中常⽤属性如下：
				src： 图⽚名及url地址
				alt: 图⽚加载失败时的提示信息
				title：⽂字提示属性
				width：图⽚宽度
				height：图⽚⾼度
				border：边框线粗细

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <h3>HTML标签实例--图⽚标签</h3>
 <img src="./images/a.jpg" title="图⽚" width="300" />
 <img src="./images/add.jpg" alt="⼆⽉兰花图⽚" width="300" />
 <img src="./images/a.jpg" width="280" border="2" />
</body>
</html>

运行效果如下：

HTML超链接标签

超级链接标签a：
	格式： <a href="链接⽬标url地址">显示⽂字</a>
	a标签的属性：
		href: 必须，指的是链接跳转地址
		target: 表示链接的打开⽅式：
				_blank 新窗⼝
				_parent ⽗窗⼝
				_self 本窗⼝（默认）
				_top 顶级窗⼝
				framename 窗⼝名
				title：⽂字提示属性（详情）
	锚点链接：
		定义⼀个锚点： <a id="a1"></a> 以前使⽤的是 <a name="a1"></a>
		使⽤锚点： <a href="#a1">跳到a1处</a>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	 <title>Document</title>
</head>
<body>
	 <h1>HTML标签实例--超级链接标签</h1>

	 <a href="http://www.baidu.com" title="百度链接" target="_blank">百度</a>

	 本地链接：<a href="3.html">3.html</a>
	
	 锚点：<a href="#myimg">我的⼥友</a>
	<br/>
	 <hr/>
	 <img src="./images/11.jpg" title="图⽚" width="700" />
	 <img src="./images/22.jpg" alt="美⼥图⽚" width="700" />
	
	 <a id="myimg"></a>
	 <img src="./images/33.jpg" width="700" />
	 <img src="./images/44.jpg" width="700" />
</body>
</html>

HTML表格标签

表格中的标签：
在这里插入图片描述
cellspacing:表格缝隙调整
cellpadding:表格内间距调整
th与td区别：th会居中加粗显示，td不会
rowspan:跨行
colspan:跨列
align：水平位置
valign：上中下

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	 <title>Document</title>
</head>
<body>
 	<h3>HTML标签实例--表格标签</h3>

	<table border="1" width="700" cellspacing="0" cellpadding="4">
 	 <caption><h3>学⽣信息表</h3></caption>
	 <tr>
		 <th>学号</th>
		 <th>姓名</th>
		 <th>年龄</th>
		 <th>班级</th>
 	 </tr>
 	 <tr>
		 <td>1001</td>
		 <td>张三</td>
		 <td>22</td>
		 <td>python04</td>
 	 </tr>
	 <tr>
		 <td>1002</td>
		 <td>李四</td>
		 <td>22</td>
		 <td rowspan="2">python04</td>
 	 </tr>
 	 <tr>
 <td>1003</td>
		 <td colspan="2">王五</td>
		 <!--<td>22</td>-->
		 <!--<td>python04</td>-->
	 </tr>
 	</table>
</body>
</html>

HTML表单标签

(1)<form>...</form> 表单标签
	form标签常⽤属性：
		 *action属性:提交的⽬标地址(URL)
		 *method属性:提交⽅式:get(默认)和post
		 get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
		 post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
		 enctype:提交类型
		 target: 在何处打开⽬标 URL。
		 name:属性为表单起个名字.在HTML5中使⽤ id 代替。

(2) <input> 表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。
具体在下⾯有详解：
		 如：<input type="text" name="username">
		 *type属性:表示表单项的类型:值如下:
			 text:单⾏⽂本框
			 password:密码输⼊框
			 checkbox:多选框 注意要提供value值
			 radio:单选框 注意要提供value值
			 file:⽂件上传选择框
			 button:普通按钮
			 submit:提交按钮
			 image:图⽚提交按钮
			 reset:重置按钮, 还原到开始(第⼀次打开时)的效果
			 hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
			 email ⽤于应该包含 e-mail 地址的输⼊域
			 url ⽤于应该包含 URL 地址的输⼊域
			 number ⽤于应该包含数值的输⼊域。
			 max 规定允许的最⼤值
			 min 规定允许的最⼩值
			 step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
			 value 规定默认值
			 range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条
			 max 规定允许的最⼤值
			 min 规定允许的最⼩值
			 step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
			 value 规定默认值
			 ⽇期选择器 Date pickers
			 date - 选取⽇、⽉、年
			 month - 选取⽉、年
			 week - 选取周和年
			 time - 选取时间（⼩时和分钟）
			 datetime - 选取时间、⽇、⽉、年（UTC 时间）
			 datetime-local - 选取时间、⽇、⽉、年（本地时间）
			 search ⽤于搜索域，⽐如站点搜索或 Google 搜索
			 color 颜⾊选择
			 *name属性: 表单项名,⽤于存储内容值的
			 *value属性: 输⼊的值(默认指定值)
			 *placeholder: 预期值的简短的提示信息
			 size属性: 输⼊框的宽度值
			 maxlength属性: 输⼊框的输⼊内容的最⼤⻓度
			 readonly属性: 对输⼊框只读属性
			 *disabled属性: 禁⽤属性
			 *checked属性: 对选择框指定默认选项
			 accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
			 tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)
		
		 src和alt是为图⽚按钮设置的

 注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空
 image图⽚按钮，默认具有提交表单功能。

(3) <select>...</select> 标签创建下拉列表。
		name属性:定义名称,⽤于存储下拉值的
		 size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
		 disabled 当该属性为 true 时，会禁⽤该菜单。
		 multiple 多选
		 <option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
		 *value属性:下拉项的值
		 *selected属性:默认下拉指定项.

(4) <textarea>...</textarea> 多⾏的⽂本输⼊区域
	 	 name :定义名称,⽤于存储⽂本区域中的值。
		 cols ：规定⽂本区内可⻅的列数。
		 rows ：规定⽂本区内可⻅的⾏数。
		 disabled： 是否禁⽤
		 readonly： 只读
 ...
 默认值是在两个标签之间

(5) <button>...</button> 标签定义按钮。
		您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

(6) <fieldset> --fieldset 元素可将表单内的相关元素分组。
		disabled属性：定义 fieldset 是否可⻅。
		form属性： 定义该 fieldset 所属的⼀个或多个表单。

(7) <legend></legend> -- 标签为 <fieldset> 、 <figure> 以及<details> 元素定义标题。
	<form>
		 <fieldset>
		 <legend>个⼈信息：</legend>
		 姓名：<input type="text" /><br/>
		 年龄：<input type="text" /><br/>
		 </fieldset>
		 <br/><br/>
		 <fieldset>
		 <legend>健康信息：</legend>
		 身⾼：<input type="text" /><br/>
		 体重：<input type="text" /><br/>
		 </fieldset>
	</form>

(8) <optgroup> html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项
	城市：
	<select name="city">
	 	<optgroup label="河北省">
			 <option>⽯家庄</option>
			 <option>保定</option>
			 <option>廊坊</option>
	 	</optgroup>
	 	<optgroup label="河南省">
			 <option>郑州</option>
			 <option>安阳</option>
			 <option>周⼝</option>
	 	</optgroup>
	</select>

(9) <datalist> html5标签-- <datalist> 标签定义可选数据的列表。与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。
		<form action="demo_form.php" method="get">
		 搜索：
			 <input type="search" list="namelist" name="keywords"/>
				 <datalist id="namelist">
					 <option value="zhangsan">
					 <option value="zhangsanfeng">
					 <option value="zhangwuji">
					 <option value="lisi">
					 <option value="lixiaolong">
			 </datalist>
		</form>

HTML框架标签

属性：
	 src：规定在 iframe 中显示的⽂档的 URL
	 name：规定 iframe 的名称
	 height：规定 iframe 的⾼度。
	 width：定义 iframe 的宽度。
	 frameborder：规定是否显示框架周围的边框。
	 
例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

HTML5

新增布局标签

在这里插入图片描述

新增的input type属性值：

这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示
更多新增type 参考 w3school

新增的input 属性

在这里插入图片描述

多媒体标签

<audio src="./images/beidahuang.mp3" controls="controls">
 你的浏览器不⽀持播放
</audio>
<br/>
<audio controls="controls">
 <source src="./images/beidahuang.mp3" type="audio/mpeg" />
  你的浏览器不⽀持播放
</audio>

<br/><br/>
<video controls="controls" width="400" height="400">
 <source src="./images/fun.mp4" type="video/mp4" />
 <source src="movie.webm" type="video/webm">
 你的浏览器不⽀持视频播放
</video>

<video controls loop poster="tiao.jpg">
 <source src="movie.webm" type="video/webm">
 <source src="movie.ogg" type="video/ogg">
 <source src="movie.mp4" type="video/mp4">
 您的破浏览器该扔了，不⽀持视频标签
</video>

<br/><br/>

<embed src="./images/haowan.swf" width="300" height="300" />

HTML+CSS视频网站案例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vdeo</title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
        #header .header-nav{
            height: 80px;
            width: 1200px;
            margin: 0px auto;
        }
        #header{
            top: 0px;
            width: 100%;
        }
        #nav{
            height: 60px;
            width: 1200px;
            margin: 0px auto 0px;
            background-color:rgb(0, 0, 0);
        }
        #container{
            width: 100%;
            margin-top: 50px;
        }
        #container .content{
            width: 1200px;
            margin: 0px auto;
        }
        #container .content .main{
            width: 950px;
            margin: 0px auto;
            
        }
        #container .content .main ul li{
            display: block;
            width: 100%;
            height: 220px;
            line-height: 220px;
            margin-bottom: 20px;
            background-color: rgb(148, 145, 145);
            border: 1px solid rgb(0, 0, 0);
        }
        .main ul li .ids{
            height: 50px;
            width: 50px;
            margin-top: 85px;
            margin-bottom: 85px;
            background-color: rgb(158, 42, 197);
            display: inline-block;
            vertical-align:middle
        }
        .main ul li .info{
            height: 100%;
            width: 680px;
            float: right;
            background-color: rgba(0, 0, 0,1);
        }
        .main ul li .info .right{
            width: 80px;
            height: 80px;
            float: right;
            margin-top: 70px;
            font-weight: bold;
            color: rgb(251, 13, 13);
        }
        .main ul li .info .left a{
            width: 300px;
            height: 120px;
            float: left;
            margin-top: 50px;
            font-size: 35px;
            font-weight: bold;
            color: sandybrown;
            text-shadow:2px 3px 4px  rgb(255, 3, 3);
            transition: font 0.5s ease;
        }
        .main ul li .info .left a:hover{
            font-size: 40px;
        }

        .main ul li .pic{
            width: 160px;
            height: 200px;
            margin: 10px 26px;
            display: inline-block;
            vertical-align:middle
        }
        #footer{
            height: 93px;
            width: 1200px;
            margin: 0px auto;
            background-color: rgb(0, 0, 0);
        }
        .main ul li div img{
            height: 200px;
            width: 160px;
        }
        #nav ul li{
            width: 180px;
            float: left;
            margin-left: 15px;
        }
        #nav ul li a{
            display: block;
            width: 100px;
            font-size: 20px;
            font-weight: bold;
            line-height: 60px;
            color:rgb(187, 185, 185);
            text-align: center;
        }
        #nav ul li a:hover{
            background-color: rgb(100, 100, 100);
            color:rgb(255, 255, 255)
        }
        #header .header-nav .aaa{
            width: 240px;
            margin: 0px auto;
            
        }
        #header .header-nav .aaa ul li{
            height: 80px;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.75);
            padding-top: 30px;
            font-weight: bold;
            text-shadow:2px 2px 2px  rgb(43, 42, 42);
        }

    </style>
</head>
<body style="background-color: rgba(155, 151, 151,0.2);">
    <div id="header">
        <div class="header-nav"><div class="aaa"><ul>
            <li>
                Hellord World视频网
            </li>
        </ul></div></div>
    </div>
    <div id="nav">
        <ul>
            <li><a href="./vdeoDemoPlus.html">首页</a></li>
            <li><a href="https://www.iqiyi.com/dianying/?vfrm=pcw_home&vfrmblk=C&vfrmrst=712211_channel_dianying">电影</a></li>
            <li><a href="https://www.iqiyi.com/dianshiju/">电视剧</a></li>
            <li><a href="https://www.iqiyi.com/dongman/?vfrm=pcw_home&vfrmblk=C&vfrmrst=712211_channel_dongman">动漫</a></li>
            <li><a href="https://www.iqiyi.com/zongyi/">综艺</a></li>
            <li><a href="https://blog.csdn.net/qq_30245525">联系作者</a></li>
        </ul>
    </div>
    <div id="container">
        <div class="content">
            <div class="main">
                <ul>
                    <li>
                        <div class="info">
                            <div class="right">评分：9.7</div>
                            <div class="left"><a href="./img/50463985_c1fbf4ebadf2ed65ff3b723f5f5ce28f_0_cae.mp4">MV：mojito</a></div>
                        </div>
                        <div class="ids" style="background-image: url(./img/a.png);"></div>
                        <div class="pic"><a href="./img/50463985_c1fbf4ebadf2ed65ff3b723f5f5ce28f_0_cae.mp4"><img src="./img/timg.jfif" alt=""></a></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="right">评分9.6</div>
                            <div class="left"><a href="./img/beidahuang.mp3">MP3：北大荒</a></div></div>
                        <div class="ids" style="background-image: url(./img/b.png);"></div>
                        <div class="pic"><a href="./img/beidahuang.mp3"><img src="./img/444.jfif" alt=""></a></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="right">评分9.5</div>
                            <div class="left"><a href="./img/fun.mp4">MV：好久不见</a></div>
                        </div>
                        <div class="ids" style="background-image: url(./img/c.png);"></div>
                        <div class="pic"><a href="./img/fun.mp4"><img src="./img/好久不见.png" alt=""></a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer"><img src="./img/TYJUHY`USJ{]}HWP1K(M@%P.png" alt=""></div>
</body>
</html>

效果

北方有梦_hsp

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签

HTML基本结构- HTML⽂件的扩展名为 .html 或者 .htm- HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息，“主体”部分提供⽹⻚的具体内容- HTML是由：标签和内容构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 <html>...</html> 标签包裹- HTML标签（标记）的语法是由 < 和 > 括起来。- HTML标签有两种：双标签： &l
复制链接

扫一扫

专栏目录