什么是HTML？HTML怎么学？HTML基础教程-白红宇

什么是HTML？HTML怎么学？HTML基础教程

阅读量：4921 次

发布时间：2019-06-11

本文共 7743 字，大约阅读时间需要 25 分钟。

1.一般我都是在记事本中写HTML文件，也有很多人用DreamWeaver，这个随意~~

2.HTML的一般结构如下：

<html>----以<html>开始，以</html>结束，表示之间的文档是HTML

<head>----HTML文档的头部，主要放文档的标题信息

<title>未使用CSS的HTML文件</title>

</head>

<body>----HTML的主体部分

<h1>未使用CSS的HTML文件</h1>

<hr>----在网页中插入一条水平线

<p>未使用CSS的HTML文件</p>

</body>

</html>

3.标记语法

(1)标记在使用时必须用尖括号"<>"括起来；标记的大小写作用相同；

(2)单标记：<标记名称>，例如<br>它表示换行；

(3)双标记：<标记>内容</标记>

例如：<em>第一：</em>，它表示突出对“第一：”的显示；

(4)：标记可以包含标记本身，即可以嵌套使用

<html>

<head>

<title>请输入密码</title>

</head>

<body>

<form>

<tr>

<td>请输入密码</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

4. 属性语法

大多数单标记和双标记的始标记内部都可以包含一些属性

<标记名字属性1 属性2 ...>

例如单标记<img>表示在文档当前位置插入一幅图片

其中src属性规定显示图像的路径，width属性设置图像的宽度，height属性设置图像的高度，alt属性规定图像的代替文本，src属性为必需属性，其他属性为可选属性。

5. HTML文件命名：

(1)文件的扩展名要以.html或.htm结束；

(2)文件名中只可由英文字母、数字或下划线组成；

(3)文件名中不要包含特殊符号，如空格、￥等；

(4)文件名师区分大小写的，在Unix和Windows主机中有大小写的不同；

(5)网站首页文件名默认是index.htm或index.html；

6. 编写HTML文件的注意事项：

(1)所有标记都要用尖括号<>括起来；

(2)成对出现的标记不要漏写；

(3)采用标记嵌套的方式可以为同一个信息应用多个标记，如<tag1><tag2>同一个信息</tag2></tag1>；

(4)在代码中，不区分大小写；

(5)任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是&nbsp, <br>；

(6)标记中不要有空格；

(7)标记中的属性，可以用双引号("")引起来，也可以不引；

7.<p></p>表示插入段落文字；

8.绘制表格：三个成对标记<table></table>、<tr></tr>、<td></td>

<table width="650" border="1"> ----<table>是制作表格的标记，其后的属性依次为表格宽度，边框粗细

<tr>----<tr>表示插入行，一对<tr>表示一行

<td>----<td>表示一列

HTML基础教程<br>

作者：王占金等

<br>----<br>表示换行，单标记

定价49.00元<br>

</td>

<td>

</td>

</tr>

<tr>

<td>

搜索引擎营销-网站流量大提速<br>

作者：（美）亨特<br>

定价：69.80元<br>

</td>

</tr>

</table>

9. 设置页面标题：<title>页面标题</title>；

10. 设置基地网址<base>

(1)<base>标记一般用于设计文件的URL地址；

(2)一个HTML文件只能有一个<base>标记，同时该标记必须放于头部文件中；

(3)<base href="文件路径" target="目标窗口">

href用于设置网页文件链接的地址，target用于设置页面显示的目标窗口。

例如：

<html>

<head>

<title>设置基地网址</title>

</head>

<body>

2007年1月16日，电子工业出版社<a href="index">博文视点</a>公司召开了一次晚会。

</body>

</html>

11.定义元信息<meta>

(1)该标记的主要功能是定义页面中的一些信息，但这些信息不会出现在网页中，而会在源文件中显示；

(2)<meta>标记通过一些属性来定义文件爱你的信息，例如，文件爱你的关键字、作者信息、网页过期时间等，HTML文件的头部文件可以有多个<meta>标记；

(3)基本语法：

http-equiv属性用于设置一个http的标题域，但确定值由content属性决定，name属性用于设置元信息出现的形式，content用于设置元信息出现的内容。

12.设置页面关键字--keywords

(1)基本语法：<meta name="keywords" content="value">

(2)语法说明：keywords用于说明定义的是关键字，value用于说明该网页定义的关键字，可以是多个关键字；

(3)例子：

<html>

<head>

<title>设置关键字</title>

</head>

<body>

......

</body>

</html>

13. 设置页面过期时间--expires

