目录
一、认识HTML
1.WEB网页三大基石
2.网站：一组网页的组合，一个网站包括很多网页。
3.网页：能够通过浏览器看到的页面都可以称为一个网页
4. 网页包括：文本，图像，视频，音频。
5.HTML-------用来实现一个网页的一种技术。 6.HTML：超文本标记语言
7.标记
8.网页的扩展名： html htm
9.怎么利用HTML语言编写网页:
二、网页特定的格式：
1.什么是HTML?
2.HTML 标签
3.Web 浏览器
四、常用的HTML标签
五、列表标记
一、认识HTML
1.WEB网页三大基石
HTML：设计结构 房子的结构 CSS：设计美化 房子装修 JavaScript:动态效果
2.网站：一组网页的组合，一个网站包括很多网页。
6.1 超文本:
1.超出普通文本的范畴（除了可以插入文字，还可以插入视频等等）
7.标记
是一种语法的规范
网页中关于标记的分类：2大类 注意： HTML不是编程语言是标记语言。
8.网页的扩展名： html htm
9.怎么利用HTML语言编写网页:
1.新建一个记事本
二、网页特定的格式：
HTML中提供了一种最标准的网页结构格式
1.html标记： <html></html>
2.head标记 <head></head>
3.body标记 <body></body>
<html>
<head></head>
<body></body>
</html> 5.title标签设置网页的标题
例：
<html>
<head>
<title>网页的标题</title>
</head>
<body></body>
</html> 6.文件的编码：
纯英文： ISO-8859-1
1.什么是HTML?
HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面
2.HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 例： <标签>内容</标签>
3.Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户： 四、常用的HTML标签
标记 类型 译名或意义 作 用 备注 文件标记 <HTML> ● 文件声明 让浏览器知道这是 HTML 文件 <HEAD> ● 开头 提供文件整体资讯 <TITLE> ● 标题 定义文件标题，将显示于浏览顶端 <BODY> ● 本文 设计文件格式及内文所在 排版标记 <!--注解--> ○ 说明标记 为文件加上说明，但不被显示 <P> ○ 段落标记 为字、画、表格等之间留一空白行 <BR> ○ 换行标记 令字、画、表格等显示于下一行 <HR> ○ 水平线 插入一条水平线 <CENTER> ● 居中 令字、画、表格等显示于中间 反对 <PRE> ● 预设格式 令文件按照原始码的排列方式显示 <DIV> ● 区隔标记 设定字、画、表格等的摆放位置 <NOBR> ● 不折行 令文字不因太长而绕行 <WBR> ● 建议折行 预设折行部位 字体标记 <STRONG> ● 加重语气 产生字体加粗 Bold 的效果 <B> ● 粗体标记 产生字体加粗的效果 <EM> ● 强调标记 字体出现斜体效果 <I> ● 斜体标记 字体出现斜体效果 <TT> ● 打字字体 Courier字体，字母宽度相同 <U> ● 加上底线 加上底线 反对 <H1> ● 一级标题标记 变粗变大加宽，程度与级数反比 <H2> ● 二级标题标记 将字体变粗变大加宽 <H3> ● 三级标题标记 将字体变粗变大加宽 <H4> ● 四级标题标记 将字体变粗变大加宽 <H5> ● 五级标题标记 将字体变粗变大加宽 <H6> ● 六级标题标记 将字体变粗变大加宽 <FONT> ● 字形标记 设定字形、大小、颜色 反对 <BASEFONT> ○ 基准字形标记 设定所有字形、大小、颜色 反对 <BIG> ● 字体加大 令字体稍为加大 <SMALL> ● 字体缩细 令字体稍为缩细 <STRIKE> ● 画线删除 为字体加一删除线 反对 <CODE> ● 程式码 字体稍为加宽如<TT> <KBD> ● 键盘字 字体稍为加宽，单一空白 <SAMP> ● 范例 字体稍为加宽如<TT> <VAR> ● 变数 斜体效果 <CITE> ● 传记引述 斜体效果 <BLOCKQUOTE> ● 引述文字区块 缩排字体 <DFN> ● 述语定义 斜体效果 <ADDRESS> ● 地址标记 斜体效果 <SUB> ● 下标字 指数 <SUP> ● 下标字 下标字 清单标记 <OL> ● 顺序清单 清单项目将以数字、字母顺序排列 <UL> ● 无序清单 清单项目将以圆点排列 <LI> ○ 清单项目 每一标记标示一项清单项目 <MENU> ● 选单清单 清单项目将以圆点排列，如<UL> 反对 <DIR> ● 目录清单 清单项目将以圆点排列，如<UL> 反对 <DL> ● 定义清单 清单分两层出现 <DT> ○ 定义条目 标示该项定义的标题 <DD> ○ 定义内容 标示定义内容 表格标记 <TABLE> ● 表格标记 设定该表格的各项参数 <CAPTION> ● 表格标题 做成一打通列以填入表格标题 <TR> ● 表格列 设定该表格的列 <TD> ● 表格栏 设定该表格的栏 <TH> ● 表格标头 相等于<TD>，但其内之字体会变粗 表单标记 <FORM> ● 表单标记 决定单一表单的运作模式 <TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字 <INPUT> ○ 输入标记 决定输入形式 <SELECT> ● 选择标记 建立 pop-up 卷动清单 <OPTION> ○ 选项 每一标记标示一个选项 图形标记 <IMG> ○ 图形标记 用以插入图形及设定图形属性 连结标记 <A> ● 连结标记 加入连结 <BASE> ○ 基准标记 可将相对 URL 转绝对及指定连结目标 框架标记 <FRAMESET> ● 框架设定 设定框架 <FRAME> ○ 框窗设定 设定框窗 <IFRAME> ○ 页内框架 于网页中间插入框架 IE <NOFRAMES> ● 不支援框架 设定当浏览器不支援框架时的提示 影像地图 <MAP> ● 影像地图名称 设定影像地图名称 <AREA> ○ 连结区域 设定各连结区域 多媒体 <BGSOUND> ○ 背景声音 于背景播放声音或音乐 IE <EMBED> ○ 多媒体 加入声音、音乐或影像 其他标记 <MARQUEE> ● 走动文字 令文字左右走动 IE <BLINK> ● 闪烁文字 闪烁文字 NC <ISINDEX> ○ 页内寻找器 可输入关键字寻找于该一页 反对 <META> ○ 开头定义 让浏览器知道这是 HTML 文件 <LINK> ○ 关系定义 定义该文件与其他 URL 的关系 StyleSheet <STYLE> ● 样式表 控制网页版面 <span> ● 自订标记 独立使用或与样式表同用
注：
● 表示该标记属围堵标记，即需要关闭标记如 </标记> 。 ○ 表示该标记属空标记，即不需要关闭标记。 IE 表示该标记只适用于 Internet Explorer。 NC 表示该标记只适用于 Netscape Communicator。 反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。 弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
<meta charset =" ">
<!--内容-->
作用：
1.解释标记
<font>
font的style属性：
size 字体大小 范围：1~7
color 设置字体颜色
backaground-color:" "; 设置字体颜色
<marquee>
<div> 盒子标记 作用：合理分类
style属性：
border 1px solid red 设置边框大小以及颜色
……
目前：实现网页布局都是DIV+CSS控制网页布局
居中的方式：
<align=" ">
<html>
<head>
<title>网页案例</title>
<meta charset = "utf-8">
</head>
<body>
<!--
HTML标记添加内容后，可能没有直观的改变，需要借助
该标签自带的属性进行美化设置。
-->
<!-- 字体标记： font标记 围堵标记-->
<!-- color 颜色属性-->
<!-- size 大小属性(范围1-7 )超过7还是7-->
张同学
<font>张同学</font>
<font color = "red">张同学</font>
<font size = "1">张同学</font>
<font size = "7">张同学</font>
<font size = "10">张同学</font>
<!-- 注意事项：想为标记设置更美观的效果使用CSS -->
<!-- HTML标记中都有一个固定的属性来设置CSS代码 -->
<!-- style属性 -->
<font style = "font-size:50px;background-color:red;">张同学</font>
</body>
</html>五、列表标记
<OL>称为顺序清单 标记。<LI>则用以标示清单项目。 <OL> 的参数设定（常用）：type ="i" start ="4"></ol>
<LI> 的参数设定（常用）：type ="square" value ="4">
type ="square"非顺序清单 ，设定符号款式，其值有三种，如下，内定为 type="disc "：disc " 时的列项符号。circle " 时的列项符号。square " 时的列项符号。 value ="4"顺序清单 ，设定该一项的数目，其後各项将以此作为起始数目而递增， 但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。 例子：
HTML Source Code （原始码） 浏览器显示结果 My best friends: My best friends:
Michelle Wei
<UL>称为无序清单 标记。 <UL> 的参数设定（常用）：type ="square">
type ="square"disc "：disc " 时的列项符号。 (实心圆)circle " 时的列项符号。 （空心圆）square " 时的列项符号。 （实心方块） 注意：由于 <UL> 及 <LI> 都有 type 这个参数，两者尽可能选用其一。
例子：
HTML Source Code （原始码） 浏览器显示结果 My Homepages: My Homepages:
■
▲Top
这两个标记都不为 W3C 所赞同，希望用者能以 <ul> 及 <ol> 代之。 例子：
HTML Source Code （原始码） 浏览器显示结果 My Homepages: My Homepages: Penpals Garden
■
▲Top
<DL>称为定义清单 标记。 <DT> 用以标示定义条目，<DD> 则用以标示定义内容。 三个标记都没有常用的参数。而 <DT> <DD> 可以独立使用，只是一些旧的浏览器并不支 援，如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。
例子：
原始码 <dl> <dt> How to use Definition List<dd> First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.<dt> Other things to know<dd> We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.</dl> 显示结果 How to use Definition List First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML. Other things to know We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
