导读：HTML基本结构DOCTYPE：告诉浏览器，我们要使用什么规范meta：描述性标签，它用来描述我们的网站的一些信息title：网页..
HTML基本结构
- DOCTYPE：告诉浏览器，我们要使用什么规范
- meta：描述性标签，它用来描述我们的网站的一些信息
- title：网页标题
- body：代表网页主体
1 <!--DOCTYPE：告诉浏览器，我们要使用什么规范--> 2 <!DOCTYPE html> 3 4 <html lang="en"> 5 6 <!--head标签代表网页头部--> 7 <head> 8 <!-- meta描述性标签，它用来描述我们的网站的一些信息--> 9 <meta charset="UTF-8"> 10 <meta name="keywords" content="HTML学习"> 11 <meta name="description" content="开始学习"> 12 13 <!--title网页标题--> 14 <title>我的第一个网页</title> 15 </head> 16 17 <!--body标签代表网页主体--> 18 <body> 19 Hello World! 20 </body> 21 </html>
网页的基本标签
- 标题标签：
View Code<h1>一级标题</h1>;<h2>二级标题</h2>;<h3>三级标题</h3>;<h4>四级标题</h4>.....- 段落标签： <p>段落</p>
- 换行标签： <br/>
- 水平线标签： <hr/>
- 注释： <!--注释内容-->
- 特殊符号： 空格； © 版权所有者......
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本标签学习</title> 6 </head> 7 8 <body> 9 10 <!--标题标签--> 11 <h1>一级标签</h1> 12 <h2>二级标签</h2> 13 <h3>三级标签</h3> 14 <h4>四级标签</h4> 15 <h5>五级标签</h5> 16 <h6>六级标签</h6> 17 18 <!--段落标签--> 19 <p>两只老虎，两只老虎</p> 20 <p>跑得快，跑得快</p> 21 <p>一只没有眼睛</p> 22 <p>一只没有尾巴</p> 23 <p>真奇怪！真奇怪！</p> 24 <p>两只老虎，两只老虎</p> 25 <p>跑得快，跑得快</p> 26 <p>一只没有耳朵</p> 27 <p>一只没有尾巴</p> 28 <p>真奇怪！真奇怪！</p> 29 30 <!--水平线标签--> 31 <hr/> 32 33 <!--换行标签--> 34 两只老虎，两只老虎 35 跑得快，跑得快<br/> 36 一只没有眼睛<br/> 37 一只没有尾巴<br/> 38 真奇怪！真奇怪！<br/> 39 两只老虎，两只老虎<br/> 40 跑得快，跑得快<br/> 41 一只没有耳朵<br/> 42 一只没有尾巴<br/> 43 真奇怪！真奇怪！<br/> 44 45 <!--粗体，斜体--> 46 <h1>字体样式标签</h1> 47 粗体：<strong>i love you</strong><br/> 48 斜体：<em>i love you</em> 49 50 <br/> 51 <!--特殊符号--> 52 空 格： 53 <br/> 54 大于号：> 55 <br/> 56 小于号：< 57 <br/> 58 版权符号：©版权所有者 59 60 特殊符号：&开头 ；结尾 61 </body> 62 </html>
图像标签
<img src="" alt ="" title="" width="" height="">
- src：必填参数，图像的地址，推荐使用相对路径
- alt：必填参数，图像的名字
- title：可选参数，鼠标悬停在图像上的文字
- width,height：可选参数，图像长宽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图像标签</title> 6 </head> 7 <body> 8 <!-- 9 src：图像地址（必填） 10 相对路径（推荐），绝对路径 11 ../ 上一级目录 12 alt：图像名字（必填），图像名字找不到的时候会显示 13 --> 14 <img src="../resources/images/1.png" alt="图片名字" title="悬停文字" width="300" height="300"> 15 16 <a href="4.链接标签.html#down">4down</a> 17 18 </body> 19 </html>
超链接标签
<a href="" target="">
- href：必填，表示要跳转到哪个页面
- target:可选参数，表示窗口在哪里打开
- -blank 在新标签中打开
- -self 在当前标签中打开
锚链接
- 创建一个a标签，a标签中的name属性为锚点；
- href等于name属性值的超链接，点击后，跳转到锚点位置
<a name="top">顶部</a> <a href="#top">回到顶部</a>邮箱链接
<a href="mailto:893450389@qq.com">点击联系我</a>QQ推广链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="有问题请联系我" title="有问题请联系我"/> </a>1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>链接标签</title> 6 </head> 7 <body> 8 9 <!--使用name作为锚点标记，进行锚链接跳转--> 10 <a name="top">顶部</a> 11 12 13 <!--a标签 14 href：必填，表示要跳转到哪个页面 15 target:表示窗口在哪里打开 16 -blank 在新标签中打开 17 -self 在当前标签中打开 18 --> 19 <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a> 20 <a href="https://www.baidu.com" target="_self">点击我跳转到百度</a> 21 <br/> 22 23 <!--超链接放在图像上面--> 24 <a href="1.我的第一个网页.html"> 25 <img src="../resources/images/1.png" alt="点击跳转"> 26 </a> 27 28 <!--超链接放在图像上面--> 29 <a href="1.我的第一个网页.html"> 30 <img src="../resources/images/1.png" alt="点击跳转"> 31 </a><!--超链接放在图像上面--> 32 <a href="1.我的第一个网页.html"> 33 <img src="../resources/images/1.png" alt="点击跳转"> 34 </a><!--超链接放在图像上面--> 35 <a href="1.我的第一个网页.html"> 36 <img src="../resources/images/1.png" alt="点击跳转"> 37 </a><!--超链接放在图像上面--> 38 <a href="1.我的第一个网页.html"> 39 <img src="../resources/images/1.png" alt="点击跳转"> 40 </a><!--超链接放在图像上面--> 41 <a href="1.我的第一个网页.html"> 42 <img src="../resources/images/1.png" alt="点击跳转"> 43 </a><!--超链接放在图像上面--> 44 <a href="1.我的第一个网页.html"> 45 <img src="../resources/images/1.png" alt="点击跳转"> 46 </a><!--超链接放在图像上面--> 47 <a href="1.我的第一个网页.html"> 48 <img src="../resources/images/1.png" alt="点击跳转"> 49 </a><!--超链接放在图像上面--> 50 <a href="1.我的第一个网页.html"> 51 <img src="../resources/images/1.png" alt="点击跳转"> 52 </a><!--超链接放在图像上面--> 53 <a href="1.我的第一个网页.html"> 54 <img src="../resources/images/1.png" alt="点击跳转"> 55 </a> 56 57 <!--锚链接 58 1.需要锚标记 59 2.跳转到标记 60 # 61 --> 62 <a href="#top">回到顶部</a> 63 <a name="down">底部</a> 64 65 <!--功能性链接 66 邮件链接：mailto 67 QQ链接 68 --> 69 <a href="mailto:893450389@qq.com">点击联系我</a> 70 71 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> 72 <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="有问题请联系我" title="有问题请联系我"/> 73 </a> 74 75 </body> 76 </html>
列表标签
- 有序列表：
- 无序列表：
View Code<ul> <li>Java</li> <li>Python</li> <li>运维</li> <li>前端</li> </ul>- 自定义列表：
View Code<dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>C++</dd> <dt>学校</dt> <dd>清华</dd> <dd>北大</dd> <dd>南大</dd> </dl>1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表标签</title> 6 </head> 7 <body> 8 9 <!--有序列表 10 应用范围：试卷、问答等 11 --> 12 <ol> 13 <li>Java</li> 14 <li>Python</li> 15 <li>运维</li> 16 <li>前端</li> 17 </ol> 18 19 <hr/> 20 21 <!--无序列表 22 应用范围：导航、侧边栏 23 --> 24 <ul> 25 <li>Java</li> 26 <li>Python</li> 27 <li>运维</li> 28 <li>前端</li> 29 </ul> 30 31 <!--自定义列表 32 dl：标签 33 dt：列表名称 34 dd：列表内容 35 公司网站底部 36 --> 37 38 <dl> 39 <dt>学科</dt> 40 <dd>Java</dd> 41 <dd>Python</dd> 42 <dd>C++</dd> 43 <dt>学校</dt> 44 <dd>清华</dd> 45 <dd>北大</dd> 46 <dd>南大</dd> 47 </dl> 48 49 </body> 50 </html>
表格标签
View Code<tr>行 <td>列</td> </tr>1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格标签</title> 6 </head> 7 <body> 8 <!--表格table 9 行：tr 10 列：td 11 --> 12 13 <table border="1px" style="text-align: center"> 14 <tr> 15 <!--colspan跨列--> 16 <td colspan="4" >1-1</td> 17 </tr> 18 <tr> 19 <!--rowspan 跨行--> 20 <td rowspan="2">2-1</td> 21 <td>2-2</td> 22 <td>2-3</td> 23 <td>2-4</td> 24 </tr> 25 <tr> 26 <td>3-1</td> 27 <td>3-2</td> 28 <td>3-3</td> 29 </tr> 30 </table> 31 </body> 32 </html>
媒体元素标签
- 视频：
View Code<video src="" controls autoplay></video>- 音频：
View Code<audio src="" controls autoplay></audio>- 参数：src资源路径；controls控制条；autoplay自动播放
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>媒体元素</title> 6 </head> 7 <body> 8 9 <!--音频和视频 10 src:资源路径 11 controls:控制条 12 autoplay：自动播放 13 --> 14 15 <video src="../resources/video/莫文蔚%20-%20这世界那么多人.mp4" controls autoplay></video> 16 <audio src="../resources/audio/莫文蔚%20-%20这世界那么多人.mp3" controls autoplay></audio> 17 </body> 18 </html>
网页的简单布局
- header：标记头部区域的内容（用于页面或页面中的一块区域）
- footer：标记脚部区域的内容（用于页面或页面中的一块区域）
- section：Web页面中的一块独立区域
- article：独立的文章内容
- aside：相关内容或者应用（常用于侧边栏）
- nav：导航类辅助内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>页面结构分析</title> 6 </head> 7 <body> 8 9 <table style="text-align: center" border="1px"> 10 <tr> 11 <td>元素名</td> 12 <td>描述</td> 13 </tr> 14 <tr> 15 <td>header</td> 16 <td>标记头部区域的内容（用于页面或页面中的一块区域）</td> 17 </tr> 18 <tr> 19 <td>footer</td> 20 <td>标记脚部区域的内容（用于页面或页面中的一块区域）</td> 21 </tr> 22 <tr> 23 <td>section</td> 24 <td>Web页面中的一块独立区域</td> 25 </tr> 26 <tr> 27 <td>article</td> 28 <td>独立的文章内容</td> 29 </tr> 30 <tr> 31 <td>aside</td> 32 <td>相关内容或者应用（常用于侧边栏）</td> 33 </tr> 34 <tr> 35 <td>nav</td> 36 <td>导航类辅助内容</td> 37 </tr> 38 </table> 39 <header> 40 <h2>网页头部</h2> 41 </header> 42 <section> 43 <h2>网页主题</h2> 44 </section> 45 <footer> 46 <h2>网页脚部</h2> 47 </footer> 48 </body> 49 </html>
内联框架
iframe内联框架
- src：地址
- w-h：宽度、高度
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>内联框架iframe</title> 6 </head> 7 <body> 8 <!--iframe内联框架 9 src：地址 10 w-h：宽度、高度 11 12 --> 13 <iframe src="https://www.bilibili.com" frameborder="0" width="1000px" height="800px"></iframe> 14 15 <iframe src="" frameborder="0" width="1000px" height="800px" name="B站导航"></iframe> 16 <a href="https://www.bilibili.com" target="B站导航">点击跳转</a> 17 18 <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> 19 </iframe> 20 </body> 21 </html>
表单
form[post/get]
View Code<form action="1.我的第一个网页.html" method="get"> 表单常用标签..... </form>
- acton：表单提交的位置，可以是网站，也可以是一个请求处理地址
- method：post，get 提交方式
- get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
- post方式提交：比较安全，可以传输大文件
文本框
View Code<!--文本输入框： <input type="text"> value：默认初始值 maxlength：最长能写几个字符 size：文本框的长度 readonly:只读 hidden:隐藏 placeholder:提示信息 required:非空判断 --> <p>名字:<input type="text" id="username" maxlength="8" size="30" placeholder="请输入用过户名" required></p>密码框
View Code<!--密码框： <input type="password">--> <p>密码:<input type="password" id="passworld" value="123456" hidden></p>单选框
View Code<!--单选框<input type="radio"> value:单选框的值 name：一样表示是一个组 checked:默认选项 disable:禁用 --> <p>性别： <input type="radio" value="boy" name="sex" checked />男 <input type="radio" value="girl" name="sex" disabled />女 </p>多选框
View Code<!--多选框<input type="checkbox">--> <p>爱好 <input type="checkbox" value="smoke" name="like" />抽烟 <input type="checkbox" value="drinking" name="like" checked />喝酒 <input type="checkbox" value="tangtou" name="like" />烫头 </p>按钮
View Code<!--按钮 <input type="button"> 普通按钮 <input type="image" src=""> 图像按钮 <input type="submit"> 提交按钮 <input type="reset"> 重置按钮 --> <p>按钮： <input type="button" value="点击变长" name="btn1"> <input type="image" src="../resources/images/1.png"> <input type="submit"> <input type="reset"> </p>下拉框
View Code<!--下拉框，列表框 selected：默认选择 --> <p>国家下拉框 <select name="列表名称"> <option value="china：" selected>中国</option> <option value="usa：">美国</option> <option value="fg：">法国</option> <option value="dg：">德国</option> </select> </p>滑块
View Code<!--滑块<input type="range">--> <p>音量： <input type="range" name="voice" max="100" min="0" step="5"> </p>搜索框
View Code<!--搜索框 --> <p>搜索： <input type="search" name="search"> </p>文本域
View Code<!--文本域 cols="50" rows="10"：行和列大小 --> <p>反馈： <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p>文件域
View Code<p>选择文件： <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录注册</title> 6 </head> 7 <body> 8 9 <h1>注册</h1> 10 11 <!--表单form 12 acton：表单提交的位置，可以是网站，也可以是一个请求处理地址 13 method：post，get 提交方式 14 get方式提交：我们可以在url中看到我们提交的信息，不安全，高效 15 post方式提交：比较安全，可以传输大文件 16 --> 17 18 <form action="1.我的第一个网页.html" method="get"> 19 <!--文本输入框： <input type="text"> 20 value：默认初始值 21 maxlength：最长能写几个字符 22 size：文本框的长度 23 readonly:只读 24 hidden:隐藏 25 placeholder:提示信息 26 required:非空判断 27 --> 28 <p>名字:<input type="text" id="username" maxlength="8" size="30" placeholder="请输入用过户名" required></p> 29 30 <!--密码框： <input type="password">--> 31 <p>密码:<input type="password" id="passworld" value="123456" hidden></p> 32 33 <!--单选框<input type="radio"> 34 value:单选框的值 35 name：一样表示是一个组 36 checked:默认选项 37 disable:禁用 38 --> 39 <p>性别： 40 <input type="radio" value="boy" name="sex" checked />男 41 <input type="radio" value="girl" name="sex" disabled />女 42 </p> 43 44 <!--多选框<input type="checkbox"> 45 --> 46 <p>爱好 47 <input type="checkbox" value="smoke" name="like" />抽烟 48 <input type="checkbox" value="drinking" name="like" checked />喝酒 49 <input type="checkbox" value="tangtou" name="like" />烫头 50 </p> 51 52 <!--按钮 53 <input type="button"> 普通按钮 54 <input type="image" src=""> 图像按钮 55 <input type="submit"> 提交按钮 56 <input type="reset"> 重置按钮 57 --> 58 <p>按钮： 59 <input type="button" value="点击变长" name="btn1"> 60 <input type="image" src="../resources/images/1.png"> 61 </p> 62 63 <!--增强鼠标可用性，点击lable自动跳转焦点--> 64 <p> 65 <label for="mark">点击我试试</label> 66 <input type="text" id="mark"> 67 </p> 68 69 <!--正则表达式验证表单 70 pattern:使用正则表达式对表达那进行验证 71 https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html 72 --> 73 <p>自定义邮箱： 74 <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> 75 </p> 76 77 <!--表单初级验证 78 pattern ：正则判断 79 required：非空判断 80 placeholder：提示信息 81 --> 82 83 <p> 84 <input type="submit"> 85 <input type="reset" value="清空表单"> 86 </p> 87 </form> 88 </body> 89 </html>
表单的应用
- 隐藏
View Code<!--hidden:隐藏--> <p>密码:<input type="password" id="passworld" value="123456" hidden></p>- 只读
View Code<!--readonly:只读--> <p>密码:<input type="password" id="passworld" value="123456" readonly></p>- 禁用
View Code<!--disable:禁用--> <input type="radio" value="girl" name="sex" disabled />女
表单的初级验证
- 用户提示
View Code<!--placeholder:提示信息--> <p>名字:<input type="text" id="username" maxlength="8" size="30" placeholder="请输入用过户名" ></p>- 非空判读
View Code<!--required:非空判断--> <p>名字:<input type="text" id="username" maxlength="8" size="30" required ></p>- 正则表达式
View Code<!--正则表达式验证表单 pattern:使用正则表达式对表达那进行验证 https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html --> <p>自定义邮箱,使用正则表达式对邮箱输入是否合法进行校验： <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p>
更多文章请关注《万象专栏》
转载请注明出处：https://www.wanxiangsucai.com/read/cv72503