(1)基本语法： <meta http-equiv="expires" content="value">

(2)语法说明： expires用于设计页面过期时间，content属性设置具体过期时间值；

(3)例子：

<html>

<head>

<title>设置页面过期时间</title>

</head>

<body>

......

</body>

</html>

14.设置页面背景

(1)基本语法：<body bgcolor="">

(2)语法说明：bgcolor可以设置网页的背景颜色；

(3)例子：

<html>

<body style="background-color:blue">----此行代码表示：将网页背景颜色设置为蓝色，也可以设置为 red white等，也可以十六进制数表示，例如“#00ff00”，或者rgb(0,0,0)的形式

......

</body>

</html>

15.设置页面边距

(1)基本语法：<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>

(2)语法说明：topmargin 设置到顶端的距离

leftmargin设置到左边的距离

rightmargin设置到右边的距离

bottommargin设置到低端的距离

(3)例子：

<html>

  2016年5月9日，阴雨

</body>

</html>

16.设计正文颜色

(1)基本语法：<body text=""> ...</body>

(2)语法说明：利用text属性设置文档的颜色时，还可以进行其他设置，例如：背景、字体等；

(3)例子：

<html>

  2016年5月9日，阴雨

</body>

</html>

17.添加注释 <!-->

注释信息不会在网页中显示，可以放在HTML文件的任何地方

18. 添加空格  

在主体中使用，一个&nbsp代表空一个字符

19.添加删除线 <del></del>

使用成对标记<del></del>，在主体中添加

<body>

<del>请在此输入需要添加删除线的文字</del>

</body>

20. 插入特殊符号

符号对应代码

&&amp

TM &trade

￥&yen

等~~

21.设置文字标注标记<ruby>

<ruby>

被说明的文字（当代最可爱的人）

<rt>

文字的标注（志愿者）

</rt>

</ruby>

22.简单文字修饰（加粗、斜体、下划线）

<body>

普通文字的显示<br>

<b>加粗文字的显示</b>

<u>给文字加下划线</u>

</body>

23.确定文字上下标-<sup>/<sub>

<body>

</body>

24.设置地址文字<address>

在网页中添加地址文字，是为了更方便地突出显示联系方式，将联系人的地址信息突出显示

<body>

<address>请在此添加地址信息</address>

</body>

25.设置等宽文字 <tt> <samp> <code> <kdd>

多数情况用在英文文字显示中

<body>

<tt>打字机风格显示</tt>

<code>等宽文字设置内容</code>

<samp>等宽文字设置内容</samp>

</body>

26.段落<p></p>----双标记

回车<br>----单标记，强制性换行，可以放在<p></p>之间使用

预格式化<pre></pre>

利用<pre></pre>标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落；

设置段落缩进<backquote>

利用一对<backquote></backquote>标记可以缩进5个字符

插入并设置水平线<hr>

水平线的属性有：align---水平线对齐方式，取值有3种：left，right和center

width---水平线的长度，如500px

size---水平线的粗细

color---水平线的颜色，如red

noshade---水平线是否有阴影

标题标记<hn>，其中n为数字1-6，共分6级，数字越小，字体越大，表示越重要

27.插入列表

列表类型标记符号

定义列表<dl></dl>

无序列表<ul></ul>

目录列表<dir></dir>

有序列表<ol></ol>

(1)插入定义列表<dl></dl>

<dl>

<dt>联系人<dd>*** ----<dt>定义名称部分，只在<dl>中使用

<dt>联系地址<dd>北京市海淀区----<dd>解释说明部分，只在<dl>中使用

<dt>邮政编码<dd>100876

</dl>

输出结果为：

联系人

***

联系地址

北京市海淀区

邮政编码

100876

(2)插入无序列表<ul></ul>

<ul>

<li>联系地址：北京市海淀区</li>

</ul>

输出结果为：

·联系人：***

·联系地址：北京市海淀区

·邮政编码：100876

补充：无序列表<ul>中用type属性来控制行的标号

type=disc 设定一个实心圆点的行标号，表示默认项，如上面所示；

type=circle 设定一个空心圆点作为行标号；

type=square 设定一个方形实心点作为行标号；

(3)插入有序列表<ol></ol>

<ol>

<li>联系地址：北京市海淀区</li>

</ol>

输出结果为：

1.联系人：***

2.联系地址：北京市海淀区

3.邮政编码：100876

补充：有序列表的顺序是由属性type和start来设置的。type表示标号的类型，start表示列表的标号从第几项开始

type=1 表示用数字标号（默认项）

type=A 表示用大写字母

type=a 表示用小写字母

