HTML和HTML5常用标签

最新推荐文章于 2024-11-16 17:02:51 发布

杯酒笑离殇

最新推荐文章于 2024-11-16 17:02:51 发布

阅读量251

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/fire57/article/details/118198124

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

1、HTML简介
2、HTML基础语法
3、HTML文本标签
4、HTML格式化标签
5、HTML图像标签
6、HTML超链接标签
7、HTML表格标签
8、HTML表单标签
9、HTML框架标签
10、HTML多媒体标签

1、HTML简介

什么是HTML：

HTML（HyperText Mark-up Language）又称超⽂本标记语⾔。

超文本指的超链接、图片、视频、音乐等非文本内容，标记指的是该语言由各种标签组成。使用该语言编写的文本的扩展名是 “ .htm ” 或 “ .html ”。使用浏览器打开该文本就是通常说的网页，浏览器会按照各种标签将其内容渲染成网页。

HTML文档的类型：

HTML ，不做介绍。
XHTML，不做介绍。
HTML5，现在使用最多的类型，类型声明：<!DOCTYPE html>

2、HTML基础语法

HTML组成：

HTML文件里包含两部分：文档类型声明，html标签
html标签分为两部分：head头标签部分，body主体标签部分。头提供对网页信息的辅助，主体即为网页显示的具体内容
标签（标记）由 “ < ” 和 “ > ” 括起来
标签分为双标签（<标签名>内容</标签名>）和单标签（<标签名/>）
标签中可以存在属性，属性值用双引号引住，多个属性用空格分隔（<标签名属性1=“值1” 属性2=“值2“ />）
标签规范：标签名⼩写、属性使⽤双引号、标签要闭合（不规范浏览器也会尽量解析，不会报错，但是效果可能不达预期）

HTML注释： 

HTML的头head设置：

标签	描述	范例
base	定义了⻚⾯链接标签的默认链接地址	`<base href="http://www.xxx.com/" target="_blank">`
title	定义⽂档的标题	⽹⻚标题: `<title>本⽹⻚标题</title>`
meta	定义了HTML⽂档中的元数据	设置⽹⻚编码、关键字、描述 `<meta charset="utf-8"/>` `<meta name="Keywords" content="关键字"/>` `<meta name="Description" content="简介、描述" />`
link	定义了⼀个⽂档和外部资源之间的关系	导⼊CSS⽂件 `<link type="text/css" rel="stylesheet" href="xx.css"/>`
script	定义了客户端的脚本⽂件	`<script >` JavaScript脚本程序 `</script>`
style	定义了HTML⽂档的样式⽂件	`<style type="text/css">` 嵌⼊css样式代码 `</style>`

HTML案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="关键字" />
		<meta name="description" content="描述"/>
		<link rel="stylesheet" type="text/css" href="xxx.css"/>
		<base href="" target="_blank" />
		<script type="text/javascript">
			javascript脚本程序
		</script>
		<style type="text/css">
			css样式代码
		</style>
		<title>此处为标题</title>
	</head>
	<body>
	网页显示主体
	</body>
</html>

3、HTML文本标签

常用文本标签：

<hn>...</hn> ：其中n为1-6的值，表示内容为标题（加粗、独⽴⾏）
<i>...</i> ：内容斜体
<em>...</em> ：内容强调斜体，搜索引擎会将强调内容加以收录
<b>...</b> ：内容加粗
<strong>...</strong> ：内容强调加粗，搜索引擎会将强调内容加以收录
<cite></cite> ：一般用于作品标题的引⽤
<sub>...</sub> ：内容为下标 
<sup>...</sup> ：内容为上标
<del>...</del> ：为内容添加删除线
<u>...</u> ：为内容添加下划线

使用案例：

<!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>
    <i>内容为斜体</i><br>
    <em>内容为强调斜体</em><br>
    <b>内容加粗</b><br>
    <strong>内容强调加粗</strong><br>
    <cite>西游记</cite>是四大名著之一 <br>
    水分子：H<sub>2</sub>O<br>
    平方：X<sup>2</sup><br>
    <del>为内容添加删除线</del><br>
    <u>为内容添加下划线</u>
</body>

</html>

在这里插入图片描述

HTML中的实体字符： 实体名称对大小写敏感。

在这里插入图片描述

4、HTML格式化标签

常用格式化标签：

