一、认识什么是HTML
.HTML:(Hyper Text Mark-up Language)超文本标记语言,大部分网页由HTML编写。
.超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式,用以显示文本及与文本之间相关的内容
.标记:用来描述网页内容的特定符号
注:HTML不是编程语言,是描述性的标记语言!
.创建方式:记事本;Dreamweaver;动态网页程序生成(PHP)
.如何用记事本做HTML文件→新建text→重命名改后缀为.html→通过浏览器查看
二、标记的语法
.基本语法:<标记符>内容</标记符> 然后+标记符对应的功能
↓ ↓
开头标记 结束标记
.通过一个例子分析一条HTML代码的构成:<font color="red" size="7"><b>免费教程</b></font>
其中:font为标记符 color size分别为这个标记的属性 "red""7"分别为这两个属性的属性值
注:1标记 属性 属性 之间用空格隔开;2标记之间的嵌套,要加在文字的两头;3 size最大值为7
***不能裸奔!(只有内容无样式)
.HTML标记的语法:标记分为两种 1单标记 <标记符/>
2双标记 <开始标记符> </结束标记符>
.1单标记
(1)<标记名称> :单一型,无属性值
例:<br/>(这是换行符,“换行不换段”)
(2)<标记名称 属性=“属性值”>:单一型,有属性值
例:<hr width="px"/>(这是水平分割线符,属性是宽度,属性值为“像素”)
***源代码中的效果,并不是浏览器最终效果!
.一些说明:属性不分先后顺序切属性也不是必须的。
建议所有的标签都小写!
.HTML文档结构:
所有HTML文档都有一个基本结构----框架
.结构:通常由四对标记来构成,如下:
①<html>
②<head>
③<title>
</title>
</head>
④<body>
</body>
</html>
①<html>......</html> :标识网页的开始和结束,所有的元素都放在这对标记中
②<head>......</head>:标识文件网页的头部信息,如标题、搜索引擎关键字等(主要是让搜索引擎识别)
③<title>......</title> : 标识网页文件上部的标题
④<body>......</body>: 标识网页文件的主体部分
***如何调出文件扩展名:文件夹选项→查看→隐藏已知文件的扩展名去掉
.meta标记
.用于定义文件信息,对网页文件进行说明,便于引擎查找
.放置于<head>......</head>之间
.关键字
<meta name="keywords" content="value1,value2">
.描述
<meta name="description" content="value">
.字符集
<meta http-equiv="content-tpye" content="text/html"; charset="GBK(utf-8)" >
注:三种游览器修改编码的方式:1谷歌→自定义控制→更多工具→编码
2火狐→菜单→"web"开发者→”字符编码“
3 IE →菜单→查看→编码
三、掌握常用的HTML标记的应用
.注释标记
<!--注释内容-->
***学习方法 W3C网站
.body标记
定义文档的主体,他包含文档的所有内容
.属性
<body bgcolor="背景颜色" background="背景图像" text="文本颜色" link="链接文本颜色" vlink="访问过的文本颜色" alink="激活的链接文本颜色" leftmargin="左边界" rightmargin="右边界" topmargin="上边界" bottommargin="下边界">
注:背景属性有一个层次关系 :背景图片 <u><sub>顺序</sub></u> 背景颜色
默认情况下网页内容与浏览器边框之间的巨龙是有距离的!
例: <leftmargin="0">(完全左边)
<leftmargin="">(默认值)
好的用户体验==深色背景+浅色文字
***文件保存最好用中文
.<font>标记
语法
.<font color="文本颜色" size="字号" face="字体">文本</font>
注:现在网页中的文本字体、字号一般用CSS来修饰
灰色="gray"
.字符格式
功能 标记
加粗 <b>文本</b>
加粗(语气强) <strong>文本</strong>
倾斜 <i>文本</i>
倾斜(语气强) <em>文本</em>
下划线 <u>文本</u>
删除线 <s>文本</s>
上标 <sup>文本</sup>
下标 <sub>文本</sub>
.段落标记控制符
.HTML标记之间嵌套使用,一层套一层。
***用合适的HTML标记去描述我们的网页内容——网页优化()
.段落标记
.<p align="对齐方式">......</p> align=①left
↓ ②center
结盟,对齐 ③right
.段落标题
.<hx align="对齐方式">......</hx>
.x取值[1-6],一般用到4 hx内的文本会自动加粗显示
注:hx针对对象是段落,而font针对对象是任意文本
.特殊标记
.定义一个块引用:使文本缩进
.<blockquote cite="url">......</blockquote>
.预格式化:被包围在pre元素中的文本会保留空格换行字体大小等,通常这个标记被用来表示计算机的源代码
.<pre>......</pre>