HTML网页标签代码基本教学
HTML全名超文本标记语言（Hyper Text Markup Language），可以用来制作网页。它有一套语法规则，通过这些语法规则，就可以设计出丰富多彩的网页了。
首先，HTML标签定义格式为：
<标签名>标签内容标签名>
以<标签名>开头，以结尾。
还有亿点要说明，HTML代码最常使用两个空格进行缩进，当然，也可以为4格，3格，甚至可以不用缩进。但我建议缩进代码，因为这利于网页后期开发时的修改。
开始今天的学习吧！
HTML学习目录
-
- html 标签
- head 标签
- meta 标签
- title 标签
- body 标签
- h1-h6 标签
- i 标签 创建斜体文字
- b 标签 创建粗体文字
- p 标签 创建段落
- ul 标签 创建无序列表
- ol 标签 创建有序列表
- table 标签 创建表格
- a 标签 链接网址
- div 标签 划分板块
- span 标签
- br 标签 换行符
- script 标签 加载或编写js代码
- img 标签
- style 样式设置
-
- 类选择器
- ID选择器
- link 标签 链接资源
html 标签
用于标识网页代码的开始位置与结束位置，如：
<html>
网页代码
html>
注：第一行的代码用于标识这个文件使用的HTML规范。
head 标签
用于定义网页的头部信息，格式：
<html>
<head>头部信息head>
html>
这个标签嵌套在html标签里。
meta 标签
用于描述HTML文档的属性，例如作者，创建日期等。经常用于声明HTML文档在外部脚本文件中使用的字符编码。 如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。
<html>
<head>
<meta charset="UTF-8">
其它标签
head>
html>
注：要嵌套在head标签内。
title 标签
用于显示网页的标题，格式如下：
<html>
<head>
<title>测试标题title>
其它标签
head>
html>
注：也要嵌套在head标签里。
body 标签
定义网页的主体，一般HTML代码都在这里面编写，位置在head标签的后面：
<html>
<head>
头部标签
head>
<body>
HTML网页主体
body>
html>
h1-h6 标签
这些标签一般在body标签里，可以将嵌套的文字的大小进行改变，h1最大，h6最小：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<h1>我是h1h1>
<h2>我是h2h2>
<h3>我是h3h3>
<h4>我是h4h4>
<h5>我是h5h5>
<h6>我是h6h6>
body>
html>
用浏览器打开此网页，看到的应该是一段从大到小的文字。
i 标签 创建斜体文字
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<i>斜体测试i>
body>
html>
i标签主要将标签内的文字变成斜体。
b 标签 创建粗体文字
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<b>斜体测试b>
body>
html>
b标签主要将标签内的文字变成粗体。
p 标签 创建段落
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<p>我正在开发网页。我很开心。p>
<p>我正在开发网页。我很开心。p>
body>
html>
p标签将会把标签内的文字起新的一段来展示。
ul 标签 创建无序列表
用于展示一个无序列表，格式为：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<ul>
<li>第一项li>
<li>第二项li>
<li>第三项li>
ul>
body>
html>
里面要嵌套li标签，每个li标签就是列表的其中一项。
ol 标签 创建有序列表
用于展示一个有序列表，格式为：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<ol>
<li>第一项li>
<li>第二项li>
<li>第三项li>
ol>
body>
html>
里面也要嵌套li标签，每个li标签就是列表的其中一项。
table 标签 创建表格
table标签用于创建表格，如：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<table>
<tr>
<td>测试1td>
<td>测试2td>
tr>
<tr>
<td>测试1td>
<td>测试2td>
tr>
table>
body>
html>
这个标签内需要嵌套tr标签，tr标签为表格的一行，内部的td标签定义这一行每个列显示的内容。
a 标签 链接网址
此标签用于链接到某个网址：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<a href="https://blog.csdn.net/">CSDN博客网站a>
body>
html>
a标签的属性href定义跳转到的网址，文字内容定义这个标签在哪样的文字上创建链接。
div 标签 划分板块
用于将页面分成独立的板块，为页面分区或节：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<div>
<ul>
<li>第一项li>
<li>第二项li>
<li>第三项li>
ul>
div>
<div>
<ol>
<li>第一项li>
<li>第二项li>
<li>第三项li>
ol>
div>
body>
html>
span 标签
HTML的行内标签，方便了给行内元素设置单独的样式。
```html
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<span>文字内容span>
body>
html>
br 标签 换行符
这个标签没有结尾，和换行符作用一样，可以插入文本内：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<p>第一段文字<br>第二段文字p>
body>
html>
script 标签 加载或编写js代码
这个标签用于在网页中编写或加载javascript文件代码：
加载：（一般在head内加载，body也行）
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
<script src="js脚本文件.js">script>
head>
<body>
<p>测试网页p>
body>
html>
编写：（一般在主体body内编写）
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<script type="text/javascript">
var a = 1;
var b = 2;
alert(a + b);
script>
body>
html>
如上，我们在script标签内写了亿些简单的js代码，这些代码在浏览器浏览时时将会运行。
img 标签
img标签主要用来加载图片，上代码：
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
head>
<body>
<img src="test.png" />
body>
html>
属性src指定图片路径，这里为test.png，当然，网络图片也是可以加载显示的。
（注：img标签没有结束标签，只是在">“前写一个”/"即可）
style 样式设置
CSS又叫做层叠样式表(英文全称：Cascading Style Sheets)，主要用来设置HTML网页的样式。
CSS提供来选择器来选定HTML标签设置相应的样式，常用的选择器是类选择器和ID选择器。
类选择器
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
<style type="text/css">
.test1{
width:300px;
height:50px;
background:red;
}
.test2{
width:100px;
height:50px;
background:green;
}
style>
head>
<body>
<div class="test1">style测试1div>
<div class="test2">style测试2div>
body>
html>
首先，我们定义了style标签，在内部写上了两个类选择器，一个叫test1，另一个叫test2，在每个选择器里边，我们定义了width，height，background属性（什么意思可以自己上网查一下），然后在body内定义了两个div标签，都有属性class（类），这里面我们写上了类选择器名称，就可以加载显示对应的样式了。
ID选择器
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
<style type="text/css">
#test1{
width:300px;
height:50px;
background:red;
}
#test2{
width:100px;
height:50px;
background:green;
}
style>
head>
<body>
<div id="test1">style测试1div>
<div id="test2">style测试2div>
body>
html>
首先，我们定义了style标签，在内部写上了两个ID选择器，一个叫test1，另一个叫test2，在每个选择器里边，我们定义了width，height，background属性，然后在body内定义了两个div标签，都有属性id，这里面我们写上了ID选择器名称，就可以加载显示对应的样式了（其实就是把div的class换成id，style标签里的“.”换成“#”而已）。
link 标签 链接资源
<html>
<head>
<meta charset="UTF-8">
<title>测试标题title>
<link rel="stylesheet" href="test.css" />
head>
<body>
<p>测试段落p>
body>
html>
link标签用于定义HTML文档与外部资源的关系，经常用于链接CSS样式表文件，外部资源等。link标签上面的代码加载了test.css文件，也就是CSS文件。
（注：link标签没有结束标签，只是在">“前写一个”/"即可）
课程就到这里，有些不懂的地方可以发在评论区，大家一起来讨论呀！