# HTML 基础

什么是HTML

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

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

发展史、优势

发展史

优势

知名浏览器厂商的支持

微软、Google、苹果、Opera、mozilla firefox

市场的需求

HTML5的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。

跨平台

HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备、插件等核心代码就可以不需要重复编写，极大的减少了开发人员的工作量

W3C标准

W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

http://www.w3.org/

https://www.chinaw3c.org/

W3C标准

结构化标准语言（XHTML 、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript ）

ECMAScript 就是 JavaScript

基本结构

网页基本信息

<!--告诉浏览器我们使用的是html规范-->
<!DOCTYPE html>
<html lang="en">
<!--表示网页的头部-->
<head>
    <!--描述性标签，描述网站的信息-->
    <!--一般用来做SEO-->
    <meta charset="UTF-8">
    <!--网站关键词-->
    <meta name="keywords" content="html学习">
    <!--对网站的描述-->
    <meta name="description" content="可以学习到html">

    <!--网页标题-->
    <title>我的第一个网页</title>
</head>
<body>
Hello,word !
</body>
</html>

DOCTYPE声明

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

百度搜索DOCTYPE声明，查看菜鸟教程：https://www.runoob.com/tags/tag-doctype.html

< title>标签

网页标题

< meta>标签

描述性标签，描述网站的信息

基本标签

标题标签

<!--标题标签  h1 + tab键 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

<p>本来是一直跟带的新老师讲，“真正NB的老师，一定是活成了学生心中想活成的样子。”</p>

换行标签

身为教学负责人， <br/>这样的问题必然会引起我的关注

水平线标签

<hr/>

字体样式标签

<!--粗体-->
<strong>马云阿里巴巴集团创始人</strong>
<!--斜体-->
<em>马云阿里巴巴集团创始人</em>

注释和特殊符号

<!--我是注释-->

<!--特殊符号-->
<!--万能的公式：以 & 号开头，以 ; 号结尾，中间填充特殊符号内容-->
&phone;
<!--空格-->
<p>jjh&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java</p>
<!--大于号-->
&gt;
<!--小于号-->
&lt;
<!--版权符号-->
&copy; 版权所有：jjh

图像标签

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

说明jpg、gif是网页中最常用的格式，png受浏览器兼容性的限制

<!--
    src：图片路径，推荐使用相对路径
        相对路径：../ 上一级目录
        绝对路径：以盘符作为根目录的路径
-->
<img src="../resources/image/a.jpg" alt="图片" title="鼠标悬停在图片时显示的文字" height="120" width="192"/>

链接标签

页面链接

<!--a标签
    href：链接地址，表示要跳转到那个页面
    target：表示窗口在哪里打开
        _self : 在自己的窗口打开
        _blank： 在新窗口中打开

-->

<!--跳转到项目内的网页-->
<a href="1.我的第一个网页.html" target="_self">我的第一个网页</a>

<!--跳转到百度-->
<a href="https://www.baidu.com">百度</a>

<!--图片作为标签,图像标签嵌套使用-->
<a href="https://www.baidu.com">
    <img src="../resources/image/a.jpg" alt="图片" title="鼠标悬停时的文字" height="120" width="192"/>
</a>

锚链接

<!--
    使用name属性定义标记，锚链接会跳转到此标记处
-->
<a name="top"></a>

<!--锚链接-->
<!--
    1.需要一个标记
    2.跳转到标记处：href属性，使用 #标记名
-->

<!--跳转到本页面的标记处-->
<a href="#top">回到顶部</a>

<!--跳转到其他页面的标记处-->
<a href="1.我的第一个网页.html#top">跳转到其他页面的标记处</a>

功能性链接

<!--功能性链接-->
<!--
    邮件链接：mailto
    qq链接：qq推广，百度搜索方法步骤
-->
<a href="mailto:1426311648@qq.com">点击联系我</a>

块元素和行内元素

块元素

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

p、h1-h6

行内元素

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

a、strong、em

列表、表格、媒体元素

列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化

无序列表

<ul>
  <li>javaSE</li>
  <li>spring</li>
  <li>mybatis</li>
</ul>

无序列表的特性

