HTML5 01_标签

春田花花幼儿园长

已于 2022-07-21 20:06:43 修改

阅读量327

点赞数

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

于 2022-07-06 19:23:57 首次发布

本文链接：https://blog.youkuaiyun.com/iamts/article/details/125645982

版权

HTML 同时被 3 个专栏收录

14 篇文章

订阅专栏

CSS

13 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

本文详细介绍了HTML5中的单标签和双标签，包括换行标签、水平线标签、base标签、图片标签、自闭合标签及其各种属性。同时，讲解了双标签中的标题标签、段落标签、无语义化标签、文本标签、锚点标签、列表标签、表格标签、表单标签等，以及HTML5的新特性如多媒体标签和语义化标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.单标签和双标签

1.单标签：由一个标签组成的标签

1.1.换行标签：<br>

1.2.水平线标签：<hr>

1.3.base标签

<base target="_blank" href="">

①标签为页面上的所有链接规定默认地址或默认目标

②标签位于head元素内部

③所有链接优先遵循自己标签的规则

④base和自身标签里的href属性如果都不为空则会进行拼接

1.4.图片标签

<img src=" " alt="" width=" " mode="widthfix">

①src：路径地址

②alt：图片加载失败给予用户的提示

③mode="widthfix"：以宽度为基准进行修饰

④图片自动适配：只给高或宽的值时，图片大小会自动适配

1.5.自闭合标签

1.5.1.text：创建单行文本输入框

<input type="text">

1.5.2.password：密码输入框

<input type="password">

1.5.3.check：复选框

<input type="checkbox">

1.5.4.radio：单选按钮

<input type="radio" name="1号组">100 
<input type="radio" name="1号组">1000

1.5.5.file：文件域

 <input type="file" multiple>

1.5.6.button：普通按钮

<input type="button" value="">

1.5.7.image：图像按钮

 <input type="image" src="">

1.5.8.reset：重置按钮

<input type="reset" value="">

1.5.9.submit：提交按钮

<input type="submit">

1.5.10.url：输入URL字段

<input type="url">

1.5.11.number：数字字段

<input type="number">

1.5.12.search：搜索字符串

<input type="search">

1.5.13.range：输入数值

<input type="range">

1.5.14.time：时间控件

 <input type="time">

1.5.15.date：日期控件

<input type="date">

1.5.16.month：年月控件

<input type="month">

1.5.17.week：年周控件

<input type="week">

1.5.18.color：颜色选择器

<input type="color">

1.5.19.email："email"字段输入

 <input type="email">

1.5.20.hidden：隐藏域

<input type="hidden">

1.6.常用新属性

①placeholder：占位符，用于提示用户输入，当用户输入数据时，提示信息会自动消失

②autofocus：规定当页面加载时input元素应该自动获得焦点

③multiple：多文件上传

④autocomplete：规定表单是否应该启用自动完成功能，有两个值分别是on和off，on表示记录已经输入的值

条件是:1.autocomplete首先需要提交按钮

2.这个表单必须给name值

⑤required：必填项，内容不能为空

⑥accesskey：规定激活（使元素获得焦点）元素的快捷键，采用alt+字母的形式

2.双标签：由"开始标签"和"结束标签"组成的标签

2.1.标题标签

<h1>这是一个大标题</h1> 
<h2>这是第二个标题</h2> 
<h3>这是第二个标题</h3> 
<h4>这是第二个标题</h4>

① h1-h4的字体默认加粗且逐级递减

② 标题标签里的内容独占一行

2.2.段落标签

<p></p>

①段落标签内容独占一行

②段落标签里不能嵌套段落标签和标题标签

2.3.无语义化标签

<div></div> 
<span></span>

① 它们都是作为分块的工具

②div块独占一行，span块不独占一行

2.4.文本标签

<b>加粗</b> 
<strong>加粗</strong> 
<em>斜体</em> 
<i>斜体</i> 
<u>下划线</u> 
<ins>下划线</ins> 
<del>中划线</del>

①都在一行展示

2.5.锚点标签：achor

①不独占一行

②有链接功能

③自带样式属性和颜色

<a href="http://www.baidu.com" target="_blank">       
1.进行网络路径地址跳转     
</a>

①href：特有属性，表示跳转链接的地址，且不能省略

②跳转方式：当前页面打开：_self或者打开新的窗口_blank

<a href="../通用素材.html">       
2.进行本地路径地址跳转     
</a>

①路径地址分为绝对路径和相对路径

②相对路径：以当前文件作为起始位置

./代表当前文件夹

../代表上一级文件的文件夹

③绝对路径：文件属性

<a href="../通用素材.jpg">       
3.预览图片     
</a>

<a href="../通用素材.zip">       
4.下载功能     
</a>

<a href="#">       
5.禁止进行页面跳转     
</a>

<a href="#bottom">       
6.在当前页面进行跳转     
</a><br>     
<p id="bottom">
6.跳转的位置
</p>

2.6.列表标签

2.6.1.有序列表：ol>li

