时间：2023-09-07 07:54:01 | 来源：网站运营
时间：2023-09-07 07:54:01 来源：网站运营
Web前端：html常用知识点整理总结（长篇-详细自用）：篇幅有点长，有示例代码知道标签如何使用，还有标签的语义描述，学习标签先知道语义再安排放在哪使用，不过页面大部分布局都是div搞定，不讲究SEO优化可以不考虑H5新增的容器标签，不过个人觉得还是最好用，哪个做网站的不希望自己网站排名好点呢~
在线咨询
<!DOCTYPE html><!-- 文档声明，告诉浏览器当前使用的HTML标准是HTML5,一定在第一行 --><html lang="en"> <!-- <html></html>：根标签，告诉浏览器自己是HTML文档给，所有的标签都写在它的里面 lang="en"：lang属性，表示该元素使用的文字是哪一种语言，en英文，zh-CN中文 --> <head> <!-- <head></head>:文档头，在它里面的内容一般设置网页相关信息，不会被渲染在网页页面上--> <meta charset="UTF-8" /> <!-- <meta/>：元属性描述，文档的原数据(附加信息),单标签 charset="UTF-8"：字符编码，制定网页内容编码为UTF-8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- http-equiv="X-UA-Compatible" ：文档兼容模式的定义 Edge模式告诉IE以最高级 模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 手机端适配，不写手机端页面不用 viewport：用于指定用户是否可以缩放Web页面，并对相关的选项进行设定 width或height:指定视区的逻辑宽度和高度，取值可以是以像素单位的数字，也可以是特殊的标记符号（device-width：视区宽度应为设备的屏幕宽度，device-width同理） initial-scale：设置Web页面的初始缩放比例，值设为1.0则显示未经缩放的Web页面 --> <title>Document</title> <!-- <title></title>:网页标题--> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="index.js"></script> <!-- 页面图标、加载外部的css/js文件......--> </head> <body> <!-- <body></body>:写网页的主体，里面放内容标签，如a、p、img、h1~h6等 --> </body></html>简单文档结构：如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body></body></html>保存以上，文件格式为.html就是一个html文件了。<body> ，第二个标签是结束标签如 </body> <h1>标题</h1> <input type="text" value="标签内容"/><br/> <a href="#" title="超链接说明">超链接</a><p title="段落">段落</p><!-- vscode编辑器书写快捷方式：h1*6{我是标题$}，按住tab键一次生成6个标签和内容--><h1>我是标题1</h1><h2>我是标题2</h2><h3>我是标题3</h3><h4>我是标题4</h4><h5>我是标题5</h5><h6>我是标题6</h6><!-- lorem，乱数假文，没有任何实际含义的文字用法：lorem + tab键 随机生成一些英文文字 lerom100 + tab键 ：随机生成100个文字--><p>段落内容</p>| 大于号 > | > |
|---|---|
| 小于号 < | < |
| 空格符号 | |
| 和号 & | & |
| 引号 “ | " |
| 元 ￥ | ¥ |
| 注册商标 ® | ® |
<img src="图片路径" alt="路径不存在提示信息" title=“图片”>属性： 只需输入图像文件的名称即可，如<img src="img.png"> 2.2、图像文件位于HTML文件的下一级文件夹 输入文件夹名和图像文件名，之间用“/”隔开，如<img src="images/img.png"> 2.3、图像文件位于HTML文件的上一级文件夹在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如2）绝对路径：（站外资源：非当前网站的资源）
<img src="../img.png">
<img src="../../img.png">
协议名://主机名：端口号/路径 schema://host:port/path 如：https://www.baidu.com/img/flexible/logo/pc/result.png
<a href="超链接URL">超链接内容</a>常用属性： href target<a href="#id标记名">链接文本</a><p id="标记名">跳转的目标位置</p> <!-- 锚链接定位--><a href="#"></a> <!-- 回到顶部、空链接--><!-- 1、执行js代码 ： 语法：javascript:js代码; --><a href="javascript:alert('你好啊');">执行js代码弹出你好啊</a> <!-- 执行js代码--><a href="javascript:;">执行js代码弹出你好啊</a> <!-- javascript:; 一个空链接--><!-- 2、发送邮件 ： 语法：mailto: 邮箱地址 --><a href="mailto:123456789@qq.com">点击给我发送邮件</a><!-- 要求：用户计算机上安装有邮件发送软件 exchange --><!-- 3、拨打电话： 语法; tel: 电话号码 --><a href="tel:12345678911">点击给谁拨打电话</a><!-- 要求：用户计算机上安装有拨号软件，或使用的是移动端访问 -->2）target ：用于指定链接页面的打开方式<!-- ul（定义无序列表） li（定义列表项目） --><ul> <li>列表的项目1</li> <li>列表的项目2</li> <li>列表的项目3</li></ul>2）有序列表：有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义 （有先后之分）<!-- ol（定义有序列表） li（定义有序列表项目） --><ol> <li>列表的项目1</li> <li>列表的项目2</li> <li>列表的项目3</li></ol>3）自定义列表：列表的同时,进行简单的分组<!-- dl（定义 自定义列表） dt（定义 列表项目） dd（定义 项目内容） --><dl> <dt>名词</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> ... <dt>名词</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> ...</dl>注意：<caption>表格标题</caption> <!-- 表格标题:caption 显示在表格的正上方、居中、位置, 紧跟在table标签里面第一个 --> <thead>表格表头，组合表格的表头内容</thead> <!-- 表格的表头 thead： 应该与 tbody 和 tfoot 元素结合起来使用,用于对 HTML 表格中的内容进行分组 --><tbody>表格内容主体</tbody> <!-- 表格的内容主体 tbody：存放真正的数据 --> <tfoot>表格页脚</tfoot><!-- 表格的页脚 tfoot：如果放在tbody前面, 是为了更快的加载，渲染出来会自动放在表格身体后面 --><!-- table ：定义一个表格，所有表格相关元素都写在table标签中 --><!-- border属性 ：表框宽度 （一定要加不然很丑） --><!-- tr: 行 --><!-- th: 表头 ，效果文本会自动加粗居中 （ 一个表头也是一个单元格，但是我们使用th使用的是语义，表格第一行用的是表格，解释每列的含义）--><!-- td : 单元格 一个td代表一个单元格，也就是一列--><!-- 表格宽度：在不设置的情况下由单元格内容决定 --><table border="1"> <caption>表格标题</caption> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tfoot> <tr> <td>表尾1</td> <td>表尾2</td> </tr> </tfoot> <tbody> <tr> <td>值1</td> <td>值2</td> <td>值3</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> </tr> </tbody> </table>注意：<form action="提交服务端的url地址" method="提交方式（get/post）" name="表单名称" target=“_blank”> 各种表单控件和提示信息</form><!-- 收集信息类 --><form action="" method="get"> 文本框：<input type="text" name="text"><br/> 密码框：<input type="password" name="paw"><br/> 单选按钮： <input type="radio" name="sex" value="nan">男 <input type="radio" name="sex" value="nv">女 <br/> 多选按钮： <input type="checkbox" name="move" value="zzx">蜘蛛侠 <input type="checkbox" name="move" value="gtx">钢铁侠 <input type="checkbox" name="move" value="ljr">绿巨人 <input type="checkbox" name="move" value="fczlm">复仇者联盟 <br/> 文件：<input type="file" name="file"> </form> <!-- 按钮类 reset submit button--><form action="" method="get"> 用户名：<input id="username" type="text" name="username" placeholder="请输入用户名"><br/> 重置：<input type="reset" value="一键清空"><br/> 提交：<input type="submit" value="保存提交"> 普通按钮：<input type="button" value="点击一键清空" onclick="clearAll()"><br/> </form> <!-- 结合普通按钮js代码 onclick:点击事件 clearAll()函数 ----》 点击按钮执行函数，函数最终是清空有id名为username的文本框内容 --><script> function clearAll(){ var name = document.getElementById('username'); //获取id为名username的元素 name.value = ''; }</script><!--type属性输入字段、以及可选属性和新增属性演示说明-->文本框：<input type="text" name="text" value="默认的文本框内容" autofocus>密码框：<input type="password" name="pwd">性别：<label> <input type="radio" name="sex" value="nan">男</label><label> <input type="radio" name="sex" value="nv">女</label>喜欢的漫威电影：<input type="checkbox" name="move" value="zzx">蜘蛛侠<input type="checkbox" name="move" value="gtx" checked>钢铁侠<input type="checkbox" name="move" value="ljr">绿巨人<input type="checkbox" name="move" value="fczlm">复仇者联盟文件：<input type="file" name="file" accept="image/jpeg,image/png"><input type="submit" value="提交测试">方式一：<label for="username1">用户名：</label><input type="text" id="username1" name="username2" value="username2">方式二：<label for="username2">用户名：<input type="text" id="username2" name="username2" value="username2"></label><textarea> 大量文本内容</textarea>属性：<select> <optgroup> <option>选项1</option> <option>选项2</option> <option>选项3</option></select>属性：<!--提交的是下拉列表的名字 name的值=option的value的值 address=gl --><form action="" methed="get" > <label for="dizhi">地址：</label> <select name="address" id="dizhi"> <optgroup label="杭州市"> <option value="gl">鼓楼区</option> <option value="pk">浦口区</option> <option value="yht">雨花台区</option> </optgroup> <optgroup label="杭州市"> <option value="yh">瑶海区</option> <option value="bh">包河区</option> <option value="ly">庐阳区</option> </optgroup> </select> <input type="submit"></form><form action="" methed="get" > <input type="text" list="url_list" name="link"> <datalist id="url_list"> <option value="百度">https://www.baidu.com</option> <option value="网易">https://www.163.com</option> </datalist> <input type="submit"></form><button type="button" onclick="alert('Hello World!')">Click Me!</button>如果使用 "autoplay"，则忽略该属性。
<video src="" controls></video>解决视频格式适配问题<video width="320" height="240" controls="controls" src=""> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.mvbm" type="video/mvbm"> <p>你的浏览器不支持video标签 </p></video>注意：不同的浏览器支持的音视频格式可能不一致<audio src="" controls loop></audio>页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
在一个网页页面中可以使用多个
元素
main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
在一个文档中，不能出现一个以上的
元素 。 元素不能是以下元素的后代：、、、或 。
可以是：博客文章、新闻文章、论坛帖子、网友评论等独立的内容
标签中的内容通常有它自己的标题，甚至有时候还有自己的脚注。
可以嵌套使用，但是一般需要外部内容和内部内容有关系。比如：一篇博客文章，它的评论就可以使用嵌套的形式，将评论内容嵌套在整体内容中。
ul或ol列表<b>粗体</b> （bold）<strong>粗体</strong> 语气更强的强调内容粗体，推荐使用strong<i>斜体</i> <em>斜体</em> 强调的内容斜体，推荐使用em<s>加删除线的文本</s> 加删除线的文本 <del>已被删除的文本</del> 已被删除的文本加删除线，推荐使用del<u>下划线</u> <ins>下划线</ins>下划线，推荐使用ins</sup>上标</sup> 上标<sub>下标</sub> 下标<small>小号字</small> 小号字关键词：总结,详细,整理,知识
