目录
一、HTML介绍
HTML语言简介
HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪90年代由物理学家李爵士（Tim Berners-Lee）发明。它的最大特点就是支持超链接，点击链接就可以跳转到其他网页，从而构成了整个互联网
网页及HTML概述
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。
浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript
- HTML 语言定义网页的结构和内容
- CSS 样式表定义网页的样式
- JavaScript 语言定义网页与用户的互动行为
（HTML 语言是网页开发的基础，CSS 和 JavaScript 都是基于 HTML 才能生效，即使没有这两者，HTML 本身也能使用）
其实网页的 HTML 代码就是由许许多多不同的标签（tag）构成
二、HTML起手式看不懂？
在最初学习HTML时，大多数人都不了解起手式的具体含义，虽然这并不影响我们写HTML，但还是大致介绍一下：（以下图为例）
<!DOCTYPE html> <!--文档类型（告诉浏览器：我要开始写html啦）-->
<html lang="en"> <!--html标签；lang为语言（这里en代表英语，可改为zh-CN中文）-->
<head> <!--头部标签；主要是用于描述该文档的各种属性和信息-->
<meta charset="UTF-8"> <!--文件的字符编码（一般情况下无需改变，此格式支持更多语言）-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--告诉IE使用最新内核-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--禁用页面缩放-->
<title>Document</title> <!--此文档的标题为Document-->
</head>
<body> <!--编辑文档的主要内容-->
...
</body>
</html><meta>标签：
meta标签是html语言head区的一个辅助性标签，它位于html文档头部的<head>标记和<title>标记之间，它提供用户不可见的信息。
meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等
三、HTML中的基础标签
学习html其实就是学习html的标签，大家都知道html的标签有很多，想要记住全部的标签及用法是非常不现实的，而且许多标签并不常用，所以接下来介绍几类常用的标签：
一、常用的章节标签
章节标签主要是用来表示网页的层次结构，但这不是严格的划分标准，可以根据情况灵活使用；一下是一些较为常用的章节标签：
1、标题：h1~h6
<h1>...<h1>是最高级别的标题，<h6>...<h6>是最低级别的标题
标题的使用要点：
- 浏览器默认一级标签字号最大，依次递减。
- 一级标题下可有多个二级标题，以此类推。
- 标题不能越级，一级标题下，直接三级标题，以此类推。
- 一般只用到前三级标签
2、章节：<section> ... </section>
<section>标签表示一个含有主体的独立部分，通常用在文档里面表示一个章节，比如<artical>标签里可以包含多个<section>标签，<section>总是多个一起使用
3、段落：<p> ... </p>
代表文章的一个段落，任何想以段落显示的内容，比如图片或者表单，都可以放进 p 标签中
4、文章：<artical>...</artical>
表示页面里面一段完整的内容，通常表示一篇文章或者帖子;一张网页里面可以包含一个或篇文章
5、头部：<header> ... </header>
头部标签也叫作页眉标签，<header>标签可以适用在多个场景，既可以表示整个网页的头部，也可以表示一个文章或一个区块的头部
6、脚部：<footer> ... </footer>
<footer>标签表示网页、文章或章节的尾部，如果用于整张网页的尾部，就称为页尾；一般包含版权信息或其他相关信息。
7、主要内容：<main> ... </main>
<main>标签一般表示页面的主题内容，一般一个页面内只有一个<main>标签
注意：<main>标签是顶层标签，不能放置在<artical>,<header>,<footer>,<aside>等标签之中；另外功能性区块不适合放入<main>标签中，除非当前页面就是搜索页面
8、旁支内容：<aside> ... </aside>
用来放置与网页或文章主要内容相关的间接部分
9、划分：<div> ... </div>
<div>是一个通用标签，表示一个区块（division）;它没有语义，如果网页需要一个块级元素容器，就可以使用此标签，<div>标签经常被用来划分区域
以下是一个小的综合实例
二、常用的内容标签
内容标签用于表示网页的内容，及规划；像章节标签一样没有严格的规定
1、<ol>+<li>（有序列表）
<ol>
<li>吃饭</li> // 1. 吃饭
<li>睡觉</li> // 2. 睡觉
<li>打豆豆</li> // 3. 打豆豆
</ol>2、<ul>+<li>（无序列表）
<ul>
<li>吃饭</li> // . 吃饭
<li>睡觉</li> // . 睡觉
<li>打豆豆</li> // . 打豆豆
</ul>3、<dl>+<dt>+<dd>（dl常用来定义词汇表）
- <dl>标签是一个块级元素，表示一组术语的列表
- <dt>标签来定义术语名
- <dd>标签来定义术语解释
-
<dl> <dt>绝对命令</dt> <!--术语--> <dd>从根目录开始的</dd> <!--相对应的解释--> <dt>相对命令</dt> <!--术语--> <dd>相对于当前目录的</dd> <!--相对应的解释--> </dl>
4、<pre>
<pre>标签是一个块级元素，表示保留原本格式。（一般html默认将许多空白理解为一个空格，若放在<pre>标签中，则会保留空格，回车，tap等）
<pre>hello
world</pre> <!--换行和连续空格会被保留下来，浏览器按照原样输出-->5、<code>
<code>标签是一个行内标签，表示标签内容是浏览器代码，浏览器会默认以等宽字体输出
6、<hr>
<hr>标签用来在一篇文章中分隔两个不同的主题，浏览器会显示出一条水平线
7、<br>
<br>标签让网页产生一个换行效果；该标签单独使用，没有闭合标签
8、<a>
<a>标签用于添加超链接
访问网站<a herf="http://qq.com">QQ</a> <!--点击QQ跳转到qq网页-->9、<em>
<em>标签是一个行内元素，表示强调（emphasis），浏览器默认会用斜体显示
10、<strong>
<strong>标签是一个行内元素，表示其中内容本身非常重要，浏览器默认会加粗显示
11、<blockquote>
<blockquote>是一个块级标签，表示引用他人的话，浏览器会在样式上与正常文本区别显示。<blockquote>有一个cite属性，它的值是一个网址，用来表明引言来源
<blockquote cite="https://quote.example.com">
<p>天才就是1%的天赋和99%的汗水</p>
</blockquote>四、全局属性
全局属性是所有元素都可以使用的属性，也就是说，你可以把下面的属性加在任意一个网页元素上
1、类属性class
类属性用来对元素网页进行分类，如果不同的元素，class相同，就表示它们是一类的
<div class="middle border"> ... </div> <!--类名有空格时加双引号-->以下种选择方式均可：
<style>
.middle{background:blue;color:white;} <!--div背景将会是蓝色，字的颜色是白色-->
.border{border:10px;color:red;} <!--div会产生10px的红色边框-->
</style>2、contenteditable
html网页内容默认是用户不能更改的，contenteditable属性允许用户修改内容
<div class="middle border" contenteditable> ... </div> <!--此div可在浏览器上由用户编辑-->3、hidden
hidden是一个布尔属性，表示当前页面元素不在与页面相关，因此浏览器不会渲染这个元素，所以不会在网页中看到它
<div class="middle border" hidden> ... </div> <!--此div部分将会在浏览器页面被隐藏-->4、id
id 用来表示全局唯一的标签，但是全局唯一性没有保障，就算有两个重复的 id，HTML 也不会提示我写错了
...
#mydiv{background:yellow;color:pink;} <!--mydiv的背景色是黄色，字体颜色是粉色-->
...
<div id=mydiv> ... </div> <!--将div的id命名为mydiv-->
...5、style
style属性用来指定当前元素的css样式
<header id=xxx style="border:10px solid green"> <!--header会有10px粗的绿色边框-->
...
</header>6、tabindex
这里就有一个问题，按下tab键时，浏览器是如何知道跳到哪个元素的？html提供了tabindex属性解决这个问题，它的名字的含义就是tab的顺序。tabindex属性的值是一个整数：
- 当数值为整数时：顺序遍历访问
- 当数值为0时：最后一个访问
- 当数值为-1时：无法访问
<footer tabindex=0> <!--tab将会最后一个访问footer-->
...
</footer>7、title
title属性用来为元素添加附加说明。大多浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示显示出来
...
<style>
#xxx{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis; <!--文字溢出不显示，省略号表示-->
}
</style>
...
<header id=xxx title="完整的内容"> ... </header> <!--鼠标悬浮会显示出完整内容-->
...五 、HTML的重点标签
接下来是一些html中的重难点标签，相较于上述标签来说，下列的每个标签功能都不单一，并且用法也不那么简单，但不要死记硬背，应当在实践中掌握
一、a标签
1、作用：
- 跳转至外部页面
- 跳转至内部锚点
- 跳转至邮箱或者电话
2、属性：
（1）href(hyper reference) 超级链接
href的取值：
① 网址：
<a href="https://google.com">点击打开谷歌</a>② 路径
<a href="/index.html">点击打开当前路径文件</a>- /a/b/c/以及a/b/c
- index.html以及/index.html
③ 伪协议
<a href="javascript:;">点击之后没有动作的伪协议</a>
<a href="mailto:596417202@qq.com">发邮件</a>
<a href="tel:13112345678">打电话给我</a>
- javascript：代码
- mailto：邮箱
- tel：手机号
④ id
- href=#xxx
（2）target 指定在哪个窗口打开链接
<a href="//baidu.com" target="_blank">在新窗口(空白页)打开</a>
<a href="//baidu.com" target="_top">在整个窗口中打开</a>
<a href="//baidu.com" target="_parent">在父框架中打开</a>
<a href="//baidu.com" target="_self">(默认)在当前窗口打开</a>
<a href="//baidu.com" target="_xxx">如果之前已打开一个新窗口,则在已打开的窗口重新打开此链接,否则在新窗口(空白页)打开</a>target的取值：
① _blank
在新建的空白窗口打开
② _top
在顶级窗口打开
③ _parent
在当前链接iframe的上一层打开
④ _self
默认在本身窗口打开
⑤ _xxx
若有名为xxx的窗口，就在xxx打开
若没有，则新建xxx窗口并打开
二、img标签
1、作用：发出get请求显示一张图片
2、属性
<img src="./img/timg.jpg" id="touxing" alt="这是一张图片" height=200px>(1)alt
当图片加载时可用文本代替
(2)height/width
控制图片的宽与高
（一般只定义一个值，另一值会根据比例自定义；若同时定义两值，可能会导致图片变形）
(3)src
图片的地址
3、事件
onload/onerror是JS的响应事件
<script>
xxx.onload=function(){
console.log("图片加载成功");
}
xxx.onload=function(){
console.log("图片加载失败");
xxx.src='/404.png' <!--可放置图片加载失败的替换照片-->
}
</script>注意:一开始声明此段代码，页面中的所有图片宽度将与页面相匹配
（一般适用于移动端页面的设计）
img{ max-width:100% }三、table标签
1、作用：<table>标签在HTML 中定义了表格布局，表格由单元格与其内部的文本构成。
2、属性
（1）width/height 表格宽与高的设置
（2）border 表格边框的设置
- table-layout 格子宽度
- border-spacing 表格间隙调整
- border-collapse：表格合并
3、元素构成：
(1)<thead>、<tbody>和<tfoot>
<thead><tbody><tfoot> 把表格分成多个逻辑区域，可以用 CSS 更好的控制
- <thead>元素用于对 HTML 表格中的表头内容进行分组
- <tbody>元素用于对 HTML 表格中的主体内容进行分组
- <tfoot>元素用于组合 HTML 表格中的页脚（脚注或表注）内容
(2)<tr>、<th>和<td>
- <tr> 元素定义表格行
- <th> 元素定义表头表头单元，包含头部信息元素内部的文本通常会呈现为居中的粗体文本
- <td> 元素定义表格单元标准单元 ，包含数据元素中的文本一般显示为正常字体且左对齐
用法如下： 
四、form标签
1、作用：用于为用户输入创建 HTML 表单，可以向服务器传输数据；能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等
<form action="#" method="post" autocomplete="on" target="_blank">...</form>2、属性：
- action:刷新页面地址
- method:请求方式 POST/GET
- autocomplete:是否自动填充 on/off
- target:请求地址打开窗口（与a标签用法相似）
五、input标签
1、作用：用于搜集用户信息
2、属性：根据不同的 type 属性值，输入字段拥有很多种形式输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等
3、 input标签事件:
- 所有input所有onchange事件（当用户输入改变时）
- onfocus事件（当鼠标几种在上面时）
- onblur事件（当鼠标移开时）
以下是form和input的综合应用：
<form action="#" method="post" autocomplete="on">
文本框: <input type="text"/>
<hr >
输入密码: <input type="password"/>
<hr >
颜色: <input type="color"/>
<hr >
单选框:<input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女
<hr >
多选框:<input type="checkbox" name="hobby" />打篮球 <input type="checkbox" name="hobby" />听音乐
<input type="checkbox" name="hobby" />画画
<hr >
上传文件: <input type="file" multiple/>
<input type="hidden"/>
<hr >
多行文本: <textarea rows="6" style="resize: none;" cols=""></textarea>
<hr >
地区选择：
<select name="">
<optgroup label="地区">
<option selected="" value="">--</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</optgroup>
</select>
<hr>
<input type="submit" value="提交"/>
<hr>
<button type="submit">注册</button>
<!-- input 和 button 区别
<input type="submit" value="提交"/> 只能有文本
<button type="submit">注册</button> 可以有任何东西 -->
</form>输出结果显示如下：
注意：一般不监听input的click事件；form里的input要有name；form里要放一个type=submit才能触发submit事件
（部分引用于网络，自己整理）
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
