订阅专栏
目录
HTML简介：
网页基本信息：
网页基本标签：
图像和超链接标签
块元素和行内元素
列表标签
表格标签：
媒体元素（视频和音频）
iframe内联框架
表单语法：
初始表单post和get提交
文本框和单选框
表单的应用：
表单初级验证：
HTML简介：
HTML (Hyper Text Markup Language)超文本标记语言
超文本包括：文字，图片，音频，视频，动画等
HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
W3C
World Wide Web Consortium (万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准内容
结构化标准语言（HTML，XML)
表现标准语言(CSS)
行为标准语言（DOM,ECMAScript)
网页基本信息：
<!-- 告诉浏览器 我们使用的是什么规范 --> <!DOCTYPE html> <html lang="en"> <!--head 表示网页的头部--> <head> <!--meta标签 用于描述网页 一般用来做SEO（利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名）--> <meta charset="UTF-8"> <meta name="keywords" content="龍弟学JAVA"> <meta name="description" content="来这个地方可以学习java"> <!-- 网页的标题--> <title>Title</title> </head> <!--网页的主体--> <body> Hello World!!!! </body> </html>
网页基本标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!--段落标签--> <p>p换行1</p> <p>p换行2</p> <!--水平线标签--> <hr/> <!--换行标签--> 换行1 <br/> 换行2 <br/> <!--换行标签比较紧凑，段落标签有明显段间距--> <!--粗体 斜体--> <h1>字体样式标签</h1> 粗体：<strong>I love you </strong><br/> 斜体：<em>I love you </em><br/> <!--特殊符号--> 空格： nbsp;nbsp;<br/> 空格：1 2 3 4<br/> 大于号><br/> 小于号<<br/> 版权符号©<br/> <!--特殊符号记忆：&开头;只要在idea中&敲出后就有提示--> </body> </html>
图像和超链接标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像和链接标签</title> </head> <body> <!-- src:资源地址 相对地址，绝对地址 ../上级地址 alt：在图片加载失败的时候，就会用文字代替 title:鼠标悬停在图片上时，所提示的名字 width height 图片的高和宽 --> <img src="../xxx.jpg" alt="oops!图像不见了" title="123"> <br/> <!-- href：跳转页面的地址 a标签内文字：即显示的文字 可以把图片放在a标签内，点击图片跳转网页 target:表示在哪打开新网页 _self:当前标签打开 _blank:新的页面中打开 _parent:在父框架集中打开被链接文档。 _top:在整个窗口中打开被链接文档。 framename:在指定的框架中打开被链接文档。 --> <a href="https://www.baidu.com" target="_blank" title="123">点击跳转至百度</a> <br/> <a href="https://www.baidu.com"><img src="../xxx.jpg" alt="oops!图像不见了"></a> <!--锚链接 1.需要一个标记锚 2.跳转到标记 页面内跳转 # --> <a name="top"></a> <a href="#top">回到顶部</a> <br/> <!--也可以在网址后添加#号跳到对应网站的对应位置--> <a href="https://www.baidu.com#down">百度底部</a> <br/> <!--功能性链接 邮箱链接：mailto qq链接 --> <a href="mailto:xxxxxxqq.com">点击联系我</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里加我领取小电影" title="点击这里加我领取小电影" /> </a> </body> </html>
块元素和行内元素
块元素
无论内容多少，该元素独占一行
（p h1-h6）
行内元素
撑开宽度，左右都是行内元素的可以排在一行
（a strong em …）
列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!---有序列表 应用范围：试卷，问答 --> <ol> <li>Go</li> <li>Python</li> <li>后端</li> <li>大数据</li> <li>C++</li> </ol> <hr> <!---无序列表 应用范围：导航，侧边栏 --> <ul> <li>Go</li> <li>Python</li> <li>后端</li> <li>大数据</li> <li>C++</li> </ul> <!--自定义列表 dl:标签 dt：列表名称 dd 列表内容 --> <!----> <hr> <dl> <dt>学科列表</dt> <dd> Go</dd> <dd> Python</dd> <dd> C++</dd> <dt> 位置</dt> <dd> 广东</dd> <dd> 北京</dd> <dd> 澳大利亚</dd> </dl> </body> </html>
表格标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--表格table 行 tr 列 td --> <table border="1px"> <tr> <!--跨列--> <td colspan="3">1-1</td> </tr> <tr> <!--跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td>3-2</td> <td>3-3</td> </tr> </table> </body> </html>
媒体元素（视频和音频）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 媒体元素（视频和音频）</title> </head> <body> <!--视频 controls 控制面板 autoplay 自动播放 --> <video src="xxx/xxx.xxx" controls autoplay></video> <!--音频 --> <audio src="xxx/xxx.xxx" controls autoplay></audio> </body> </html>
页面结构分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构</title> </head> <body> <!--页面头部--> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚部</h2> </footer> </body> </html>
效果展示：
iframe内联框架
ifram标签，必须要有src属性即引用页面的地址
给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接
target相当于指针，name相当于变量名。
target属性，相当于把“hello”和链接绑定了，然后内联框架可以通过name=“hello”访问这个链接。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <!-- ifram内联框架 w-h：“小窗的高度和宽度” src：引用页面地址 name：框架标识名 --> <iframe src="" frameborder="0" width="1000" height="800" name="hello"> </iframe> <a href="http://www.bilibili.com" target="hello">点击我跳转</a> <!--B站自动生成内敛标签：--> <!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97256834&page=1"--> <!-- scrolling="no"--> <!-- border="0"--> <!-- frameborder="no"--> <!-- framespacing="0"--> <!-- allowfullscreen="true">--> <!--</iframe>--> </body> </html>
效果展示：
表单语法：
from标签，action属性为所提交的位置，也就是目的地址
method选择提交方式
可以选择使用post或者get方式提交
get高效，但在url中可以看到提交的信息，不安全，不能提交大文件
post比较安全且可以传输大文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action属性为所提交的位置，也就是目的地址 method选择提交方式,可以选择使用post或者get方式提交 get高效，但在url中可以看到提交的信息，不安全，不能提交大文件 post比较安全且可以传输大文件 --> <form action="https://www.baidu.com/" method="get"> <!--文本输入框--> <p>名称：<input type="text" name="username"></p> <!--密码框--> <p>密码：<input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>
文本框和单选框
表单元素格式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单from action属性为所提交的位置，也就是目的地址 method选择提交方式,可以选择使用post或者get方式提交 get高效，但在url中可以看到提交的信息，不安全，不能提交大文件 post比较安全且可以传输大文件 --> <form action="xxx.xxx" method="get"> <!-- 文本输入框：input type="text"--> <p>用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20"></p> <p>密 码：<input type="password" name="password"></p> <!--submit提交表单，reset重置--> <p> <input type="submit"> <input type="reset"> </p> <!-- radio单选框标签 value即单选框的值，在提交时对应value name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key checked:默认被选中 --> <p>性别：<input type="radio" value="boy" name="sex" />男 <input type="radio" value="girl" name="sex"/>女 </p> <!--checkbox多选框--> <p> 爱好： <input type="checkbox" value="b" name="hobby">打篮球 <input type="checkbox" value="s" name="hobby">唱rap <input type="checkbox" value="d" name="hobby">跳舞 </p> <p> <!--按钮--> <!--button 普通按钮 image 图像按钮 submit 提交按钮 reset 重置按钮--> <input type="button" name="btn1" value="提交按钮"> <!--图片按钮默认是提交：和submit类似--> <input type="image" src="xxx/xxx"> </p> <!--下拉框：selected:默认选项--> <p> 你来自： <select name="location"> <option value="china">中国</option> <option value="us" selected>美国</option> <option value="japan">日本</option> </select> </p> <!--文本域--> <p> <textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea> </p> <!--文件域--> <p> <input type="file" name="file"> <input type="button" name="upload" value="上传"> </p> <!--邮件、url：会简单验证是否是邮箱地址 number 数字验证--> <p> 邮箱： <input type="email" name="email"> url： <input type="url" name="url"> </p> <!--滑块--> <p>音量： <input type="range" min="0" max="100" name="voice" step="10"> </p> <!--搜索框--> <p>搜索： <input type="search"> </p> </form> </body> </html> </html>
效果展示：
表单的应用：
隐藏域：hidden
只读：readonly
禁用：disabled
<!--增强鼠标可用性，点击label，光标自动到text上--> <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p>
表单初级验证：
常用方式
placeholder：提示信息
required：非空判断
pattern：正则表达式
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p> <p>名称：<input type="text" name="username" required></p> <!--常用的正则：https://www.jb51.net/tools/regexsc.htm--> <p>自定义邮箱： <input type="text" name="diy" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p>
