比较简单的前端基础入门HTML代码

更新时间:3个月前 作者:CMS开发网 来源:本站 点赞数:0人 阅读数:52次 0 条评论
摘要:那么今天工作之余,我自己整理了一些比较简单的前端入门代码,主要是HTML的标签,希望帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。最常见的网页结构<!DOCTYPEhtml><html><head><metacharset='utf-8'><title>前端基础之HTML入门速成</title&g
比较简单的前端基础入门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>

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

比较简单的前端基础入门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>

这些代码运行出来的表格:

比较简单的前端基础入门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>

运行结果:

比较简单的前端基础入门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>

运行结果:

比较简单的前端基础入门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

如果你的问题还没有解决,可以加入交流群和群友一起讨论。如果想请站长喝杯咖啡,点击打赏按钮扫码赞赏~

版权声明:本站部分教程是由网络收集,然后整理编辑而成,版权归原作者所有,如果由此而造成的侵权,请与我们联系,审核属实后立即删除,谢谢!请与我们联系,审核属实后立即删除,谢谢!

发表评论

发表评论
评论列表 (评论通过审核后才会显示)
暂无评论