HTML
HTML思维导图
以下就是按照导图由上到下详细说明
什么是HTML？
HTML ： Hyper Text MarkUp Language （超文本标记语言）
什么是文本？
文本：文字、有格式的文本
什么是超文本？
文字，图片，音频，视频，动画、定位…….
什么是标签语言？
标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。标记语言不仅仅是一种语言，就像许多语言一样，它需要一个运行时环境，使其有用。提供运行时环境的元素称为用户代理。
IDEA环境搭建、
如果你的电脑有如图的浏览器就不用换，如果用的别的浏览器可以通过以下方式更改浏览器
- 点击File-->Settings
- 点击Tools-->Web Browsers
在path里找到你想用的浏览器路径即可
1.2、发展史、优势
- HTML 1993年
- HTML2.0 1995年
- HTML3.2 1996年 （W3C推荐标椎）
- HTML4.0
- HTML4.01 （微小改进）
- XHTML1.0 2000年
- XHTML2.0 由于改动过大，学习成本高了，没怎么用
- HTML5 （最新版） 2004 2007正式纳入新成立的HTML工作团队！
- 2013 HTML 5.1 草案~（没有被发布）
- 优势：
- 所有知名浏览器厂商都支持！
- 微软
- 苹果
- Opera
- Mozilla firefox（火狐）
- 很多杂的浏览器，并不支持 HTML5
- 市场的需求
- 市场需要一个统一的标准：（需要不断地扩大）
- Web兼容性问题。 修改bug都需要大量的时间！
- 跨平台（浏览器） B/S架构
- 天然存在的，因为是B/S开发 PC、移动站、等等所有的都是天然支持！
- 所有知名浏览器厂商都支持！
W3C标准
W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org
- http://www.chinaw3c.org
W3C标准包括：
- 结构化标准语言（HTML，XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
- 很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范 以下是IDEA调整JavaScript的规范
常见的前端开发工具
- 记事本
- Notepad++
- Sublime
- VScode（前端专业）
- WebStorm（前端专业 和IDEA一家公司）
- HBuilder （专业）
- ……
HTML的基本结构
- 所有的HTML 标签 都以 <> 开始 </> 结尾
- 正常网页的所有内容都需要放在 < body> 标签中；
<!DOCTYPE html>
<html lang="en">
<head>
<!--自闭合标签-->
<meta charset="UTF-8">
<!--正常的标签都是需要成对出现的-->
<title>Title</title>
</head>
<body>
hello ,world!
</body>
</html>
- DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
- Title 标签，就是网站的小标题名称；
- meta 描述信息，SEO：网站搜索搜索
<!--建议规范编码，统一使用UTF-8（全世界） gb2312：包含了所有的中文字符-->
<meta charset="UTF-8">
<!--网站关键字描述-->
<meta name="keywords" content="Godles的博客，姜嘉航">
<!--网站的描述-->
<meta name="description" content="欢迎来到Godles的博客">
网页基本标签
1、标题标签
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2、段落标签
<!--p：段落标签-->
<p>你住的 巷子里 我租了一间公寓</p>
<p>为了想与你不期而遇</p>
<p>高中三年 我为什么 为什么不好好读书</p>
<p>没考上跟你一样的大学</p>
3、换行标签
<!--换行标签-->
你住的 巷子里 我租了一间公寓<br/>
为了想与你不期而遇<br/>
高中三年 我为什么 为什么不好好读书<br/>
没考上跟你一样的大学<br/>
4、水平线标签
<hr/>
5、字体样式标签
<!--粗体，斜体-->
粗体： <strong>我爱你</strong>
斜体： <em>I love you</em>
6、特殊符号标签
<!--空格   网页里必须有这个才能实现空格-->
<p>我喜欢 你</p>
<!--大于号-->
>
<!--小于号-->
<
<!--版权符号-->
© 版权所有：Godles
<!--万能的公式 &+空格;-->
图像标签
- 常见的图片格式： .png .jpg .jpeg .bmp .gif...
- png 会有浏览器兼容问题
- 一般使用 .jpg .gif多一点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--标签中带有参数的 key=value -->
<!--
src： 资源图片 ： 图片的路径
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 宽
height：高
-->
<img src="../statics/images/1.jpg" alt="头像图片" title="Godles" width="1000" height="1000">
</body>
</html>
超链接
表示从一个地方跳转到另外一个地方
<!-- 快捷键：a+Tab
href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
_self : 在自己的窗口打开
_blank： 在新窗口中打开
和图片嵌套使用
-->
<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->
<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
<img src="../statics/images/1.png">
</a>
锚链接
- 用于页面间指定位置跳转 ： 快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转 ：
锚点
<!--标记A-->
<a name="markerA">A</a>
<!--标记B-->
<a name="markerB">A</a>
<!--标记A-->
<a name="markerC">A</a>
跳转到锚点
<a href="#makerA">A</a><br>
<a href="#makerB">B</a><br>
<a href="#makerC">C</a><br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a><br>
<a href="2.基本结构.html#xixi">xixi</a>
功能性标签
邮件链接
<a href="mailto:291652685@qq.com">联系我</a>
借助第三方平台
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=291652685&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
块元素、行内元素
块元素
- 无论内容多少，都是独占一行的 （p，h1~h6）
行内元素
- 只根据内容的长度来扩展。 （a，strong，em….）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>
<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>
</body>
</html>
列表
无序列表（ul-li）
- 语文
- 数学
- 音乐
例如：上面的列表!
手机电量和耳机电量的列表
有序列表 (ol-li)
- 热搜1
- 热搜2
- 热搜3
例如：微博热搜
音乐排行榜
自定义列表 (dl-dt-dd)
代码演示上图部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--title-->
<!--无序 ul-li
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
<li>记事本</li>
<li>Notepad++</li>
<li>Sublime</li>
<li>VScode（前端专业）</li>
<li>WebStorm（前端专业 和IDEA一家公司）</li>
<li>HBuilder （专业）</li>
<li>......</li>
</ul>
<hr>
<!--有序 ol-li
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
<li>澳门回归20周年主题曲</li>
<li>黄璐离婚</li>
<li>清华美院男生对冰雪维纳斯</li>
<li>桃你欢心赞不绝口</li>
<li>......</li>
</ol>
<hr>
<!--自定义列表
网站的底部，用于标记项
-->
<dl>
<dt>选购及了解</dt>
<dd>Mac</dd>
<dd>iPad</dd>
<dd>iPhone</dd>
<dd>Watch</dd>
<dt>服务</dt>
<dd>Apple Music</dd>
<dd>iCloud</dd>
</dl>
</body>
</html>
效果展示：
表格
基本结构：
- 表格 table
- 行 tr rowspan
- 列 td colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
<!--行和列-->
<!--第一行 tr,列 td-->
<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>
</body>
</html>
跨行
<table border="1px">
<tr>
<!--rowspan 所跨的行数-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>0</td>
</tr>
<tr>
<td>数学</td>
<td>0</td>
</tr>
</table>
跨列
<table border="1px">
<tr>
<!--实现跨列
colspan 对应的值:就是要跨几列
-->
<td colspan="2">学生成绩</td>
<td>学生成绩</td>
</tr>
<tr>
<!--科目名称-->
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!--成绩-->
<td>数学</td>
<td>100</td>
</tr>
</table>
上面三个案例效果图：
练习一个表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>流量统计</td>
<td>访客统计</td>
<td>会员</td>
<td>游客</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
</tr>
<tr>
<td rowspan="2">300</td>
<td>300</td>
<td>400</td>
<td>500</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>400</td>
</tr>
<tr>
<td>平均浏览量</td>
<td colspan="3">1000</td>
</tr>
</table>
</body>
</html>
效果展示：
音频
音频 audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--音频播放-->
<audio src="../statics/audio/断了的弦.mp3" autoplay controls></audio>
</body>
</html>
视频
视频 video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<!--video 视频标签 只能解析本地的视频
这里放到视频，或者音乐，都是必须要能够直接播放的。
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放
-->
<video src="../statics/video/china.mp4" controls autoplay></video>
<video src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" controls autoplay>
</video>
<!--iframe这个可以把别人的网站视频嵌套过来-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
width="1000px" height="500px">
</iframe>
</body>
</html>
网页的结构
- 页面的头部
- 页面的主体
- 页面的尾部
从页面结构的角度上看，网页主要由导航栏、栏目、及正文内容这三大要素组成。网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的。
- 导航栏
- 导航栏是构成网页的重要元素之一，是网站频道入口的集合区域，相当于网站的菜单。
- 栏目
- 栏目是指网页中存放相同性质内容的区域。在对页面内容进行布局时，把性质相同的内容安排在网页的相同区域，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用。
- 正文内容
- 正文内容是指页面中的主体内容。例如一个文章类页面，正文内容就是文章本身；而对于展示产品的网站，正文内容就是产品信息
文档树结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这些标签都是一些行业规范-->
<header>
我是头部
</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主题</article>
<section> 独立区域 </section>
<footer>
我是尾部
</footer>
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--正常的显示-->
<iframe src="https://www.baidu.com" frameborder="0"width="1000px"height="500px"></iframe>
<!--点击显示出我们要内联的地方-->
<iframe name="mainFrame" ></iframe>
<a href="https://www.baidu.com"target="mainFrame">点击显示</a>
</body>
</html>
表单
HTML 表单用于搜集不同类型的用户输入。
注册
登录
搜索框
- < form >元素
HTML 表单用于收集用户输入。
< form >元素定义HTML表单
- HTML表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
- < input >元素
< input >元素是最重要的表单元素
< input >元素有很多形态，根据不同的type属性
登录演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
提交请求：
携带的参数
key: 控件的name。这个属性不要忘记
get：携带参数，参数可以在url中看到，不安全，大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post：参数不可见、安全，大小没有限制 （表单提交常用方式post）
-->
<!--form 表单
action： 提交地址
method：提交的方式
-->
<form action="test.html" method="post">
<!--输入框
input 标签
name： 必须写上
type：
text ： 文本框
password： 密码框
submit： 提交按钮
reset： 重置
-->
<p>名字：<input type="text" name="username"> </p>
<p>密码：<input type="password" name="password"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
效果图：
表单元素
所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值！
以下是我们要使用的表单元元素
| 类型 | 描述 |
|---|---|
| range | 可调节滑块 |
| search | 搜索框（带关闭按钮） |
| number | 数字 |
| url | 验证网址 |
| 验证邮箱 | |
| text | 定义常规文本输入 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
| reset | 重置按钮 |
| password | 密码框 |
| checkbox | 复选框 |
| select-option | 下拉列表框 |
| button | 按钮 |
| textarea | 文本域 |
1.文本框
<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度
-->
<p>
<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
2.密码框
<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
<input type="password" name="pwd" size="20">
</p>
3.单选按钮
<!--单选框type="radio"
value： 表单提交的值
name： 名字相同，则自动分组，必须要分组
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="radio" 后增加单选框的属性
-->
<p>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex"disabled>女
</p>
4.复选框
<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
<input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="music" checked>听音乐
<input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>
5.下拉列表框
<!--下拉列表框
select
name： 组件名字 必填
size: 显示的数量，默认为1
option： 选项
value 必填
option标签中间写下拉框的值
selected： 默认选中
-->
<select name="科目">
<option value="1"></option>
<option value="2">数学</option>
<option value="3" selected>英语</option>
<option value="4">英语</option>
<option value="5">英语</option>
</select>
6.按钮
<!--按钮
value：按钮上的文字
-->
<p>
<!--提交-->
<input type="submit" value="登录">
<!--重置--使用-->
<input type="reset" value="清空">
<!--普通按钮：一般后来我们会和javascript结合使用，点击按钮xxx-->
<input type="button" value="点我">
<!--图片按钮
type="image"
src：图片的路径
-->
<input type="image" src="../statics/images/bd.png">
</p>
7.文本域
<!--文本域
更改大小用
cols表示列
rows表示行
maxlength 表示文本域所能填写的最大长度-->
<textarea name="textarea" cols="10" rows="10">
</textarea>
8.文件域
<!--
表单，需要支持提交复杂文件 enctype="multipart/form-data提交表单数据"
未来：文件上传会用到
-->
<form action="test.html" method="get" enctype="multipart/form-data">
<input type="file" name="video">
</form>
9.邮箱
<!--邮箱-->
<p>
邮箱：<input type="email" name="email">
</p>
10.网址
<!--url网址-->
<p>
url：<input type="url" name="url">
</p>
11.数字
<!--数字：商品数量，计数 type="number"
最小值 min="0"
最大值 max="100"
步长 step="10"
-->
<p>
数字：<input type="number" min="0" max="100" step="10">
</p>
12.滑块
<!--滑块
默认值0~100
-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
13.搜索框
<!--搜索框-->
<p>
搜索： <input type="search" name="search">
</p>
13个表单元素效果图显示：
表单的应用
- 隐藏域
<!--隐藏域 不让用户看到-->
<p>
<input type="hidden" name="count" value="10">
</p>
- 只读和禁用
<!--readonly 只读 disabled 禁用-->
<p>
用户名： <input type="text" name="username" readonly>
</p>
<p>
密码： <input type="password" name="pwd" disabled>
</p>
- 标注
<p>
<!--通过 for="name" 来链接到 表单中的指定ID -->
<label for="name">用户名： </label>
<input type="text" name="username" id="name">
</p>
- 初级表单验证
-
默认提示
<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做--> 用户名： <input type="url" name="username" placeholder="必须是url格式"> -
必填
<p> <!--required必须要填写这个字段--> 密码： <input type="password" name="pwd" required> </p> -
正则表达式
<p>
<!--pattern:正则表达式-->
手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>
表单的验证，主要在 JavaScript 以及 我们后台判断