<br/> 换⾏
<p>...</p> 表示一个段落，会在段落前后有少许留白
<hr /> ⽔平分割线
<ul>...</ul> ⽆序列表，无顺序表示并列的内容集合，
<ol>...</ol> 有序列表，有顺序的内容集合，可以设置其type属性的值如：1 A a I i 等表示序号
<li>...</li> 列表项，与无序列表或有序列表组合使用
<dl>...</dl> ⾃定义列表
<dt>...</dt> ⾃定义列表头
<dd>...</dd> ⾃定义列表内容
<div>...</div> 常⽤于组合块级元素，无内容时没有效果，有内容会自动换行，块宽默认全屏，块高默认为内容高度
<span>...</span> 没有任何意义，常⽤于对包含的内容进行CSS定义样式，或者执行JavaScript进行操作

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格式化标签</title>
</head>
<body>
    使用后会换行<br>
    <p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿⑴，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p>
    <p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁⑵的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</p>
    <hr>
    <ul>
        <li>篮球</li>
        <li>足球</li>
        <li>乒乓</li>
    </ul>
    <ol>
        <li>开始</li>
        <li>执行</li>
        <li>结束</li>
    </ol>
    <ol type="A">
        <li>开始</li>
        <li>执行</li>
        <li>结束</li>
    </ol>
    <dl>
        <dt>1.1</dt>
        <dd>1.11</dd>
        <dd>1.12</dd>
        <dt>2.1</dt>
        <dd>2.11</dd>
        <dd>2.12</dd>
    </dl>
    <div>有内容的div</div>
    <div></div>
    <span>span无任何意义</span>
</body>
</html>

在这里插入图片描述

5、HTML图像标签

在 HTML 中插入图片有两种方式：使用 img 标签，设置背景图片。

这里将介绍 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>
    原图：<img src="https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" alt="百度图片" title="百度">
    图片加载失败：<img src="#" alt="百度图片" title="百度"><br>
    等比缩放：<img src="https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" alt="百度图片" title="百度" width="300">
    图片失真：<img src="https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" alt="百度图片" title="百度" width="300" height="200"><br>
    设置边框粗细：<img src="https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" alt="百度图片" title="百度" width="300" border="2"><br>
</body>
</html>

在这里插入图片描述

6、HTML超链接标签

超链接格式： <a href="链接⽬标url地址">带有链接的内容</a>

超链接可以是文字也可以是图片。

超链接属性：

href 要跳转的链接的url地址
target 打开链接窗口的方式
- _blank 在新窗口中打开链接
- _parent 在父窗口中打开链接
- _self 在本窗口中打开链接（默认方式）
- _top 在顶级窗口中打开链接
framename 窗口名称
title 鼠标悬停链接时的文字提示

a 标签既可用于超链接也能用于做锚点链接。

锚点链接使用方式：

定义⼀个锚点： <a id="a1"></a> 以前使⽤的是 <a name="a1"></a>
使用锚点：<a href="#a1">跳到a1处</a>

常见的锚点如页面中的直到底部和返回顶部等。

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
    <a id="top"></a>
    <a href="#bottom">锚点：直到底部</a><br>
    <a href="https://www.baidu.com/" title="百度链接">本窗口打开百度</a><br>
    <a href="https://www.baidu.com/" target="_blank">新窗口打开百度</a>
    <h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1>
    <h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1>
    <h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1>
    <h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1><h1>.</h1>
    <a id="bottom"></a>
    <a href="#top">锚点：返回顶部</a>
</body>
</html>

在这里插入图片描述

7、HTML表格标签

table 表格常用标签：

标签	描述	常用属性
table	表格	border边框粗细、width表格宽、cellspacing单元格间的间距、cellpadding单元格内文本与单元格上下边框的间距
caption	表格标题	align标题的排列方式，上下左右，不推荐这里使用，应在css里联合text-align使用
th	表格的表头	align,valign,bgcolor、rowspan、colspan、width、height
tr	表格的行	align,valign,bgcolor
td	表格的一个单元格	align单元格内文本水平位置,valign单元格内文本垂直位置,bgcolor背景色、rowspan合并多行的同一列段单元格、colspan和并多列的同一行单元格、width单元格宽、height单元格高
thead	表格页眉	align,valign
tbody	表格主体	align,valign
tfoot	表格页脚	align,valign

补充： 作为表头的内容会自动加粗并居中，表格主体 tbody 指表格表头之外的部分，即使不写浏览器在解释时也会自动添加。单元格的行合并必定是从上到下合并，列合并必定是从左到右合并。

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="2" width="600" cellspacing="0" cellpadding="10">
        <caption align="center">成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>87</td>
            <td rowspan="2" align="center" valign="top">86</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>99</td>
            <td>68</td>
            <!-- <td>68</td> -->
        </tr>
        <tr>
            <td>王五</td>
            <td colspan="2">86</td>
            <!-- <td>88</td> -->
            <td>93</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

8、HTML表单标签

8.1、form

<form></form> 表单标签，一般用于提交用户输入数据。

form 标签常用属性：

