什么是HTML？
HTML指的是超文本标记语言：Hypertext Markup Language
HTML不是编程语言，而是一种标记语言
标记语言是由标记标签组成的，HTML使用标记标签描述网页
HTML文档也称Web文档，包含HTML标签和内容。
HTML标签（HTML tag)
html标签是由尖括号包围的关键词，如：<p>
通常是成对出现的，如：<p></p>
标签对中第一个标签称为开始标签 （开放标签）如<p>，第二个称为结束标签（闭合标签）如</p>
HTML元素
<p>我是一个段落</p> 这被称为HTML元素，它包含了开放标签和结束标签以及内容
不包含任何内容的元素称为空元素。比如<img>元素
HTML元素可以设置属性，属性总是以这样的形式出现：name="value"
一般描述于开始标签中：<div class="box"></div>
HTML结构
<!DOCTYPE html> 告诉浏览器使用“标准模式”去渲染页面
<meta http-equiv="X-UA-Compatible"content="IE=Edge" > 告诉浏览器使用IE 最新版本的 Standards
<html lang="en"> 告诉浏览器当前页面的语言
<meta charset="utf-8"> 告诉浏览器当前页面的编码方式
<meta name="viewport" content="width=device-width, initial- scale=1.0"> 告诉浏览器这个页面需要适配移动端
<meta name="keywords" content="xxx"> 告诉搜索引擎页面是与什么相关的
<meta name="description" content="xxxxxx"> 告诉搜索引擎页面的描述，搜索引擎会把这个描述显示在搜索结果中
<title>页面标题</title> 页面标题
参考文章
常见标签
h1~h6（heading）标题，指定内容的标题和子标题。
<section> 表示章节
<article> 表示文档、页面
<p> 表示文本的一个段落
<header> 页面的头部
<footer> 页面的底部，一般用于写一些版权信息，链接等
<main> 页面的中间部分，主要内容
<aside> 次要内容
<nav> 用于导航条
<div> 层级分块，一个容器
ol+li（ordered list+list item）有序列表和列表项
ul+li （unordered list+list item）无序列表和列表项
dl+dt+dd（description list+term+data）自定义列表
<pre>（preview）展示有格式的内容，一般和code一起使用
<code> 呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示
<hr> 分割线
<br>（break) 换行
<em>（emphasis）强调，标记出需要用户着重阅读的内容，用斜体显示
<strong> 表示文本十分重要，一般用粗体显示
<b>（bold）粗体，没有其他的语义，仅仅是变粗
<blockquote> 代表其中的文字是引用内容
参考文章
全局属性（所有标签都可以加的属性）
class 类，规定元素的类名，一个元素可以拥有多个class或者不同的元素可以使用相同的class
id 定义了一个全文档唯一的id，一个元素只能拥有一个id
style 行内样式，一般里面写的是css语法
title 显示与其所属元素相关信息的文本，效果是鼠标放置在元素上会有提示，一般a链接用到的比较多
contenteditable 表示元素内容可编辑
tabindex 制表符索引，可以设置tab键切换的顺序
hidden 隐藏，可以隐藏页面上的元素
data-* 自定义属性，*可以是任何东西，如：data-nickname="xxx"
参考文章：全局属性
重点标签
<iframe>作用是能够将另一个HTML页面嵌入到当前页面中（可替换元素）
比如：<iframe src="百度一下，你就知道" frameborder="0"></iframe> 就会把百度嵌入到当前页面中
<a> 超链接，作用是跳转外部页面、内部描点、邮箱或电话，有以下几个属性：
1、href属性它的取值一般是网址、路径、伪协议、锚点
href="http://www.baidu.com"
href=a.png 或 ./a.png
href=mailto:1554***5555@qq.com
href=#xxx 定位页面上的某个位置上
2、targe属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开，属性值有四个。
_blank 新窗口加载
_self 在当前页面加载，默认属性
_parent 在当前页面框架的父级框架加载，如果没有父级框架，这个值等同于 _self ，在当前页面加载
_top 在当前页面框架的最顶级框架加载，如果没有最顶级的框架或者当前页面就是顶级框架，这个值也是等同于 _self
3、download表明当前链接用于下载，而不是跳转到另一个 URL。
注意：download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。如果属性设置了值，那么下载的文件名就是这个值。
<table> 表示表格数据
相关标签：
<thead> 表示表的头部
<tbody> 表示表的主体
<tfoot> 表示表的底部，汇总行
<tr> 行
<td> 列
<th> 表格内的表头单元格
<colgroup> 选中表中的一组列表，和col搭配使用
caption> 展示一个表格的标题， 它常常作为 <table>的第一个子元素出现
table的属性：colspan 作用：合并单元格
table的样式：border-collapse : collapse 设置表格的边框是否被合并为一个单一的边框
<img> 将图像嵌入文档中（可替换元素）
<img src=“图片的文件路径” alt=“logo”>
alt的作用：当图片无法加载时，普通浏览器也会在页面上显示alt属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期，对于有视觉障碍的人来说，屏幕阅读器会将这个备用文本读给需要使用阅读器的使用者听
还可以在<img> 里添加height属性和width属性，但一般使用CSS样式代替
<form> 用于为用户输入创建 HTML 表单， 表单用于向服务器提交数据
<form action="" method="get"></form>
action属性的作用是：当提交表单时，向何处发送表单数据
method属性的作用是：发送表单数据的方法，get和post两种方式
<input> 用于为基于Web的表单创建交互式控件，以便接受来自用户的数据
input的属性
name：<input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值，任何input表单接收用户输入的地方必须要有name，没有就提交不到服务器
placeholder：提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当type属性为text,search,tel,urloremail时; 否则会被忽略
autofocus：在页面加载时自动获得焦点，除非用户将其覆盖；如果type属性设置为隐藏则不能应用
checked：规定在页面加载时应该被预先选定的 input 元素，默认勾选
disabled：表明表单控件不可用，如果这个输入框有disabled属性，那么这个输入框将会禁止输入，type属性为 hidden，此属性将被忽略。
value：设置控件的默认值
required：指定用户在提交表单之前必须为该元素填充值，意思是提交表单时，会提示这个输入框是必填的
tabindex：设置tab键的索引，数值越大越靠后，0是最靠后的，-1表示切换的时候，不切换到这个位置
type：表明控件的类型，默认值为text，可以输入内容，有以下几个类型：
- password 密码输入框，输入的内容不可见。
<input name="password" type="password" placeholder="请输入密码"> - checkbox 复选勾选框
<input name="复选勾选框，name要相同" type="checkbox" value="便于后台明白勾选的是什么"> - radio 单选勾选框
<input name="单选勾选框，name要相同" type="radio" value="便于后台明白勾选的是什么"> - button 定义一个可点击的按钮，与submit相似，但与submit作用不一样，点击submit会提交，而button不会
<input type="button" value="xxx"> - reset 定义一个清空或重置按钮
<input type="reset"> - email 邮箱输入框
<input type="email"> - file 选择文件按钮
<input type="file"> - number 数字输入框
<input type="number"> - search 搜索输入框
<input type="search"> - tel 电话号码输入框
<input type="tel"> - date 日期输入框
<input type="date"> - time 时间输入框
<input type="time"> - range 输入不精确值，会出现一个进度条
<input type="range"> - url url输入框
<input type="url">
<label>为 input 元素定义标注（标记），label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
想要将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 input 的 id 一样。
<label for="username">用户名</label>
<input type="text" name="xxxx" id="username">另外，你也可以将 <input> 直接放在 <label> 里，这种情况就不需要 for 和 id 属性了，因为这时关联是隐含的：
<label>用户名
<input type="text" name="username">
</label><textarea> 输入多行的文本框，它的初始值跟input的不一样，input的初始值是写在value里的，textarea的初始值是写在标签里的
<textarea name="comment" id="" cols="30" rows="10" placeholder="评论">初始值</textarea>
<select>和<option> select提供一个选项菜单，option是菜单里的项，selected可以设置默认选项
<label for="city">请选择城市</label>
<select name="xxx" id="city">
<option value="shanghai">上海</option>
<option value="shanghai">北京</option>
<option value="shanghai">广州</option>
<option value="shanghai" selected >深圳</option>
</select>参考资料来源于：
饥人谷课件
HTML基础
1848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
