HTML网站标签代码基本教学

HTML全名超文本标记语言（Hyper Text Markup Language），可以拿来制作网站。它有一套语法规则，通过这种语法规则，就可以设计出丰富多彩的网页了。

首先，HTML标签定义格式为：

<标签名>标签内容标签名>

以开头，以结尾。

还有亿点要表明，HTML代码最常使用两个空格进行缩进，当然，也可以为4格，3格，甚至可以不用缩进。但我建议缩进代码，因为这促使网站后期开发时的更改。

开始那天的学习吧！

HTML学习目录

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标签没有结束标签，只是在">“前写一个”/"即可）

课程就到此处，有些不懂的地方可以发在评论区，大家一起来讨论呀！