1. HTML发展史
- HTML是什么
- HyberText Markup Language
- 使用 标签 来描述页面的 内容 和 结构
- HTML 4.01, 1998
- 样式与内容分离，CSS支持
- Doctype（当前页面遵循什么版本）
- Doctype的作用
- 指定html页面使用的标准和版本
- 浏览器根据doctype决定使用哪种渲染模式（不写是怪异模式）
- 渲染模式
- Quirks Mode 怪异模式（html4之前）
- Almost Standard Mode 准标准模式（针对严苛的版本）
- Standard Mode 标准模式
- XHTML 1.0, 2000
- 用XML语法重新定义HTML
- 语法严格要求
- XHTML 2.0
- 不兼容历史，去除样式标签，去除 img a，彻底修改form，开发者不欢迎 浏览器不支持
- HTML 5
- 2008年 html5草案发布
- HTML 5设计思想
- 兼容已有内容
- 避免不必要的复杂性（例如doctype写法简洁化）
- 解决现实问题（本地存储 定位等）
- 优雅降级（canvas里可以写html，根据浏览器支持决定与否解析，或者不支持canvas时图片代替）
- 尊重事实标准
- 用户》开发者》浏览器厂商》标准制定者》理论完美（从用户出发逐层完善）
- HTML 5中的变化
- doctype meta
- 新增语义化标签和属性
- 去掉纯展示型标签
- canvas，video，audio，离线，本地存储，拖拽等
- 语法
- 标签不区分大小写，推荐小写
- 空标签可以不闭合，比如input是通过属性指定的，meta
- 属性不必引号，推荐双引号
- 某些属性可以省略，比如required，readonly
2. HTML中的文本标签
p标签，p会自动闭合，但推荐写闭合
h1 ~ h6
-
hr段落级别的话题切换（横线）
<h3>title</h3> <p>paragraphe of topic one</p> <hr> <p>paragraphe of topic two</p> 复制代码 -
列表
-
有序列表
<h1>university list</h1> <ol start="1"> <li>THU</li> <li>PKU</li> <li>FDU</li> </ol> <!--start属性表示从什么开始--> 复制代码 -
无序列表
<h1>university list</h1> <ul> <li>THU</li> <li>PKU</li> <li>FDU</li> </ul> <!--列表嵌套会产生实心以及空心圆点--> 复制代码 -
定义列表
<h3>霸王别姬</h3> <dl> <dt>导演：</dt> <dd>陈凯歌</dd> <dt>主演：</dt> <dd>张国荣</dd> <dd>张丰毅</dd> <dd>巩俐</dd> <dt>上映日期：</dt> <dd>1993-01-01</dd> </dl> <!--描述键值对--> <!--要遵循嵌套规则，浏览器会容错（其他样式可能会乱）--> 复制代码
-
-
引用
<blockquote cite="http://www.google.com"> <p>paragraphe</p> </blockquote> <p>My favourite color is <cite>golden</cite> , and <q>blue</q> </p> 复制代码 -
预格式化文本
<!--保留格式--> <pre>第一行 空 格 第二行</pre> 复制代码 -
代码
<pre><code></code></pre> <!--格式不变的展示代码--> 复制代码 -
figure
<figure> <img src="https://xxx" alt="xx表"> <figcaption>xx表</figcaption> </figure> 复制代码 -
网页总体结构
<header> <nav></nav> </header> <main> <article> <section> <h2></h2> <p></p> </section> </article> <article></article> </main> <aside></aside> <footer></footer> 复制代码 -
强调
- strong：重要性、严重性和紧急性
- em：从一句话中突出某个词语
- b：将词语从视觉上和其他部分区分，比如一篇论文摘要中的关键词
- i：换一种语调去说一句话时，比如其他语言翻译，对话中的旁白
-
定义与缩写
-
定义：dfn
<p><dfn> HTML是blablabla </dfn></p> 复制代码 -
缩写：abbr
<p><abbr title="World Wide Web Consortium">W3C</abbr></p> 复制代码
-
-
上标和下标
<p>E = MC<sup>2</sup></p> <p>CO<sub>2</sub></p> 复制代码 -
mark
- 和用户当前行为相关的突出，比如在搜索结果中匹配到的词
- 一部分内容需要在后面引用时
-
插入和删除
<p><del>原价：299元</del><ins>双11特价：999元</ins></p> 复制代码 -
换行控制
- 尽量避免，手机上可能会乱，br标签
- wbr标签模拟空格单词换行
-
div和span
- 实在找不到其它更符合语义的标签时使用
实体(Entity)字符
3. HTML链接
<a href="http://www.google.com">google</a>
复制代码
-
- Scheme => http
- Host => www.example.com
- Path => post/2016/fe.html
- Query => print=1&color=no
- Hash => heading
-
省略协议
- 浏览器会根据当前页面的链接的协议补充
<a href="//po.ssl.qhing.com/xxx.png">查看图片</a> 复制代码 -
省略协议和Host
- 浏览器会根据当前页面的链接的协议和host补充
<a href="/index.html">返回首页</a> 复制代码- 调试模式=>选中元素节点=>consol中输入
0.href)
-
相对路径与绝对路径
- href="/a/b/c.html" => 绝对路径
- href="../../c.html" => 相对路径
-
页面内链接（锚点）
<h1>锚点</h1> <p><a href="#test">到test</a></p> <p>0</p><p>0</p> <p>0</p><p>0</p> <p>0</p><p>0</p> <p id="test">test</p> <p><a href="#">回顶部</a></p> <p>0</p><p>0</p> <p>0</p><p>0</p> <p>0</p><p>0</p> 复制代码 -
链接目标
<a href="http://www.google.com" target="_self">google(当前窗口)</a> <a href="http://www.google.com" target="_blank">google(新窗口)</a> <a href="http://www.google.com" target="abc">google(abc)</a> <a href="http://www.baidu.com" target="abc">baidu(abc)</a> 复制代码
4. HTML图片
<img src="path/img.jpg" alt="替代文字" width="300" height="200">
<!--图片未加载时先占位 防止加载变形 有时CSS中指定宽高不合适-->
<figure>
<img src="path/img.jpg" alt="替代文字">
<figcaption>图片说明</figcaption>
</figure>
复制代码
- 指定图片宽高
- 不指定宽高：原图大小显示
- 指定宽度：按比例缩放到指定宽度
- 指定高度：按比例缩放到指定高度
- 指定高宽：强制按指定宽高显示
- 常用图片格式
- jpg 照片，适合色彩丰富的图片
- png 色彩较少时使用，png24可以半透明
- gif 无法半透明，可以多帧做动画
- webp google出的图片压缩格式
5. HTML表格
<table border="1">
<thead>
<tr>
<th>浏览器</th>
<th>渲染引擎</th>
<th>JS引擎</th>
</tr>
</thead>
<tbody>
<tr>
<th>Chrome</th>
<td>Blink</td>
<td>V8</td>
</tr>
<tr>
<th>Opera</th>
<td>Blink</td>
<td>V8</td>
</tr>
<tr>
<th>Firefox</th>
<td>Gecko</td>
<td>SpiderMonkey</td>
</tr>
<tr>
<th>Edge</th>
<td>EdgeHTML</td>
<td>Chakra</td>
</tr>
</tbody>
</table>
复制代码
- 合并行
<table border="1">
<thead>
<tr>
<th>浏览器</th>
<th>渲染引擎</th>
<th>JS引擎</th>
</tr>
</thead>
<tbody>
<tr>
<th>Chrome</th>
<td rowspan="2">Blink</td>
<td rowspan="2">V8</td>
</tr>
<tr>
<th>Opera</th>
</tr>
<tr>
<th>Firefox</th>
<td>Gecko</td>
<td>SpiderMonkey</td>
</tr>
<tr>
<th>Edge</th>
<td>EdgeHTML</td>
<td>Chakra</td>
</tr>
</tbody>
</table>
复制代码
-
表格说明
-
caption是table的第一个元素
<tanble> <caption></caption> <thead></thead> </table> 复制代码
-
-
列组（colgroup）
<colgroup> <col class="browser"> <col class="xxx" span="2"> </colgroup>
6. HTML表单
使用form获取让用户提供数据
<form action="/echo" method="POST">
<p>用户名: <input type="text" name="username"></p>
<p>密码: <input type="password" name="password"></p>
<p><button type="submit">登录</button>></p>
</form>
GET请求:从服务器获取，安全，不会对服务器改动，每次操作返回结果相同，浏览器会缓存get请求，数据传输在url中用键值对拼接（一次性发送）
POST请求: 每次提交数据，会修改，浏览器不会缓存post请求，因为会提交改动，不会把数据放在路径中，会编码后放在http的body中（先发送head再body）
form表单中不写method默认是GET
-
URL编码
- 提交数据中有空格或者/以及+等，会进行转义，再传输会出现%20之类的转义字符
- 解码：js提供decodeURIComponent('a%2Bb&password=a+b') => a+b&password=a+b
-
HTTP method
- GRT/POST/HEAD/PUT/DELETE/OPTIONS
-
单行文本框
<input name="username" value="xyf" autofocus> <!--name是发送数据的key，必填，默认值可以先写value--> <!--placeholder属性--> <!--autofocus 焦点直接移到input框--> -
多行文本框
<textarea cols="40" rows="8"></textarea> -
输入验证
<form action="/echo"> <p><input required minlength="2" maxlength="10"></p> <p><input pattern="1\d{10}" placeholder="输入手机号"></p> <p><button type="submit">提交</button></p> </form> -
type
- type= search/email/url/submit
- 作用：手机端键盘布局，以及验证
-
novalidate禁止原生验证
<form novalidate> </form> -
单选框 radio
<form action="/echo"> <p>你最喜欢什么水果？</p> <p> <input type="radio" name="fruit" value="apple">苹果 <input type="radio" name="fruit" value="banana">香蕉 <input type="radio" name="fruit" value="mango">芒果 </p> <p><button>提交</button></p> </form> -
复选框 checkbox
<form action="/echo"> <p>你最喜欢什么水果？</p> <p> <input type="checkbox" name="fruit" value="apple">苹果 <input type="checkbox" name="fruit" value="banana" checked>香蕉 <input type="checkbox" name="fruit" value="mango">芒果 </p> <p><button>提交</button></p> </form>GET /echo?fruit=apple&fruit=banana&fruit=mango
label标签（提升可用性和易用性）
点击label也可以切换选中元素状态
label也可以与input关联，方便读屏软件识别要求输入内容
label通过for和id进行关联
<form action="/echo">
<p>你最喜欢什么水果？</p>
<p>
<input type="checkbox" name="fruit" value="mango" id="mango">
<label for="mango">芒果</label>
<label>
<input type="checkbox" name="fruit" valeu="apple">苹果
<input type="checkbox" name="fruit" valeu="banana">香蕉
</label>
</p>
<p>
<label for="name">请输入你的名字：</label>
</p>
<p><input id="name"></p>
<p><button>提交</button></p>
</form>
- select标签
<select name="fruit">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
</select>
提交数据：fruit=3
select可以多选，需要command，size是显示个数，不写默认显示一个
<select name="fruit" multiple size="3">
</select>
- select分组
<label>目的城市：</label>
<select name="country">
<optgroup label="美洲">
<option>多伦多</option>
<option >温哥华</option>
<option>里约热内卢</option>
</optgroup>
<optgroup label="亚洲">
<option>北京</option>
<option >上海</option>
<option>新加坡</option>
</optgroup>
<optgroup label="欧洲">
<option>伦敦</option>
<option >巴黎</option>
<option>柏林</option>
</optgroup>
</select>
select分组效果.png
-
隐藏 hidden
希望数据提交但是不在页面上展示
GET/echo?fruit=banana&secret=1<form action="/echo"> <p>你最喜欢什么水果？</p> <p> <input type="checkbox" name="fruit" value="apple">苹果 <input type="checkbox" name="fruit" value="banana" checked>香蕉 <input type="checkbox" name="fruit" value="mango">芒果 </p> <p><button>提交</button></p> <input type="hidden" name="secret" value="1"> </form> 文件选择上传
<form action="/echo" method="POST" enctype="multipart/form-data">
<p>
<label>您的姓名：</label>
<input name="fullname">
</p>
<p>
<label>请选择简历：</label>
<input type="file" name="resume">
</p>
<p><button>提交</button></p>
</form>
multipart分割文件提交接收后再合成
POST /echo
------WebKitFormBounadryMTXE8T65X0 //分割标识+乱码（起始标识）
Content-Disposition: from-data; name="fullname" //form-data表示form表单提交的数据， 第一个input里是fullname
aa //input框的值是aa 会空一行
------WebKitFormBounadryMTXE8T65X0 //第一段结束
Content-Disposition: from-data; name="resume"; filename="resume.txt"
Content-Type: text/plain //文件上传格式
This is my resume. //文件正文上下会空行
------WebKitFormBounadryMTXE8T65X0 //第二段结束
input中加multiple属性可以多选上传
accept 接收文件格式设置
<input type="file" name="resume" multiple accept="image/*">
- 日期时间 date & time
<form action="/echo">
<p>date:<input type="date"></p>
<p>datetime-local: <input type="datetime-local"></p>
<p>month: <input type="month"></p>
<p>week: <input type="week"></p>
<p>time: <input type="time"></p>
</form>
- 数字区间 number & range
<form action="/echo">
<p>
<label>身高(m):</label>
<input type="number" min="0.5" max="2.5" step="0.01" name="height" value="1.7">
</p>
<p>
<label>体重(kg):</label>
<input type="range" min="10" max="150" step="0.1" name="weight" value="62">
<output for="weight"></output> <!--显示拖动数值 for表示源自哪里输入-->
</p>
<p>
<label>BMI:</label>
<output for="weight height"></output>
</p>
</form>
- 颜色选择 color
<input type="color"> //以#xxxx输出
- 提交button
不指定type 提交 => GET/echo?fullname=xxx&fruit=xxx&fruit=yyy
不写type默认submit
type="button" 行为要js实现
type="reset" 清空到最初状态
- form表单中回车默认提交
如果多个button 会默认触发第一个button的submit
disable/readonly状态
-
表单设计原则
- 帮助用户不出错
- 尽早提示错误
- 扩大选择、点击区域
- 控件较多时要分组
- 主要动作和次要动作区分
