第一章 HTML的基本标签

《第一章 HTML的基本标签》由会员分享，可在线阅读，更多相关《第一章 HTML的基本标签（14页珍藏版）》请在装配图网上搜索。

1、目录第1章HTML的基本标签（一）11.1 HTML文件的基本结构11.1.1基本结构21.1.2编辑工具（记事本和UltraEdit） 21.1.3网页的摘要信息21.2块级标签31.2.1基本的块级标签31.2.2常用于布局的块级标签61.3彳亍级标签101.3.1 图像标签 img /101.3.2 范围标签span111.3.3 换行标签br /121.4 W3C 标准131.4.1什么事 W3C标准131.4.2 W3C提倡的Web页结构131.4.3 XHTML 1.0 的基本规范13第1章HTML的基本标签（一）1.1. HTML文件的基本结构1. 什么是HTML:1）HTML：

2、 Hyper Text Markup Language超文本标签语言，它包括很多标签（例 如：p段落，h1标题1）,告诉浏览器如何显示页面，它是网页制作的“核 心语言”。2）HTML 特点：a）简易性：各类HTML标签简单易学，方便网站制作者学习、开发。b）平台无关性2. HTML和浏览器的关系1）HTML：网页的“源码”2）浏览器：“解释和执行”HTML源码的工具1.1.1基本结构HTML文档的基本结构夕 头都部分HTML间莫SttSB的第一阿黄 Hello World!月桌内容，可以 是文本，图1S尊.标签标记HTML文档的升始和绪黛头部部分包括标聂和其他说明信息，包括在.标签内主体部分包

3、含文本、图督和畿接，它包括在.标签内1.1.2编辑工具(记事本和UltraEdit)1.1.3网页的摘要信息1标签:按舞中国鬣大的门户阿站x.陪n：】；由河-IJI x|挪页.一2. 标签：(1)描述文档类型和字符编码 对应的HTML代码为： 其中” http-equiv”提供“名祢值”中的名称，“content”提供“名称值”中的值。所以上诉HTML代码的含义如下： 名称：Content-Type（X档内容类型） 值：text/html; charset=gb2312（文本类别的html类型，字符编码为简体中文） Chanset表示字符集编码，常用的编码有如下四种： gb2312 :简体中文

4、，一般用于包含中文和英文的页面， ISO-885901:纯英文，一般用于只包含英文的页面， big5 :繁体，一般用于带有繁体字的页面。 utf-8:国际通用的字符编码，同样适用于中文和英文的页面。和“gb2312”编 码相比，utf-8的国际通用性更好，但字符编码的压缩比较低，对网页性能有 一定的影响。（2）描述搜索关键字和描述对应的HTML代码为： 实现的方式仍然为“名称/值”对的形式，其中“ keywords表示搜索关键字， “description ”表示网站内容的具体描述。1.2块级标签（1）HTML标签分类（方便后续的布局设计）：a）块级标签：也称块级元素，显示为“块”状，前后隔一

5、行，具有一定的高度和宽 度。块内包含多行b）行级标签：也称行级元素，按行逐一显示。包括文字、图片或超链接等（2）分类好处：方便后续的布局设计相比行级标签，块级标签具有如下特点：前后断行显示。具有一定的宽度和高度，可以通过设置块级标签的widths height属性来控制。块级标签常用作容器，即可以在“容纳”其他块级标签或行级标签，而行级标签一般用于组织内容，即只能用于“容纳”文字、图片或其他行级标签。 （4）从页面布局的角度，块级标签又可细分为基本块级标签和常用于页面布局的 块级标签。1.2.1基本的块级标签基本的块级标签包括：标题标签、段标签和水平线标签。1.标题标签标题标签表示一段文字的标

6、题（主题），并且支持多层次的内容结构。HTML共提 供了六级标题，并赋予了标题一定的外观，所有标题字体加粗，字号最大， 字号最小。语法： 标题 标题 示例1：不同等级标题的标签对比 一级标题 二级标题 三级标题四级标题五级标题六级标题2.段落标签段落标签表示一段文字的内容。一个段落中可以包含多行文字，文字内容将随浏览器窗口的大小自动换行。语法：示例2：广技HF稼签的痘KJ -迦j习又件心 酒推华）直开要thiti *咬律哭旧础特签敝 前后换行.类似教材中北京欢迎你的段落北京欢迎你，有梦魏港都了不起I有勇气就会有奇迹.1 厚嘛如S1国初畦1唳、舟0日段落标签的应用北京欢迎你北京欢迎你，有梦想谁都

