HTML5常用标签用法大全

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

很皮的皮蛋瘦肉粥

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

阅读量1k

点赞数 5

分类专栏： HTML5 文章标签： html

本文链接：https://blog.csdn.net/cxycxytony/article/details/107371092

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

1、HTML简介
2、HTML5的优势
3、W3C标准
4、HTML基本网页信息
5、HTML网页基本标签
- 5.1、标题标签
- 5.2、段落标签
- 5.3、换行标签
- 5.4、水平线标签
- 5.5、字体样式标签
- 5.6、注释和特殊符号
6、图像标签
7、链接标签
- 7.1、页面间链接
- 7.2、锚链接
- 7.3、功能性链接
8、块元素和行内元素
- 8.1、块元素
- 8.2、行内元素
9、列表标签
- 9.1、无序列表
- 9.2、有序列表
- 9.3、自定义列表
10、表格标签
11、视频和音频
- 11.1、视频元素
- 11.2、音频元素
12、页面结构分析
13、iframe内联框架
14、初识表单
- 14.1、get和post
- 14.2、单选框
- 14.3、多选框
- 14.4、按钮
- 14.5、下拉框
- 14.6、列表框
- 14.7、文件域
- 14.8、文本域
15、搜索滑块和简单验证
15.1、邮件验证
15.2、URL验证
15.3、数字验证【适合商品购买】
15.4、滑块
15.5、搜索
16、表单的应用
- 16.1、隐藏域
- 16.2、只读
- 16.3、禁用
- 16.4、增强鼠标可用性
17、表单初级验证
- 17.1、placeholder
- 17.2、required
- 17.3、pattern

1、HTML简介

Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等。

2、HTML5的优势

世界知名浏览器厂商对HTML5的支持

微软
Google
苹果
Opera
Mozila

市场的需求

跨平台

3、W3C标准

W3C

World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/

W3C标准包括

结构化标准语言（HTML、XML）
表现标准语言（css）
行为标准（DOM、ECMAScript）

4、HTML基本网页信息

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML">
    <meta name="description" content="学习前端知识">
    <!-- title网页标题 -->
    <title>Title</title>
</head>

<!-- head标签代表网页主题 -->
<body>

</body>

</html>

5、HTML网页基本标签

5.1、标题标签

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

5.2、段落标签

<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

5.3、换行标签

两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

5.4、水平线标签

<hr/>

5.5、字体样式标签

粗体：<strong>i love you</strong>
斜体：<em>i love you</em>

5.6、注释和特殊符号

空格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号：&copy;

6、图像标签

常见图片格式：JPG、GIF、PNG、BMP…

标签结构：
在这里插入图片描述

<img src="../resources/image/1.jpg" alt="mybatis" title="悬停文字" width="300px" height="300px">

7、链接标签

标签结构：
在这里插入图片描述

7.1、页面间链接

从一个页面跳转到另一个页面

<!--
target：表示窗口在哪里打开
    _blank:在新标签中打开
    _self:在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转</a>
<a href="https://www.baidu.com" target="_self">惦记我跳转到百度</a>
<a href="https://www.baidu.com"><img src="../resources/image/1.jpg"></a>

7.2、锚链接

<!-- 使用name作为标记 -->
<a name="top">顶部</a>
...
...
...
<!-- 锚链接
    1.需要一个锚标记
    2.跳转到标记
 -->
<a href="#top">返回顶部</a>

也可以从另一个页面跳到锚链接

<a href="4.链接标签学习.html#top">跳到锚链接</a>

7.3、功能性链接

可以参考：QQ推广

<!-- 功能性链接
 邮件链接：mailto
 QQ链接：百度QQ链接自动生成
 -->
<a href="mailto:983934611@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，有什么能帮您的吗？" title="你好，有什么能帮您的吗？"/></a></body>

8、块元素和行内元素

8.1、块元素

无论内容多少，该元素独占一行
（p、h1-h6…）

8.2、行内元素

内容撑开宽度，左右都是行内元素的可以排在一行
（a、stron、em…）

9、列表标签

9.1、无序列表

<!-- 无序列表
 应用范围：导航，侧边栏。。。
 -->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

9.2、有序列表

<!-- 有序列表
 应用范围：试卷，问答。。。
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

9.3、自定义列表

<!-- 自定义列表
dl:列表
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>前端</dd>
    <dt>位置</dt>
    <dd>西安</dd>
    <dd>天津</dd>
    <dd>北京</dd>
    <dd>兰州</dd>

</dl>

10、表格标签

为什么使用表格

简单通用
结构稳定

基本结构：单元格，行，列，跨行，跨列

<!--
 表格：table
 表头：th
 行：tr
 列：td
 -->
<table border="1px">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <tr>
        <!-- colspan 跨列 -->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!-- rowspan 跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

11、视频和音频

11.1、视频元素

video

<!-- 视频
src:资源路径
controls:控制条
autoplay：自动播放
loop：循环播放
-->
<video src="#" controls autoplay loop></video>

11.2、音频元素

