比较简单的前端基础入门HTML代码
那么今天工作之余，我自己整理了一些比较简单的前端入门代码，主要是HTML的标签，希望帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。
最常见的网页结构
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>前端基础之HTML入门速成</title> </head> <body> <h1>你今天码代码了吗？</h1> </body> </html>
这其实就是最简单的网站，你可以自己再一个txt文本文档里敲，然后把后缀名改成html，这就是个最最基础的网站。
HTML元素
元素是HTML的最基本部件，由成对尖括号<>及括号间的内容组成。例如：
<h1>你今天码代码了吗？</h1>
这里尖括号里的h1表示的是网页字体，一共分为6个部分，从h1-h6，字体由大变小，不过要注意一个网页里只能出现一个h1，所以平时我们开发网页的时候都不用h1标签，用的是font-size来表示字体的大小。
基本元素
(文字粗细，斜体，上/下标，链接，加载图片，删除线，下划线)
<!DOCTYPE html> <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 /> </body> </html>
上述元素包括文字粗细，斜体，上/下标，链接，加载图片，删除线，下划线等。以上代码运行后，如图：
表格
如何生成表格?
会用到以下标签,<table></table>,<tr>行标签设置</tr>,<tr>列标签设置</tr>,<th>表头标签设置</th>
<!DOCTYPE html>
<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>这些代码运行出来的表格：
列表(有序列表/无序列表/嵌套列表)
有序列表
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>教程</title> </head> <body> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li> </ol> </body> </html>
运行结果：
无序列表
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>教程</title> </head> <body> <ul type="A"> <li>苹果</li> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li> </ul> </body> </html>
嵌套列表
<!DOCTYPE html> <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>
运行结果：
<style>和<script>
style元素可以给HTML增加css样式，如果说html代表网页的内容，那么css就是给内容穿上好看的衣服。
<!--给表格加样式--->
<style type="text/css">
th {background-color:lightskyblue;color: #255e95}
</style>以上是给表格增加背景色的代码，一般这段加在HTML的之间
加入css样式有三种形式：内联样式，内部样式表，外部样式表
内联样式：
<h1 style="font-family:arial;"> 文字文字文字</h1>
内部样式表：
<style type="text/css">
body {background-color:yellow;}
</style>外部样式表：
<link rel="stylesheet" type="text/css" href="kaifacms.css">
至于script脚本，也叫javascript(这个名字和java没啥关系，纯粹是因为javascript诞生的时候刚好碰到java大火，所以借用了名字而已)，这个我们就下一期再说，因为这个也是前端开发里最关键的内容。
最后，如果有计划学习前端编程的朋友，可以加一下我的学习QQ群：201010290，群内有前端编程的学习教程!
THE END
如果你的问题还没有解决，可以加入交流群和群友一起讨论。如果想请站长喝杯咖啡，点击打赏按钮扫码赞赏~
发表评论