前端基础之HTML入门速成(简单的标签学习)

web前端基础 专栏收录该内容
1 篇文章 0 订阅

昨天有粉丝私信我,说我分享的哪些教程好多都比较抽象,代码也看不懂,还有电子书,也不知道从哪个开始看起,觉得很迷茫。

图片

那么今天工作之余,我自己整理了一些比较简单的前端入门代码,主要是HTML的标签,希望帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。


一. 最常见的网页结构

<!DOCTYPE html>
<html>
 <head>
 <meta charset='utf-8'>
 <title>开始HTML</title>
 </head>
 <body>
 <h1>你今天码代码了吗?</h1>
 </body>
</html>
//领取web前端教程可以加QQ群:924393998领取哦,免费的
 

这其实就是最简单的网站,你可以自己再一个txt文本文档里敲,然后把后缀名改成html,这就是个最最基础的网站。

 

二. HTML元素

 

 

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

 

<h1>你今天码代码了吗?</h1>。

 

这里尖括号里的h1表示的是网页字体,一共分为6个部分,从h1-h6,字体由大变小,不过要注意一个网页里只能出现一个h1,所以平时我们开发网页的时候都不用h1标签,用的是font-size来表示字体的大小。

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

<!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 />
    <br />
    <br />
    <br />
    <br />
    <br />

</body>
</html>
//扣扣群924393998里有前端教程哦
 

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

图片

2.2 表格

如何生成表格?

会用到以下标签<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>

//扣扣群:924393998里面有前端教程免费领取哦,还有前端直播课呢

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

 

图片

 

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

 

2.3.1 有序列表

<!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>
//扣扣群:924393998里面有前端教程免费领取哦,还有前端直播课呢

运行结果:

 

图片

有序列表-水果

 

2.3.2 无序列表

<!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>
//扣扣群:924393998里面有前端教程免费领取哦,还有前端直播课呢

 

 

无序列表-水果 

 

2.3.3 嵌套列表

<!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>
//扣扣群:924393998里面有前端教程免费领取哦,还有前端直播课呢
 

图片

 

2.4  <style>和<script>

  • style元素可以给HTML增加css样式,如果说html代表网页的内容,那么css就是给内容穿上好看的衣服。

<!--给表格加样式--->
<style type="text/css">
th {background-color:lightskyblue;color: #255e95}
</style>
//扣扣群:924393998里面有前端教程免费领取哦,还有前端直播课呢
以上是给表格增加背景色的代码,一般这段加在HTML的<head></head>之间

加入css样式有三种形式:内联样式,内部样式表,外部样式表

内联样式:<h1 style="font-family:arial;"> 文字文字文字</h1>内部样式表:<style type="text/css"> body {background-color:yellow;}  </style>外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">

 

至于script脚本,也叫javascript(这个名字和java没啥关系,纯粹是因为javascript诞生的时候刚好碰到java大火,所以借用了名字而已),这个我们就下一期再说,因为这个也是前端开发里最关键的内容。

 

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

 

 

 

图片

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值