HTML(超文本标记语言)是一种用于创建网页的标准标记语言。 HTML 不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。 它不是一种编程语言,而是一种标记语言。
1111111 000000000 222222222222222 444444444
1::::::1 00:::::::::00 2:::::::::::::::22 4::::::::4
1:::::::1 00:::::::::::::00 2::::::222222:::::2 4:::::::::4
111:::::1 0:::::::000:::::::0 2222222 2:::::2 4::::44::::4
1::::1 0::::::0 0::::::0 2:::::2 4::::4 4::::4
1::::1 0:::::0 0:::::0 2:::::2 4::::4 4::::4
1::::1 0:::::0 0:::::0 2222::::2 4::::4 4::::4
1::::l 0:::::0 000 0:::::0 22222::::::22 4::::444444::::444
1::::l 0:::::0 000 0:::::0 22::::::::222 4::::::::::::::::4
1::::l 0:::::0 0:::::0 2:::::22222 4444444444:::::444
1::::l 0:::::0 0:::::0 2:::::2 4::::4
1::::l 0::::::0 0::::::0 2:::::2 4::::4
111::::::111 0:::::::000:::::::0 2:::::2 222222 4::::4
1::::::::::1 00:::::::::::::00 2::::::2222222:::::2 44::::::44
1::::::::::1 00:::::::::00 2::::::::::::::::::2 4::::::::4
111111111111 000000000 22222222222222222222 4444444444
一个网页的基本结构
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
</head>
<body></body>
</html>
<!DOCTYPE html>
是我们的文档声明头。他告诉了浏览器,本文档处理的是 HTML 文档。html
标签即根元素,此处表示文档的开始。head
标签是网页的头部,设置网页的相关信息。title
标签设置网页标题。body
标签定义文档的主体,也就是我们的主要内容。
常用HTML标签
- 标题标签
- 段落标签
- 图片标签
- 超链接标签
- HTML 列表
1.标题标签
h
系类标签:有六种 h1,h2,h3,h4,h5,h6,
它代表着我们的标题。
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
样式如下:
我是一级标题
我是二级标题
我是三级标题
我是四级标题
我是五级标题
我是六级标题
2.段落标签
p 标签:文本标签。删掉上段代码 标签里的内容,把下面的内容放到 标签里面去。
<p>第一段文字,做实验,学编程</p>
<p>第二段文字,做实验,学编程</p>
样式如下
第一段文字,做实验,学编程
第二段文字,做实验,学编程
3.图片标签
图片标签,HTML 的图像是通过标签 <img>
来定义的。 语法: <img src="图片地址"/>
。
样式如下
4.超链接标签
<a>
标签是超链接标签,意思就是我们点击它可以跳转到一个网页。
样式如下:
5.HTML 列表
列表作为网页设计的重要内容之一,能够用来制作导航栏和新闻列表等。HTML 列表分为:有序列表(ol),无序列表(ul)以及自定义列表(dl)。
无序列表与有序列表
无序列表是一个项目的列表,此列项目使用实心圆、空心圆、方块进行标记,无序列表使用<ul>
标签。同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于<ol>
标签。每个列表项始于 <li>
标签。
<p>无序列表</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<p>有序列表</p>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
样式如下:
无序列表
- 列表项1
- 列表项2
有序列表
- 列表项1
- 列表项2
可以看到有多少个列表项就有多少个<li>
标签。
无序列表和有序列表的 type 属性:
type 属性定义了列表项前项目符号的类型。
<ul>
标签的 type 属性:
值 | 备注 |
---|---|
disc | (默认) 实心圆 |
circle | 空心圆 |
square | 小方块 |
- 标签的 type 属性:
值 | 备注 |
---|---|
1(默认) | 数字表示(1,2,3…) |
A | 大写字母表示(A,B,C…) |
a | 小写字母表示(a,b,c…) |
I | 大写罗马数字表示(I,II,III…) |
i | 小写罗马数字表示(i,ii,iii…) |
总结
本文主要介绍了一个网页最简单构成,以及常见的HTML标签。