1 初识HTML

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

1.1 HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
市场的需求
跨平台兼容性

1.2 W3C标准

W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web 技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

常见工具:

记事本
Dreamweaver
IDEA
WebStorm

2 标签基本标签

<!-- DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta 描述性标签，它用来描述我们网站的一些信息-->
<!-- meta 一般用来做SEO 搜索引擎优化 -->
    <meta charset="UTF-8">
    <meta name="keywords" content="CHAIN">
    <meta name="description" content="学习JAVA">
<!--   title 网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>

DOCTYPE声明：
文档类型；
告诉浏览器，要使用什么规范
< !DOCTYPE html > 默认 html
< html > 标签，它是总标签，所有内容应该都在< html > 内
< head > 标签，它代表网页头部
< body > 标签，它代表网页主体
< title > 标签，它代表网页标题
< meta > 标签，描述性标签，它用来描述我们网站的一些信息，一般用来做SEO

3 图像，超链接，网页布局

3.1 网页基本标签

<!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>
<P>一只没有耳朵    一只没有尾巴</P>
<P>真奇怪      真奇怪</P>

<!--水平线标签-->
<hr>

<!--换行标签--紧凑的段落,间距小     -->
两只老虎    两只老虎 <br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>

<!-- 粗体,斜体 -->
<h1> 字体样式标签</h1>
粗体  :  <strong>i love you</strong>
斜体  :  <em>i love you</em>

<!--特殊符号-->
空       格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
>
&gt;
<
&lt;

<br>
&copy;版权所有CHAIN

<!--
特殊符号记忆方法
& ;
-->
</body>
</html>

3.1 图像标签

常用的图像格式：
JPG
GIF ( 动图 )
PNG
BMP ( 位图 )
…
< img sre="path" alt="text" title="text" width="x" height="y" /
属性：
sre 图像地址
alt 图像的替代文字
title 鼠标悬停提示文字
width 图像宽度
height 图像高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签学习</title>
</head>
<body>
<!--img学习
src : 图片地址
    相对地址（推荐使用），绝对地址
    ../ --上一级目录
    根据现在所在位置，移到上一级找到图片所在地址

alt : 图片名字
    这两项必填
-->
<img src="../html/image/1.jpg" alt="头像" title="悬停文字" width="600" height="300" >
</body>
</html>

3.3 连接标签

< a href="path" target="目标窗口位置" >连接文字或图像< /a >
href=“path” ：链接路径
target : 链接在哪个窗口打开
“目标窗口位置” : 常用值 : _self . _blank

文件超链接
图片超链接
超链接
页面间链接 href
- 从一个页面链接到另一个页面
锚链接
- 从一个位置回到指定位置
功能性链接 mailto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--锚链接标记-->
<a name="top">顶端</a>

<!--网页链接
href : 必填,表示要跳转到哪个页面
target : 表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在自己的网页中打开(默认)
-->
<a href="3.图片标签学习.html" target="_blank">点击我跳转到页面三</a><br>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br>
<a href="3.图片标签学习.html">
    <img src="../html/image/1.jpg" alt="狂神头像" title="悬停文字">
</a><br>

<p><img src="../html/image/1.jpg" alt="狂神头像" title="悬停文字"></p>
<p><img src="../html/image/1.jpg" alt="狂神头像" title="悬停文字"></p>
<p><img src="../html/image/1.jpg" alt="狂神头像" title="悬停文字"></p>


<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
# 跳转符号
-->
<a href="#top">锚链接</a>

<!--甚至可以转到其他页面的锚链接-->
<a href="3.图片标签学习.html#33">3图片标签学习</a>


<!--功能性链接
邮件链接 : mailto:
QQ链接,QQ推广
-->
<a href="mailto:[email protected]">点击联系我</a>

</body>
</html>

3.4 列表，表格，媒体元素

3.4.1 列表

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

