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

一. 最常见的网页结构

<html><head><metacharset="utf-8"><title>开始HTMLtitle>head><body><h1>你今天码代码了吗？h1>body>html>

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

二. HTML元素

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

你今天码代码了吗？

。

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

<html><head><metacharset="utf-8"><title>教程title>head><body><h1>我的第一个标题h1><p>我的第一个段落p><ahref="http://www.runoob.com">这是我的第一个链接a><br/><imgsrc="/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>bluedel><ins>redins>!p><br/><br/><br/><br/><br/><br/>body>html>

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

2.2 表格

如何生成表格？

会用到以下标签

,

行标签设置

,

列标签设置

,

表头标签设置 

<html><head><metacharset="utf-8"><title>教程title>head><styletype="text/css">th{background-color:lightskyblue;color:#255e95}style><body><tableborder="1"cellspacing="0"><caption>工资单caption><tr><th>年份th>><th>季度th>><th>姓名th>><th>工资th>><th>奖金th>><th>个税th>><th>扣除个税工资th>>tr><tr><tdrowspan="4">2019td><td>1td><tdrowspan="4">王建民td><td>28900td><td>3458td><td>3988td><td>21454td>tr><tr><td>2td><td>27366td><td>3458td><td>3988td><td>21454td>tr><tr><td>3td><td>27366td><td>3458td><td>3988td><td>21454td>tr><tr><td>4td><td>27366td><td>3458td><td>3988td><td>21454td>tr>table>body>html>

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

2.3.1 有序列表

<html><head><metacharset="utf-8"><title>教程title>head><body><oltype="A"><li>苹果li><li>香蕉li><li>雪梨li><li>西瓜li>ol>body>html>
有序列表-水果

2.3.2 无序列表

<html><head><metacharset="utf-8"><title>教程title>head><body><ultype="A"><li>苹果li><li>香蕉li><li>雪梨li><li>西瓜li>ul>body>html>
无序列表-水果

2.3.3 嵌套列表

<html><head><metacharset="utf-8"><title>教程title>head><body><ultype="A"><li>苹果li><ol><li>大苹果li><li>小苹果li>ol><li>香蕉li><li>雪梨li><li>西瓜li>ul>body>html>

2.4

外部样式表：

  • script 脚本

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。