浅学HTML5

HTML5是最新一代的HTML标准，它不仅拥有HTML中所有的特性，而且增加了许多实用的特性，如视频、音频、画布（canvas）等。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

HTML5

1. 基本标签介绍

• DOCTYPE：告诉浏览器，我们要使用什么规范
• head： head代表网页头部
• meta： 描述性标签，他用来描述我们网站的一些信息,一般用来做SEO
• title： 显示网页标题内容
  • bady： 代表网页主体

（1）标题标签

+ **<h1>一级标签</h1>**
+ **<h2>二级标签</h2>**
+ …………
+ **<hn>n级标签</hn>**

---

（2）段落标签

• 88888

• 77777

• 显示效果，88888和77777分别在两行

---

（3） 换行标签

• 
  

  换行标签，在内容后加上即可换行

---

（4） 水平线标签

• ---

---

（5）字体样式标签

• 粗体：《strong》内容《/strong》
• 斜体：《em》内容《/em》

---

（6）注释和特殊符号标签

• 注释
• 空格：内容 + &ndsp; + 内容
• 大于号： >
• 小于号： <
• 版权符： ©

---

（7）图片标签

<img src="path" alt="text" title="text" width="X" height="y">

• src：图像地址。 必填
  • 相对地址（…/…………）…/ 代表回到上一级目录
  • 绝对地址（从盘符开始写的路径）（‪E:\The source code\JAVA\前端\HTML5\HTML\resources\image\1.jpg）
• alt：图像的替代文字（当图片加载不出来时显示的文字） 必填
• title：鼠标悬停提示文字
• width：图像宽度
• height：图像高度

---

（8）链接标签

<a hrep=’‘path’’ target=’‘目标窗口位置’’>链接文本或图像

① 超链接

​ 从一个网页到另一个网页

• href ：必填 ，表示要跳转到哪个页面，即链接

  • 语句中的链接文本或图像，如果直接是文字那么即生成html网页链接的名字

    <a href="https://www.cnki.net/">中国知网</a>
    

  • 如果要设计图片超链接，那么该处应该为img标签

    <a href="https://www.baidu.com/">
        <img src="../resources/image/1.jpg" height="2160" width="5076"/>
    </a>
    

• target：表示窗口在哪儿打开

  • _blank 在一个新的标签中打开网页
  • _parent
  • _self 在自己的网页中打开
  • _top

② 锚链接

​ 从网页的一处到另一处（也可以从一个页面跳到另一个页面的锚）

• 在想回到网页的地方先设置一个锚，name为锚的名字

  <a name="name"></a>
  

  在想设立锚链接的地方设置

  <a href="#name">说明</a>
  

  “#”后紧跟锚的名字

• 如果想在另一个页面到该页面的锚处需要在设置锚链接的时候稍加修改

  <a href="4.链接学习.html#name">回到链接学习</a>
  

  "#"前需要跟着想去页面的html地址

---

（9）列表标签

• 有序列表 应用范围：试卷，作答……

<ol>
    <li>Java</li>
    <li>C++</li>
    <li>C</li>
    <li>Python</li>
    <li>PHP</li>
</ol>

ol（order list）

• 无序列表 应用范围：导航，侧边栏……

<ul>
    <li>Java</li>
    <li>C++</li>
    <li>C</li>
    <li>Python</li>
    <li>PHP</li>
</ul>

ul：（unorder list）

• 自定义列表

<dl>
    <dt>学校</dt>

    <dd>陕西</dd>
    <dd>西安</dd>
    <dd>临潼</dd>
    <dd>西安科技大学</dd>

    <dt>爱好</dt>

    <dd>computer</dd>
    <dd>乒乓</dd>
    <dd>篮球</dd>
    <dd>妹子</dd>
</dl>

**dl：**自定义标签

**dt：**表头（表的名字）

**dd：**列名

---

（10）表格标签

基本结构： 单元格、行、列、跨行、跨列

<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

border是给表给加上边框

**tr：**行标签，创建一行

**td：**列标签，创建一列

<td colspan="4">1-1 1-2 1-3 1-4</td>

colspan： 合并一行 4为合并的长度

<td rowspan="2">2-1</td>

**rowspan：**合并一列，2位合并的长度

---

（11） 视频和音频

• 视频

<video src="path" controls autoplay></video>

path: 视频路径

controls：打开控制（开始播放，暂停快进……），默认没有