7、了不起！ 有勇气就会有奇迹。 3.水平线标签水平线标签表示一条水平线没注意该标签比较特殊，没有结束标签，直接使用“”表示标签的开始和结束。示例3 ：0刊水平线标签的应用北京欢迎你北京欢迎你，有梦想谁都了不起！ /p有勇气就会有奇迹。1.2.2常用于布局的块级标签这类标签包括有序列表、无序列表、定义列表、表格、表单、分区标签()，它们常用 于布局网页，组织HTML的内容结构。1.有序列表标签有序列表标签表示多个并列的列表项，它们之间有明显的先后顺序，使用，表示有序列表，表示各列表项。语法：列表项1 示例4：5刊有序列表注册步骤：4填写信息收电子邮件4注册成功2.无序列表标签ul无序列表和有序列表

8、类似，但多个并列的列表项之间没有先后顺序，使用ul,/ul表示无序列表，li，/li表示各列表项。语法：ulli 列表项 1/li 示例5：0日无序列表新人上路指南如何激活会员名？ 如何注册贵美会员？ 注册时密码设置有什么要求？ 4贵美认证 3.定义列表标签dl定义列表标签用于描述某个术语或产品的定义或解释，它使用dl，/dl表示定义列表，dt，/dt表示术语，dd，/dd表示术语的具体描述。语法：dldt 标题 /dt描述 1声嗷臬可源无序列麦互辎 替代，因dt是块状元素，所以 常用于窗文俺的布局场食 W-神霎色的热恢札原斜据说是咖啡豆，非洲盛产这类原料- 可以提神.郁激神经。dd，f 黑色

9、的热陶，摩豆，*K秘购牝 d可以提神，剿滋金4.表格标签表格标签用于描述一个表格，它使用规整的数据显示，它使用, 表示表格，, 表示行，,表示列。表格 百度 /tdA-SI& “行 -51 （单元裕） 新浪 /tdA5.表单标签表单标签用于描述需要用户输入的页面内容，例如注册页面，它使用,表示表单，表示输入内容项。表单 Tt able 使用：.6.分区标签div53a新人上路/h3Adiv内可包括桥II、段借.无序列表.有序罚表.定近J 表-集格-丧却等内容/uldiv其实就是一个/div新人上路-加问概活会员名1如呵注当贵工会员十-江辞时密玛没置有汁亡畀季个-请美认匝d沁其丹就是一个砌逻辑区

10、域的标签.富用作客器，div还可以包括昔时交军阻荒等内容7.常用的4种块状结构(1) div-ul(ol)-li ：常用于分类导航或菜单等场合(2) div-dl-dt-dd :常用于图文混编的场合(3) table-tr-td :常用于图文布局或显示数据(4) form-table-tr-td :常用于表单布局的场合分区标签div 常用于页面布局时对区块的划分，它相当于一个大的容器，可以 容纳无序列表、有序列表、表格等块级标签，同时也可以容纳普通的段落、标题、 文字、图片等内容。由于div 标签不像h1等标签，没有明显的外观效果，所 以特意添加“style”样式属性，设置div标签的宽、高尺

11、寸以及背景色。div标 签可内嵌到p等标签内，作为普通块状元素使用。一般当作结构化块状元素使 用，作为逻辑分区(分块)即容器来使用。1.3行级标签行级标签也称内联标签，行内标签。行级标签类似文本的显示，按“行”逐一显示。常用的行级标签包括图像标签 img/，超链接标签a,范围标签span，换行标签br /以及和表单相关的输入 框标签 input /,文本域标签 textarea 等。1.3.1图像标签img /1. 常见的图片格式(1) JPG： JPG(JPEG)格式图像是在Internet上被广泛支持的图像格式，它是联合 图像专家组文件格式(Joint Photographic Exper

12、ts Group)的英文缩写。JPG格式采 用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且还比 较清晰，所以比较适合在网页中应用。制作JPG文件的软件很多，比较常见的有Photoshop、HyperSnap等。(2) GIF： GIF图像是网页中使用最广泛，最普遍的一种图像格式，它是图像交换 格式(Graphics Interchange Format)的英文缩写。GIF格式图像采用的是无损压缩 由于只支持256色，所以GIF格式图像体积也很小，支持透明色，这使得GIF 在网页的背景和一些多层特效的显示上用的非常多。它还支持帧动画，这是它最 突出的一个特点。制作GIF文件的

