HTML5

HTML

• Hyper Text Markup Language（超文本标记语言）
• 超文本包括：文字、图片、音频、视频、动画等

W3C

• World Wide Web Consortium（万维网联盟）
• W3C标准包括
  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

HTML基本结构

网页基本信息

• DOCTYPE声明
• <title>标签
• 标签
  

网页基本标签

• 标题标签：<h1>一级标签</h1>
• 段落标签：<p>两只老虎，两只老虎</p>
• 换行标签：两只老虎，两只老虎<br/>
• 水平线标签：<hr/>
• 字体样式标签：
  • 粗体：<strong>i love you</strong>
  • 斜体：<em>i love you</em>
• 注释和特殊符号：& ;

图像标签 <img>

• 常见的图像格式
  • JPG
  • GIF
  • PNG
  • BMP

链接标签

• 超链接
  • 页面间链接<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
    href：必填，表示要跳转到那个页面
    target:表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在自己的网页中打开
    • 从一个页面链接到另一个页面
  • 锚链接<a href="#top">回到顶部</a>
    1.需要一个锚标记
    2.跳转到标记
  • 功能性链接<a href="mailto:[email protected]">点击联系我</a>
    邮件链接：mailto：
    QQ链接：

行内元素和块元素

• 块元素
  • 无论内容多少，该元素独占一行
  • (p、h1-h6...)
• 行内元素
  • 内容撑开宽度，左右都是行内元素的可以在排在一行
  • (a、strong、em...)

列表

• 什么是列表
  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以
    列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
• 列表的分类
  • 无序列表

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

• 有序列表

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

• 定义列表
  dl：标签
  dt：列表名称
  dd：列表内容

<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>C/c++</dd>
    <dt>位置</dt>

    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

表格table

• 为什么使用表格
  • 简单通用
  • 结构稳定
• 基本结构
  • 单元格
  • 行：<tr></tr>
  • 列：``
  • 跨行：rowspan
  • 跨列：colspan

视频和音频

• 视频元素
  • video
• 音频元素
  • audio
• src:资源路径
  controls：控制条
  autoplay：自动播放

页面结构分析

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

iframe内联框架

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

表单语法

<form method="post" action="result.html"></form>

表单元素格式

• type：指定元素的类型。text、password、checkbox、radio、submit、
  reset、file、hidden、image和button，默认为text
• name：指定表单元素的名称
• value：元素的初始值。type为radio时必须指定一个值
• size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。
  对于其他类型，宽度以像素为单位
• maxlength：type为text或password时，输入的最大字符数
• checked：type为radio或checkbox时，指定按钮是否是被选中

表单的应用

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

表单初级验证

• 思考？为什么要进行表单验证
• 常用方法
  • placeholder：提示信息
  • required：非空判断
  • pattern：正则表达式