autoplay：打开自动播放，默认不自动播放

• 音频

<audio src="path" controls autoplay></audio>

和视频一致

2. 行内元素和块元素

（1）行内元素

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

<p>……<p/>
<h1>……<h1/>
……
<hn><hn/>

（2） 块元素

​ 内容撑开宽度，所有元素都可以排在一行

<a> a标签 <strong></strong> 粗体...

3. 页面结构分析

• header：标题头部区域的内容（用于页面或页面中的一块区域）
• footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
• section：Wed页面中的一块独立区域
• article：独立的文章内容
• aside：相关内容或应用（常用于侧边栏）
• nav：导航类辅助内容

4. iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

• src：引用页面地址

• name：框架表示名,此名字为这个窗口的名字

  实际就是一个网页里建立了另一个网页（窗口），这个网页可以任意切换（类似于爱奇艺，腾讯网页版的播放界面）

在有了窗口之后可以设立链接：

<a href="" target="mainFrame"></a>

该链接设置了target为上一个框架，所以点击链接之后新窗口会出现在，mainFrame的窗口中

5. 表单form的post和get提交

• 表单： 各种网站上登录窗口、注册窗口……都是表单

<form method="post/get" action="result.html">
    <p>名字：<input name="name" type="text"></p>
    <p>密码：<input name="pass" type="password"></p>
    <p>
        <input type="submit" name="Button" value="提交">
        <input type="reser" name="Reset" value="重填">
    </p>
</form>

• method：规定如何发送表单数据get，post
  • get方式：可以在url中看到提交的数据（不安全）
  • post方式：在url中看不见参数（安全），可以传输大文件
• action：表示向何处发送表单数据，可以是网站，也可以是一个请求处理地址
• input标签：是一个输入框，其中text为文本框，password为密码框（输入其中会加密）

6. 表单元素格式

<input type="text" name="" value="" size="" maxlength="" checked>

• type：指定元素类型，默认为text

  text：文本框

  password：密码框

  checkbox：多选框

  radio：单选框

  (设置单选框例如性别时，应把两个input的name设置成一样，他们才能属于一组，就能实 现二选一)

  submit：提交按钮

  reset：重置按钮

  file：文件

  hidden：隐藏

  image：图片按钮（图片点击会自动提交）

  button：自定义按钮

• name：指定表单元素的名称

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

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

• maxlength：type为text或password时，输入的最大字符

• checked：type为radio或checked时，指定按钮是否被选中（默认勾选）

① 下拉框

<form action="10.学习表单.html" method="get">
    <p>
        <select name="性别">
            <option value="man">男</option>
            <option value="woman" selected>女</option>
        </select>
    </p>
</form>

下拉框为

select标签，

option创建选项，

value为选项赋值，

其中selected是标记默认（即在不选中的时候的初始值）

② 文本域

<form action="10.学习表单.html" method="get">
    <p>建议：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>
</form>

为一个文本输入框，

textarea标签，

“文本内容为初始内容”

clos为长度，rows为宽度

③ 文件域

<form action="10.学习表单.html">
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <p>
        <input type="submit">
    </p>
</form>

为一个上传文件的选项

input标签，

name，为标签命名

7. 功能性标签

• 邮箱验证

<p>邮箱:
    <input type="email" name="email">
</p>

• URL验证

<p>URL验证：
    <input type="url" name="url">
</p>

• 数字验证

<p>数字验证：
    <input type="number" name="num" max="1000" min="0" step="2">
</p>

max：设置最大边界

min：设置最小边界

step：实现增加减少按钮（箭头样式）

• 滑块

<p>滑块：
    <input type="range" name="range" min="0" max="100">
</p>

可以设置音量（效果跟视屏的进度条一样）

• 搜索框

<p>搜索：
    <input type="search" name="search">
</p>

8. 表单的应用

• hidden 隐藏：设置后可以隐藏按钮、输入框
• readonly 只读：设置后如果有初始值，那么不能修改框内内容，若没有则不能输入
• disabled 禁用：设置后，按钮不能进行点击

9. 表单的初级验证

三个属性：

• placeholder 提示信息

placeholder="*****"

​ " "中的内容为提示内容，一输入就会消失

• required 非空判断验证

设置该属性后，该输入框必须有输入，才能进行提交操作

• pattern 正则表达式验证

  直接百度正则表达式即可