《HTML语言课件》由会员分享,可在线阅读,更多相关《HTML语言课件(26页珍藏版)》请在金锄头文库上搜索。
1、 Revised as of 23 November 2020HTML语言课件HTML语言一 HTML简介二 HTML的基本标记三 HTML的格式化标记四 HTML的链接标记五 HTML的列表标记六 HTML的图片标记七 HTML的框架标记八 HTML的表格标记九 HTML的表单标记十 HTML的层标记十一 HTML的文件头标记一 HTML简介1.1 什么是HTMLHTML是一种构成网页基础的语言,同时由一些简单的英文单词构成;HTML是一个超文本标记语言;HTML是由浏览器解释执行的一种语言;HTML是由成对的标记构成的。1.2 学习HTML的目的HTML是WEB开发的基础;HTML是电子商
2、务平台的基础;HTML是后续学习的基础;HTML是JSP的基础。1.3 HTML的发展史1993年,超文本标记语言(第一版)被推出;1995年,的标准被推出,W3C推荐;1996年,推出,W3C推荐;1997年,推出,W3C推荐;1999年,推出,W3C推荐,至今为止的一个最终版本;2000年以后,XML、XHTML兴起,大有取代HTML之意,但是举步维艰;2008年,的草案推出;2011年,的第二个草案推出,W3C认可。 HTML文档结构Welcome to Web Site1.4 HTML的文档结构1.5 第一个HTML文档:是HTML文档的起始和结束标记;:是HTML文档的头标记,包含所
3、有网页关联内容,如字符集、关键字、搜索引擎等;:是一个标题标记,用于控制网页标题栏的显示;:是HTML的主体标记,所以页面显示内容都包含在BODY标记中;:是HTML的文字标记,用于控制文字的显示;color=”red”:color是标记的一个属性,也就意味着所有的标记都可以定制特定的属性;1.6 HTML的元素 HTML是由标记和属性两种元素构成的。1.7 推荐学习平台推荐学习网站:推荐浏览器:谷歌、火狐、Opera、Safari。 推荐学习软件:EditPlus、Dreamweaver CS6。1.8 注意事项文件夹和文件名尽量使用英文、单词、字母、数字及其组合;网上下载的内容一律要求更改
4、文件名;代码一定要采用缩进格式。二 HTML的基本标记 Hn标记 静夜思 床前明月光,疑是地上霜;举头望明月,低头思故乡。 标题标记:Hn Hn标记是用来控制文本的标题,n的取值范围为16,数字越大,标题大小越小,同时会产生一个换行分段的效果。 段落标记:P P标记 静夜思 床前明月光,疑是地上霜; 举头望明月,低头思故乡。 P标记用于控制文本的分段,产生换行分段效果;P标记可以只有开始部分,即可以成为一个单标记。 换行标记:BR BR标记 静夜思 床前明月光,疑是地上霜; 举头望明月,低头思故乡。 BR标记只是纯粹的单标记。BR标记和P标记的区别:BR标记可以连续使用多个,但是P标记不能。
5、HR标记 静夜思 作者: 李白 床前明月光,疑是地上霜; 举头望明月,低头思故乡。 水平线标记:HRHR标记用于给文字划线或者区分上下文的关系。HR标记我们可以使用width属性控制它的宽度,使用color属性控制它的色彩,使用align属性控制它的基本位置。 Hn标记 静夜思 作者: 李博 床前明月光,疑是地上霜; 举头望明月,低头思故乡。 2.5 注释标记 注释标记: 用来给设计者说明当前位置的代码的作用,起到一个解释的效果。三 HTML的格式化标记HTML的格式化标记用于控制文本的显示。 Font标记 静夜思 床前明月光, 疑似地上霜; 举头望明月, 低头思故乡。 字体标记:font 说
6、明:font标记用于控制文字的字体,但是现在的网页中已经被取消了,替代它的就是我们后续课程要学到的CSS;face:控制文字的字体,一般情况下,不要设置特殊字体或者平时用量较少的字体;如果设置了前者,默认会以宋体的形式出现;size:控制文字的大小,一般情况下,可以使用默认形式或者像素大小来描述;如果采用默认形式,size的取值范围为17,默认为2;如果采用像素大小描述,后面要加上单位px,一般范围取值为9px或者12px; 格式化标记:一组标记 格式化标记 静夜思 床前明月光, 疑似地上霜; 举头望明月, 低头思故乡。 格式化标记用于控制文字的一些特殊属性,如:上标、下标、加粗、倾斜等,但是
7、有很多标记实际上已经不常用或者被同化掉。除了b标记和u标记以外, 常见的格式化标记还有、等。 预处理标记:PRE PRE标记 静夜思 床前明月光,疑似地上霜; 举头望明 月,低头思 故乡。 PRE标记是将网页设计的文档内容保持,并以网页的形式在浏览器中解释执行,但是它会使文字缩小。 特殊字符标记:&在HTML中,由于有很多的字符无法直接在文本文档中输入或者无法直接被浏览器解释,因此需要将这类字符以特殊的形式出现;如:空格、红桃等。在HTML中定义了以&开头的特殊字符。如:空格: :> 红桃:♥ 其他文字标记四 HTML的链接标记HTML的链接标记是HTML标记中
8、最重要的一种标记,也是HTML页面之间唯一的切换方式。HTML的链接方式在目前的网页设计中有很多种,但是在本学期的网页设计中,我们只针对静态页面进行讲解,因此,只涉及到两大类链接。1. HTML链接的主要方式 外部链接:通过链接可以切换到或者跳转到其他网站或者其他网站的某个页面。格式:链接名称 外部链接 新浪网新浪网其中:URL地址是指具体的网页的网络地址或者网页的IP地址。 内部链接:通过链接可以切换到或者跳转到当前网站的其他页面或者当前页面的其他位置。格式:链接名称 内部链接1 第一个页面第二个页面2. HTML内部链接的具体表现1) 链接到当前网站的某一个页面:这类链接操作比较简单,其表现形式为内部链接的基本形式。2) 链接到当前网站的某一个文件或图片: 内部链接2 下载WORD文档打开图片显示图片这类链接操作表现形式有多种,比如:下载文件、显示图片、打开图片。3) 链接到当前网站的当前页面的某一个位置或其他页面的某一个位置:这类链接操作表现形式也被称为“锚接”,也称为“书签链接”。其具体表现格式为:命名锚:指定锚名链接锚:链接名称 内部链接2 春天 | 夏天 | 秋天 | 夏天第一个页面: 内部链接2 春天 a nam