codepen.io 在线代码平台
什么是 HTML ？
- HyperText Markup Language（超文本标记语言）
- 不是编程语言
- 告诉浏览器如何构造网页
HTML不处理逻辑内容
<!DOCTYPE html> --> 解释文档的类型
<html>
<!-- 注释 -->
<head> --> Opening Tag
<title>This is a page title</title>
</head> --> Closing Tag
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
...
<h6>Heading Six</h6>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
复制整行快捷键：option + shift + ⬇️
注释快捷键：Command + /
Lorem+数字：自动生成10个填充词（也可不加数字）
更多关于 tag ：developer.mozilla.org/en-US/docs/…
元素
块级元素（Block level Element）
- 在页面以块的形式展现
- 出现在新的一行
- 占全部宽度
例：
<div> <h1>-<h6> <p>
内联元素（Inline Element）
- 通常在块级元素内
- 不会导致文本换行
- 只占必要的部分宽度
例：
<a> <img> <em> <strong>
Attribute
<a href="https://google.com" target="_blank">Lorem</a>
a标签中引入的超链接和target都是 Attribute
更多关于 Attribute ：
列表
无序列表
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
有序列表
<ol>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ol>
Table
<table>
<thead>
<tr> -->row
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jenny</td>
<td>21</td>
</tr>
<tr>
<td>Dasiy</td>
<td>20</td>
</tr>
</tbody>
</table>
Forms
<form action="form.js" method="POST">
<div>
<label>Name</label>
<input type="text" name="Name" placeholder="Enter Name">
</div>
<div>
<label>Age</label>
<input type="number" name="Age" placeholder="Enter Age">
</div>
<input type="submit" name="submit" value="Submit">
</form>
Button
<button>This is a button</button>
Image
<img style="width:100vw" src="./xx.jpg" alt="This is a image tag">
Quatotion
<blockquote>lorem</blockquote>
Abbr
<p><abbr title="注释内容">MIT<abbr>is a prestigious collage</p> -->hover显示
Cite
<p><cite>MIT is a prestigious collage<cite>by Jenny</p> --> 斜体
