HTML 基础总结
2018-07-28 本文已影响15人
千反田爱瑠爱好者
我不记得这是第几次开始学习HTML了，但不得不承认直到现在还是有很多问题都没搞清楚，所以不得不重新梳理一遍...
版本
- HTML 4.01
- XHTML
- HTML 5
- HTML 5.1
版本规范文档（W3C制定）：https://www.w3.org/TR/html5/
而所谓H5其实是能运行在微信上的网页的统称。
标签
- 常用的标签标签：a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg，一般来说从名字判断意思就可以了。
- 标签用法查询：https://developer.mozilla.org/en-US/
- HTML不需要区分块级元素和内联元素（通过CSS控制）；
- 必须写DOCTYPE，且与版本对应（如HTML 5就是<!DOCTYPE html>），否则会出现奇怪的问题，关于DOCTYPE：https://www.w3.org/QA/2002/04/valid-dtd-list.html
- <div>和<span>没有任何意义，需要通过类、样式控制，只有桌面元素没有对应语义的标签时才使用这两个；
一些常见的标签
- 标签属性、用法见MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/
- 重要知识点：
- 空标签
- 可替换标签
- 全局属性
- display 不止 3 种
1. iframe
嵌套页面（目前已很少使用）
<iframe src="#" name="xxx" frameborder="0"></iframe>
<a target="xxx" href="http://qq.com"> <!-- 点击链接在iframe打开页面 -->
2. a
跳转页面（HTTP GET 请求），常用属性：
- taget：开启目标链接的位置
- _blank：空页面
- _self：当前页面（iframe）
- _parent：父页面（iframe的父页面）
- _top：顶层页面
- href：跳转的链接
- 绝对地址：http://qq.com（安装http-server可通过本地server方式打开：npm i -g http-server; hs -c-1）；
- 相对地址：qq.com（“//qq.com”则根据当前页面的协议，默认为file）；
- 锚点：#xxx（页内跳转，不发起请求）；
- 伪协议：javascript:;（点击后什么都不做，不发请求）
- download：下载目标链接（或指定content-type： application/octet-stream）
3. form
跳转页面（HTTP POST 请求），常用属性：
- action：提交请求目标链接；
- target：与a标签的target属性含义相同；
- method：发起请求的类型（可发送get、post请求，默认为get）;
- 其中get方法会把参数放在查询参数（不能放在第四部分），post方法默认把参数放在form data中（也可以放在查询参数，即URL中）。
<form action="index.html" method="post"> <!-- 注意file协议不支持post -->
<label>用户名：</label><input type="text" value="username" name="username"> <!-- 英文数字以外字符都会转义成unicode -->
<label>密码：</label><input type="password" value="password" name="password"> <!-- 注意HTTP是明文传输 -->
<!-- 同一组多选框和单选按钮通过name标识 -->
喜欢的水果：
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
<label><input type="checkbox" name="fruit" value="apple">苹果</label>
<!-- for指向<input>的id，也可以直接把<input>包括在<label>中 -->
<label><input name="ok" type="radio" value="yes">是</label>
<label><input name="ok" type="radio" value="no">否</label>
<select multiple>
<option value="">-</option>
<option value="1">第1组</option>
<option value="2">第2组</option>
<option value="3" disabled>第3组</option>
<option value="4" selected>第4组</option>
</select>
<!-- 文本框默认可以随意拉动大小，使用css控制 -->
<textarea style="resize:none; width: 200px" name="爱好" cols="30" rows="10"></textarea>
<input type="submit" value="提交"> <!-- form标签内部必须又submit类型的input按钮，否则无法发起请求 -->
</form>
4. input / button
区别：是否为“空标签”
- 当form中只有一个<button>，缺省行为是submit；
- 当form中只有一个<button type="button">，无缺省行为，该表单无提交按钮；
- 当form中只有一个<input type="button">，无缺省行为，该表单无提交按钮。
5. table
数据展示
<table border="1" style="border-collapse: collapse">
<colgroup>
<col width=100>
<col width=150>
<col width=150>
<col width=100>
</colgroup>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>班级</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<th></th><td>小红</td><td>2</td><td>3</td>
</tr>
<tr>
<th></th><td>小蓝</td><td>2</td><td>3</td>
</tr>
<tr>
<th>平均分</th><td></td><td>2</td><td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th><td></td><td>2</td><td>3</td>
</tr>
</tfoot>
</table>
展示效果：
| 姓名 | 班级 | 分数 | |
|---|---|---|---|
| 小红 | 2 | 2 | |
| 小蓝 | 2 | 3 | |
| 平均分 | 2 | 3 | |
| 总分 | 2 | 3 |
布局
- 设计标签时可以考虑以后如何更方便设计CSS布局，只使用横向布局或纵向布局（不混合，如横向布局的div加入要换行排放的div时，应该嵌套一层div，与后面的div纵向排放）；
- 设计页面时先只写HTML，考虑的是使用什么标签、如何排版而忽略样式；
布局设计示例
参考：http://rscardwp.px-lab.com/
<!DOCTYPE html>
<!-- HTML中<html>、<head>都可以省略，<body>在没有注释的前提下可以省略，但<title>是必须存在才合法的； -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>YWH的个人简历</title>
</head>
<body>
<!-- 导航栏 -->
<div class="topNavBar">
<img src="#" alt="logo"/>
<nav>
<ul> <!-- 无序列表，设计时不需要考虑是竖排还是横排，后面通过CSS控制即可 -->
<li><a href="#"></a>ABOUT</a></li>
<li><a href="#"></a>SKILL</a></li>
<li><a href="#"></a>EXPERIENCE</a></li>
<li><a href="#"></a>PRICING</a></li>
<li><a href="#"></a>BLOG</a></li>
<li><a href="#"></a>CALENDAR</a></li>
<li><a href="#"></a>CONTACT</a></li>
<li><a href="#"></a>OTHER</a></li>
<li><a href="#"></a>ALL DEMOS</a></li>
</ul>
</nav>
</div>
<!-- 横幅 -->
<div class="banner" style="background-image: url(#)"></div>
<main>
<div class="card">
<div class="picture">
<img src="" alt="头像">
</div>
<div class="text">
<div class="profile">
<span class="welcome">Hello</span>
<h1>YWH</h1>
<p>前端开发工程师</p>
<hr>
<dl> <!-- 定义列表 -->
<dt>年龄</dt>
<dd>18</dd>
<dt>所在城市</dt>
<dd>广州</dd>
<dt>邮箱</dt>
<dd>88803888@qq.com</dd>
<dt>手机</dt>
<dd>13812345678</dd>
</dl>
</div>
<footer class="media">
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
</div>
</div>
</div>
<!-- 注意点击跳转到另一个页面的是链接，弹出对话框之类的才是按钮，而不是根据外观区分 -->
<a class="button" href="#">下载PDF简历</a>
<p>
YWH...
</p>
</main>
<!-- 章节 -->
<section>
<h2>专业技能</h2>
<ol>
<li>HTML 5 & CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue</li>
<li>React</li>
<li>HTTP</li>
</ol>
</section>
<section>
<h2>作品集</h2>
<nav>
<ol>
<li>所有</li>
<li>框架</li>
<li>原生</li>
</ol>
</nav>
<div class="jobs">
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</section>
</body>
</html>