type=I 表示用大写罗马数字

type=i 表示用小写罗马数字

(4)嵌套定义列表

<dl>

<dt>网页三剑客

<dd>Dreamweaver

<dd>Flash

<dd>Fireworks

<dt>编程三剑客

<dd>VB

<dd>VF

<dd>VC

</dl>

显示结果为：

网页三剑客

Dreamweaver

Flash

Fireworks

编程三剑客

(5)嵌套有序与无序列表

<ul>

<li>水果类

<ol>

</ol>

</li>

<li>蔬菜类

<ol>

</ol>

</li>

</ul>

显示结果为：

·水果类

1.苹果

2.香蕉

·蔬菜类

1.萝卜

2.白菜

28.超链接

一般而言，一个网站的文件都是在同一个目录下的

在HTML文件中提供了三种路径：绝对路径，相对路径，根路径

在HTNL文件中，超链接可以分为内部链接和外部链接。所谓内部链接：指网站内部文件之间的链接；所谓外部链接，指网站内的文件链接到站点内容外的文件。

(1)绝对路径：只文件的完整路径，包括文件传输的协议http，ftp等，一般用于网站的外部链接，例如：http://ysu.edu.cn, ftp://202.206.251.100

(2)相对路径：只相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之内，即使不属于同一个文件目录下，相对路径建立的链接也适合。采用相对路径是建立两个文件之间的相互关系，可以不受站点和所处服务器位置的影响。

相对位置如何输入

同一目录输入要链接的文档

链接上一目录先输入"../"，再输入目录名

(3)根路径：适合内部链接的建立，一般情况下不使用根路径，以"/"开头，后面紧跟文件路径。

29.超链接的建立

(1)插入内部链接： <a href="index.htm">链接内容</a>

(2)插入外部链接： <a href="http://ysu.edu.cn">燕山大学</a>

(3)设置图像映射：

基本语法：<img src="URL" usemap=""></img>

</map>

语法说明：<img>标记表示插入图像文件，src表示插入图像的路径，<map>标记表示插入图像的映射；<area>标记表示图像映射区域；shape属性表示映射区域形状：rect表示矩形区域，circle表示椭圆形区域，poly表示多边形区域；coords表示感应区域的坐标。

30.表格

(1)<table></table>表示插入一个表格；

(2)<tr></tr>表示插入一行，<td></td>表示插入一列；

(3)<caption></caption>表示插入表格标题，用于<table>和<tr>之间；

(4)设置表格表头<th>：将要作为表头的一行，列标记<td>改为<th>即可；

(5)设置划分结构表格<thead>、<tbody>、<tfoot>

所谓划分结构表格，指将一个表格分成三个部分在网页上显示

<thead></thead>表示定义一组表头行

<tbody></tbody>表示定义表格主体部分

<tfoot><tfoot>表示为表格添加一个标准

(6)设置表格的标记属性

width设置表格的宽度border设置表格边框的粗细frame设置表格边框的样式rules设置表格内部边框的属性

above 显示上边框，border显示上下左右边框， below显示下边框， hsides显示上下边框，lhs显示左边框，rhs显示右边框，void 不显示边框，vsides 显示左右边框；

all 显示所有内部边框

groups 显示介于行列之间的边框

none 不显示内部边框

cols 显示列边框

rows 显示行边框

(7)设置表格行：<tr align="" valign="">

align设置行内容的水平对齐：left（左对齐），right，center

valign调整行内容的垂直对齐：top（顶端对齐），middle，bottom，baseline（基线）

(8)设置跨行：rowspan

<table>

<tr>

</tr>

<tr>

</tr>

</table>

显示结果为一个两行三列的表格，但是第一列的两个表格合并为一个了，即跨行。

(9)设置跨列：colspan

<table>

<tr>

</tr>

<tr>

</tr>

</table>

显示结果为：

一个两行三列的表格，但是第一行的前两列表格合并为一个表格。

转载于:https://www.cnblogs.com/xiaozhu520/p/9944405.html

你可能感兴趣的文章

将16进制的颜色转为rgb颜色

查看>>

POJ 2182 Lost Cows (树状数组 && 二分查找)

查看>>

Matlab中界面和注释---中英文切换问题

企业级应用，如何实现服务化四（基础环境准备）

查看>>

Code::Blocks

查看>>

CBitmap,HBitmap,Bitmap区别及联系

Kendo UI - Class 基类定义

1. EasyUI 学习总结（一）——对话框dialog

查看>>

Java play freamwork 新闻通知的定时发送

查看>>

iOS app 的 ASLR

查看>>