hx标签
-
内容标题
<!DOCTYPE html> <html> <head> <title>网站的标题</title> </head> <body> <h1>LXG</h1> <h2>LXG</h2> <h3>LXG</h3> 非常帅 </body> </html>
p 标签
-
添加段落
<!DOCTYPE html> <html> <head> <title>网站的标题</title> </head> <body> <h1>LXG</h1> <p>......</p> <p>......</p> </body> </html>
strong和em标签
-
加入强调
-
strong：加粗
<!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <h1>LXG</h1> <strong>01</strong> <p>...01...</p> <p>...02...</p> <strong>02</strong> </body> </html> -
em：斜体
<!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> <h1>LXG</h1> <h4>01</h4> <p>...<em>01</em>...</p> <p>...<strong>02</strong>...</p> <strong>02</strong> </body> </html>
-
br标签
-
换行，是单闭合标签
<!DOCTYPE html> <html> <head>crpsz <title>Hello</title> </head> <body> <h2>《琵琶行》</h2> 一道残阳铺水中，<br> 半江瑟瑟半江红。<br> 可怜九月初三夜，<br> 露似珍珠月似弓。<br> </body> </html>
空白折叠：多个空格，换行等被默认折叠成一个空格
HTML的特殊符号
-
一个空格:
-
有很多,可去搜索
hr标签
-
为段落之间添加分割线，是单闭合标签
<!DOCTYPE html> <html> <head> <title>网站的标题</title> </head> <body> <h1>LXG</h1> <p>......</p> <hr> <p>......</p> </body> </html>
列表标签
ul标签
-
添加无序列表
<!DOCTYPE html> <html> <head> <title>无序列表</title> </head> <body> <h2>有趣的斑鬣狗</h2> <ul> <li>谈起斑鬣狗，可能很多人都会报以鄙夷的态度，认为这是一种十分令人讨厌的动物。</li> <li>加上如今许多编辑的添油加醋或者刻意宣传，导致斑鬣狗猥琐的形象深入人心。</li> <li>加上如今许多编辑的添油加醋或者刻意宣传，导致斑鬣狗猥琐的形象深入人心。</li> <li>它的身上也有许多可取之处，比如斑鬣狗种群之间的关系，就比我们想象中得要好很多，也更团结。</li> </ul> </body> </html>
ol标签
-
添加有序列表
<!DOCTYPE html> <html> <head> <title>有序列表</title> </head> <body> <h2>有趣的斑鬣狗</h2> <ol> <li>谈起斑鬣狗，可能很多人都会报以鄙夷的态度，认为这是一种十分令人讨厌的动物。</li> <li>加上如今许多编辑的添油加醋或者刻意宣传，导致斑鬣狗猥琐的形象深入人心。</li> <li>加上如今许多编辑的添油加醋或者刻意宣传，导致斑鬣狗猥琐的形象深入人心。</li> <li>它的身上也有许多可取之处，比如斑鬣狗种群之间的关系，就比我们想象中得要好很多，也更团结。</li> </ol> </body> </html>
dl标签
-
添加定义列表
<!DOCTYPE html> <html> <head> <title>定义列表</title> </head> <body> <dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> <dd>订单操作</dd> </dl> </body> </html>
table标签
-
制作表格
<!DOCTYPE html> <html> <head> <title>制作表格</title> </head> <body> <table> <tr> <th>产品名称</th> <th>品牌</th> <th>数量</th> <th>入库时间</th> </tr> <tr> <td>电视机</td> <td>海尔</td> <td>200</td> <td>Sep-17</td> </tr> <tr> <td>音响</td> <td>小米</td> <td>300</td> <td>Aug-18</td> </tr> <tr> <td>电冰箱</td> <td>海尔</td> <td>100</td> <td>Feb-19</td> </tr> </table> </body> </html> -
简单的css样式为表格添加边框
<!DOCTYPE html> <html> <head> <title>制作表格</title> </head> <body> <table border="1"cellspacing="0"> <tr> <th>产品名称</th> <th>品牌</th> <th>数量</th> <th>入库时间</th> </tr> <tr> <td>电视机</td> <td>海尔</td> <td>200</td> <td>Sep-17</td> </tr> <tr> <td>音响</td> <td>小米</td> <td>300</td> <td>Aug-18</td> </tr> <tr> <td>电冰箱</td> <td>海尔</td> <td>100</td> <td>Feb-19</td> </tr> </table> </body> </html>border=“1”(边界为1)
cellspacing=“0”(单元格距离为0)
-
学习caption为表格添加标题
<!DOCTYPE html> <html> <head> <title>制作表格</title> </head> <body> <table border="1"cellspacing="0"> <caption>商品清单</caption> <tr> <th>产品名称</th> <th>品牌</th> <th>数量</th> <th>入库时间</th> </tr> <tr> <td>电视机</td> <td>海尔</td> <td>200</td> <td>Sep-17</td> </tr> <tr> <td>音响</td> <td>小米</td> <td>300</td> <td>Aug-18</td> </tr> <tr> <td>电冰箱</td> <td>海尔</td> <td>100</td> <td>Feb-19</td> </tr> </table> </body> </html> -
表格的横向合并和纵向合并并使用
-
横向合并(合并列)
<!DOCTYPE html> <html> <head> <title>制作表格</title> </head> <body> <table border="1"cellspacing="0"> <caption>商品清单</caption> <tr> <th>产品名称</th> <th>品牌</th> <th colspan="2">数量和入库时间</th> </tr> <tr> <td>电视机</td> <td>海尔</td> <td>200</td> <td>Sep-17</td> </tr> <tr> <td>音响</td> <td>小米</td> <td>300</td> <td>Aug-18</td> </tr> <tr> <td>电冰箱</td> <td>海尔</td> <td>100</td> <td>Feb-19</td> </tr> </table> </body> </html>colspan=“2”(跨2列合并)
-
纵向合并(合并行)
<!DOCTYPE html> <html> <head> <title>制作表格</title> </head> <body> <table border="1"cellspacing="0"> <caption>商品清单</caption> <tr> <th>产品名称</th> <th>品牌</th> <th>数量</th> <th>入库时间</th> </tr> <tr> <td>电视机</td> <td>海尔</td> <td>200</td> <td>Sep-17</td> </tr> <tr> <td>音响</td> <td rowspan="3">小米</td> <td>300</td> <td>Aug-18</td> </tr> <tr> <td>电冰箱</td> <td>100</td> <td>Feb-19</td> </tr> <tr> <td>电脑</td> <td>100</td> <td>Feb-19</td> </tr> </table> </body> </html>rowspan=“3”(跨3行合并)
-
a标签
-
为网页添加超链接（a标签全称anchor，意为锚点）
<!DOCTYPE html> <html> <head> <title>超链接</title> </head> <body> <a href="http://www.baidu.com" title="点击一下，了解更多">百度一下</a> </body> </html>href=“跳转的位置”(a标签的一个属性)
title=“a标签的标题”(a标签的一个属性，鼠标悬浮时显示)
-
在新的浏览器窗口打开新的链接
<!DOCTYPE html> <html> <head> <title>超链接</title> </head> <body> <a href="http://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a> </body> </html>target="_blank"(a标签的一个属性，在新的浏览器窗口打开新的链接)
target="_self"(a标签的一个属性，在当前页面打开新的链接)
-
标签在当前网页上进行跳转
<!DOCTYPE html> <html> <head> <title>超链接</title> </head> <body> <p id="top"></p> <a href="http://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <p>奥力给</p> <a href="#top">回到顶部</a> </body> </html>p标签可替换成其他标签
id=“top”(p标签的一个属性，同一个id在一个网页中是唯一的)
href="#top"(a标签的一个属性，跳转到top所在的位置)
-
用a标签发送邮件
<!DOCTYPE html> <html> <head> <title>发送邮件</title> </head> <body> <a href="mailto:12345678@qq.com.cn" >向12345678发送邮件</a> </body> </html>href=“mailto:邮箱地址”(a标签的一个属性，向某人发送邮件)
img标签
-
为网页添加图片，是单闭合标签
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="1.jpg"> </body> </html>src=“1.jpg”(img标签的一个属性，这里的写法只能调出同级目录中的图片，完整写法为src="./1.jpg")
-
img标签src属性的路径问题
-
同级目录文件夹中的图片
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="images/1.jpg"> </body> </html>这里完整写法为src="./images/1.jpg"
-
上级目录中的图片
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="../1.jpg"> </body> </html> -
上级目录文件夹中的图片
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="../images/1.jpg"> </body> </html> -
相对路径：
-
./1.jpg(同级目录)
-
…/1.jpg(上级目录)
-
…/1.jpg(上上级目录)
-
-
绝对路径：
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="C:/Users/Lenovov/Desktop/1.jpg"> </body> </html> -
网络路径：
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="https://w.wallhaven.cc/full/9m/wallhaven-9mxz8k.jpg" width="800"> </body> </html>
-
-
img标签的属性
-
尺寸
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="images/1.jpg" width="200" height="200"> </body> </html>width=""(img标签的一个属性，图片的宽度)
height=""(img标签的一个属性，图片的高度)
注意：为了防止图片失真，可以只写宽度，计算机会自动计算合适的 高度
-
加载失败时执行的文本
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="images/2.jpg" width="400" alt="我的头像"> </body> </html>alt=""(img标签的一个属性，加载失败时执行)
-
图片的标题
<!DOCTYPE html> <html> <head> <title>添加图片</title> </head> <body> <img src="images/2.jpg" width="400" alt="我的头像" title="哎！！！"> </body> </html>title=""(img标签的一个属性，鼠标悬浮时显示)
加载失败也会执行
-
form标签和input标签
-
表单控件的使用
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <input type="text"> <input type="password"> </form> </body> </html>type=“text”(input标签的一个属性，文本输入)
type=“password”(input标签的一个属性，密码输入)
-
将网页的数据提交到服务器
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form action="http://www.baidu.com" method="post"> <input type="text" placeholder="请输入账号"> <input type="password" placeholder="请输入密码"> <input type="submit" value="立即注册"> <input type="reset" value="重置"> </form> </body> </html>action=“http://www.baidu.com” (form标签的一个属性，提交的服务器地址)
method=“get或post”(form标签的一个属性，提交到服务器的方式)
placeholder=“请输入账号”(input标签的一个属性，提示用户的文本)
type=“submit”(input标签的一个属性，提交按钮)
value=“立即注册”(input标签的一个属性，修改按钮中的文本，默认为“提交”)
type=“reset”(input标签的一个属性，重置按钮)
-
单选框实现选择
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form action="http://www.baidu.com" method="post"> <input type="text" placeholder="请输入账号"><br> <input type="password" placeholder="请输入密码"><br> <p> 男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"> </p> <p> <input type="submit" value="立即注册"> </p> </form> </body> </html>type=“radio”(input标签的一个属性，单选框实现选择)
name=“sex”(input标签的一个属性，加同样的属性名，会达到互斥的效果)
checked=“checked”(input标签的一个属性，默认选择)
-
复选框实现选择
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form action="http://www.baidu.com" method="post"> <h4>购买的课程：</h4> <p> web前端<input type="checkbox" checked="checked"><br> python学习<input type="checkbox"><br> Java学习<input type="checkbox"> </p> <h4>注册账号：</h4> <input type="text" placeholder="请输入账号"><br> <input type="password" placeholder="请输入密码"><br> <p> 男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"> </p> <input type="submit" value="立即注册"> </form> </body> </html>type=“checkbox”(input标签的一个属性，复选框实现选择)
select标签
-
下拉列表实现单选
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <select name="class"> <option value="a">HTML</option> <option value="b">CSS</option> <option selected="selected">JavaScript</option> <option>Vue</option> </select> </form> </body> </html>option标签(列表中的目录)
selected=“selected”(option标签的一个属性，默认选择)
-
下拉列表实现多选
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <select multiple="multiple"> <option>HTML</option> <option>CSS</option> <option selected="selected">JavaScript</option> <option>Vue</option> <option>react</option> <option>angular</option> <option>nodejs</option> </select> </form> </body> </html>multiple=“multiple”(select标签的一个属性，下拉列表实现多选)
在网页上按住Ctrl键实现多选
textarea标签
-
让文本输入框支持多行输入
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <textarea rows="10" cols="50"></textarea> </form> </body> </html>rows=“10”(textarea标签的一个属性，文本输入框的行数)
cols = “50”(textarea标签的一个属性，文本输入框的列数)
button标签
-
普通按钮
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <button>按钮</button> </form> </body> </html>
label标签
-
实现相互关联
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <p> <label for="username">用户名：</label> <input type="text" id="username"> </p> <P> <label for="pwd">密码：</label> <input type="password" id="pwd"> </P> </form> </body> </html>for=“username”(label标签的一个属性，与id标签关联，点击“用户名：”会实现点击输入框的作用)
id=“username”(input标签的一个属性)
div标签
-
实现划分区域，能包裹任何标签和文本
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div> 角色 </div> <div> 张三 <div> 李四 <div> 王五 </div> </div> </div> </body> </html>
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
