基本信息
文件名称:Web前端开发 课件 第2章 HTML入门.pptx
文件大小:2.36 MB
总页数:24 页
更新时间:2025-06-18
总字数:约3.6千字
文档摘要

第2章HTML入门主讲教师:朱铁樱《Web前端开发》

超文本标记语言(HyperTextMarkupLanguage,HTML)是一种用于构建网页的标准标记语言。它不仅仅定义了网页的结构,还影响了网页的外观和功能。HTML文档是由各种HTML标签组成的,这些标签描述了网页中的各个元素,如标题、段落、列表、图片、链接等。HTML是一种基础技术,通常与CSS(层叠样式表)和JavaScript一起使用,以设计出具有吸引力和交互性的网页。CSS用于美化网页的外观和格式,而JavaScript则可以添加各种交互效果,使网页更加生动和有趣。2.1认识HTML

2.2HTML文档结构HTML文档包括头部和主体两大部分。HTML文档结构head/head文档头部信息body/body文档主体信息标记HTML文档的开始标记HTML文档的结束文档声明头title/title文档的标题meta元数据头部主要描述浏览器和搜索引擎所需要的信息,浏览器不会将这些信息呈现给访问者;主体是文档的正文,是网页中真正要传达的信息,这些信息将在浏览器窗口的正文部分呈现给访问者。

2.2HTML文档结构标签名定义说明htmlhtmlHTML标签页面中最大的标签,根标签head/head文档的头部在head标签中必须要设置的标签是titletitle/title文档的标题让页面拥有一个属于自己的网页标题body/body文档的主体包含文档的所有内容,页面内容基本放到body里

使用HbuilderX新建“基本HTML项目”将CSS和JS文件分别放入对应目录在html中输入代码任务1:创建一个站点

HTML文档头部元素head标签用来设置HTML的文档标题和其它在网页中不显示的信息,比如direction方向、语言代码LanguageCode、指定字典中的元信息、等等head元素中包含的常用标签如下:标签名说明title代表HTML文档的标题base把相对URL转换为完整的绝对URLmeta用于定义文件信息的名称、内容等信息link在文档中声明使用外接资源(如CSS)时使用此标签style在文档中声明样式时使用此标签script在文档中使用JavaScript脚本

meta标签计算机要精确的处理各种字符文字,需要进行编码在HTML中使用meta标签描述字符集,告之浏览器此文档使用哪种字符集中文能够使用的字符集有两种字符集的比较优点缺点UTF8全面,包含了各个国家的语言文件尺寸大,比较臃肿gb2312(GBK)文件尺寸小,节省空间仅包含中文和少数英文和符号使用meta标签声明的字符集一定要和文档保存的类型保持一致,否则会出现乱码

meta标签meta除了可以设置字符集,还可以设置页面描述信息和关键字description:页面描述,搜索引擎显示搜索结果时显示描述文字keywords:关键字,帮助搜索引擎提高搜索命中率

HTML文档标题title标签用来设置页面标题有助于搜索引擎优化

link标签、style标签、script标签link标签style标签linkrel=stylesheethref=reset.css/stylebody{background-color:yellow;}p{color:blue;}/stylescript标签scriptalert(Hello,world!);/scriptscriptsrc=engine.js/script

HTML主体HTML主体为body元素,使用body/body标签,用于定义文档的正文内容,成对出现。在body/body之间的内容即为页面的主体内容,可以是文本、图像、音频、视频、表单及其他交互式内容,它们才是真正要在浏览器中显示,并让访问者看到的内容。由于HTML元素可以相互嵌套,通过元素层层嵌套,就构成了千变万化的网页。当一个元素包含另一个元素时,把外层元素称作父元素,内层元素称作子元素。子元素还可以再包含子元素,子元素中包含的任何元素,都是外层父元素的后代。

HTML对换行和tab均不敏感,仅通过标签来表示层次关系。在写代码时要求有整齐的缩进,使代码更容易阅读和维护,使用Ctrl+K格式化代码。HTML中如果出现多个空白字符(空格,tab,回车)都会被折叠为一个空格显示。标签要严格封闭,否则显示会出现错误。HTML标签是大小写无关的,body跟BODY或Body表示意思是一样的,标准推荐使用小写,这样符合XHTML标准2.3HTML基础语法1.HTML语法特性

2.3HTML基础语法一个HTML元素由一个标签和一组属性组成。一个标签可以有一个或多个属性,属性以名称和值成对出现(键值对)。标签是HTML中最基本单位。1.标签的构成HTML标签是由尖括号(“”和“”)包