学习HTML5

初识

Hyper Text Markup Language（超文本标记语言）

W3C

  • World Wide Web Consortium（万维网联盟）

  • 标准：

    • 结构化标准语言（HTML、XML）

    • 表现标准语言（CSS）

    • 行为标准（DOM、ECMAScript）

基本结构
 <!-- DOCTYPE ：告诉浏览器，我们用的规范  -->
 <!DOCTYPE html>
 <html lang="en">
 <!-- head 网页头部 -->
 <head>
     <!-- meta：描述性标签，用来描述我们网站的一些信息   -->
     <!-- meta：一般用来做SEO   -->
     <meta charset="UTF-8">
     <meta name ="keywords" content="Study study and day day up!">
     <meta name ="description" content="Studying">
     <!-- title 网页标题 -->
     <title>Title</title>
 </head>
 <!-- body 网页主体 -->
 <body>
     Hello,world!
 </body>
 </html>
<head> </head>等成对的标签，分别叫开放标签和闭合标签。单独呈现的标签（空元素）、如<hr/>;意为用/来关闭空元素

网页基本标签

  • 标题标签

  • 段落标签

  • 换行标签

  • 水平线标签

  • 字体样式标签

  • 注释和特殊符号

 <!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>
 <p>春风绕过发梢红纱   刺绣赠他  眉目刚烈拟作妆嫁 轰烈流沙枕上白发</p>
 <p>杯中酒比划  年少风雅鲜衣怒马  也不过一刹那   难免疏漏儿时檐下</p>
 <p>莫测变化  隔却山海  转身从容煎茶  一生长   重寄一段过往</p>
 <p>将希冀都流放  可曾添些荒唐  才记得你的模样    一身霜</p>
 <p>谁提笔只两行  换一隅你安康   便销得这沧桑  你还在我的心上</p>
 ​
 <!--水平线标签-->
 <hr/>
 ​
 <!--换行标签-->
 手中雕刻生花  刀锋千转蜿蜒成画   盛名功德塔  是桥畔某处人家 <br/>
 春风绕过发梢红纱   刺绣赠他  眉目刚烈拟作妆嫁  轰烈流沙枕上白发 <br/>
 杯中酒比划  年少风雅鲜衣怒马   也不过一刹那  难免疏漏儿时檐下 <br/>
 莫测变化  隔却山海   转身从容煎茶   一生长   重寄一段过往 <br/>
 将希冀都流放  可曾添些荒唐   才记得你的模样    一身霜 <br/>
 谁提笔只两行   换一隅你安康   便销得这沧桑  你还在我的心上 <br/>
 一生长  重寄一段过往  将希冀都流放  可曾添些荒唐   才记得你的模样 <br/>
 一身霜  谁提笔只两行  换一隅你安康  便销得这沧桑   你还在我的心上 <br/>
 ​
 <!--粗体，斜体-->
 <h3>字体样式标签</h3>
 ​
 粗体：<strong>I love you</strong>
 斜体：<em>I love you</em>
 ​
 <br/>
 <!--特殊符号-->
 ​
 空   格：
 <br/>
 空&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp格
 ​
 <br/>
 &gt;
 <br/>
 &lt;
 <br/>
 &copy; 版权所有
 ​
 <!--
 特殊符号记忆方式
 & ；
 -->
 ​
 </body>
 </html>

图像标签

常见的图像格式：jpg、gif、png、bmp...

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>图像标签</title>
 </head>
 <body>
 <!--
 src:图片地址（必填）
     相对地址(推荐)，绝对地址
     ../  --上一级目录
 alt:图片名字（必填）
 title：悬停显示文字
 width：宽
 height：高
 -->
 <img src="../resources/image/1.jpg" alt="apple" title="悬停文字" width="300" height="400">
 </body>
 </html>

链接标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>链接标签</title>
 </head>
 <body>
 ​
 <!--使用name作为标记-->
 <a name="top">顶部</a>
 ​
 ​
 <!--a标签
 href：必填，表示要跳转的页面
     _blank:在新标签打开
     _self：在自己页面打开
 ​
 -->
 <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面</a>
 <a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
 ​
 <br/>
 <a href="1.我的第一个网页.html">
     <img src="../resources/image/1.jpg" alt="apple" title="跳转到我的第一个网页" width="300" height="400">
 </a>
 ​
 <br/>
 <a href="1.我的第一个网页.html">
   <img src="../resources/image/1.jpg" alt="apple" title="跳转到我的第一个网页" width="300" height="400">
 </a>
 <!--锚链接
 1、需要一个锚标记
 2、跳转到标记
 页面间跳转
 #
 -->
 <br/>
 <a href="#top">回到顶部</a>
 ​
 <a name="down">down</a>
 ​
 <!--功能性连接
 邮箱连接：mailto
 qq链接：
 -->
 <a href="mailto:nihaoa@163.com">点击联系我</a>
 <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::513"
        alt="点击这里给我发消息"
        title="点击这里给我发消息"/></a>
 </body>
 </html>

行内元素和块元素

块元素：

  • 无论内容多少，该元素独占一行

  • p、h1~h6

行内元素：

  • 内容撑开宽度，左右都是行内元素的可以排在一行

  • a .strong . em ...

