HTML常用标签及作用
2024-05-10 18:27:54
方便自己快速回忆HTML常用标签及作用。
<!-- 声明为 HTML5 文档-->
<!DOCTYPE html>
<!-- 页面的语言类型 -->
<html lang="en"><head><!-- 定义编码格式为 utf-8 --><meta charset="UTF-8"><!-- 定义网页作者 --><meta name="author" content="MGL"><!-- 每30秒钟刷新当前页面 --><meta http-equiv="refresh" content="30"><!-- 文档兼容模式的定义 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为搜索引擎定义关键词 --><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"><!--viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。--><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><!-- 两种方式都可以在title旁边显示icon图标，上面是标题栏，下面是收藏夹--><link rel="icon" href="../ico/Graphite.ico" type="imgage/x-icon"><!-- <link rel="shortcut icon" href="../ico/Graphite.ico" type="image/x-icon"> --><!-- 外部css样式表 --><link rel="stylesheet" type="text/css" href="../css/index.css"><!-- 标签描述了基本的链接地址/链接目标方式，即为目标窗口的弹窗方式_self为默认值，为当前窗口，_blank在新窗口中打开链接 --><!-- <base href="http://www.baidu.com/img/" target="_blank"> <base> --><!-- 规定元素的行内样式（inline style） --><style type="text/css">#outsideDiv {border: 1px solid red; /* 1像素 实线 红色 的边框*/width: 1000px;height: 640px;}#displayDiv {display: -webkit-box; /* 使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用) */text-overflow: ellipsis;overflow: hidden;width: 200px;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.insideDiv {border: 2px double blue; /* 2像素 双线 蓝色 的边框*/width: 200px;height: 200px;}#colorDiv {width: 100px;height: 100px;border: 2px double red;background: rgba(0, 0, 0, 0.1); /* RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。 */}</style><!-- 脚本文件 --><script>document.write("Hello World!");</script><title>这是标题</title></head><body><br/><br/><a id="tips">提示部分（描点/书签的作用）</a><br/><br/><h1>这是一个h1标题</h1><h2>这是一个h2标题</h2><h3>这是一个h3标题</h3><h4>这是一个h4标题</h4><h5>这是一个h5标题</h5><h6>这是一个h6标题</h6><p>段落标签</p><a href="/pages/example/toc.html">可跳转其他网页的超链接</a><br/><br/><img loading="lazy" src="../img/光辉.jpg" width="640" height="480" title="提示文本为：阿狸" alt="图片显示不出来时文字代替：英雄联盟LOL" />这是图片标签，loading属性值lazy允许浏览器选择性加载IMG元素，根据用户滚动操作至其元素附近执行加载，一定程度起到节流的作用。<hr align="right" color="red" size="5px" /><div id="outsideDiv">id定义元素的唯一id<div class="insideDiv">class为html元素定义一个或多个类名（classname）1</div><div class="insideDiv">class为html元素定义一个或多个类名（classname）2</div><div class="insideDiv">class为html元素定义一个或多个类名（classname）3</div></div><p>文本格式化标签：</p><b>加粗文本</b> <br/><br/><i>斜体文本</i> <br/><br/><em>强调文本</em> <br/><br/><strong>加粗文本</strong> <br/><br/>这是 <sub> 下标</sub> 和 <sup> 上标</sup> <br/><br/><p>My favorite color is <del>blue</del>（即删除线） <ins>red</ins>（即贯穿线）!</p> <br/><abbr title="Hypertext Markup Language">HTML</abbr>是提示和注释标签，可以理解为首字母大写缩写 <br/><br/><dfn>定义项目</dfn> <br/><br/><code>一段电脑代码 print("Hello World")</code> <br/><br/><samp>计算机样本</samp> <br/><br/><kbd>键盘输入</kbd> <br/><br/><var>变量</var> <br/><br/><address>Written by <a href="#">斜体字这一块区域代表地址</a> <br/> Visit us at: <br/>Example.com <br/>Box 564, Disneyland <br/>USA</address> <br/><br/><div id="displayDiv">文本显示为单行,超过部分隐藏并使用省略号 修改 width 属性查看效果。text-overflow省略方式是ellipsis省略号代替。overflow超出的部分hidden不显示。</div><hr align="right" color="green" size="5px" /><p>该段落文字从左到右显示。</p><p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p><br/><br/><a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问网站（rel="noopener noreferrer"意思是不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址）</a> <br/><p>target属性值：<br/> _self (使用自身)<br/> _blank (新窗口)<br/> _top (顶层框架)<br/> _parent (父亲框架)<br/> framename 在指定的框架中打开被链接文档。</p><p>这是一个电子邮件链接：<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a></p><p>这是另一个电子邮件链接：<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a></p><br/><br/><h2style="background-color:red; text-align: center;">这是一个标题</h2><pstyle="background-color:green;">这是一个段落。</p><a href="#"style="color:red;" rel="nofollow">只能使用"内联"方式</a>(对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可)<br/><br/><!-- cellspacing是格子和格子之间的距离（和格子中的内容无关） --><!-- cellpadding为单元格中，内容和单元格的距离 --><table width="640" hight="480px" border="1" cellspacing="50" cellpadding="20" background="../img/纯色.jpg"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td><!-- 左右跨列合并--><td colspan="3">row 1, cell 3.4.5</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 3</td><td>row 2, cell 4</td><td>row 2, cell 5</td></tr><tr><td>row 3, cell 1</td><td>row 3, cell 2</td><td>row 3, cell 3</td><td>row 3, cell 4</td><td>row 3, cell 5</td></tr><tr><!-- 上下跨行合并--><td rowspan="2">row 4, cell 1</td><td>row 4, cell 2</td><td>row 4, cell 3</td><td>row 4, cell 4</td><td>row 4, cell 5</td></tr><tr><td>row 4, cell 1</td><td>row 4, cell 2</td><td>row 4, cell 3</td><td>row 4, cell 4</td></tr></table><br/><br/><!-- 完整的表格 --><table width="1000" border="1" bgcolor="pink" cellspaceing=10><!-- 表格的列标题头部 --><caption>表格的标题</caption><thead><tr><th>标题列1</th><th>标题列2</th><th>标题列3</th></tr></thead><!-- 表格主题内容 --><tbody><tr><td>内容1</td><td>内容2</td><td>内容3</td></tr><tr><td>内容4</td><td>内容5</td><td>内容6</td></tr></tbody><!--表尾--><tfooter><tr><td colspan="3">表格底部总结内容</td></tr></tfooter></table><br/><br/><!-- 类型可以为circle/point/square--><ul type="square"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul><br/><br/><ol type="A" start="2"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol><br/><br/><dl>注：(自定义列表)<dt>爷爷：</dt><dd>爸爸的爸爸</dd></dl><br/><br/><span>行级内联元素1</span> <span>行级内联元素1</span> <span>行级内联元素1</span><br/><br/><div>空格( ) 大于(>) 小于(<) 引号(") 版权号(©)</div><br/><br/><div id="colorDiv">黑色透明度0.1</div> <br/><br><a href="#tips">跳到提示部分（即回到顶部）</a> <br/><br/><!-- form标签常用属性action：指定表单提交后由服务器上的那个处理程序进行处理enctype：用于指定表单数据的编码方式application/x-www-form-urlencoded:默认的编码方式，将表单空件中的值处理成URL编码方式mutipart/form-data:以二进制的方式来处理表单数据。text/plain:当表单的action属性值唯 mailto:RUL形式时使用。method:指定向服务器提交的方式一般为get和post俩种方式get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到的请求参数的名和值。且get请求传送的数据量比较小，一般不能大于2KB.post方式的请求传送的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制，请求参数是放在HTML的HEADER中传输，用户在地址栏中看不到请求参数，安全性相对较高--><form action="#" method="post"><table border="1" cellpadding="5" cellspaceing="20"><th colspan="2"> 表单元素详解 </th><tr><!-- text 文本框 placeholder默认显示文本--><td><label for="txtUsername">用 户 名：</label></td><td><input type="text" name="username" id="txtUsername" value="" placeholder="请输入用户名"></td></tr><tr><!-- password 密码框 maxlength默认最大长度18 --><td><label for="txtPwd">密 码：</label></td><td><input type="password" name="pwd" id="txtPwd" value="" placeholder="请输入密码" maxlength="18" required></td></tr><tr><!-- required 必填验证 --><!-- 更改html5中默认验证的提示 oninvalid="setCustomValidity('你丫的不要瞎输，不然我搞死你');" οninput="setCustomValidity('')" --><td><label for="txtComparePwd">确认密码：</label></td><td><input type="password" name="comparePwd" id="txtComparePwd" value="" placeholder="请确认密码" maxlength="18" required oninvalid="setCustomValidity('你丫的不要瞎输，不然我搞死你');" oninput="setCustomValidity('')"></td></tr><tr><!-- radio 单选按钮 checked默认选中状态--><td>性 别：</td><td><!-- label 绑定表单元素的id，点击label文本时，光标会自动聚焦选择相应表单元素上，增强用户体验 --><label for="nan">男</label><input type="radio" name="sex" id="nan" value="男" checked="checked"><label for="nv">女</label><input type="radio" name="sex" id="nv" value="女"></女><label for="qita">其他</label><input type="radio" name="sex" id="qita" value="其他"></其他></td></tr><tr><!-- 多选按钮 --><td>爱 好：</td><td><label for="eat">吃饭</label><input type="checkbox" name="hobby" id="eat" value="吃饭"><label for="sleep">睡觉</label><input type="checkbox" name="hobby" id="sleep" value="睡觉"><label for="play">打豆豆</label><input type="checkbox" name="hobby" id="play" value="打豆豆"></td></tr><tr><td colspan="2"><!-- 提交按钮，可以from表单的表单元素 里面的值 提交给后台服务器 --><input type="submit" value="登录"><!-- 重置按钮，可以还原表单元素初始默认值--><input type="reset" value="重置"><input type="button" value="普通按钮"></td></tr><tr><!-- 文件域，上传文件用 multiple="multiple" 可选取多个文件 --><td><label for="up">上传头像：</label></td><td><span>可选取多个文件</span><input type="file" name="fileUp" id="up" multiple="multiple"></td></tr><tr><td><label for="txtHome">籍 贯：</label></td><td><!-- 下拉菜单 disabled="disabled" 不可用 selected="selected" 默认选中 multiple="multiple"可以多选--><select name="" id="txtHome" multiple="multiple"><option value="0">安徽</option><option value="1">北京</option><option value="2">上海</option><option value="3" selected="selected">广州</option><option value="4">深圳</option></select></td></tr><tr><td>多项列表：</td><td><select><optgroup label="电影"><option value ="唐人街探案">唐人街探案</option><option value ="指环王">指环王</option></optgroup><optgroup label="动漫"><option value ="海贼王">海贼王</option><option value ="斗罗大陆">斗罗大陆</option></optgroup></select></td></tr><tr><!-- readonly="readonly" 只读属性，不能更改或填写 --><td><label for="txtEmail"></label> 邮 件：</td><td><input type="email" name="" id="txtEmail" readonly="readonly" placeholder="请输入邮箱"></td></tr><tr><!-- cols 和 rows 不常用，一般用CSS --><td><label for="txtLatter">来访留言：</label></td><td><textarea id="txtLatter" cols="20" rows="3" placeholder="在此处留言"></textarea></td></tr><tr><td>数 字：</td><td><input type="number" name="" id="" value="0"></td></tr><tr><td>滑 动 条：</td><td><input type="range" name="" id=""></td></tr><tr><td>选择颜色：</td><td><input type="color" name="" id=""></td></tr><tr><td>日 历：</td><td><input type="date" name="" id=""></td></tr><tr><td>月 份：</td><td><input type="month" name="" id=""></td></tr><tr><td>星 期：</td><td><input type="week" name="" id=""></td></tr><tr><td>时 间：</td><td><input type="time" name="" id=""></td></tr><tr><td>具体时间：</td><td><input type="datetime-local" name="" id=""></td></tr><tr><td>图片按钮：</td><td><input type="image" src="../img/豹女.jpg" alt="" width="300px" height="200px"></td></tr><tr><td>输入域的选项列表</td><td><input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist></tr></table></form><!-- 组合表单中的元素 --><formstyle="width: 300px;"><fieldset><legend>健康信息</legend>身高：<input type="text" /><br/>体重：<input type="text" /><br/></fieldset></form><br/><br/><!-- 音频标签 autoplay:自动播放controls：播放按钮loop：循环播放muted：静音preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性quality="high": 播放质量--><audio src="../audio/梁老师Tsong - How Are You.mp3" autoplay controls loop muted ></audio><embed quality="high" width="300" height="200" src="../audio/梁老师Tsong - How Are You.mp3" /><object data="../audio/梁老师Tsong - How Are You.mp3"><param name="src" value="../audio/梁老师Tsong - How Are You.mp3"><param name=" autoplay（自动播放）" value="true"></object><br/><br/><!-- 视频标签: 使用 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。 --><video src="../video/av01.mp4" autoplay controls loop width="500" height="300"></video><!-- poster="图片路径" 默认显示图片 --><video width="320" height="240" poster="../img/安妮.jpg" controls="controls"><source src="../video/av01.mp4" type="video/mp4" /><source src="../video/av01.mp4" type="video/ogg" /><source src="../video/av01.mp4" type="video/webm" /><!-- embed标签 和 object标签 对象可以通过加载的插件来播放音频和视频,为了能实现浏览器更好的兼容性，一般使用object标签内嵌套embed标签 --><object data="../video/av01.mp4" width="320" height="240"><embed src="../video/av01.mp4" width="320" height="240" /></object></video>
</body></html>
效果如下图所示：
——————————————————————————————————————————————————
HTML常用标签及作用相关推荐
- 03_HTML常用标签
文章目录 HTML常用标签 注释 标题标签h 标签级别 权重 段落标签p 换行标签br 文本格式化 图像标签img 音频标签 视频标签video 超链接标签a href属性 target属性 锚点跳转 ...
- html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此 标签加入到你的页面中: content属性 ...
- Java虚拟机中的内存模型？JSP常用的动作标签及作用？ 如何防止表单重复提交问题？ JSP四大作用域及请求范围？ 分别说出http,https,ftp,talnet的默认端口？
文章目录 一 ,Java虚拟机中的内存模型JVM? 1,Java堆 2,方法区 3,Java栈 4,本地方法栈 问题扩展: 二 , JSP常用的动作标签及作用 (1)问题分析: (2)核心答案讲解: ...
- 表单标签的作用、常用的表单控件
1.1 表单标签的作用 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式). 可见性:在网页上是不可见的. 1.2 form常用的属性 Form标签是表单标签的一个根标签 1.3 ...
- HTML 4 常用标签有哪些，都有哪些作用
一.html框架类标签 1. html -- 定义html文档-- 代表HTML文档的开始.html标签是成对出现的,以<html>开始, </html>结束 属性 Commo ...
- 滚动屏幕显示隐藏div_HTML结构-常用标签：a·img·table·form·input·iframe·div
学习目标: 掌握html的结构,head与body的区别 掌握常用标签 掌握a标签,img标签 掌握table标签 掌握form标签,input标签 掌握iframe 和frameSet标签 掌握di ...
- mybatis常用标签和动态查询
这里是修真院后端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析后端知识/技能,本篇分享的是: [mybatis ...
- 1，html常用标签学习
1.html常用标签学习: 1.1.<em>和<strong>标签主要是用来做强调用的,其中<em>是让文字变成斜体,而<strong>把文字进行加粗显 ...
- web.xml 常用标签配置（转）
2019独角兽企业重金招聘Python工程师标准>>> 1.Web.xml作用: 每一个javaWeb工程都有一个web.xml配置文件,web.xml文件是用来初始化工程配置信息的 ...
最新文章
- vue项目多入口教程
- Java 垃圾回收机制概念梳理
- js日期格式化精髓总结
- java getstringarray_Java AnnotationAttributes.getStringArray方法代碼示例
- 关于sscanf与结构体不能联用的问题
- [pytorch、学习] - 5.7 使用重复元素的网络（VGG）
- Python、数据分析、机器学习、区块链大牛在偷偷看的9本书
- Linux分区空间不足了怎么办？？
- postman循环操作及响应判断-支持文本多变量输入
- ROS学习笔记五：理解ROS topics
- 不重启的情况下清除网络共享的密码
- Oracle_PL/SQL(3) 游标
- 不用加好友，查看对方校内照片
- jQuery 2.0.3 源码分析Sizzle引擎 - 编译函数（大篇幅）
- go test生成html测试报告
- npm 安装yarn
- 车辆出险理赔记录接口文档
- 软考真题答案-2021年11月系统集成项目管理工程师上午题（二）
- netty 引用计数对象（reference counted objects）
- 王者舰队服务器维护需要几天,王者舰队怎么快速获取金币 金币快速获得方法...