工作之中，经常需要自己写一些简单的网页，那么，就需要有一定的前端代码能力。HTML，CSS,JavaScript等皆是最常用的前端代码，本小节即学习笔记，帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。

一. 最常见的网页结构

<html>
 <head>
 <meta charset='utf-8'>
 <title>开始HTML</title>
 </head>
 <body>
 <h1>你今天码代码了吗？</h1>
 </body>
</html>

以上代码保存为.html格式，然后用浏览器打开即为最简单的网页。可以试一试~

二. HTML元素

元素是HTML的最基本部件，由成对尖括号<>及括号间的内容组成。例如：

你今天码代码了吗？

。

2.1 基本元素（文字粗细，斜体，上/下标，链接，加载图片，删除线，下划线）

上述元素包括文字粗细，斜体，上/下标，链接，加载图片，删除线，下划线等。以上代码运行后，如图：

<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
    <a href="http://www.runoob.com">这是我的第一个链接</a>
    <br />
    <img src="/images/logo.png" width="258" height="28" />
    <br />
    <b>加粗文本</b>
    <br />
    <i>斜体文本</i>
    <br />
    <p>这是<sub>下标</sub></p>
    <p>这是<sup>上标</sup></p>
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

</body>
</html>

2.2 表格

如何生成表格？

会用到以下标签

,行标签设置,列标签设置,表头标签设置

<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<!--给表格加样式--->
<style type="text/css">
th {background-color:lightskyblue;color: #255e95}
</style>
<body>
<table border="1" cellspacing="0" >
<caption>工资单</caption>
<tr>
    <th>年份</th>>
    <th>季度</th>>
    <th>姓名</th>>
    <th>工资</th>>
    <th>奖金</th>>
    <th>个税</th>>
    <th>扣除个税工资</th>>
</tr>
<tr>
    <td rowspan="4">2019</td>
    <td>1</td>
    <td rowspan="4">王建民</td>
    <td>28900</td>
    <td>3458</td>
    <td>3988</td>
    <td>21454</td>
</tr>
<tr>
    <td>2</td>
    <td>27366</td>
    <td>3458</td>
    <td>3988</td>  
    <td>21454</td> 
</tr>
<tr>
    <td>3</td>
    <td>27366</td>
    <td>3458</td>
    <td>3988</td>  
    <td>21454</td> 
</tr>
<tr>
    <td>4</td>
    <td>27366</td>
    <td>3458</td>
    <td>3988</td>  
    <td>21454</td> 
</tr>
</table>
</body>
</html>

2.3 列表(有序列表/无序列表/嵌套列表)

2.3.1 有序列表

<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ol>
</body>
</html>

有序列表-水果 2.3.2 无序列表

<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ul>
</body>
</html>

无序列表-水果 2.3.3 嵌套列表

<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
    <li>苹果</li>
    <ol>
        <li>大苹果</li>
        <li>小苹果</li>
    </ol>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ul>
</body>
</html>

2.4


style元素可以给HTML增加css样式
<!--给表格加样式--->
<style type="text/css">
th {background-color:lightskyblue;color: #255e95}
</style>

以上是给表格增加背景色的代码，一般这段加在HTML的之间

加入css样式有三种形式：内联样式，内部样式表，外部样式表

内联样式：

文字文字文字

内部样式表： body {background-color:yellow;}

外部样式表：

script+脚本

以下是xmind可以帮助大家记忆：

觉得有用的小伙伴记得收藏点赞~

HTML入门速成

你今天码代码了吗？

文字文字文字