15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML入门速成

HTML入门速成

时间:2023-09-28 00:48:02 | 来源:网站运营

时间:2023-09-28 00:48:02 来源:网站运营

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


一. 最常见的网页结构

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>开始HTML</title> </head> <body> <h1>你今天码代码了吗?</h1> </body></html>以上代码保存为.html格式,然后用浏览器打开即为最简单的网页。可以试一试~




二. HTML元素




元素是HTML的最基本部件,由成对尖括号<>及括号间的内容组成。例如:<h1>你今天码代码了吗?</h1>。

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

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>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>
有序列表-水果
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>
无序列表-水果
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>2.4 <style>和<script>

<!--给表格加样式---><style type="text/css">th {background-color:lightskyblue;color: #255e95}</style>以上是给表格增加背景色的代码,一般这段加在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">




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




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

关键词:速成,入门

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