HTML5

HTML5学习

初识HTML

什么是HTML

Hyper Text Markup Language 超文本标记语言

超文本

超文本包括文字、图片、音频、视频、动画等

HTML5的优势

• 众多浏览器厂商对html5支持
• 市场需求
• 跨平台

W3C

World Wide Web Co’nsortium 万维网联盟

网页的基本信息

DOCTYPE声明

告诉浏览器，我们要使用什么规范

网页基本标签

标题标签

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

段落标签

<p></p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

粗体<strong><s/trong>

斜体<em></em>

图像标签

常见的图片格式

• jpg
• png
• gif
• bmp
• ……

如何再HTML中嵌入一个图片

<img str="path" alt="text" title="text" width="x" height="y"/>

链接标签

• 文本超链接
• 图像超链接

a链接

<a href="path" target="目标窗口位置">链接文本或图像

锚链接

<a name="top">顶部</a>
<!--锚链接
 1.需要一个锚标记
 2.跳转到标记
 3.可以跳转到其他页面的锚标记处  <a href="页面.#毛标记名">[..]</a>
-->
<a href="#top">回到顶部</a>

行内元素和块元素

行内元素

可以放在同一行内的元素称为行内元素，内容撑开宽度，左右都是行内元素的可以排在一行。

如段落标签、标题标签

块元素

使用该元素会另起一行或一块的元素是块元素，无论内容多少，该元素独占一行。

如a标签、字体样式标签

列表标签

定义

列表是信息资源的一种展示形式，以列表的样式将信息结构化和条理化。

列表的分类

• 无序列表
• 有序列表
• 定义列表

有序列表

<!--有序列表 ol标签
-->
<ol>
<li>Java</li>
<li>python</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>ASM</li>
</ol>
<hr/>

无序列表

<!--无序列表 ul标签
-->
<ul>
<li>Java</li>
<li>python</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>ASM</li>
</ul>

自定义列表

<!--自定义列表 dl标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>编程语言</dt>
<dd>Java</dd>
<dd>python</dd>
<dd>C</dd>
<dd>C++</dd>
<dd>C#</dd>
<dd>ASM</dd>

<dt>地区</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dd>深圳</dd>
<dd>武汉</dd>
<dd>成都</dd>
</dl>

表格标签

基本结构

• 单元格
• 行
• 列
• 跨行
• 跨列

示例

代码

<!--表格 table标签
 tr:行
 td:列
 border:边框
 colspan:跨列
-->
<table border="1px" width="200">
<!--  第一行-->
<tr>
<!--    colspan 跨列-->
 <td colspan="4">跨列</td>
</tr>
<!--  第二行-->
<tr>
<!--    rowspan 跨行-->
 <td rowspan="2">跨行</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>

视频和音频

视频元素

video标签

<!--视频 video标签-->
<video src="../resources/video/video1.mp4" width="200" controls autoplay>视频</video>

音频元素

audio标签

<!--视频 audio标签-->
<audio src="../resources/audio/music1.mp3" controls autoplay>音频</audio>

页面结构分析

• header
  • 标记头部区域的内容
• footer
  • 标记脚步区域的内容
• section
  • Web页面的一块独立区域
• article
  • 独立的文章内容
• aside
  • 相关内容或应用
• nav
  • 导航类辅助内容

iframe内联框架

<!--iframe内联框架
 src:路径
 name:窗口名
 frameborder:边框宽度
 width:宽度
 height:高度
-->
<iframe src="MediaDemo.html" name="mainFrame" frameborder="0" width="240" height="200"></iframe>

表单语法

示例

<!--表单
 action:表单提交到哪儿,可以是一个网站也可以是一个请求处理地址
 method:post/get 提交方式
   get:url中可以看到提交的信息,不安全,高效,并且只能传输小文件
   post:安全,不高效,可以传输大文件
-->
<form method="post" action="TableDemo.html">
<!--  文本输入框 <input name="用户名" type="text"></input>  -->
<p>用户名: <input name="username" type="text"></input></p>
<p>密&nbsp;&nbsp;&nbsp;码: <input name="password" type="password"></input></p>
<p>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input name="submit" type="submit"></input>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input name="reset" type="reset"></input>
</p>
</form>

