HTML 常用标签总结

写代码的不谷

已于 2023-03-10 22:03:50 修改

阅读量81

点赞数

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

于 2023-03-07 15:43:40 首次发布

本文链接：https://blog.csdn.net/bugu_hhh/article/details/129383759

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、网页的基本结构

<!-- DOCTYPE标签：用来说明用的 XHTML 或者 HTML，告诉浏览器按照什么标准解析页面 -->
<!DOCTYPE html>

<!-- HTML标签：使用 en 定义语言为英语 zh-CN 定义语言为中文 -->
<html lang="en">

<head>
    <!-- 引入网站图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    
	<!-- 使得 HTML 文件是以 UTF-8 编码解析 -->
    <meta charset="UTF-8">
    
    <!-- TDK 三大标签（title、description、keywords） -->
	<title>网站的标题</title>
	<meta name="description" content="网站的描述">
	<meta name="keywords" content="网站的关键字">
</head>

<body>
</body>

</html>

二、常用的标签

1. 老牌的通用标签

标签描述	标签
标题	`<h1>、...、<h6>`
段落	`<p>`
换行	`<br />`
盒子【块级】	`<div>`
盒子【行内】	`<span>`

2. 新增的语义化标签

标签描述	标签
头部	`header`
导航	`nav`
内容	`article`
某区域	`section`
侧边栏	`aside`
底部	`footer`
时间	`time`

三、特殊字符

描述	字符
空格	` `
大于号	`>`
小于号	`<`

四、特殊的标签

1. 超链接标签

<a href="#" target="_blank|_self" title="提示内容">文本</a>

2. 图像标签

<img src="dog.jpg" title="这是个小狗">

3. 锚点标签

以 # 开头的目标路径，点击AA，跳转到BB

<a href="#abc">AA</a>
<h1 id="abc">BB</h1>

4. 按钮标签

<button>我是按钮</button>

5. 列表标签

<!-- 无序列表【常用】 -->
<ul>
    <li> </li>
    <li> </li>
    <li> </li>
</ul>

6. 缩写提示标签

yyds 是 永远的神 的缩写，鼠标放在 yyds 上，会提示 永远的神
<abbr title="永远的神">yyds</abbr>

7. 表格标签

1. 格式举例
<table>
    <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
    </thead>
    
    <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    </tbody>
</table>

8. iframe标签

<!-- 在当前页面再嵌入另外一个网页 -->
<iframe src="http://www.lvyestudy.com" width="200" height="150"></iframe>

五、表单

<form action="url地址" method="提交方式" name="表单名称">
    <!-- 文本框:
		- autocomplete = "off/on" 	提交内容记录的开关是否打开，默认打开
		- required = "required" 	表示提交表单时，该内容不可以为空
	-->
    <input type="text" value="在文本框中默认的提示内容" maxlength="最多可以输入字符的长度">

    <!-- 密码框 -->
    <input type="password" maxlength="最多可以输入字符的长度">

	<!-- 单选按钮:
			- 多个单选按钮具有相同的name时，可以实现多选一的效果
			- 使用 checked 属性设置按钮被默认选中，多个按钮都有该属性且 name 相同时，只有一个起效果
	-->
    <input type="radio" name="XXX" checked="checked">
    
    <!-- 复选按钮:
		- 可以同时选择多个，即使他们的name相同
		- 使用 checked 属性设置按钮被默认选中，可以同时默认选择多个
	-->
     <input type="checkbox" checked="checked">

    <!-- 普通按钮 -->
    <input type="button" value="按钮的提示内容">

    <!-- 提交按钮，提交表单 -->
    <input type="submit" value="按钮的提示内容">

    <!-- 重置按钮，点击后会重置表单的内容 -->
    <input type="reset" value="按钮的提示内容">

    <!-- 文件域: 
			- 使用 mutiple 使得文件域可以选择多个文件同时提交
	-->
    <input type="file" mutiple="mutiple">
    
    <!-- 下拉框: 
			- 有 selected 属性的 option 为默认选中项
	-->
    <select>
        <option>选项XXX</option>
        <option selected="selected">有selected属性是默认选中项</option> 
        <option>选项YYY</option>
    </select>
    
    <!-- 文本域 -->
	<textarea cols="每行中的字符数" rows="显示的行数" > XXX </textarea>
    
    <!-- 
        label 标签: 
            - 为 input 控件定义标注，用于绑定表单元素
			- 点击在同一个 label 标签的元素，相对于点击了 input 标签
    -->
    <label> 
        输入用户名：<input type="radio" name="usename" value="请输入用户名">
    </label>
    <label> 
        <img src="dog.jpg" alt="出错了~" title="这是个小狗">
        <input type="radio" name="usename" value="请输入用户名">
    </label>
</form>

六、多媒体标签

1. 视频标签

<!--
   	  src="url"             地址
      poster="url"          封面图片地址
      autoplay="autoplay"   自动播放  
      muted="muted"         静音播放
      controls="controls"   显示播放控件
      loop="loop"           循环播放
-->
<video></video>

2. 音频标签

<!--
	  src="url" 地址
	  poster="url" 封面图片地址
	  autoplay="autoplay" 自动播放
	  muted="muted" 静音播放
	  controls="controls" 显示播放控件
	  loop="loop" 循环播放	
-->
<audio></audio>