HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它通常描述并定义了一个网页的内容和基本布局。我们先来看一下HTML合规范的基本结构：
<!DOCTYPE html> <!-- 声明文档类型是html5 -->
<html> <!-- 根元素 -->
<head>
<meta charset="UTF-8"> <!-- 这个元素设置文档使用utf-8字符集编码 -->
<title>Document</title> <!-- 设置页面标题，出现在浏览器标签上 -->
</head>
<body>
</body>
</html>
常用标签
1 . 标题标签
<h1></h1> , <h2></h2> , <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
分别是六级标题的样式
image
2. 段落标签
<p></p> paragraph 段落标签
顾名思义，这是一个定义段落的标签，是一个块级元素。
<p>这是一个段落</p>
3. div span 标签
这两个标签没有实际语义，我们可以把他们看做盒子，通常用来网页布局
<div>我是块级元素</div>
<span>我是行内元素</span>
4. em和strong标签
strong和em（emphasis)语义都是强调，在HTML5中，strong这个元素强调内容非常重要！(strong importance for its contents) 对比于html4仅是一个简单的强调，语义更加加重了。
Em标签(Emphasis)用于改变一个句子的意思(比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>"，分别强调喜欢和胡萝卜), Strong用来对一个句子的部分增加重要性(比如 "警告! 这非常危险。") Strong和Emphasis都可以分别通过嵌套来增加相对重要性或强调重点。
em标签的显示方式是内容倾斜，strong标签的显示方式则是加粗。
相对的同样也有无语义的，仅仅是物理状态的倾斜<i></i>和加粗<b></b>
image
5. img标签
HTML Image 元素（ <img> ）代表文档中的一个图像。
<img src ="" alt = "">
src属性是用于指定图像文件的路径和文件名，是img的必要属性。
alt属性定义了描述图像的替换文本。即图片加载不出来或出现错误的时候，我们将看到这个显示。
img标签是一个空标签，没有内容，没有结束标签。
img标签是一个可替换标签，它的展现不由css控制，是外观渲染独立于css的外部对象。
6. iframe标签
①嵌套一个网页进去
image
如图所示，我们的页面上就会多一个窗口链接到我们输入的地址的网页
frameborder是iframe的边框，非常丑，我们默认不要他吧
②name属性和a标签一起用
比如我们给iframe一个name，然后a标签的target等于这个name，我们就可以使a标签所跳转的页面在当前页面iframe的窗口打开了。
image
这样我们无论是点击qq还是百度，都可以在当前窗口打开了
7. a标签 （HTTP GET请求）
anchor的缩写，<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
<a href ="http://qq.com" target="_blank">
①href属性是必需属性，定义一个超文本链接来源
1.1 注意：我们如果输入//qq.com,这是一个无协议相对地址，那么当前什么协议，就是什么协议，所以我们打开会是file://qq.com,但是我们不常用file协议，容易出错，那我们如何预览我们的index.html呢？
1.1.1上传到github,用github 预览功能
1.1.2 npm i -g http-server 下载这个小工具
每次运行的时候
http-server . -c -1
这样我们尽管<a href ="//qq.com">QQ</a>,是无协议相对地址，但由于当前已经在http协议下，我们就可以http协议访问了
image
1.2 注意：当href="#" 时不是GET请求，因为锚点定位，只是当前页面的跳转
可以使用href="#top"或者href="#"链接返回到页面顶部。
1.3.1 想要点击a标签，执行一段 javascript 代码
<a href="javascript:alert(1)"></a>
1.3.2 伪协议可以实现「点击之后没有任何动作的 a 标签」，满足这种奇葩需求
<a href="javascript:;"></a>
②target属性
target=_blank 新窗口打开
target=_self 默认，在自己当前页面打开
target=_parent 在父页面打开
target=_top 在最上层页面打开 结合iframe理解即可
③download属性
<a href ="http://qq.com" download >下载</a>
此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
注意：如果HTTP的Content-Disposition：存在,并且赋予了一个和这个属性不同的文件名，HTTP会优先于此属性。
8. form标签（HTTP POST请求）
form标签与a标签一样，是发起了页面跳转，但是两者的区别是，form标签发起的是post请求，而a标签是get请求。
①form标签中必须要有提交按钮
image
②form是用来发送post请求，常见于我们登录时，比如我们上图就是一个登陆的界面，那我们提交后，看看是不是发送了post的请求呢？
image
确实是post请求，这里要注意，不要忘记method=post,否则提交上去还是get.
③我们提交的内容，如果使用GET，他会默认的放在查询参数里，如图：
image
我的name和密码都被默认为查询参数了，那如果是post呢？
image
post会把参数默认的放在请求的第四部分，还记得我们之前讲到请求的第四部分是什么吗，是我们上传的数据，忘了就回去复习一下~指路here
④form也有target属性，与a 标签用法一致就不再赘述了
9. input 标签
用法很多，详细的去查MDN文档~
①type属性值为text, 单行字段；换行会将自动从输入的值中移除。
type属性值为password，顾名思义，密码，一个值被遮盖的单行文本字段。
image
②type属性为radio 单选框，但必须命名到一组
image
image
③ type属性为checkbox 复选框 也要name到一组
image
这个命名在提交的时候就是下图模式了：
image
④button
button很有意思，如果没有type属性，也没有submit，比如
<button>button</button>
那么此时的button会自动升级成提交按钮，而如果
<input type="button" value="button">
<button type="button">按钮</button>
这两种情况下，button只是普通按钮。
10. label标签
常用于把label和表单元素绑定在一起，比如用label把用户名和输入框连在一起，那么当我们点击用户名时，输入框就会获得输入焦点
<label>用户名<input type="text"></label>
11. select
select是一个表单控件，我们可以通俗的叫他下拉菜单，菜单下跟着<option>选项
image
如图，disabled意思为不可选，即第三组不可选择
selected意思为默认被选择项，如图上自动选择在第四组上
multiple意思为可以选择多个选项，看下图~
image
我已经选择了二四五组，但是第三组由于disabled，不可选~
12. table 标签
image
-
很多人会不知道 colgroup ，它可以用来给 table 列表加宽度等属性，如图可清楚的看到这一状态
-
thead tbody tfoot 三个标签可以省略，但是加上的话会使语义更完整，既是顺序发生变化也浏览器也可以根据这三个标签还原成员列表。
-
border-collapse可以合并两个相邻的边框线，使中间没有空隙，更加美观一点。
欢迎指错~我要困死了emmmmm
网友评论