前端(1) - HTML
HTML基本结构
- DOCTYPE：告诉浏览器，我们要使用什么规范
- meta：描述性标签，它用来描述我们的网站的一些信息
- title：网页标题
- body：代表网页主体
1 2 DOCTYPE html> 3 4 <html lang="en"> 5 6 7 <head> 8 9 <meta charset="UTF-8"> 10 <meta name="keywords" content="HTML学习"> 11 <meta name="description" content="开始学习"> 12 13 14 <title>我的第一个网页title> 15 head> 16 17 18 <body> 19 Hello World! 20 body> 21 html>
网页的基本标签
- 标题标签：
<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 youstrong><br/> 48 斜体：<em>i love youem> 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 14 <img src="../resources/images/1.png" alt="图片名字" title="悬停文字" width="300" height="300"> 15 16 <a href="4.链接标签.html#down">4downa> 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 10 <a name="top">顶部a> 11 12 13 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 62 <a href="#top">回到顶部a> 63 <a name="down">底部a> 64 65 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>
列表标签
- 有序列表：
<ol> <li>Javali> <li>Pythonli> <li>运维li> <li>前端li> ol>- 无序列表：
<ul> <li>Javali> <li>Pythonli> <li>运维li> <li>前端li> ul>- 自定义列表：
<dl> <dt>学科dt> <dd>Javadd> <dd>Pythondd> <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 12 <ol> 13 <li>Javali> 14 <li>Pythonli> 15 <li>运维li> 16 <li>前端li> 17 ol> 18 19 <hr/> 20 21 24 <ul> 25 <li>Javali> 26 <li>Pythonli> 27 <li>运维li> 28 <li>前端li> 29 ul> 30 31 37 38 <dl> 39 <dt>学科dt> 40 <dd>Javadd> 41 <dd>Pythondd> 42 <dd>C++dd> 43 <dt>学校dt> 44 <dd>清华dd> 45 <dd>北大dd> 46 <dd>南大dd> 47 dl> 48 49 body> 50 html>
表格标签
<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 12 13 <table border="1px" style="text-align: center"> 14 <tr> 15 16 <td colspan="4" >1-1td> 17 tr> 18 <tr> 19 20 <td rowspan="2">2-1td> 21 <td>2-2td> 22 <td>2-3td> 23 <td>2-4td> 24 tr> 25 <tr> 26 <td>3-1td> 27 <td>3-2td> 28 <td>3-3td> 29 tr> 30 table> 31 body> 32 html>
媒体元素标签
- 视频：
<video src="" controls autoplay>video>- 音频：
<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 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>headertd> 16 <td>标记头部区域的内容（用于页面或页面中的一块区域）td> 17 tr> 18 <tr> 19 <td>footertd> 20 <td>标记脚部区域的内容（用于页面或页面中的一块区域）td> 21 tr> 22 <tr> 23 <td>sectiontd> 24 <td>Web页面中的一块独立区域td> 25 tr> 26 <tr> 27 <td>articletd> 28 <td>独立的文章内容td> 29 tr> 30 <tr> 31 <td>asidetd> 32 <td>相关内容或者应用（常用于侧边栏）td> 33 tr> 34 <tr> 35 <td>navtd> 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>内联框架iframetitle> 6 head> 7 <body> 8 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]
<form action="1.我的第一个网页.html" method="get"> 表单常用标签..... form>
- acton：表单提交的位置，可以是网站，也可以是一个请求处理地址
- method：post，get 提交方式
- get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
- post方式提交：比较安全，可以传输大文件
文本框
<p>名字:<input type="text" id="username" maxlength="8" size="30" placeholder="请输入用过户名" required>p>密码框
<p>密码:<input type="password" id="passworld" value="123456" hidden>p>单选框
<p>性别： <input type="radio" value="boy" name="sex" checked />男 <input type="radio" value="girl" name="sex" disabled />女 p>多选框
<p>爱好 <input type="checkbox" value="smoke" name="like" />抽烟 <input type="checkbox" value="drinking" name="like" checked />喝酒 <input type="checkbox" value="tangtou" name="like" />烫头 p>按钮
<p>按钮： <input type="button" value="点击变长" name="btn1"> <input type="image" src="../resources/images/1.png"> <input type="submit"> <input type="reset"> p>下拉框
<p>国家下拉框 <select name="列表名称"> <option value="china：" selected>中国option> <option value="usa：">美国option> <option value="fg：">法国option> <option value="dg：">德国option> select> p>滑块
<p>音量： <input type="range" name="voice" max="100" min="0" step="5"> p>搜索框
<p>搜索： <input type="search" name="search"> p>文本域
<p>反馈： <textarea name="textarea" cols="50" rows="10">文本内容textarea> p>文件域
<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 17 18 <form action="1.我的第一个网页.html" method="get"> 19 28 <p>名字:<input type="text" id="username" maxlength="8" size="30" placeholder="请输入用过户名" required>p> 29 30 31 <p>密码:<input type="password" id="passworld" value="123456" hidden>p> 32 33 39 <p>性别： 40 <input type="radio" value="boy" name="sex" checked />男 41 <input type="radio" value="girl" name="sex" disabled />女 42 p> 43 44 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 58 <p>按钮： 59 <input type="button" value="点击变长" name="btn1"> 60 <input type="image" src="../resources/images/1.png"> 61 p> 62 63 64 <p> 65 <label for="mark">点击我试试label> 66 <input type="text" id="mark"> 67 p> 68 69 73 <p>自定义邮箱： 74 <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> 75 p> 76 77 82 83 <p> 84 <input type="submit"> 85 <input type="reset" value="清空表单"> 86 p> 87 form> 88 body> 89 html>
表单的应用
- 隐藏
<p>密码:<input type="password" id="passworld" value="123456" hidden>p>- 只读
<p>密码:<input type="password" id="passworld" value="123456" readonly>p>- 禁用
<input type="radio" value="girl" name="sex" disabled />女
表单的初级验证
- 用户提示
<p>名字:<input type="text" id="username" maxlength="8" size="30" placeholder="请输入用过户名" >p>- 非空判读
<p>名字:<input type="text" id="username" maxlength="8" size="30" required >p>- 正则表达式
<p>自定义邮箱,使用正则表达式对邮箱输入是否合法进行校验： <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> p>