简明HTML
HTML入门
HTML初识
<strong>我是加粗的字体</strong>
HTML骨架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML标签分类
双标签
<body>
我是文字
</body>
单标签
<br />
标签嵌套和并列关系
嵌套关系
<head><title></title></head>
并列关系
<head></head>
<body></body>
开发工具sublime
生成html骨架
html:5 + Tab 或者 ! + Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
sublime text3安装后html:5+Tab不能快速生成html头部信息的解决办法：
需要下载Emmet插件，ctrl+shift+P打开命令面板，输入install，点击installPackage
Preference-->Package Control，点击Install Package，在接下来出现的窗口中输入emmet，选择Emment Css Snippets
版本号
<!DOCTYPE html>
字符集
<meta charset="UTF-8">
UTF-8 包含全世界所有国家需要用到的字符
GB2312 简单中文，包括6763个汉字
BIG5 繁体中文 港澳台
GBK 包含全部中文，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
HTML标签
排版标签
标题标签
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
h1标签因为重要，尽量少用。一般h1都是给logo使用
段落标签
<p>文本</p>
单词缩写：paragraph 段落
水平线标签
<hr />
hr是单标签，单词缩写：horizontal 横线
换行标签
<br />
br是单标签，单词缩写：break 打断、换行
div span标签
<div></div>
<span></span>
div span 是没有语义的 是我们网页布局主要的两个盒子
div 就是 division的缩写 分割，分区的意思 其实有很多div来组合网页
span 跨度、跨距、范围
文本格式化标签
<b></b><strong></strong> 粗体
<i></i><em></em> 斜体
<s></s><del></del> 加删除线
<u></u><ins></ins> 加下划线
b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈（XHTML推荐使用）
标签属性
<标签名 属性1="属性值1" 属性2="属性值2" >内容</标签名>
常用属性：height、width、color等
图像标签img
<img src="图像URL" />
img是单标签，单词缩写：image 图像
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时的显示内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
图片会等比缩放，一般给个宽度足够
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
单词缩写：anchor 锚
href 可以定义内部或外部链接，包括图片网页等
target 定义打开方式，有self和blank两种，其中_self为默认值，_blank为在新窗口中打开
<a href="https://www.baidu.com">文本或图像</a>
https:// 是协议，不可省略
<a href="#">文本或图像</a>
”#“ 定义空链接
锚点定位
<a href="#anchor">跳转到anchor</a>
<h3 id="anchor">我是anchor</h3>
link标签
<link />
定义文档与外部资源的关系，必须置于head里
href：被链接文档的地址
rel：当前文档与被链接文档的关系（rel="stylesheet"）
type：规定被链接文档的类型（type="text/css"）
media：被链接的文档显示在什么设备上
head添加小图标
<link rel="shortcut icon" href="" type="image/x-icon" />
script标签
<script type="text/javascript"></script>
可置于head里、也可置于body里
定义客户端脚本或者引入脚本
必填属性
type 指定脚本的类型，text/javascript
选填属性
src 外部脚本文件的URL
defer 规定是否对脚本执行进行延迟，直到页面加载为止，值和属性名一样
async 规定异步执行脚本（仅适用于外部脚本），值和属性名一样
style标签
<style type="text/css"></style>
置于head里 为HTML文档定义样式信息
必填属性
type 指定样式表的类型，text/css
选填属性
media 为样式表规定不同的媒介类型
常用的值：
screen 计算机屏幕（默认值）
print 打印预览模式/打印页
handheld 手持设备
all 所有设备
base标签
<head>
<base target="_blank" />
</head>
base是单标签，可以设置整体链接的打开状态，需要在head中定义
在设置base标签之后，链接也可以单独定义
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 平方3（上标3） | ³ |
注释标签
<!-- 会把之后的内容全部注释
<!-- 内容 --> 注释掉内容
相对路径
- 图片和HTML文件位于同一文件夹，<img src="logo.gif" />
- 图片和HTML文件位于下一级文件夹，输入文件夹和文件名，之间用”/“隔开，<img src="img/logo.gif" />
- 图片和HTML文件位于上一级文件夹，在文件名之前加入”../“，上两级，则需要使用”../../“，<img src="../logo.gif" />
绝对路径
完整的地址（本地及网络）
无序列表
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
ul 里建议只放 li 标签，li 标签里可以放其他标签
有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
表格
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
table 表
tr 行
th 表头
td 每行被分为若干个单元格
td里面还可以嵌套表格
表单
<form name="form1" action="action_page.php" method="post">
</form>
表单在网页中主要负责数据采集功能
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
如果省略 action 属性，则 action 会被设置为当前页面。
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
或：
<form action="action_page.php" method="POST">
何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
文本框
<input />单标签
单行文本
<form>
<input name="username" type="text" />
</form>
密码框
<form>
<input name="password" type="password" />
</form>
单选框
<form>
<input name="d1" type="radio" value="" checked />
<input name="d1" type="radio" value="" />
</form>
一组单选name必须相同，提交value的值
复选框
<form>
<input name="d1" type="checkbox" value="" checked />
<input name="d1" type="checkbox" value="" />
</form>
下拉菜单
<select name="select" id="select">
<option value="01">北京</option>
<option value="02" selected="selected">上海</option>
</select>
上传
<input type="file" />
用于文件上传
多行文本
<textarea name="" rows="" cols=""></textarea>
提交按钮
<input name="submit" type="submit" value="注册" />
重置按钮
<input name="reset" type="reset" value="重填" />
用于清空表单已经填写的数据
