前言
文档 深入学习 HTML: HyperText Markup Language | MDN
参考教程:为初学者准备的:HTML 速成_哔哩哔哩_bilibili
开始前的准备
浏览器
编辑器
- Visual Studio Code
- Sublime Text
- Atom.io
codepen.io 即时编辑代码平台 | 菜鸟教程 | 码上掘金
什么是HTML
HyperText Markup Language (超文本标记语言)
不是编程语言
告诉浏览器如何构造网页
逐步认识组成
developer.mozilla.org/en-US/docs/…
主要构成
——解释文档类型,html5
块级元素与内联元素 Inline Block level element
块级元素
- 在页面以块的形式展现
- 出现在新的一行
- 占全部宽度
div h1-h6 p 块 标题 段落
内联元素
- 通常在块级元素内
- 不会导致文本换行
- 只占必要的部分宽度
属性 attribute
developer.mozilla.org/en-US/docs/… 全局属性
developer.mozilla.org/en-US/docs/… 特定属性
写在起始标签
基础标签
列表 ul ol li
<!-- Lists -->
<!-- unorder list -->
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<!-- order list -->
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ol>
表格 table thead tr th tbody tr td
<!-- Table -->
<table>
<thead>
<!-- table row -->
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<!-- table data -->
<td>Louis</td>
<td>wxl</td>
<td>22</td>
<td>louis_wxl@outlook.com</td>
</tr>
<tr>
<!-- table data -->
<td>Louis</td>
<td>wxl</td>
<td>22</td>
<td>louis_wxl@outlook.com</td>
</tr>
<tr>
<!-- table data -->
<td>Louis</td>
<td>wxl</td>
<td>22</td>
<td>louis_wxl@outlook.com</td>
</tr>
</tbody>
</table>
表单 form
<!-- Forms -->
<form action="form.js" method="post">
<div>
<label>First name</label>
<input type="text" name="firstname" placeholder="Enter First Name">
</div>
<div>
<label>Last Name</label>
<input type="text" name="lastname" placeholder="Enter Last Name">
</div>
<div>
<label>Email</label>
<input type="email" placeholder="Enter Email">
</div>
<input type="submit" name="submit" value="Submit">
</form>
按键 button
<!-- Button -->
<button>This is a Button</button>
图片 img
<!-- Image -->
<img style="width: auto;" src="img/img.jpg" alt="This is a img tag">
<!-- 文件夹img下图片 通过style调整大小 alt为找不到该图时显示的内容 -->
引言 blockquote
<!-- Quotion -->
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse adipisci autem placeat modi a ab tempore optio veniam. Numquam odio rerum magnam libero eius id ut, itaque quia dolore.</blockquote>
缩写说明 abbr
<p><abbr title="Central South University (CSU) is situated in Changsha, a famous historical and cultural city in Hunan, China, and covers an area of 2,760,000 m2, with its campuses distributed on the east and west of Xiangjiang River. Backed by the majestic Yuelu Mountain and facing the grand Xiangjiang River, CSU has pleasing scenery and is ideal for study and research.">CSU</title></abbr> is a good collage</p>
引用说明 cite
<p><cite>CSU is a good collage</cite> by xxx</p>
进阶提高 查阅文档
TIps 快捷技巧Tips 快捷技巧
VSCode
CTRL + ? -快捷注释
shift + alt + 方向键 -快速复制
alt + 方向键 -调整位置
alt + b - 默认浏览器打开