13、软件也很多，比较常用的有Photoshop、GIF Construction Set等。(3) BMP： BMP图像在Window操作系统中使用得比较多，它是“位图”的英文 缩写。BMP图像可以用任何颜色深度(从黑白到24位颜色)存储单个光栅图像。 BMP图像文件格式与其他Microsoft Window程序兼容。它不支持文件压缩，也 不适合于Web页。BMP文件适用于Window中的墙纸。制作BMP文件的软件很多，比较常见的有Photoshop、Window自带的“画图” 软件等。(4) PNG： PNG是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF 和JPG的优势，同时具备

14、GIF文件格式不具备的特性。流式网络图形格式(Portable Network Graphic Format， PNG)名称来源于非官方的“ PNGs Not GIF”，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度多达16位；存储彩色图像 时，彩色图像的深度多达48位。制作PNG图片时，使用Photoshop将图片另存为PNG格式即可。2. 语法：img src=图片地址alt=提示文字title=提示文字”/其中，alt属性指定的替代文本，表示图像无法显示时(例如：图片路径错误或网 速太慢等)，替代显示的文本。在制作网页是一般推荐和“src”配合使用。其次， 使用“title”

15、属性，还可以提供额外的提示或帮助信息。示例： 图像标签 商品名称：30寸等离子电视商品价格：388元商品简介：金钢底盘超硬顺滑，140ml透明大水箱设计1.3.2范围标签范围标签用于标识行内的某个范围（显示某行内的独特样式）。语法：文本等行级内容示例： 商品价格:仅售 10元其中,标签限定某个范围，style属性添加突出显示的样式（红色、 字体大小为50像素）。1.3.3换行标签换行标签表示强制换行显示，该标签和标签一样，没有结束标签。示例：SKpA 的区 31 = 前后不换行文件E 蝶指皿也看世】呻北京欢迎你北京就迎你.有瞥想谁都了不起I 有勇气酷念有奇迹 北京双迎你，为你开母旱地 流动中的

16、魅方克潢朝气*intent-Type-content=text/html; charset=gb2312 /htm敏迎圈.在太阳下分享呼吸 h磁丈地刷新欧缴.gRT ?北京欢迎你北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。北京欢迎你，为你开天辟地流动中的魅力充满朝气。北京欢迎你，在太阳下分享呼吸在黄土地刷新成绩。北京欢迎你，像音乐感动你让我们都加油去超越自己。1.4 W3C标准1.4.1什么事W3C标准W3C： World Wide Web Consortium,万维网联盟W3C的职能：负责制定和维护web行业标准W3C标准包括：列的标准： HTML内容方面：XHTML样式美化方面：CS

17、S 结构文档访问方面：OM 页面交互方面：ECMAScriptA 。HTML方面目前比较常用的版本是XHTML1.0, XHTML表示可扩展超文本标签 语言（extensible HperText Language），它是更严格更纯净的HTML版本，且是一 个W3C标准，它规定了 HTML编写的据图规范，所有主流浏览器都支持。1.4.2 W3C提倡的Web页结构1. 内容（结构）和表现（样式）分离即XHTML只负责网页的内容结构，CSS（Cascading Style Sheets，层叠样式表）， 负责表现样式（例如字体大小，颜色，背景图，显示位置等），方便网站的修改和 维护。2. HTML内

18、容结构要求语义化即要求能根据HTML代码能看出这部分内容是什么，代表什么含义。1.4.3 XHTML 1.0的基本规范1. 标签名和属性名称必须小写2. HTML标签必须关闭即HTML标签要求配对使用3. 属性值必须用引号括起来即必须使用单引号或双引号将属性值括起来。4. 标签必须正确嵌套5. 必须添加文档类型声明即必须使用标签添加文档类型声明，声明HTML文档遵守 W3CXHTML哪个级别的规范，需要注意以下两点： 该声明必须位于XTML文档的第一行 XTML 1.0规定了三种级别的声明： Strict（严格类型）：这种声明完全符合W3C的标准，但要求比较严 格。对应的声明如下。A Transitional （过度类型）也称松散（Loose）声明。相比Strict而言，要 求相对宽松些。对应的声明如下。A Frameset （框架类型）：Strict严格标准中不允许使用框架，当页面中需要使用框架时，则使用该声明。对应的声明如下。A示例: 1、声必愈于文档的最SM三Strict、Transitional；jheadJagy， Frameset （糖桨袈bodyS内容.