<ol>       
<li>有序排序</li>→1.有序排列       
<li>有序排序</li>→2.有序排列     
</ol>

2.6.2.无序列表

<ul style="list-style: disc;">       
<li>无序排序</li>       
<li>无序排序</li>     
</ul>

2.6.3.自定义列表

<dl>
   <dt>
     <dd></dd>
   </dt>     
</dl>

2.7.表格标签

<table border="1px" cellspacing="2px" cellpadding="15px" height="5px" weight="10px">     <caption>表格标题</caption>
     <thead>
     <tr>
       <th colspan="3">tr是行</th>
     </tr>
     </thead>
     <tbody>
     <tr>
       <td>tr是行</td>
       <td rowspan="2">td是列</td>
       <td>2行3列</td>
     </tr>
     <tr>
       <td>tr是行</td>
       <td>3行3列</td>
     </tr>
     </tbody>
     <tfoot>
     <tr>
       <td colspan="3">tr是行</td>
     </tfoot>
   </table>

①默认表格需要自减添加边框属性

②border：边框；

③cellspacing：改变单元格和table之间的间隙

④cellpading：提高每个单元格的大小

⑤rowspan：跨行合并；colspan：跨列合并

⑥合并的次序：从左往右，从上到下

⑦thead、tbody和tfoot里面的单元表格不能跨行合并

⑧th：加粗文本内容

⑨caption：表格标题

⑩table标签修改单元格的高度只会影响tbody的大小，宽度都会影响

2.8.表单标签

<form action=""> </form>

①"action"代表一次表单验证（在前端是向浏览器发送表单数据请求，后端是发送端口请求(post-get)）

②sumbit与action共同发挥作用是将进行一次表单验证

2.9.文本输入框

<textarea name="" id="" cols="10" rows="1" style="resize: none;" maxlength="5">
</textarea>

①name：传值的一个名字

②cols：一列能输入的文字个数

③rows：一行能输入的文字内容,两个代表一个一个字符

④style="resize: none;"：静止使用输入框的拖拽大小功能

⑤maxlength=" "：最大输入文字内容

2.10.搜索提示框datalist

<input type="text" list="star">
   <datalist id="star">
     <option>张学友</option>
     <option>张韶涵</option>
     <option>张敬轩</option>
     <option>孙燕姿</option>
     <option>孙悦</option>
     <option>张碧晨</option>
   </datalist>

①定义选项列表，与input结合使用

②搜索内容由option提供

2.11.fieldset

可将表单内的相关元素分组打包，与legend搭配使用

<fieldset>
     <legend>登录页面</legend> <!--  外边框的标题 -->
     用户名：<input type="text"><br><br>
     密　码：<input type="password">
</fieldset>

2.12.mark

用于定义带有记号的文本

<mark>高亮高亮高亮</mark>

2.13.meter

定义度量衡，仅用于已知最大和最小值的度量

<meter min="0" max="10" value="6"></meter>
<!-- value的值超过high的值 -->
<meter min="0" max="100" value="95" low="30" high="90"></meter>
<!-- value的值在low与high之间 -->
<meter min="0" max="100" value="60" low="30" high="90"></meter> 
<!-- value的值低于low的值 --> 
<meter min="0" max="100" value="25" low="30" high="90"></meter>

①min：规定范围最小值

②max：规定范围最大值

③value：规定度量的当前值，是必须的属性。可以用数值表示

④low：范围界定的最低值

⑤high：范围界定的最大值

⑥不能当作进度条使用

2.14.progress

定义运行中的任务进度，通常与JavaScrip结合使用来显示当前的任务进度，不能作为度量值使用

<progress value="20" max="100"></progress>

2.15.h5新增语义化标签

<header>定义网页的头部  页眉</header>
<nav>定义导航链接部分</nav> 
<section>定义区域</section> 
<article>定义文章</article> 
<aside>定义侧边栏</aside> 
<footer>定义网页的底部  页脚</footer>

2.16.多媒体标签

2.16.1.embed

<embed src="../通用素材.mp3">
<embed src="../通用素材.mp4">

2.16.2.audio

audio常用属性：①autoplay：如果出现该属性,则音频在就绪后马上播放

②controls：如果出现该属性,则向用户显示控件,比如播放按钮

③loop：如果出现该属性,则每当音频结束时重新开始播放

④src：要播放的音频的url

2.16.3.video

<video width=" " controls>
       <source src="../通用素材.mp4">
</video>

video常用属性:①autoplay：视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放的问题）

②controls：向用户显示播放控件

③width：设置播放器的宽度h

④eight：设置播放器的高度

⑤loop：播放完是否继续播放该视频,循环播放

⑥preload：auto(预先加载视频)；non(不应加载视频)规定是否预加载视频，如果有了autoplay，就忽略该属性

⑦src：视频url地址

⑧poter：加载等待的画面图片

⑨muted：静音播放

3.特殊字符

特殊字符	描述	字符的代码
	空格符
<	小于符号	<
>	大于符号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方	²
³	立方	³