audio

<!-- 音频
src:资源路径
controls:控制条
autoplay：自动播放
loop：循环播放
-->
<audio src="#" controls autoplay loop/>

12、页面结构分析

header
标题头部区域的内容（用于页面或页面中的一块区域）
footer
标记脚部区域的内容（用于整个页面或页面的一块区域）
section
Web页面中的一块独立区域
article
独立的文字内容
aside
相关内容或应用（常用于侧边栏）
nav
导航类辅助内容

13、iframe内联框架

在这里插入图片描述

<!-- iframe内联框架
 src:地址
 w-h:宽度高度
 -->
<iframe src="http://www.baidu.com" name="hello" frameborder="0" height="300px" width="300px"></iframe>
<!-- 会在内联框架中下试这个网页 -->
<a href="http://www.taobao.com" target="hello">点击跳转</a>

14、初识表单

在这里插入图片描述

14.1、get和post

<!--
action: 表单提交的位置，可以是网站也可以是一个请求处理地址
method: post , get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全,高效
    post：比较安全，传输大文件
    required：不能为空
-->
<form action="1.我的第一个网页.html" method="post">
    <!-- 文本输入框：input type="text" -->
    <p>名字：<input type="text" name="username" required/> </p>
    <!-- 密码框：input type="password" -->
    <p>密码：<input type="password" name="pwd"/></p>

    <p>
        <input type="submit"/>
        <input type="reset" value="清空"/>
    </p>
</form>

在这里插入图片描述

14.2、单选框

单选框的前提是它们在同一个组（name相同），反之，可以多选

    <!--
    value：单选框的值
    name：表示组
    -->
   	<!-- checked默认选中 -->
    <p>
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

14.3、多选框

    <p>
        <!-- checked默认选中 -->
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

14.4、按钮

    <p>
    	<!-- 普通按钮 -->
        <input type="button" name="btn1" value="点击"/>
        <!-- 图像按钮，可以实现提交 -->
        <input type="image" src="../resources/image/1.jpg"/> 
        <!-- 提交按钮 -->
        <input type="submit"/>
        <!-- 按钮按钮 -->
        <input type="reset"/>
    </p>

14.5、下拉框

    <p>国家：
        <!-- selected默认选中 -->
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

14.6、列表框

    <p>国家：
        <!-- selected默认选中 -->
        <select name="列表名称" size=4>
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

14.7、文件域

    <p>文件域：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

14.8、文本域

    <!-- 文本域
    cols：行
    rows：列
    -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

15、搜索滑块和简单验证

15.1、邮件验证

    <!-- 邮件验证 -->
    <p>邮箱：
        <input type="email" name="email">
    </p>

15.2、URL验证

    <!-- URL验证 -->
    <p>URL：
        <input type="url" name="url">
    </p>

15.3、数字验证【适合商品购买】

    <!-- 数字验证
	min：最小多少
	max：最大多少
	step：步长：每次增加或减少多少
	 -->
    <p>商品数量：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

15.4、滑块

    <p>音量：
        <input type="range" min="0" max="100" step="2">
    </p>

15.5、搜索

用户名可以用这个试试，因为它可以清空这个框里的值

    <!-- 搜索框 -->
    <p>搜索：
        <input type="search" name="search">
    </p>

16、表单的应用

16.1、隐藏域

可以传递一些默认值

<!-- 密码框隐藏 -->
<p>密码：<input type="password" name="pwd" hidden/>

16.2、只读

<input type="text" name="username" value="Tony" readonly/>

16.3、禁用

<!-- 禁用之后不能选 -->
<input type="radio" value="girl" name="sex" disabled/>女
<!-- 禁止提交 -->
<input type="submit" disabled/>

16.4、增强鼠标可用性

    <!-- 增强鼠标可用性
	点击lable标签可以锁定到input中
	 -->
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">

17、表单初级验证

常用方式：

placeholder
required
pattern

17.1、placeholder

提示信息，一般用在输入框

<p>名字：<input type="text" name="username" placeholder="请输入用户名"/> </p>

17.2、required

非空判断，可以用的地方很多，可以搭配邮箱验证、URL验证、数字验证使用

    <p>名字：<input type="text" name="username" required/> </p>

    <p>邮箱：
        <input type="email" name="email" required>
    </p>

	<p>URL：
        <input type="url" name="url" required>
    </p>
	
	<p>商品数量：
        <input type="number" name="number" max="100" min="0" step="10" required>
    </p>

17.3、pattern

正则表达式

常用正则表达式:https://www.jb51.net/tools/regexsc.htm

    <p>自定义邮箱
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

很皮的皮蛋瘦肉粥

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
HTML5常用标签用法大全

1、HTML简介Hyper Text Markup Language（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等。2、HTML5的优势世界知名浏览器厂商对HTML5的支持微软Google苹果OperaMozila市场的需求跨平台3、W3C标准W3CWorld Wide Web Consortium（万维网联盟）成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构http://www.w3.org/http://www.chinaw3
复制链接

扫一扫