本文详细介绍HTML5的基础知识，包括HTML的规范操作、常用标签如文字、标题、图像标签的使用，以及列表和路径的概念。
IDE：sublime
今天我们来学习JavaWeb的知识，在学习之前，我们要先掌握有关HTML的知识。
1.HTML简介
(1)HTML现在以HTML5为标准，全称为Hyper Text Mark-up Language，是一种超文本标记语言，它不是一种编程语言，而是一种描述性的语言，用于描述超文本内容的显示方式。比如字体的颜色，大小等。
它是最基础的网页语言。
它是通过标签来定义的语言，代码都是由标签所组成的。
下面讲解一些知识：
a：超文本：就是可以对文本进行超出一般工具对文本的操作。
b：标记：就是标签，标签对所需操作的内容进行封装，利用属性可以得到想要的内容。
c：网页语言：就是编写网页的语言，HTML是最简单的网页语言。
(2)HTML的规范操作思想和我的第一个HTML程序
HTML的规范
a：一个HTML文件由开始标签和结束标签组成，相当于java中的{}是一个语句块：
开始标签：<html> 结束标签：</html>
b：html包含两部分：
<head> </head> 设置相关的信息
<body> </body> 显示在页面上的内容
c：html大部分标签成对
d：html标签不区分大小写
e：有些标签没有结束标签
比如换行<br>要在标签内结束，故写成<br/>;一条水平线标签写成<hr/>
HTML的操作思想
我们在预览网页时，会发现不同的数据，它们可能需要不同的显示效果，这个时候需要使用标签把你想要操作的数据包(封装)起来，通过修改标签的属性值实现标签内数据样式的变化。
我的第一个HTML程序
a：html文件的后缀是.html和.htm
b：html文件直接通过浏览器就可运行了
注：在sublime中用右键选择Open in Browser即可打开浏览器查看效果。
我们先在浏览器中显示一行文本：
<html>
<head>
</head>
<body>
<h2>我的第一个HTML程序</h2>
</body>
</html>
说白了，HTML代码其实就是各个标签的使用，下面我们先介绍一些比较简单的标签
2.文字标签和注释标签
(1)文字标签：修改文字的样式
a：标签： <font> </font>
b：属性：size 改变文字的大小，取值范围为1-7，超出了7默认还是7
color 改变文字的颜色
颜色有两种表示方式：<1>用英文单词
<2>使用十六进制数表示，可查
(2)注释标签
标签：<!-- 注释内容 -->
3.标题标签，水平线标签和特殊标签
(1)标题标签
从<h1> </h1>到<h6> </h6>，依次字号变小，同时会自动换行
(2)水平线标签
标签：<hr/>
属性：size 改变水平线的粗细，取值范围为1-7，超过了7默认还是7
color 改变水平线的颜色
颜色有两种表示方式：<1>用英文单词
<2>使用十六进制数表示，可查
(3)特殊字符标签
有时我们会遇到需要显示一些特殊字符，此时需要进行转义：
| 特殊字符 | 转义符 |
| < | < |
| > | > |
| 空格 |   |
| & | & |
| " | " |
| ® | ® |
| © | © |
4.列表标签
(1)<dl> </dl>：表示列表的范围
<dt> </dt>：表示上层结构
<dd> </dd>：表示下层结构
(2)有序列表
<ol> </ol>：有序列表的范围
<li> </li>：具体内容
<type>：设置排序方式，默认(缺省)为1，有1，a，i
(3)无序列表
<ul> </ul>：无序列表的范围
<li> </li>：具体内容
<type="前面的图标">默认为disc,
a：空心圆 circle b：实心圆 disc
c：实心方块 square
5.图像标签
(1)标签：<img src="图片的路径"/>
(2)属性：src 图片的路径
width 图片的宽度
height 图片的高度
alt 图片上显示的文字，主要用于当图片出错时显示文字信息，但有些浏览器下不显示
6.路径
我们想要在浏览器下显示我们想要显示的内容，需要先确定路径，只有正确确定好了路径，才能正确显示我们想要显示的内容。
我们可以分为两类。
(1)绝对路径：也就是完全路径。
(2)相对路径：一个文件相对另一个文件的位置
有三种写法：
a：在同一路径下，则直接写入文件名和后缀名即可。
b：需要的文件在html文件的上一目录，则用../+文件名和后缀名。
c：需要的文件在html文件的下一目录，则用和html文件路径相同的目录向下直到找到要用到的文件即可。
扫一扫
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
