HTML基础
标记：将文本 用html 的标签进行标记 骨架
向后兼容 <!DOCTYPE html> // html5 文档声明头 表示当前页面是哪个html进行编译的 <html lang="en"> // 最外层标签 <head> // 头部标签 <meta charset="UTF-8"> 用的编码格式解析 <title>Title</title> //网站的标题 </head> css代码 js代码 jq代码 <body> // 网页中的可见元素 </body> </html>
基本标签
******* p ******** 作用：提升用户体验，提升文章的可读性，文章的段落于段落进行分开 空白 <p>第一段</p> 空白 <p>第二段</p> ******* strong/em ***** 作用: 对页面进行强调 strong ：文本内容进行加粗 em ： 斜体显示 <em>字体会变为斜体</em> <strong>字体变粗</strong> ***** br ****** 作用：对文本进行换行 对于浏览器来说，使用回车换行或者空格，在浏览器上就会默认将换行和多个空格，认为一个空格(空白折叠) 天生我才必有用，<br> 千金散去还复来，<br> ******特殊符号 ****** 网址：http://www.fhdq.net/ts/177.html # 代表一个空格 © # © ***** 标题标签 ***** h1-h6 都是标题标签 <h1>标题标签</h1> ******** hr ******* 作用：水平分割线 <hr> 内容1 -------------- 内容2 ******* ul ****** 作用:列表显示 无序列表标签 <ul> <li>java</li> <li>python</li> <li>go</li> <li>vue</li> </ul> 默认 当显示时，是以排序进行显示的 . java . python . go . vue ****** ol ****** 作用：列表显示 有序列表标签 <ol> <li>java</li> <li>python</li> <li>go</li> <li>vue</li> </ol> 默认当显示时，是以排序进行显示的 1 java 2 python 3 go 4 vue ****** dl ****** 作用： 定义列表，列表显示 <dl> <dt>帮助中心</dt> 定义的title dt <dd>账户管理</dd> 定义的描述 dd <dd>购物管理</dd> 定义的描述 dd <dd>联系帮助</dd> 定义的描述标签 dd </dl> 默认显示效果： 帮助中心 账户管理 购物管理 联系帮助 ******* table表格标签 ****** 作用：在网页中显示表格 订单操作 由表头和表内容组成 tr ： 行的意思 th ： 表头 td ： 表头下面对应的每一个内容 caption ： 是表格的标题，会在表格正上方进行居中显示 border : 中文边界 给table 表格设置边框线 (表格带有间隙) cellspacing ： 设置单元格的表格间隙 <table border='1' cellspacing="0"> <caption>商品清单</caption> <tr> <th>名称</th> <th>品牌</th> <th>数量</th> <th>入库时间</th> </tr> <tr> <td>电视</td> <td>ll</td> <td>160</td> <td>2022/10/10</td> </tr> </table> ****** table 表格的横向合并和纵向合并 **** <th colspan="2">数量/入库时间</th> 跨横向列进行合并(合并的列) <td rowspan="2">160</td> 跨纵向合并(合并单元格) ****** a标签 ******* 锚点 超链接标签 默认行为，当点击超链接时在原页面进行页面跳转 href ：链接跳转地址 title : 提示信息，当鼠标悬浮到当前a标签上时的提示信息 target ：_blank 点击超链接，打开一个新页面进行跳转 <a href="https://baidu.com" title="点击一下了解更多" target='_blank'> 百度点击一下</a> 网页内部的跳转： 当点击回到顶部的a标签时，就会到p标签的位置，页面内容的跳转 <p id='top'></p> <a href="#top">回到顶部</a> // #top 就是# 就是 id #top等同于id='top' ****** img标签 ******* 描述展示一张图片,在对高度和宽度的设置中，只需要设置一个方向就可以，浏览器会自动等比例调整 src : 图片路径 height：高度 width ：宽度 alt : 当图片加载失败的显示的信息 title：当鼠标悬浮在图片之上时显示信息 <img src='图片路径' height="200" width="200" alt='图片加载失败' title='鼠标悬浮在图片之上时，显示的文本'> 如果路径错误，出现页面图片加载失败 相对路径 ./1.png 当前路径 ..1.png 上级路径 绝对路径，路径被写死了 ***** from 标签 ******* from标签进行登录时使用的 action ：提交数据的服务器 method ：提交数据的方式 get 获 post placeholder ： input 提示信息 <form action="http://www.baidu.com" method="get"> <input type="text" placeholder="提示信息用户名"> <input type="password" placeholder="提示信息密码"> <input type="submit" value="立即提交"> </form> 单选框 input type = radio checked 属性时单选框的默认选中 当使用单选框时，需要设置互斥属性，相同的name，就可以达到单选的效果 男<input type="radio" name='sex' checked> 女<input type="radio" name='sex'> 复选框(多选框) input type = checkbox checked 默认选中 python <input type="checkbox" checked> java <input type="checkbox"> 下拉菜单框单选 selected ：菜单框单选默认选中 <select name="clss" id=""> <option value="1">HTML</option> <option value="2" selected>CSS</option> </select> 下拉菜单多选 multiple="multiple" ：变为多选下拉菜单 selected ：菜单框单选默认选中 <select multiple="multiple" id="" name=""> <option value="1">HTML</option> <option value="2" selected>CSS</option> </select> </p> form表单的按钮 type="submit" 提交表单按钮 <input type="submit" value="立即提交"> type="reset" 重置按钮，重置表单中的内容，将内容清空 <input type="reset"> 日期属性标签 当input标签内的type属性的值设置：type="date" <input type="date" name=""> name属性必须存在 当选好日期后，提交，name的值和选好的日期打包给服务器 例如： <p>日期 <input type="date" name="birth"> </p> ******* 多行文本输入 文本域******* rows ：代表的是行数 cols ：代表的是列数 用来控制文本域的大小 <textarea rows="10" cols="30"></textarea> ****** button按钮 ******* 没有事件的按钮 <button>按钮</button> ***** labele标签 **** for：用来关联别签中的id属性，当点击label标签时，就会将光标焦点到关联的标签上 <label for="username">用户名</label> <input type="text" id="username"> ***** div 标签 ***** 作用 ： 盒子 区域的意思 容器 包装其他的标签 <div> 其他标签，这个div标签就一个区域 / 书写内容 </div> <span> 书写内容 </span> 内联标签 没有样式 定义组合文档中的行内元素
本文作者：_wangkx
本文链接：https://www.cnblogs.com/kaixinblog/p/16001075.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步