一个网页包括 HTML、CSS、JavaScript。
- HTML：定义网页的结构和信息
- CSS：定义网页的样式
- JavaScript：定义用户和网页的交互逻辑
HTML 是什么
1
2
3
4
| <!DOCTYPE HTML> //告知浏览器这是一个 HTML
<html>
xxx //往里面填内容
</html>
|
HTML 常用标签
标题
1
2
3
4
5
6
| <h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
|
文本段落
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <p>给岁月以文明</p>
<p>而不是给文明以岁月</p>
---
换行的方式：
1.给多个<p>xxx</p>标签
2.在换行处加入<br>标签。
---
文本操作：
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
|
图片、链接
1
2
3
4
5
| <img src="xxx" width="500px" height="500px">
<a href="xxx" target="_self">xxx</a>
//前面 xxx 是地址，后面 xxx 是你想要它显示的名字
//属性（可填可不填）target="_self"：表示在当前页面打开;target="_blank"：表示在新页面打开
|
容器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div>
<a href="xxx">div元素下的链接1</a>
<a href="xxx">div元素下的链接2</a>
</div>
---
<span>
<a href="xxx">span元素下的链接1</a>
<a href="xxx">span元素下的链接2</a>
</span>
---
行内
<a href="xxx">我是<div style="background-color:red;">一个</div>红色<div style="background-color:red;">链接</div></a>
<a href="xxx">我是<span style="background-color:red;">一个</span>红色<span style="background-color:red;">链接</span></a>
|
把标签放到容器里，这样做的一个好处是，如果想要全部应用 CSS 样式，可以直接在容器上添加。
两者的区别是 div 是块级元素，独占一行，span 是内联元素，一行可以有多个元素。
有序 / 无序列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
---
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
---
//ol=ordered list
//ul=unordered list
//li=list
|
表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <table> //表格
<thead> //表头
<tr> //定义表格行
<td>表头1</td> //定义单元格数据
<td>表头2</td>
</tr>
</thead>
<tbody> //表主体
<tr>
<td>111</td>
<td>333</td>
</tr>
<tr>
<td>222</td>
<td>444</td>
</tr>
</tbody>
</table>
---
//属性：可以给表格加边框
<table border="2">
xxx
</table>
|
class 属性
帮助分组。如
1
2
| class="content"
class="review"
|
