WWW=URL+HTML+HTTP，它们都由 Tim Berners-Lee 发明。
工具与教程
- 教程
- 代码美化
- 代码检查
- 在线编写
- 运行
- http-server(npm)
- parcel(npm)
1
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
1
2
3
4
5
6
7
|
{
"html": {
"snippets": {
"meta:vp": "meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}, minimum-scale=${3:1.0}, maximum-scale=${4:1.0}, user-scalable=${5:no}']"
}
}
}
|
调试手机网页
无线调试
- 手机和电脑连接同一个 WIFI
- 在电脑运行
hs -c-1
- 在手机访问 http-server 给出的网址
有线调试（安卓）
- 开启 USB debugging
- 用 USB 线连接手机和电脑
- 在手机开启远程调试（Firefox）
- 在电脑浏览器（Firefox/Chrome）连接手机
电脑浏览器调试
在 Chrome/Firefox 的 (web) developer tools 可以模拟手机、平板等设备。
章节标签
<h1>~<h6> heading 标题
1
2
3
|
<h1>一级标题</h1>
<h2>二级标题</h2>
|
<section> 节
1
2
3
4
|
<section>
<h2>HTML 简介</h2>
<p>HTML 由 Tim Berners-Lee 发明。</p>
</section>
|
<article> 文章
<article> 是可重复使用的结构。
1
2
3
4
5
6
7
8
9
10
11
|
<header>
<p>顶部广告</p>
</header>
<main>
<h1>如何入睡</h1>
<ol>
<li>关灯</li>
<li>闭眼</li>
</ol>
</main>
|
1
2
3
4
5
6
7
8
9
10
|
<article>
<h1>如何入睡</h1>
<ol>
<li>关灯</li>
<li>闭眼</li>
</ol>
<footer>
<p>© 2021 Cyrus</p>
</footer>
</article>
|
<main> 主要内容
1
2
3
4
5
6
7
8
9
10
11
|
<header>
<p>顶部广告</p>
</header>
<main>
<h1>如何入睡</h1>
<ol>
<li>关灯</li>
<li>闭眼</li>
</ol>
</main>
|
<div> Division
1
2
3
|
<div class="warning">
<p>小心火烛。</p>
</div>
|
<aside> Aside
1
2
3
4
5
6
7
8
|
<h1>如何入睡</h1>
<ol>
<li>关灯</li>
<li>闭眼</li>
</ol>
<aside>
<p>参考资料</p>
</aside>
|
内容标签
<p> Paragraph 段落
<ol> Ordered List 有序列表
1
2
3
4
5
|
<ol>
<li>吃饭</li> <!-- li = list item -->
<li>睡觉</li>
<li>打豆豆</li>
</ol>
|
<ul> Unordered List 无序列表
<li>: list item
1
2
3
4
5
|
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
|
<dl> Description List 描述列表
<dt>: description term<dd>: description details
1
2
3
4
|
<dl>
<dt>动漫</dt>
<dd>动画和漫画</dd>
</dl>
|
<pre> Preformatted Text
1
2
3
|
<pre>
这里的多个 空格会被保留。
</pre>
|
<code>
<code> 使用等宽字体，被 <pre> 包裹时能换行。
1
2
3
4
5
6
|
<pre>
<code>
var a = 1
console.log(a)
</code>
</pre>
|
<hr> Thematic Break (Horizontal Rule) 分割线
1
2
3
|
<p>更新：新内容</p>
<hr>
<p>原来的内容</p>
|
<br> Line Break 换行
<a> Anchor 链接
1
|
<p>点击访问<a href="https://bing.com">必应</a></p>
|
href 跳转目标
- 网址
- 带协议
http(s)://cyrusyip.org
- 无协议
//cyrusyip.org
- 路径
- 绝对路径
/a/b/c.html
- 相对路径
a/b/c.html ./index.html
- 伪协议
javascript:code;
javascript:alert(1);- 无用按钮
javascript:;
mailto:email-addresstel:phone-number
- 刷新按钮
- id
target
target 指定打开页面的方式。
_blank 空白页面/新页面_self 当前页面_top 顶层页面（跳出 iframe）_parent 上一层页面abc 若 abc 不存在，则创建 abc 页面。若存在，则在 abc 页面打开。
其他
- download 下载网页（部分浏览器不支持，不建议使用）
- rel=noopener
<em> Emphasis 强调
默认是斜体。
1
|
<p>I love <em>Kubuntu</em>.</p>
|
发送 GET 或 POST 请求，并刷新页面。
<form> 必须有 type="submit" 才能触发 submit 事件<buttom> 默认 type="submit"- 一般不监听 input 的 click 事件
属性
| 名称 |
作用 |
| action |
提交内容的 URL |
| autocomplete |
自动补全 |
| method |
请求方法 |
| target |
指定打开页面的方式，和 <a> 的用法一样 |
<button> 里面可以写内容，例如：
1
|
<button type="submit"><strong>提交</strong></button>
|
事件
<iframe> Inline Frame 内嵌窗口
过时技术，不推荐使用。
1
|
<iframe src="//bing.com">Bing</iframe>
|
<img> image 图片
<img> 发出 get 请求并显示图片。
1
|
<img width="400" src="dog.jpg" alt="a dog" />
|
属性
| 属性 |
用法 |
| scr(source) |
图片地址/路径 |
| alt(alternative) |
访问图片失败时显示的文字内容 |
| width |
图片宽度，只写 width 时高度也会自动适应，和 height 同时使用可能导致图片变形。 |
| height |
图片高度，只写 height 时宽度也会自动适应，和 width 同时使用可能导致图片变形。 |
事件
onload 表示加载成功，onerror 表示失败。
1
2
3
4
5
6
7
8
9
10
|
<img id="xxx" width="400" src="dog.jpg" alt="a dog" />
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.jpg";
};
</script>
|
响应式设计
1
2
3
4
5
6
7
8
9
10
|
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
|
让用户输入内容。
类型
-
text 单行文本
-
checklist 复选框，值为「选中」或「未选中」
1
2
|
<input name="hobby" type="checkbox" /><label>吃饭</label>
<input name="hobby" type="checkbox" /><label>睡觉</label>
|
-
color 选择颜色
-
file 上传文件
1
|
<input type="file" multiple />
|
-
hidden 用于给 JS 自动填写
-
password 被遮盖的单行文本
-
radio 单选按钮，选择同一个 name 按钮的其中一个
1
2
3
4
|
<input name="gender" type="radio" />
<label>男</label>
<input name="gender" type="radio" />
<label>女</label>
|
属性
| 属性 |
作用 |
| name |
必须填写，否则表单不会提交 |
| required |
强制用户填写，不填写则禁止提交 |
事件
- onchange 改变内容
- onfouse 光标聚焦
- onblur 光标失焦
<strong> Strong Importance 重点
默认是粗体。
1
|
<p>I love <strong>Kubuntu</strong>.</p>
|
<select> 菜单选项
1
2
3
4
5
|
<select>
<option value="">-请选择上课时间-</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
|
<q> Inline Quotation
默认用双引号包裹内容。
1
|
<p>无门说：<q>若无闲事挂心头，便是人间好时节</q>。</p>
|
table 表格
| 标签 |
含义 |
<thead>、<th> |
table header |
<tbody> |
table body |
<tfooter> |
table footer |
<tr> |
table row |
<td> |
table data |
<thead>、<tbody>、<tfooter> 可以不按顺序写。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<table>
<thead>
<tr>
<th>项目</th>
<th>花费</th>
</tr>
</thead>
<tbody>
<tr>
<td>牛肉</td>
<td>20</td>
</tr>
<tr>
<td>鸡胸肉</td>
<td>10</td>
</tr>
</tbody>
<tfoot>
<th>总计</th>
<td>30</td>
</tfoot>
</table>
|
table 样式
1
2
3
4
5
6
7
8
9
10
11
|
table {
width: 600px;
table-layout: auto; <!--表格布局算法-->
border-spacing: 0px; <!--单元格间隙-->
border-collapse: collapse; <!--是否合并边框-->
}
td,
th {
border: 1px solid blue;
}
</style>
|
<textarea> 多行文本框
1
|
<textarea style="resize: none; width: 50%; height: 300px"></textarea>
|
<blockquote> Block Quotation 块级引用
1
|
<p>无门说：<blockquote>若无闲事挂心头，便是人间好时节</blockquote>。</p>
|
全局属性
class
1
2
3
4
5
6
7
8
9
10
11
12
|
<head>
<meta charset="UTF-8">
<style>
.note {
background: rgb(255, 0, 0, .25);
padding: 10px;
}
</style>
</head>
<body>
<p class="note">笔记内容</p>
</body>
|
contenteditable 让内容可编辑
1
2
3
|
<blockquote contenteditable="true">
<p>写下你的座右铭。</p>
</blockquote>
|
hidden 隐藏内容
id(identifier) 标识符号
id 应该是唯一的。尽量避免使用 ID，因为 ID 不报错。
1
2
3
|
<body>
<p id="exciting">震惊，二十岁小伙住处门前放着一百万，到底有何阴谋？</p>
</body>
|
style 使用 css 样式
1
2
3
4
|
<p style="text-align: center;">
若无闲事挂心头<br>
便是人间好时节
</p>
|
tabindex
tabindex 决定了按下 Tab 键后的跳转顺序。
1
2
3
4
|
<p tabindex="0">最后</p>
<p tabindex="1">第一</p>
<p tabindex="2">第二</p>
<p tabindex="-1">跳过</p>
|
title
光标停放在标签时显示额外的内容。
1
|
<p title="动画和漫画">动漫</p>
|
文章作者
叶寻 | Cyrus Yip
上次更新
2021-11-01
(43e3cd2)