HTML
网页统分为三大部分：结构（HTML）、表现（CSS）和行为（JavaScript）。
HTML
html指超文本标记语言，可以更加丰富地呈现文字信息。html是标记语言而不是编程语言，标记也就是标签是html中的一个基本语法。
标签包括开始标记和结束标记，使用时互相嵌套，成对出现，如<html>和</html>。有些标记单个出现，如<hr>，习惯上写为<hr />。
html的语法不区分大小写，也就是标签和属性不区分大小写，命名规范是小写。
HTML文档
文档结构
1 | <!-- 根标签 --> |
文档声明
1 | <!-- 声明文档为html5 --> |
元数据
在<head>中设置元数据，使用<meta>标签。
charset指定网页的字符集，http-equiv指定网站的http协议。
name指定数据名称，content指定数据内容。
1 | <meta charset="utf-8" /> |
标签
段落、标题、引用
html中的文本没有任何格式，所有格式都需要使用标签来赋予。
换行符<br />，横线<hr />。
文档中的标题使用<h1>，可取至<h6>，分别是6级标题，标题独占一行。
<hgroup>为标题组，将相关标题放入一个组中。
段落标签<p>，段落内的文本自成一段，段落间存在段间距。段落标签里不要放块元素。
<q>和<blockquote>表示引用。
1 | <blockquote>我没说过。 ——鲁迅</blockquote> |
我没说过。 ——鲁迅
网页布局
<header>表示网站的头部，<main>表示网站的主体，<footer>表示网站的底部，<nav>表示导航，<aside>表示侧边栏，<article>表示文章，<section>表示一个普通的区块。
<div>是最常用的布局元素，用来表示一个区块。<span>用于表示行内元素。
属性
标签具有属性，如<p align="right">居右对齐段落</p>，属性间使用一个空格间隔。
align为居中属性，包括left，right，center，justify。
预格式标签
预标签为<pre>，预标签内的格式将会不变地显示在html中。
字体标签
1 | <font color="red">红色</font> |
红色
#0000ff
7号字
濑户字体
修饰标签
1 | <b>加粗</b><strong>加粗</strong> |
加粗加粗
斜体斜体删除线删除线删除线
下标上标
样式
<font>，color，bgcolor，align等是已被废弃的标签好属性，现在使用style样式作为替代。
1 | <p style=" |
锐字真言蓝色30像素
关于颜色，可以使用颜色名或者rgb，如rgb(0,0,0)、rgba(0,255,0,.5)，#bbffaa可以简写为#bfa。除了rgb也可以使用hsl值。
实体
浏览器会把多个空格显示为一个空格。
| 显示结果 | 描述 | 实体名 | 实体编号 |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| “ | 引号 | " |
" |
| ‘ | 撇号 | ' |
' |
图片
图片使用<img/>。
src属性确定图片的路径，可以使用相对路径或绝对路径，./表示当前路径，../表示上一级目录。
align属性控制图片和文字的对齐方式，包括bottom、top、middle。
width和height控制宽度和高度，默认为保持宽高比。图片可以使用像素px或百分比，百分比指的是相对于父容器的百分比。em是以字体为单位，1 em = 1 font-size；rem是相对于根元素，也就是<html>的字体大小。
alt设置图片无法读取时的提示。
<img src="pic01.png" width="100px" />
<img src="pic01.png" width="20%" />
<img alt="提示" />
可以用base64编码图片。
音视频
音视频和图片类似，分别使用<audio>和<video>。默认不允许用户控制，需要controls属性；自动播放使用autoplay，不过大部分网站不自动播放，loop设置循环播放。
1 | <audio src="Luv letter.mp3" controls></audio> |
有些浏览器不支持<audio>，可以这样写，增强兼容性。其中<embed>是现在不常用的播放标签。
1 | <audio controls> |
音频视频由于较大，一般不放在服务器中，通常使用音视频托管或音视频网站。
1 | <iframe src="//player.bilibili.com/player.html?aid=38173887&cid=67101682&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> |
列表
无序列表
1 | <ul> |
- Coffee
- Milk
type属性用于控制列表的标头，包括disc、circle和square。
有序列表
1 | <ol> |
- Coffee
- Milk
type属性用于控制列表的标头，默认为数字，小写字母”a”，大写字母”A”，大写罗马数字”I”，小写罗马数字”i”。
可以用start属性控制初始值，如start="10"，10表示从第10个标号开始。
自定义列表
1 | <dl> |
- Coffee
- Black hot drink
- Milk
- White cold drink
超链接
1 | <a href="http://www.baidu.com">进入百度</a> |
超链接可以为内部链接或外部链接。
图片、文字等其他结构都可以加入超链接。
1 | <a href="http://www.baidu.com"><img src="baidu.png" width="30%" /></a> |
target属性包含_blank和_self，前者为新建标签页，后者在当前页面跳转。也可以使用框架名，用于框架的跳转。
title属性确定鼠标悬浮信息。
name属性用于定义名字，可以用于跳转时的锚点，声明锚点可以使用空白超链接，路径使用”#”，空白超链接可以用于回到顶部。锚点内可以不写任何东西。锚点可以跟在路径之后，作为路径的一部分。
也可以使用id属性，id是元素的唯一标识，同一页面中不能出现重复的id。
1 | <a href="#" name="anchor"></a>锚点 |
没有任何用处的超链接<a ref="javascript:;">，可以用作占位。
超链接可以用于下载文件，浏览器会自动进行识别。
超链接可以用于指向邮件地址，此时在路径前加mailto:，
1 | <a href="mailto:Team_XYZ@Outlook.com">联系我们</a> |
表格
1 | <table> |
| 表头 | 单元格 |
|---|
<table>的属性有：border属性设置边框的宽度，宽度为width，高度为height，居中为align，背景颜色为bgcolor，cellspacing为单元格之间的间距，cellpadding为单元格内容与单元格边框的间距。
<tr>可以设置宽度和高度，背景颜色bgcolor，内容的对齐方式包括align和valign，分别表示水平对齐和垂直对齐。
当有两个冲突的属性时，如果两个属性的作用范围相同，则取父标签的属性，反之则取子标签的属性。
合并在<td>中进行，列合并使用colspan属性，行合并使用rowspan。
1 | <table border="2px" bgcolor="#f0f0f0"> |
| 动力铁轨数\矿车类型 | 非运矿车 | 货运矿车 | 客运矿车 | 动力矿车 |
|---|---|---|---|---|
| 1 | 单格模型 | 多格模型 | ||
| 多格（未达到阈值） | 多格模型 | |||
| 多格（达到阈值） | 不存在 | 阈值模型 | 不存在 | |
对长表格，可以给表格分部分，使用<thead>，<tbody>和<tfoot>。如果表格中没有<tbody>，浏览器会自动创建<tbody>，所以<tr>并不是<table>的子元素。
1 | <table> |
| 事项 | 支付方式 | 价格 |
| 早餐 | 微信 | 6.00 |
| 午餐 | 一卡通 | 12.00 |
| 饮料 | 微信 | 4.50 |
| 晚餐 | 一卡通 | 6.80 |
| 雪糕 | 微信 | 10.00 |
| 图书 | 微信 | 51.00 |
| 总计 | 90.30 |
表单
表单使用<form>，action属性用于指定提交的地址。
输入框
输入框控件<input />，输入类型包括text、password等，value设置默认值，maxlength为最大字符长度，placeholder为提示信息，默认值会覆盖提示信息。必须指定name属性，否则无法提交。
1 | <form><input type="text" name="username" placeholder="邮箱/手机号/用户名" /></form> |
autocomplete="off"关闭自动补全readonly只读disabled禁用，不会提交autofocus表单项自动获取焦点
单选框
单选框使用<input type="radio" />，需要设置相同的名字来保证单选，value确定单选的值，checked设置默认单选的值。
1 | <input type="radio" name="sex" value="male" />男 |
男
女
保密
多选框
多选框使用<input type="checkbox" />。
爱好：
唱
跳
rap
篮球
按钮
- 提交按钮
<input type="submit" /> - 重置按钮
<input type="reset" />
提交按钮和重置按钮的作用范围是本表单。
- 普通按钮为
<input type="button" /> - 图片按钮为
<input type="image" />
value可以修改显示名。
可以使用<button>实现类似效果，如
1 | <button type="submit">注册</button> |
隐藏控件
隐藏控件使用<input type="hidden" />，不向客户显示，可以向服务器传输数据。
颜色选择框
<input type="color" />
兼容性不是很好。
下拉菜单
下拉菜单使用<select>，每一个选择项使用<option>，默认选择项使用属性selected。size属性确定单页选项的个数，multiple可以多选。
文本域
文本域使用<textarea>。rows设置行数，cols设置列数。
1 | <textarea rows="5" cols="40" placeholder="请输入文本。" name="message"></textarea> |
文件上传控件
文件上传使用<input type="file" />
表单属性
表单属性在<form>标签中设置。
action表示提交路径，默认提交给当前页面，可以提交给Jsp或Servlet处理。
method为提交方式，包括get和post，前者以链接方式提交，表现为在链接后问号追加表单信息；后者封装成包使用http请求发送表单，适合大量数据或敏感数据加密。
enctype为对表单信息的编码。默认为application/x-www-form-urlencoded，在发送前编码所有字符；multipart/form-data不对字符编码，在文件上传时需要使用这种编码；text/plain仅把空格变为加号，不对特殊字符编码。
框架
框架允许网页在一个页面上显示多个网页。主要用于后台管理系统。框架使用<frameset>，其与<body>同级。
<iframe>是内联框架，相当于网页中嵌套网页，和图片类似，现在不常用了。
1 | <html> |
article_txt