《网页设计第二周.pptx》由会员分享，可在线阅读，更多相关《网页设计第二周.pptx（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第二章 HTMLHTML简介2.1 HTML基本语法2.2 HTML文件的基本结构2.3 常见HTML标记第1页/共28页 HTML语言，又称超文本标记语言。HTML语言作为一种标识性的语言，是由一些特定符号和语法组成的，所以理解和掌握都是十分容易的。可以说，HTML语言在所有的计算机编程语言中是最简单易学的。创建HTML文件十分简单，只需一个普通的字符编辑器即可。如 Windows中的记事本、写字板都可以使用。2.1 HTML基本语法第2页/共28页一、标记形式HTML标记一般有以下3种形式：（1）对象。即封闭类型标记形式，大多数标记是封闭类型的，也就是说，它们成对出现。例如，斜体标记为倾斜
2、文本。（2）对象。该标记形式是封闭类型标记的扩展形式。（3）。即非封闭类型标记形式。在HTML中，非封闭类型标记很少，但的确存在，最常用的是换行标记。2.1 HTML基本语法第3页/共28页二、书写标记注意事项 书写标记时，应注意以下事项：（1）任何标记皆由“”围住，如。（2）标记名与“”之间不能留有空白字符。（3）有些标记要加上参数，有些则不必，如Hello。（4）参数只可加于起始标记中。（5）在标记名前加上符号“/”便是其终结标记，如。（6）标记字母大小写均可。2.1 HTML基本语法第4页/共28页2.1 HTML基本语法三、标记分类标记按形态分为围堵标记与空标记。围堵标记用起始标记与终
3、结标记将文字围住，令其达到预期显示效果。例如“大学生的最低奋斗目标：农妇，山泉，有点田!”，效果如图所示。围堵标记效果其中，和为围堵标记，它用起始标记和终结标记来标识文字“农妇，山泉，有点田!”，令它显示为粗体，两者缺一都会发生错误显示。第5页/共28页2.1 HTML基本语法空标记是指标记单独出现，只有起始标记没有终结标记。例如“大学生的最低奋斗目标：农妇，山泉，有点田!”，效果如图所示。其中，换行标记便是空标记。第6页/共28页第二节 HTML文件的基本结构HTML文件的基本结构如下：第7页/共28页其中，用于声明这是一个HTML文件，以使浏览器认出并正确处理该文件；至为文档头部，用来说明
4、文件的整体信息，其内容不能在浏览器中显示；由至为文件正文，包含页面的具体内容，可以在浏览器中正确显示；由至用来概括文件的特色或主题，其显示位置因浏览器的不同而不同，一般位于浏览器的最上方。由HTML标记组成的页面，可以省略头部，但必须包含正文部分。第二节 HTML文件的基本结构第8页/共28页下面是一个简单网页示例，如图所示:第二节 HTML文件的基本结构第9页/共28页第二节 HTML文件的基本结构第10页/共28页第二节 HTML文件的基本结构TITLE 标记符 在首部标记符中，最基本、最常用的标记符是标题标记符 和，用于定义网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器
5、中显示时，网页标题将在浏览器窗口的标题栏中显示。例如，以下 HTML 代码在浏览器中的显示如图所示。第11页/共28页正文标记符 正文标记符 和 包含 Web 页的具体内容，包括文字、图形、超链接以及其他各种 HTML 对象。如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）。例如，以下 HTML 代码在浏览器中的显示如图所示。第二节 HTML文件的基本结构第12页/共28页 网页标题 正文，正文，正文，正文，正文，正文，正文，正文，正文第二节 HTML文件的基本结构第13页/共28页2.3 常见HTML标记 背景标记符 是用以插入背景音乐，但
6、只适用于IE，其参数设定不多。如下 src=“your.mid”设定 midi 档案及路径，可以是相对路径或绝对路径。loop=-1是否自动反覆播放。LOOP=2 表示重复两次，-1表示重复多次。第14页/共28页设置页面属性设置页面背景颜色 在 标记符中使用 bgcolor 属性可以为网页设置背景颜色。例如，如果想为网页设置黑色背景，应使用以下HTML语句：在指定背景颜色时，有 16 种标准颜色可供选择，如表 1-1 所示。2.3 常见HTML标记第15页/共28页2.3 常见HTML标记色彩名十六进制值色彩名十六进制值Aqua（水蓝色）#00FFFFNavy（藏青色）#000080Blac
7、k（黑色）#000000Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Fuchsia（樱桃色）#FF00FFRed（红色）#FF0000Gray（灰色）#808080Silver（银色）#C0C0C0Green（绿色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐红色）#800000Yellow（黄色）#FFFF00第16页/共28页2.3 常见HTML标记设置页面背景图片background=“网页背景图案的地址“设定背景图片。使用背景图案时，如果图案小于浏览器窗
8、口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。leftmargin=4设定整份文件显示画面的左方边沿空间，单位为像素。(只适用于IE)设置页面左边距设置页面上边距topmargin=4设定整份文件显示画面的上方边沿空间，单位为像素。(只适用于IE)第17页/共28页2.3 常见HTML标记区段标记一个网站不仅要内容丰富外，也要有美观简洁的版面。HTML所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。常用区段标记产生水平线如:宽度属性width厚度属性size位置属性align阴影属性noshade表示实心线，缺省为阴影线第18页/共28页2.3 常见HTML标记段落标记.段
9、落，跳下一行并加一行空白。(可省略)如:走自己的路，让别人打车去吧！走自己的路，让别人打车去吧！置中标记.置中。如:置中预格式化文本标记.以文件原始格式显示第19页/共28页2.3 常见HTML标记我们在这里将要谈的是有关文字的标记，包括字体大小、颜色、字型.等变化，适当的应用可以增加页面的美观！常用字体标记.标题，设定标题字体大小，n=1(大)6(小)会自动跳下一行。通常用在如章节、段落等标题上。如:标题标题如:标题(标题置中)粗体字.粗体字。如:粗体字第20页/共28页2.3 常见HTML标记斜体字.。如:斜体字加底线.。如:加底线滚动文本.方向direction=#=left,right
10、循环loop=#=次数；若未指定则循环不止底色bgcolor=#第21页/共28页设定字体大小、颜色、字型有关设定文字的方法共有以下几种:1.设定HTML文件主体文字颜色。.标记。如:.或.2.设定字体大小、颜色、字型。.标记。设定字体大小size=17，1(最小)7(最大)。缺省值为3。如:字体大小为4，设定字体face=标楷体,细明体如:设定字型设定颜色color=red如：文字颜色2.3 常见HTML标记第22页/共28页图片标记图片标记用来将图片插入到网页中。如”，效果如图2.3.3所示。图片标记效果2.3 常见HTML标记第23页/共28页2.3 常见HTML标记src指定图片的来源
11、，接受.gif，.jpg和.png格式。如果图片文件与网页文件同处一目录下，则只写上图片文件名称即可，否则，必须加上正确的路径。width和height用来设定图片的大小，一般以pixels为单位。通常设为图片的真实大小，以免失真，若要改变图片大小，最好事先使用图像编辑工具进行编辑。hspace和vspace用来设定图片边缘空白，以免文字或其他图片过于贴近。hspace用来设定图片的左右空间，vspace用来设定图片的上下空间，一般以像素为单位。border用来设定图片边框厚度。alt为当浏览器尚未完全读入图片时，在图片位置显示的文字。第24页/共28页2.3 常见HTML标记#63952B第25页/共28页第26页/共28页第27页/共28页感谢您的观看！第28页/共28页