HTML5基础知识
一：前言
HTML全称为超文本标记语言，是一种标记语言。由一系列标签构成，这些标签将分散的Internet资源链接成为了一个整体。HTML从1993年至今，已经发展了五代，我们这里主要分享的为HTML5。
二： HTML基本结构。
HTML页面主要分为两大部分。分别是head和body。头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
<!DOCTYPE html> <!--告诉浏览器我们要使用什么规范！--> <html lang="en"> <!--网页头部--> <head> <meta charset="UTF-8"> <!--meta 描述标签，描述网站信息--> <meta name="keywords" content=""> <!--keywords 属性说明，网站的关键字--> <meta name="description" content=""> <!--description 网站的描述--> <title>这是我的第一个网页</title> <!--title标签 网页标题--> </head> <body> <!--body表示网页主体部分--> hello,world; </body> </html>
三：基本标签
3.1 h标签
在HTML中，有六个不同级别的标题，分别用H1到H6表示，H1是最高级别的标题，H6是最低级别的标题。
<!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6>
3.2 p标签
在 HTML 中，“p” 标签用于定义段落。它是一种基本的文本元素，用于将文本内容分段显示。在 HTML 文档中，每个 “p” 标签都会将包含在其中的文本内容显示为一个段落。
<!--段落标签--> <p>亲爱的 你慢慢飞</p> <p>两只蝴蝶简谱</p> <p>两只蝴蝶简谱</p> <p>小心前面带刺的玫瑰</p> <p>亲爱的 你张张嘴</p> <p>风中花香会让你沉醉</p>
3.3 hr标签
在 HTML 中，“hr” 标签是一个用于创建水平线的标记。它是一个自闭合标签，不需要结束标记。
<!--水平线标签--> <hr> </hr>
3.4 br标签
在 HTML 中，“br” 标签用于在文本中创建一个换行符。它是一个自闭合标签，不需要结束标记。
<!--换行标签--> 亲爱的 你跟我飞 <br/> 穿过丛林去看小溪水<br/> 亲爱的 来跳个舞<br/> 爱的春天不会有天黑<br/>
3.5 strong标签与em标签
在 HTML 中，“strong” 标签和 “em” 标签都用于表示文本的重要性。它们是文本样式标记，可以通过加粗或斜体来突出显示文本。
<!--粗体 斜体--> <h1>字体样式标签</h1> 粗体： <strong>庞龙</strong> <br></br> 斜体： <em>庞龙</em> <br></br>
3.6 特殊符号
以下为三种特殊符号，分别表示空格、大于号、小于号、特殊符号
<!--特殊符号--> 空 格 <!--空格--> >< <!--大于号和小于号--> © 版权所有 <!--特殊符号-->
3.7 运行效果
具体的运行效果图片，我贴到下面，大家有兴趣可以自行对照。
三：图像标签
图像标签的作用是为我们的html页面添加图片，它的具体格式如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签学习</title> </head> <body> <!--img标签学习 src：图片地址 相对地址，绝对地址 ../ 表示上一级目录 title 悬停文字 --> <img src="../resources/Image/1.jpeg" alt="小怪兽" title="这是一个小怪兽" width="200px" height="200px"> </body> </html>
图像地址主要分为两种，分别是相对地址和绝对地址。我们一般使用的是相对地址，用…/ 表示，一般我们要新建一个专门用来存储图片、视频、音频的文件夹方便进行管理。
四：链接标签
链接标签是a标签，下面代码展示一下a标签的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body> <!--a标签学习 href:必须填写，表示跳到那个页面 target:表示窗口在哪里打开 _blank 在新标签中打开 _self 在自己的页面中打开 --> <a id="top">顶部</a> <a href="1.我的第一个网页.html">点击调到第一个页面</a> <a href="https://www.sina.com.cn/">点击我跳转到新浪</a> <br/> <a href="2.基本标签.html" target="_blank">新的页面进行打开</a> <br/> <a href="3.图像标签.html"target="_self">本页面打开</a> <p> <img src="../resources/Image/1.jpeg" alt="小怪兽" title="这是一个小怪兽" width="200px" height="200px"> </p> <!--锚链接 需要一个标记，跳转。 --> <a href="#top">回到顶部</a> <a id="down">锚链接，调到底部</a> <!--功能性标签 邮件链接：mailto QQ推广 --> <a href="mailto:1821900925@qq.com">联系我们</a> <br/> <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> </body> </html>
a标签的href标签表示跳转的地址，不仅仅可以跳转我们自己编写的html文件和网址，还可以跳转到我们自己设置的锚链接。
通过点击让页面跳转到自己想要的地方。
五：列表
列表主要分为有序列表、无序列表、自定义列表，使用好列表可以让我们的排版更加整齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body> <!-- 有序列表--> <ol> <li>Java</li> <li>Python</li> <li>C#</li> <li>C/C++</li> </ol> <!--无序列表 应用范围：导航、侧边栏。--> <ul> <li>Java</li> <li>Python</li> <li>C#</li> <li>C/C++</li> </ul> <!--自定义列表 dl:标签 dt：列表名称 dd：列表内容 公司网站的底部 --> <dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>C#</dd> <dd>C/C++</dd> <br> <dt>地理位置</dt> <dd>张家口</dd> <dd>沧州</dd> <dd>廊坊</dd> <dd>北京</dd> </dl> </body> </html>
对应运行结果：
六：表格
使用表格table标签可以进行列表绘画。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body> <!--表格table 行标签：tr 列标签：td --> <table border="1px"> <tr> <!--colspan跨列--> <td colspan="4">1-1</td> </tr> <tr> <!--rowspan跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </body> </html>
效果：
其中colspan和rowspan提供了跨行和跨列效果。
七：媒体元素
媒体元素主要有两个部分，分别是音乐和视频。练习此标签要先准备好相应的图片和视频。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body> <!--音频和视频 src:资源地址 autoplay:自动播放 --> <video src="../resources/Video/梁博-日落大道.mp4" controls autoplay></video> <audio src="../resources/Audio/日落大道(Live)-梁博-23534982.mp3" controls ></audio> </body> </html>
视频和音频的上传标签分别是：video和audio，将资源准备好后，输入它的地址就能正确显示。
八：内联框架iframe
内联框架，可以将另一个网站镶嵌在我们的html文件中，并且可以设置它的长度和宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe 内联框架</title> </head> <body> <!--iframe src : 地址 id：表示名字 --> <iframe src="https://blog.csdn.net/hlzdbk?type=blog" id="郝立琢的博客" height="800px" width="1000px"></iframe> <a href="https://blog.csdn.net/hlzdbk?type=blog" target="郝立琢的博客">点击跳转</a> </body> </html>
九：表单
在html中，表单是一个包含表单元素的区域，主要用于收集不同类型的用户输入，需要使用表单标签form来定义；而表单元素是允许用户在表单中输入内容的控件，比如输入标签（input）、文本域（textarea）等等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆注册</title> </head> <body> <!--表单form action : 表单提交的位置，可以是网站，也可以是一个请求处理地址。 method : post ,get 提交方式 get提交方式，可以在URL地址中看到我们提交的信息，不安全但是高效。 post方式提交：比较安全，可以传输大文件 action : 往哪里进行提交。 placeholder ： 用户提示信息 required : 不能为空 pattern : 正则表达式 --> <form action="1.我的第一个网页.html " method="post"> <!-- 文本输入框 ： input type=“text” --> <p>名字 ： <input type="text" name="userName" placeholder="请输入用户名" required ></p> <p>密码 ： <input type="password" name="password"></p> <!-- 单选框标签 input type=“radio” 单选框标签 value：单选框的值 name ： 表示组 --> <p>性别 <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl"name="sex" checked/>女 </p> <!-- 多选框--> <p>爱好： <input type="checkbox" value="sleep"name="hobby">睡觉 <input type="checkbox" value="code"name="hobby" checked>代码 <input type="checkbox" value="chat"name="hobby">聊天 <input type="checkbox" value="game"name="hobby">游戏 </p> <!--按钮--> <p> <input type="button" name="btn1" value="点击变长"> </p> <!-- 下拉框，页表框--> <p> 国家：<select name="列表名称"> <option value="选项的值">中国</option> <option value="选项的值">美国</option> <option value="选项的值">瑞士</option> <option value="选项的值">印度</option> <option value="选项的值">英国</option> <option value="选项的值">哈萨克斯坦</option> </select> </p> <!--文本域--> <p> 反馈： <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p> <!-- 文件域--> <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> <!-- 邮件验证--> <p>邮箱： <input type="email"name="email" pattern="(\\w+)(\\.\\w+)*(\\@\\w+){1}(\\.[a-z]{2,3}){1,2}"> </p> <p>url <input type="url"name="url"> </p> <p>数字 <input type="number"name="number"max="100" min="0" step="10"> </p> <!--滑块--> <p> <input type="range" name="voice" max="100" min="0"> </p> <!--搜索框--> <p>搜索： <input type="search" name="search"> </p> <!--增强鼠标可用性--> <p> <label for="mark">点击后可选中其他文本框哦</label> <input type="text"id="mark"> </p> <p> <input type="submit"> <!--提交--> <input type="reset" value="清空按钮" > <!--清空--> </p> </form> </body> </html>
下面附上代码运行结果，大家又兴趣可以自行对照。
九：总结
以上为我的html基础知识分享，希望对您有所帮助~