没有顺序，每个< li>标签独占一行（块元素）
无序列表默认以实心小圆点表示
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
列表项中可以包含图片、文本，还可以嵌套列表、其他标签等

有序列表

<ol>
  <li>javaSE</li>
  <li>spring</li>
  <li>mybatis</li>
</ol>

有序列表的特性

有顺序，每个< li>标签独占一行（块元素）
默认< li>标签项前面有顺序标记，默认以数字序号显示
一般用于排序类型的列表，如试卷、问卷选项
列表项中可以包含图片、文本，还可以嵌套列表、其他标签等

自定义列表

<!--自动义列表列表-->
<!--
  dl：声明定义列表
  dt：列表名称
  dd：列表内容
-->
<dl>
  <dt>javaSE</dt>
  <dd>java基础语法</dd>
  <dd>java面向对象</dd>
  <dd>java集合泛型</dd>

  <dt>spring</dt>
  <dd>java基础语法</dd>
  <dd>java面向对象</dd>
  <dd>java集合泛型</dd>
</dl>

定义列表的特性

没有顺序，每个< dt>标签、< dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
列表项中可以包含图片、文本，还可以嵌套列表、其他标签等

表格

为什么使用表格

简单通用
结构稳定

基本结构

单元格
行
列
跨行
跨列

普通表格

<!--
    tr：行
    td：列
    border：表格边框
-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>

跨列、跨行

<!--跨列、跨行-->
<table border="1px">
    <tr>
        <!--colspan：跨4列-->
        <td colspan="4">1-1</td>
    </tr>
    
    <tr>
        <!--rowspan：跨2行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

视频和音频

如何实现在网页上播放视频和音频？

第三方自主开发的播放器
Flash
HTML5媒体元素

视频

视频元素

video

<!--视频-->
<!--
    src：资源路径
    controls：控制条
    autoplay：自动播放
-->
<video src="../resources/video/a.MOV" controls autoplay></video>

音频

音频元素

audio

<!--音频-->
<!--
    src：资源路径
    controls：控制条
    autoplay：自动播放
-->
<audio src="../resources/audio/a.wav" controls autoplay></audio>

页面结构分析

HTML5结构元素

<header>我是头部</header>

<section> 网页主体 </section>

<footer>我是尾部</footer>

内联框架

iframe 单页面内联

<!--
   src：地址
   width：宽度
   height：高度
-->
<iframe src="1.我的第一个网页.html" width="1000px" height="600px"></iframe>

iframe属性

实现页面间的相互跳转

<!--
    name：框架标识名
-->
<iframe src="" name="hello" width="1000px" height="600px"></iframe>

<!--当点击时，将在框架标识名为hello的内联框架中打开href属性执行的网页-->
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

小结

表单

表单语法

<!--
    action：表单提交的位置，可以是网站，也可以是一个处理地址
    method：提交方式 get post
        get：可以在url中看到我们提交的信息，不安全，高效，大小有限
        post：比较安全，传输大文件，大小没有限制，表单提交常用方式post
-->
<form action="1.我的第一个网页.html" method="get">

    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"> </p>
    <!--密码框：input type="password"-->
    <p>密码：<input type="password" name="password"> </p>

    <p>
        <!--提交按钮：input type="submit"-->
        <input type="submit" value="提交">    
        <!--重置按钮：input type="reset"-->
        <input type="reset" value="重置">
    </p>

</form>

13个表单元素

表单元素格式

文本框

<!--type="text"
    name：文本框名称(必填)
    value：文本框初始值
    size：文本框长度
    maxlength：文本框可输入最多字符
-->
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>

密码框

向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示

<!--
    name：密码框名称(必填)
    size：密码框长度
-->
<input type="password" name="pass" size="20"/>

单选按钮

同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥

<!--type="radio"
    name：单选框名称(必填)，一组的名称需要相同
    checked：单选按钮选中状态
    value：单选框的值
-->
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女

复选框

<!--多选框 type="checkbox"
    name： 必填项，如果是分组，则名称一致
    value： 表单提交的值
    checked： 默认选中
    disabled： 禁用
    注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="music" checked>听音乐
<input type="checkbox" name="hobby" value="girl" disabled>女孩