HTML基本语法 - 爱码网

一、HTML文件基本结构

1.一个HTML文件主要包括开始标签<html>、头部标签<head>、文件标题标签<title>以及主体标签<body>四部分。

结构如下：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>标题名</title>

</head>

<body>

主体内容

</body>

</html>

<!DOCTYPE HTML> 说明这是个html5的文件
<meta charset="utf-8"> 声明编码，否则会出现乱码

二、文字标签

1.显示普通文字

<body>想要输入的内容</body>

2.特殊附号

注：HTML创建的网页并不能识别键盘所输入的空格和回车，无论连续输入几个空格和回车都只当成一个空格显示。

网页中常见的特殊符号

特殊符号	符号码
空格
回车	<br>
"	"
>	>
&	&
<	<

3.标题字标签

h1-h6,字号逐渐变小，且具有换行功能

4.修饰文字标签

加粗，没有换行功能

斜体，没有换行功能

带下划线的文字

....上标标签

....下标标签

5.例子

HTML基本语法

6.修饰字体标签

其中color参数可以是颜色的英语单词，如red,blue,green，也可以是颜色值为十六进制的文本颜色，用三原色原理，前两位红，中间两位绿，后面两位蓝，00表示没有，ff表示最深，如00ff00表示绿色。

face的参数可以是宋体，华文琥珀，华文行楷，华文新魏等

HTML基本语法

三、段落标签

1.段落标签

段落文字

2.取消文字换行标签

不换行显示文字

注：使用nobr取消自动换行标签后，当浏览器宽度不够时，会出现滚动条。

3.修饰段落的对齐属性align

4.保留原始排版标签<pre>

HTML基本语法

四、图片标签

1.插入图片标签<img>

img标签常用属性

属性	说明
src	图片源文件
border	边框
alt	提示文字
vspace	垂直间距
width，height	宽度，高度
hspace	水平间隔

五、列表

列表标签

标签	描述
<ul>	无序列表
<ol>	有序列表
<dir>	目录列表
<menu>	菜单列表
<dt>,<dd>	定义列表标签
<li>	列表项目标签

1.有序列表

有序列表采用编号来编排项目，编号可以是数字，英文。
<ol start="起始数值" type="排序类型">

...

</ol>

start的参数为具体数字，type的参数值可以是1,a,A,i,I.

2.无序列表

...

</ul>

type的参数可以是circle,disc,square.

HTML基本语法

3.建立定义列表

<dl>

......

</dl>

注：

一个dt也可以搭配多个dd
<dd></dd>中间为一行内容

HTML基本语法

六、链接标签

1.链接能使浏览者从一个网页跳转到另一个网页，链接可以是文档中的文字，图像。

2.<a href="链接地址">链接文字，图像</a>

链接地址可以是电脑其他地方的网页文件，可以是网站等，可以是电子邮箱地址等。如果是电脑文件，可以考虑相对路径和绝对路径。

3.书签链接

假如一个网页太长，浏览时很不方便，所以在网页或者另一个页面上建立目录，浏览者点击目录上的项目就可以跳转到页面的相应部分。

书签链接分两步：

建立书签
书签制作链接

例子：

在同文件中建立两个HTML文件，一个是超链接文件一个是将要被链接的文件

HTML基本语法

在浏览器中运行

HTML基本语法

点击可以来到我们编辑好的文件中。

HTML基本语法

其中的地址，由于是同个文件下，使用我使用了相对路径。

如果要用照片作点击对象，可以把上面”辛弃疾简介“换成已经准备好的图片地址。

例子：

HTML基本语法

1.建立书签

在章节四前面加<a id="xxx">章节四</a>

2.书签制作链接

<a href="#xxx">查看章节四</a>

其中xxx是一个标记。

HTML基本语法

点击什么那“查看章节四”，直接到章节四的地方

HTML基本语法