列表

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>列表</title>
 </head>
 <body>
 <!--有序列表
 应用范围：试卷，问答...s
 -->
 ​
 <ol>
   <li>java</li>
   <li>python</li>
   <li>运维</li>
   <li>前端</li>
   <li>C</li>
 </ol>
 ​
 <hr/>
 <!--无序列表
 应用范围：导航,侧边栏...
 -->
 <ul>
   <li>java</li>
   <li>python</li>
   <li>运维</li>
   <li>前端</li>
   <li>C</li>
 </ul>
 ​
 <hr/>
 ​
 <!--自定义列表
 dl:标签
 dt：列表名称
 dd：列表内容
 ​
 公司网站底部
 -->
 <dl>
   <dt>学科</dt>
 ​
   <dd>java</dd>
   <dd>python</dd>
   <dd>运维</dd>
   <dd>前端</dd>
   <dd>linux</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
 边框 border
 背景颜色 bgcolor
 行 tr rows
 列 td
 ​
 -->
 <table border="1px" bgcolor="aqua">
     <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>

视频和音频

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>媒体元素</title>
 </head>
 <body>
 <!--视频和音频
 src 资源路径
 controls 控制条
 autoplay 自动播放
 -->
 <video src="../resources/video/1.MP4" controls autoplay ></video>
 ​
 <audio src="../resources/audio/1.mp3" controls autoplay></audio>
 ​
 </body>
 </html>

页面结构

  • header 标题头部区域的内容（用于页面或页面中的一块区域）

  • footer 标记脚部区域的内容（用于整个页面或页面的一块区域）

  • section web页面中的一块独立区域

  • article 独立的文章内容

  • aside 相关内容或应用（常用于侧边栏）

  • nav 导航类辅助内容

iframe内联框架

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>内联框架</title>
 </head>
 <body>
 ​
 <iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
 ​
 <a href="1.我的第一个网页.html" target="hello"> 点击跳转</a>
 ​
 </body>
 </html>

表单form

 <!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="1.我的第一个网页.html" method="post">
 ​
 <!--  文本输入框：input type="text"-->
   <p>名字： <input type="text" name="uasername"></p>
 <!--  密码框： input type="password" -->
   <p>密码： <input type="password" name="pwd"></p>
 ​
   <p>
     <input type="submit">
     <input type="reset">
   </p>
 </form>
 </body>
 </html>

表单元素格式

type

指定元素的类型：text（默认） password checkbox radio submit reset file hidden image button

name

指定表单元素的名称

value

元素的初始值。type为radio时必须指定一个值

size

指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。

maxlength

type为text或password时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否是被选中

按钮、多选框、列表框、文本域、文件域、搜索框、滑块、简单验证和表单的应用及校验

 <!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="1.我的第一个网页.html" method="get">
 ​
 <!--  文本输入框：input type="text"-->
   <p>名字： <input type="text" name="uasername" value="yeyue" maxlength="8" readonly> </p>
 <!--  密码框： input type="password" -->
   <p>密码： <input type="password" name="pwd" value="1234" hidden></p>
   <p>性别：
 <!--单选框标签
 input type="radio"
 value ： 单选框的值
 name ： 表示组
 readonly 只读
 disabled 禁用
 hidden 隐藏
 placeholder 提示信息
 required 非空判断
 pattern 正则表达式
 -->
     <input type="radio" value="boy" name="sex" checked disabled>男
     <input type="radio" value="girl" name="sex">女
   </p>
 ​
 <!--
 多选框
 input type="checkbox"
 -->
   <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>
 <!--  按钮
 input type="button" 普通按钮
 input type="image" 图片按钮
 input type="submit" 提交
 input type="reset" 重置
 -->
   <p>按钮：
     <input type="button" name="btn1" value="点击变长">
     <input type="image" src="../resources/image/1.jpg">
   </p>
 ​
 <!--  下拉框，列表框-->
   <p>国家
     <select name="列表名称" >
       <option value="china" selected>中国</option>
       <option value="us">美国</option>
       <option value="eth">瑞士</option>
       <option value="yindu">印度</option>
     </select>
   </p>
 <!--  文本域 cols="30" rows="10"-->
   <p>反馈：
     <textarea name="textarea" cols="30" rows="10" placeholder="请输入文本" required></textarea>
   </p>
 <!--  文件域
 input type="file" name="files"
 -->
   <p>
     <input type="file" name="files">
     <input type="button" value="上传" name="upload">
   </p>
 <!--  邮箱验证-->
   <p>邮箱：
     <input type="email" name="email" required>
   </p>
   <p>自定义邮箱：
     <input type="text" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
 /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
   </p>
 <!--  URL-->
   <p>URL:
     <input type="url" name="url">
   </p>
 <!--  数字-->
   <p>商品数量：
     <input type="number" name="num" max="100" step="1">
   </p>
 <!--
 ​
 -->
   <p>音量：
     <input type="range" name="voice" min="0" max="100" step="2">
   </p>
 <!--  搜索框-->
   <p>搜索：
     <input type="search" name="search" id="mark">
   </p>
 <!--  增强鼠标的可用性-->
   <p>
     <label for="mark">你点我试试</label> 
  </p> 
  <p> 
    <input type="submit"> 
    <input type="reset" value="清空表单"> 
  </p> 
</form> 
</body> 
</html>

 

posted @ 2021-07-07 22:54  深夜暗月  阅读(33)  评论(0)    收藏  举报