HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它通常描述并定义了一个网页的内容和基本布局。我们先来看一下HTML合规范的基本结构：
<!DOCTYPE html> <!-- 声明文档类型是html5 -->
<html> <!-- 根元素 -->
<head>
<meta charset="UTF-8"> <!-- 这个元素设置文档使用utf-8字符集编码 -->
<title>Document</title> <!-- 设置页面标题，出现在浏览器标签上 -->
</head>
<body>
</body>
</html>
空标签
- 空HTML元素即指没有内容的HTML元素。空元素在开始标签中关闭
- 在编写空元素的时候建议大家使用开始标签+斜杠的方式： <XXX />
- 比如最经常举的例子<br />，HTML、XHTML、XML都接受这种方式，是一个好的书写规范
- 常见的空元素有：
<input/><img/><link/><meta/><input /> <img /> <isindex />
<area /> <base /> <basefont /><bgsound /> <col /> <embed />
<frame /> <keygen /> <link /><meta /> <nextid /> <param />
<plaintext /> <spacer /> <wbr />
常用标签
<a> anchor 锚点或链接
<b> bold 加粗
<i> italic 斜体
<u> underline 下划线
<del> delete 删除线
<em> emphasize 强调
<h1-6> headline 标题
<img> image 图片
<abbr> abbreviation 表示缩略词
<ol> ordered list 有序列表
<ul> unordered list 无序列表
<li> list item 列表元素
<p> paragraph 段落
<pre> preformatted 预格式化
<q> quotation 引号
<tr> table row 表格行
<th> table header 表头
<div> division 区块
<em> emphasize 强调
<ins> insert 插入
<td> table data 表格数据
<textarea> textarea 多行文本输入区
<dl > Definition List 定义列表
<dt> Definition Term 定义术语
<dd> Definition Description 定义描述
<small> small 缩小
部分标签详解：
iframe 标签：嵌套页面
<iframe src="http://www.qq.com" name="xxx" frameborder="0"></ifraame>
-
目前用的很少 大多是之前的遗留项目会遇到
-
iframe 是一个内嵌的窗口
-
有很多网站是不允许内嵌的 例如：http://www.baidu.com
-
iframe 默认是有一个border 但是样式很丑 所以一般会写一个 frameborder="o"
-
src 支持相对路径 例如
<iframe src="./index.html" name="xxx" frameborder="0"></ifraame>
会渲染当前目录下的index.html文件 -
name 需要结合 a 标签一起使用，例如：
<iframe src="http://www.qq.com" name="xxx" frameborder="0"></ifraame>
<a href="http://qq.com" target="xxx">QQ</a>
a 标签
- 跳转页面：（HTTP GET 请求）
<a href="http://qq.com" target="_blank">QQ</a> 在新窗口打开页面
<a href="http://qq.com" target="_self">QQ</a> 在自己现在的窗口打开页面
<a href="http://qq.com" target="_parent">QQ</a> 在上一级窗口打开（一般称为“爸爸”）
<a href="http://qq.com" target="_top">QQ</a> 在顶层窗口打开 （一般是在有祖孙三代或三代以上）
下载
1> <a href="http://qq.com" >下载</a>
content-type: application/octet-stream (下载一个文件)
浏览器以下载的形式去接收请求 而不是在页面上展示
2> <a href="http://qq.com" download>下载</a>
content-type: text/html
download 会强制浏览器下载
- href 不准用file协议
1> <a href="https://qq.com" >QQ</a>
用http协议 域名是“qq.com”
2> <a href="//qq.com" >QQ</a>
无协议绝对地址 自动继承协议 （当前页面是什么协议，我就是什么协议）
3 > <a href="xxx.html" >QQ</a>
跳转 xxx.html
4> <a href="#hihihi" >QQ</a>
只写一个锚点 会直接加到文件后面
锚点是不发起请求的 只是页面内的跳转
5> <a href="?name=xxx" >QQ</a>
浏览器会自动判断你的意思 加到文件后面 会发起一个请求
6> <a href="javascript: alert(1)" >QQ</a>
伪协议 "javascript:" 相当于“http:”协议 但是是没有 "javascript:" 协议的 所以说是伪协议
7> <a href="javascript: ;" >QQ</a>
点击之后什么也不会做
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a）
form 标签
- 跳转页面：（HTTP POST 请求）
1> 如果“form”表单里面没有提交按钮 “form”无法提交 除非使用JavaScript
2> form 标签主要是发起post请求
3> 你的name 会被带到第四个部分作为它的key
4> form 标签也有target 规则跟 a标签一样
5> form标签 和 a标签都是用来发送请求的 只是form标签是post请求， a 标签是get请求
<form action="" method="post"> <input type="text" name="xxx">
<input type="password" name="yyy"> <input type="submit" value="提交"> </form>
属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
input标签/button标签
1> button标签如果只写了一个<button> 则button标签会自动升级为提交按钮 默认为一个submit按钮
例如： <button>button</button>
2> button标签如果写了type 会按照type写的去执行 不会升级为提交按钮
例如：<button type="button">button</button>
3> submit是唯一能确定这个表单能不能点击提交的按钮
例如：<input type="submit" value="button">
4> input没有子元素 button 可以有子元素
input 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
button 的属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
网友评论