1.HTML
1.1什么是HTML
HTML：Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等
HTML5的优势：
-
世界知名浏览器厂商对HTML5的支持
通过对Internet Explorer、Google、Firefox、Safari、Opera等主要的Web浏览器发展策略调查，发现
他们都在支持HTMl5上采取措施。 -
市场的需求
现在的市场已经迫不及待的要求有一个统一的互联网通用标准。HTML5之前的情况是，由于各浏览器之
间的不统一，光是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML5的目
标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画以及同电脑的交互
都被标准化。 -
跨平台
HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备、插件等核心
代码就可以不需要重复编写，极大的减少了开发人员的工作量。
1.2 W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括：
- 结构化标准语言（XHTML 、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript ）
1.3 基本结构
<!-- DOCTYPE:告诉浏览器，我们使用什么规范，不写也可以，因为默认HTML -->
<!DOCTYPE html>
<html lang="en">
<!-- 头部 -->
<head>
<!-- meta 描述性标签，他用来描述我们网站的一些信息 -->
<meta charset="UTF-8">
<!-- Title 网页标题 -->
<title>Title</title>
</head>
<!-- 网页主题 -->
<body>
Hello,World!
</body>
</html>
1.4 网页基本标签
- 标题标签
<h1>标题1</h1>
<h2>标题2</h2>
- 段落标签
<p>段落</p>
- 换行标签
<br/>
- 水平线标签
<hr/>
- 字体样式标签
粗体：<strong>哈哈哈</strong>
斜体：<em>哈哈哈</em>
- 注释和特殊符号
ctrl+/ 单行快捷注释
crtl+shift+/ 多行快捷注释
特殊符号格式：
&开头 ；结尾 可以先写出&符号，再写字母根据提示查找特殊符号
空格：
大于：>
小于：<
版权：©
1.5 图像标签
<!--
相对路径 ../当前目录的上一级
绝对路径 文件在计算机中的位置
alt：图片加载不到时显示的文字
title: 鼠标悬停时展示的文字
-->
<img src="../resource/image/idea绿色背景图1.jpg" alt="背景图" title="悬停文字" >
1.6 超链接
<!-- 页面间链接
target属性
_blank 新打开一个空白页
_self 当前页面跳转，默认
-->
<a href="图像标签.html" target="_blank">点击跳转至图像链接</a>
<a href="https://www.baidu.com" target="_self">点击跳转至百度</a>
<br/>
<!-- 超链接嵌套图片 -->
<a href="图像标签.html" target="_self">
<img src="../resource/image/idea绿色背景图.jpg" alt="背景图" title="悬停文字" >
</a>
<!-- 锚链接 -->
<a name="top">顶部</a>
<p>
<img src="../resource/image/idea绿色背景图.jpg" alt="背景图" title="悬停文字" width="300px" height="1800px" >
</p>
<a href="#top">回到顶部</a>
<!-- 功能性链接 -->
<a href="mailto:[email protected]">点击联系我</a>
1.7 列表
<!-- 有序列表 -->
<ul>
<li>java</li>
<li>python</li>
<li>linux</li>
<li>c/c++</li>
</ul>
<hr>
<!-- 无序列表 -->
<ol>
<li>java</li>
<li>python</li>
<li>linux</li>
<li>c/c++</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>标题1</dt>
<dd>java</dd>
<dd>python</dd>
<dd>linux</dd>
<dd>c/c++</dd>
<dt>标题2</dt>
<dd>java</dd>
<dd>python</dd>
<dd>linux</dd>
<dd>c/c++</dd>
</dl>
1.8 表格
<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>
1.9 媒体资源
<!--
视频：vidio
音频：audio
controls 控制台
autoplay 自动播放
-->
<vidio src=""></vidio>
<audio src="../resource/audio/起风了完整版-起风了完整版伴奏(带间奏)_爱给网_aigei_com.mp3" controls autoplay></audio>
2.0 内联框架
<!-- 在指定的内联窗口中显示B站 -->
<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px;" height="800px;"></iframe>
<!-- 点击跳转到指定的内联窗口，显示列表.html的内容 -->
<iframe src="" name="hello" frameborder="0" width="1000px;" height="800px;"></iframe>
<a href="列表.html" target="hello">点击跳转</a>
2.1 表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- post请求地址栏无法看到参数信息 get请求可以看到 所以也涉及到了安全和效率的不同 -->
<form method="get" action="基本标签.html">
<h1>注册：</h1>
<p>
账号：<input type="text" name="userName" value="账号" maxlength="10">
</p>
<p>
密码：<input type="password" name="password">
</p>
<p>
性别：<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex" checked>女
</p>
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="game" name="hobby" checked>游戏
<input type="checkbox" value="code" name="hobby">编码
</p>
<p>
按钮：
<input type="button" value="点击点击">
<!-- 图片按钮 点击相当于提交表单 -->
<!-- <input type="image" src="../resource/image/idea绿色背景图.jpg">-->
</p>
<p>
国家：
<select>
<option value="1" name="contry">中国</option>
<option value="2" name="contry">美国</option>
<option value="3" name="contry" selected>法国</option>
</select>
</p>
<p>
反馈：<textarea name="remark" cols="60" rows="10"></textarea>
</p>
<p>
文件：<input type="file" name="files">
</p>
<hr>
<h1>特殊属性</h1>
<p>
<!-- 带有简单验证、必须为数字，最小值为10，最大值为100，步进为2 -->
数字：<input type="number" name="num" min="10" max="100" step="2">
</p>
<p>
滑块：<input type="range" name="voice" min="10" max="100" step="10">
</p>
<p>
搜索框：<input type="search" name="search">
</p>
<P>
<!-- 增强鼠标可用性 点击文字指向输入框 -->
<label for="mark">点击文字进入输入框：</label>
<input type="text" id="mark">
</P>
<hr>
<h1>表单初级验证</h1>
<p>
提示信息：<input type="text" placeholder="请输入提示信息">
</p>
<p>
必填：<input type="text" required>
</p>
<p>
正则表达式：<input type="text" pattern="">
</p>
<p>
<!-- value属性可以改按钮名称 -->
<input type="submit" value="提交12">
<input type="reset">
</p>
</form>
</body>
</html>