action 表单数据的提交地址
method 提交表单数据的方式
- get 提交数据并入到 url 请求中，数据可见（不安全），数据长度有限（(IE2k ⽕狐8k）
- post 提交数据 url 不可见，长度无限制，相对安全
enctype 提交数据的编码设置
target 规定何处打开 action 的 url
name 表单的名称

8.2、input

<input/> 是表单项标签，用于定义输入的字段（用户输入），其中 type 属性非常重要，它决定了输入框的类型，type 值如下：

text 单行文本框
password 密码框
radio 单选框，相同的 name 值才能构成一组单选框，每个框都有自己的 value 值，checked表示初始默认选中
Checkbox 多选框，相同的 name 值才能构成一组多选框，每个框都有自己的 value 值，checked表示初始默认选中
file 文件上传框
img 图片提交按钮，默认触发后提交表单数据
button 普通按钮
submit 提交按钮，默认触发后提交表单数据
reset 重置框，把表单所有表单项重置到初始状态（无默认值就是空的，有默认值就显示默认值）
hidden 表单的隐藏域，用户不可见且不可修改，会随表单数据一起提交

上方是HTML通用内容，下方为HTML5的新特性：
email 邮箱输入框，会自动验证邮箱的格式
url 网址输入框，会自动验证网址的格式
number 有范围的数字输入框
- max 最大数字
- min 最小数字
- step 每次变化的数字间隔
range 表示一定范围内数字的输入域，显示为滑动条，max最大数字，min最小数字
date 选取年、月、日
month 选取年、月
week 选取年、周
time 选取时间时、分
datetime 选取时间、⽇、⽉、年（UTC 时间）部分浏览器可能不支持此控件
datetime-local 选取年、月、日、时、分（本地时间）
search 搜索框
color 选择颜色

以下为 input 标签中常用的其他属性：

属性	作用
name	表单项的名称，只有拥有 name 的表单项才能被表单提交
value	输入的值，也可用与默认值
placeholder	预期的提示信息，在输入数据后消失
size	输入框的宽度
maxlength	输⼊框可输⼊的最⼤内容⻓度
readonly	输入框只能读，提交时仍能提交默认值
disabled	输入框被禁用，不能操作，也无法提交
checked	对于选择框来说是初始默认被选择
accesskey	指定快捷键(不常⽤) (IE:alt+键⽕狐:alt+shift+键)
tabindex	通过数字指定tab键的切换顺序(不常⽤)

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>表单标签--input标签的使用</h1>
    <form action="#" method="POST" >
        编号：<input type="text" name="identity" value="1000121" readonly/><br><br>
        账号：<input type="text" name="uname" placeholder="admin"/><br><br>
        密码：<input type="password" name="upass"/><br><br>
        电话：<input type="text" name="phone" value="12345678910" disabled/><br><br>
        性别：男<input type="radio" name="sex" value="1" checked/>
        女<input type="radio" name="sex" value="0"/><br><br>
        爱好：篮球<input type="checkbox" name="hobby" value="basketball"/>
        足球<input type="checkbox" name="hobby" value="football" checked/>
        排球<input type="checkbox" name="hobby" value="volleyball"/>
        乒乓球<input type="checkbox" name="hobby" value="ping-pang"/><br><br>
        导入：<input type="file" name="file"/><br><br>
        邮箱：<input type="email" name="email"/><br><br>
        网址：<input type="url" name="url"/><br><br>
        年龄：<input type="number" name="age" min="12" max="50" value="20"/><br><br>
        指数：<input type="range" name="index" min="1" max="100" value="24"/><br><br>
        日期：<input type="date" name="date"/>
        日期：<input type="month" name="date"/>
        日期：<input type="week" name="date"/>
        日期：<input type="time" name="date"/>
        日期：<input type="datetime-local" name="date"/><br><br>
        颜色：<input type="color" name="color"/><br><br>
        搜索：<input type="search" name="search" placeholder="搜一搜"/><br><br>
        <input type="hidden"/><br><br>
        <input type="button" value="普通按钮"/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
        <input type="image" src="./reg.gif"/><br><br>
       
    </form>
</body>
</html>

在这里插入图片描述

8.3、select

<select></select> 下拉列表标签。

常用属性：

属性名	作用
name	列表名称，也用于提交表单数据时与后台对应取值
size	定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled	列表菜单不可用
multiple	下拉列表可以多选（多选需按住Ctrl并点击）

<option></option> 下拉列表的单个选择项标签。

属性：

value 选择项的值

selected 默认被选定的下拉项

使用案例见 8.9

8.4、textarea

<textarea></textarea> 多行文本域输入框。

常用属性：

属性名	作用
name	文本域名称，也用于提交表单数据时与后台对应取值
cols	文本域列数
rows	文本域行数
disabled	禁用文本域
readonly	文本域只读

想要文本域里有初始默认值，只需在 textarea 双标签间输入内容即可。

使用案例见 8.9

8.5、button

<button></button> 按钮标签。

在标签间可以放入任意内容，如文本，图片等，使其可以触发按钮的点击事件。

重要事项： 如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button>与 </button> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

使用案例见 8.9

8.6、fieldset

<fieldset></fieldset> 可将表单内的元素进行分组。

属性：

disabled 定义 fieldset 分组是否可⻅。

form 定义该 fieldset 分组所属的⼀个或多个表单。

使用案例见 8.9

8.7、legend

<legend></legend> 为<fieldset> 、<figure> 以及 <details>元素定义标题。需要在以上三个标签里使用，标题名称为 legend 标签间的内容。

使用案例见 8.9

8.8、optgroup

<optgroup></optgroup> 定义选项组，可以将多个选项分组，必须用在 select 标签里，对 option 标签使用。

属性：

label 为选项组定义名称

disable 禁用选项组

使用案例见 8.9

8.9、datalist

<datalist></datalist> 需要与 input 标签联合使用，可以作为可选的数据输入列表。需要为 input 标签指明数据列表属性 list ，然后在 datalist 标签里使用 id 属性绑定 list 。每个数据选择项使用单个 option 标签，数据为 value 属性的值。

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="#" method="GET">
        <fieldset>
            <legend>标题1</legend>
            爱好：<select name="hobby" id="">
                <option value="1">篮球</option>
                <option value="2">足球</option>
                <option value="3">羽毛球</option>
                <option value="4" selected>乒乓球</option>
            </select><br><br>
        </fieldset><br><br>
        <fieldset>
            简介：<textarea name="info" id="" cols="20" rows="5">说一说吧</textarea><br><br>
            <button type="button">点击此可以触发按钮事件</button>
        </fieldset><br><br>
        城市：<select name="city" id="">
            <optgroup label="湖北省">
                <option value="1">武汉市</option>
                <option value="2">黄石市</option>
                <option value="3">黄冈市</option>
            </optgroup>
            <optgroup label="广东省">
                <option value="4">广州市</option>
                <option value="5">佛山市</option>
                <option value="6">江门市</option>
            </optgroup>
            <optgroup label="江苏省">
                <option value="7">南京市</option>
                <option value="8">无锡市</option>
                <option value="9">苏州市</option>
            </optgroup>
        </select><br><br>
        搜索：<input type="search" name="search" list="keywords"/>
        <datalist id="keywords">
            <option value="aaaa">
            <option value="bbbb">
            <option value="cccc">
            <option value="dddd">
            <option value="eeee">
        </datalist>
    </form>
</body>
</html>

在这里插入图片描述

9、HTML框架标签

<iframe></iframe> 会在页面中创建一个包含另一个 HTML 文档的框架。

框架也可以作为超链接跳转打开的窗口，只需在超链接中使用 target 属性绑定框架的 name 属性即可。

常用属性：

属性	作用
name	框架 iframe 的名称
height	框架的高度
width	框架的宽度
frameborder	框架的边框粗细

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架标签</title>
</head>
<body>
    <h1>框架标签实例</h1>
    <ol>
        <ui><a href="文本标签.html" target="myframe">文本标签实例</a></ui>
        <ui><a href="图片标签.html" target="myframe">图片标签实例</a></ui>
        <ui><a href="格式化标签.html" target="myframe">格式化标签实例</a></ui>
    </ol>
    <iframe src="文本标签.html" frameborder="1" width="80%" height="800" name="myframe"></iframe>
</body>
</html>

这里需要上述的文本标签.html、图片标签.html、格式化标签.html 在同一文件夹下才能生效。

在这里插入图片描述

10、HTML多媒体标签

多媒体标签：音频标签 <audio></audio> ，视频标签 <video></video> ，flash 动画标签 <embed></embed>

常用属性：

属性	作用
controls	播放控件，直接声明或赋值 controls 都行
loop	循环播放
poster	针对视频，表示视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
autoplay	自动播放，部分浏览器可能无法自动播放，或关闭了自动播放的功能
width	宽
height	高
src	多媒体地址，也可以不写，然后在标签间添加 source 标签，最后在 source 标签里指明 src

使用案例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <audio src="beidahuang.mp3" controls autoplay loop>你的浏览器不支持音频播放</audio>
    <audio controls  >
        <source src="beidahuang.mp3">
    </audio><br><br>
    <video src="fun.mp4" controls autoplay width="500" >你的浏览器不支持视频播放</video>
    <video controls   width="500">
        <source src="fun.mp4">
    </video><br><br>
    <embed src="haowan.swf" type="embed/swf">

</body>
</html>