超文本标记语言HTML
HTML基本语法
一、标记语法
1.什么是标记语法
HTML是用于描述功能的符号称为"标记"。比如、、等,都是标记,标记表示HTML文档的开始。
2.单标记
标记语法是:<标记名称/>
最常用的单标记
,它表示换行。
3.双标记
"双标记"由"始标记"和"尾标记"两部分构成,必须成对使用。
始标记告诉WEB浏览器从此处开始执行该标记所表示的功能,尾标记告诉WEB浏览器在这里结束该功能。始标记前加一个正斜杠(/)即为尾标记。
<标记>内容</标记>
其中"内容"部分就是要这对标记施加作用的部分。
二、属性语法
1.什么是属性
这里的属性指的是标记的属性
2.属性语法
<标记名字 属性1 属性2 属性3 …>
三、HTML文件的命名
应注意以下几点:
1.文件的扩展名要以.htm或.html结束
2.文件名中只可由英文字母、数字或下划线组成
3.文件名中不要包含特殊字符,比如空格、$
4.网站首页文件名默认是index.htm或index.html
四、编写HTML文件的注意事项
1.所有标记都要有尖括号括起来,这样,浏览器就可以知道尖括号内的标记语言是HTML命令
2.对于成对出来的标记,最好同时输入起始标记或结束标记,以免忘记
3.采用标记嵌套的方式可以为同一个信息应用多个标记,如下
同一信息
4.在代码中,不区分大小写
5.任何空格或回车在代码中都无效
6.标记中不要有空格,否则浏览器可能无法识别
HTML文件的基本结构
一、文件头部内容
一个完整的HTML文件包括头部文件和主体文件,头部标记是成对的,主体标记是成对的
1、设置页面标题
基本语法
<html>
<head>
<title>请在此输入标题名</title>
</head>
<body>
</body>
</html>
1、设置页面标题
<title>标题内容</title> 设置网页的标题
<body>网页内容</body> body里面的内容是网页的主体,主要在这里面进行编写代码
2、设置基底网址
基底网址用于设定浏览器中文件的路径,标识一般用于设置文件的URL地址。一个HTML文件只能有一个标识,同时该标记必须放于头部文件中。
基本语法
<head>
<base href="文件路径" target="目标窗口">
</head>
语法说明
href用于设置网页文件链接的地址即进行跳转,target用于设置页面显示的目标窗口
如:
<body>
2009年10月16日,<A href="index">东北大学秦皇岛分校</A>
</body>
点击“东北大学秦皇岛分校”则会跳转到下一个页面
3、定义元信息
在HTML文件中,标记通过一些属性来定义文件的信息,比如文件的关键字、作者信息、网页过期时间等。HTML文件的头部文件可以有多个标记,不是成对标记
基本语法
<meta http-equiv=" " name=" " content=" ">
语法说明
标记中的http-equiv属性用于设置一个http的头域,取值由content属性决定,name属性用于设置元信息出现标识,conent属性用于设置元信息出现的内容 4、设置页面关键字-keywords 基本语法 ``` ``` 语法说明 keywords用于说明定义的是关键字,value 用于说明为该页定义的关键字,可以是多个关键字。类似与淘宝上的关键词搜素 如:`` 二、主体内容 在HTML文件中,主体内容被包含在成对的标记之间,同时标记也有很多本身的属性,例如设置页面背景、设置页面边距等。 1.设置页面背景bgcolor 基本语法`<body bgcolor=" ">
语法说明
利用标记中的bgcolor属性,可以设置网页的背景颜色
如:
<body bgcolor="blue">
</body> 将网页的背景设置为蓝色
2.设置网页边距-topmargin、leftmargin、rightmargin、bottommargin
在HTML文件中,可以设置页面边距,通过设置页面边距属性的属性值来设置页面显示内容与浏览器的距离,使显示的内容更加美观。
<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>
语法说明
设置到顶端的距离
设置到左边的距离
设置到右边的距离
设置到底边的距离
如:<body topmargin=0 leftmargin=20 rightmargin=20 bottommargin=180>
3.设计正文颜色text
在HTML文件中,设置页面的背景颜色以后,网页中可能有部分文字的颜色需要改变才能显示,利用text属性可以给页面中无链接的文字设置颜色
基本语法
<body text="">
</body>
语法说明
在标记中,利用text属性设置文档的颜色时,还可以进行其他的设置,例如:背景、字体等。
如:<body text="white" bgcolor="red">
将文本内容设置为白色,背景颜色为红色
段落内容
1.回车
2.分段控制标签
基本语法
设置文字左对齐、剧中、右对齐
段落文字
, 可以省略 参数值:right,left(默认),center 3.居中显示文字设置文字为默认大小和字体 基本语法:文字内容5.插入并设置水平线
基本语法:
<hr align="参数值" size="参数值" width="参数值" color="参数值" noshade>
align:水平摆放位置,可选right,left,center(默认)
Size:水平线的粗细,以像素为单位
Width:水平线的长度,以像素或百分比为单位
Color:水平线的颜色
noshade:设定水平线是否显示3D阴影
如:
<center>添加水平线后的效果</center>
<hr width="100%" size="5" color="000000">
即长度为100% 粗细度为5 颜色为000000对应的极端色黑色,FFFFFF是白色
6.插入特殊符号
基本语法
<body>
请在此处添加文字
</body>
语法说明
在网页中添加文字,只要在之间,需要插入文字的地方输入文字就可以实现。
2 添加注释<! ---->
在HTML文件中,为了增加代码的可读性,需要对代码添加必要的注释。这些注释语句可方便编写者的检查与维护,同时这些注释信息也不会在网页中被显示。
3 .添加空格
在HTML文件中,添加空格的方式与其他文档添加空格的方式不同,网页中添加空格是通过代码控制,在Word、记事本、写字板中输入空格可以直接通过键盘空格键输入。
基本语法
<body>
</body>
语法说明
在HTML文件中,添加空格需要使用代码" “控制,需要多少个空格就需要添加多少个” "。
如: 延安大学
网页呈现的内容为:
4 . 添加删除线
在HTML文件中,给需要添加删除线的文字使用成对的
标记,就可以添加删除线
基本语法
<body>
<strike>请在此输入需要添加删除线的文字</strike>
</body>
语法说明
在成对的
标记之间输入文字,在网页中显示改标记之间的文字就是被添加了删除线后的显示效果
如:<strike>添加了删除线的文字</strike>
二、文字效果
1.标题文字标签
标签一共为6级
基本语法:
标题文字
align属性值为right,left(默认),center
如:
<h1 align="center">标题文字</h1>
<h2>标题文字</h2>
<h3>标题文字</h3>
<h4>标题文字</h4>
<h5>标题文字</h5>
<h6>标题文字</h6>
2. 编辑网页文字样式
基本语法
<body>
<font face=" " size=" " color=" "></font>
<body>
语法说明
在HTML文件中,利用成对标记就可以将网页中的文字根据需要,对其进行样式的编辑。
如:
<font face="楷体" size="6" color="#00ffff">
使用效果后的文字
3. 设置文字标注标记
在HTML文件中,有时需要对某个字、词或者某个段进行说明,可以通过添加文字的标注标记来完成对网页中文字的说明。
基本语法:
被说明的文字
语法说明:
利用成对的
<ruby>
当代最可爱的人
<rt>
志愿军
</rt>
</ruby>
三、文字修饰
1.简单修饰文字
基本语法
<body>
普通文字的显示<br>
<b>加粗的文字</b><br>
<i>斜体的文字</i><br>
<u>添加下划线的文字</u><br>
<big>放大</big><br>
<small>缩小</small><br>
</body>
2. 确定文字上下标
基本语法:
<body>
<sup>上标内容</sup><br>
<sub>下标内容</sub><br>
</body>
语法说明:
在HTML文件中,成对的标记可以表示上标,利用成对的标记表示下标。
如;
解下面方程:<br>
x<sup>2</sup>-3x+2=0<br>
解:x<sub>1</sub>=1; x<sub>2</sub>=2<br>
3.设置地址文字
在网页中添加地址文字,是为了更方便地突出显示联系方式,将联系人的地址信息突出显示。
基本语法:
<body>
<address>请在此添加地址信息</address>
</body>
语法说明:
在HTML文件中,利用成对
如:
书中有不恰当的地方,请您及时与我们联系:<br>
<address>清华大学出版社</address><br>
<address>E-mail:market@1.com.cn</address><br>