3.4.2 表格

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格 table
- 行 tr
- 列 td
- 跨行 colspan
- 跨列 rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表<ol>
应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运营</li>
    <li>C/c++</li>
</ol>

<!--无序列表<ul>
应用范围：导航，侧边框...
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运营</li>
    <li>C/c++</li>
</ul>

<!--自定义列表
dl : 标签
dt : 列表名字
dd : 列表内容
公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>宇宙</dd>
    <dd>太阳系</dd>
    <dd>地球</dd>
</dl>

</body>
</html>

3.4.3 视频和音频

视频元素
- video
音频元素
- audio

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

<video src="../resources/audio/456.mp3" controls autoplay></video>

</body>
</html>

4 页面结构分析

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

5 iframe内联框架

< iframe src="path" name="mainFrame" >< /firame >
src : 引用页面地址
name : 框架标识名
可以嵌入网站，也可以在内联框架内直接打开跳转的网址（功能类似于窗口）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe 内联框架
src : 地址
width : 宽度
height ： 高度
-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0"
        width="1000px" height="800px"></iframe>

<a href="1.我的第一个网页.html " target="hello">点击跳转</a>
</body>
</html>

6 表单及表单应用

6.1 表单语法

< form method="post" action="result.html" >
"post"：规定如何发送表单数据常用值: get | post
"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=“reset” name=“Reset” value=“重置”>
< /p >
< /form >

6.2 表单元素格式

属性	说明
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 时，指定按钮是否是被选中

## 6.3 表单元素、单选多选框、按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>
<h1>注册</h1>

<form action="1.我的第一个网页.html" method="get">
    <!-- 文件输入框：input type="text"
    value="帅锅" ： 默认初始值
    maxlength="8" ：  最长能写几个字符
    size="30"  ： 文本框的长度
   -->
    <P>名字：<input type="text" name="username" value="帅锅" maxlength="8" size="30"></P>
    <P>密码：<input type="password" name="pwd"></P>
    
    <!-- 单选框标签
       input type="radio"
       value="boy" ： 单选框的值
       name="sex"  ： 表示名字，所在的组
       checked  ： 默认被选中
       -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <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">敲代码
        <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/html/1.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

</form>

</body>
</html>

6.4 下拉框、列表框、文本文件域

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--下拉框，列表框
select标签
    option
    selected 默认值
-->
<p>
    <select name="列表名称" >
        <option value="china" >中国</option>
        <option value="us">美国</option>
        <option value="选项的值" selected>瑞士</option>
        <option value="选项的值">印度</option>
    </select>
</p>

<!--文本域
textarea
cols="50" rows="10" 尺寸
    -->
<p>反馈
    <textarea name="textarea"  cols="50" rows="10"></textarea>
</p>

<!--文件域
    input type="file" name="files"
    -->
<p>
    <input type="file" name="files">
    <input type="button" value="上次文件" name="upload">
</p>
</html>

6.5 邮箱、URL、数字、音量、搜索框

<!--邮箱 email-->
<p>邮箱
    <input type="email" name="email">
</p>
<!--URL url-->
<p>URL
    <input type="url" name="url">
</p>
<!--数字 number
最大值max="100" 最小值min="0" 步数（一次增加最少数量）step="1"
 -->
<p>数字
    <input type="number" name="num" max="100" min="0" step="5">
</p>
<!--滑块
input type="range"
可用于音量
 -->
<p>音量
    <input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--搜索框
nput type="search"
 -->
<p>搜索框
    <input type="search" name="search" >
</p>

6.6 表单应用

隐藏域：hidden
虽然隐藏看不见，但是值还有，可以默认输入一些数据
只读：readonly
禁用：disabled
增强鼠标可用性 label
<label for="(ID)"> </label>

7 表单初级验证

常用方式
- placeholder：提示信息（可以存在在输入框内）
- required：非空判断（必填项）
- pattern：正则表达式

前端HTML5笔记

这里写目录标题