表单元素格式

• type元素类型
  • text 文本框
  • password 密码框
  • checkbox 多选框
  • radio 单选框
  • submit 提交数据按钮
  • reset 重置按钮
  • file 文件域
  • image 图片
  • button 按钮
  • hidden 隐藏的
• name表单元素名
• value元素初值
  • 当元素类型为radio时，必须指定一个值
• size表单元素初始宽度
  • 当元素类型为text或password时，以字符为单位，其余类型以像素为单位。
• maxlength
  • 元素类型为text或password时，输入的最大字符数
• checked
  • 元素类型为checkbox或radio时，指定初始状态是否为选中
• select下拉框
• textarea文本域

示例

<!--文本框-->
<form action="FormDemo.html" method="post">
<!--  文本框-->
  <p>
    text <input type="text" name="textDemo" maxlength="30" size="10" value="文本框测试">
  </p>

<!--  密码框-->
  <p>
    password<input type="password" name="passwordDemo" size="10" maxlength="30" value="0">
  </p>

<!--  多选框-->
  <p>
    checkbox<input type="checkbox" name="checkboxDemo" size="100">第一个
    checkbox<input type="checkbox" name="checkboxDemo" size="100">第二个
    checkbox<input type="checkbox" name="checkboxDemo" size="100">第三个
    checkbox<input type="checkbox" name="checkboxDemo" size="100">第四个
  </p>

<!--  单选框-->
  <p>
    radio 
    <input type="radio" name="radioDemo" size="100" value="一个">一个
    <input type="radio" name="radioDemo" size="100" value="两个">两个
    <input type="radio" name="radioDemo" size="100" value="三个">三个
  </p>

<!--  按钮-->
  <p>
    button<input type="button" name="buttonDemo" value="按钮测试">
  </p>

<!--  提交按钮-->
  <p>
    submit<input type="submit" name="submitDemo" value="提交测试">
  </p>

<!--  重置按钮-->
  <p>
    reset <input type="reset" name="resetDemo" value="重置测试">
  </p>

<!--  图片按钮
      点击之后提交
-->
<p>
  image <input type="image" src="../resources/image/img.png" name="imageDemo" width="100" height="60">
</p>

<!--  文件域名-->
<p>
  file <input type="file" name="fileDemo">
</p>

<!--  下拉框
      selected:默认值
-->
<p>
  select <select name="selectDemo" id="0">
    <option value="city0">北京</option>
    <option value="city1" selected>上海</option>
    <option value="city2">广州</option>
    <option value="city3">深圳</option>
    <option value="city4">武汉</option>
    <option value="city5">成都</option>
  </select>
</p>

<!--  文本域-->
<p>
  textarea
  <textarea name="textareaDemo" id="1" cols="30" rows="10">文本内容</textarea>
</p>

    <!--  带验证的文本框-->
<!--  邮件-->
<p>
  邮件
  <input type="email" name="emailDemo" value="123456789@000">
</p>

<!--  数字-->
<p>
 数字
  <input type="number" name="numberDemo" max="100" min="0" value="0">
</p>

<!--  url-->
<p>
  URL <input type="url" name="urlDemo" value="www.baidu.com">
</p>


<!--  range滑块-->
<p>
  range <input type="range" name="rangeDemo" min="0" max="100" step="5" value="0">
</p>

<!--  search搜索框-->
<p>
  search
  <input type="search" name="searchDemo">
</p>

<!--  label-->
<p>
  <label for="labelTest">label测试</label>
  <input type="text" name="labelDemo" id="labelTest">
</p>

    
    
</form>

表单的应用

• 隐藏 hidden
• 只读 readonly
• 禁用 disabled

表单的初级验证

常用方式

• placeholder
  • 提示性的消息
  • 可用在所有输入框控件上
• required
  • 非空判断
  • 可以用在所有的文本框控件上
• pattern
  • 正则表达式

小结

HTML学习思维导图