Web程序设计课件chapter-02

1、 HTML文档的结构Web程序设计前端和后端开发第章22.1 HTML文档的结构 网页的标题网页的标题 网页的内容网页的内容 以以开头，以开头，以结尾。结尾。 包括头部（包括头部（head）和主体（）和主体（body）两大部分。）两大部分。 ：网页的题头，说明文件命名与文件本身的：网页的题头，说明文件命名与文件本身的相关信息。相关信息。 ：网页标题，在浏览器的标题栏显示。：网页标题，在浏览器的标题栏显示。 ：网页的正文。：网页的正文。 Web程序设计前端和后端开发第章22.2 HTML基本语法2.2.1 标记语法 1、什么是标记 2、标记类型和语法 *单标记 *双标记 Web程序设计前端和后端

2、开发第章2什么是标记HTML用于描述功能的符号称为“标记”。比如、等，都是标记，标记表示HTML文档的开始。标记在使用时必须用尖括号“”括起来，有些标记必须成对出现，以开头无斜杠的标记（如:）开始，以有斜杠的标记（如:）结束。比如，表示一个表格的开始，表示一个表格的结束。在HTML中，标记的大小写作用相同，如和都是表示一个表格的开始。Web程序设计前端和后端开发第章2单标记之所以称为“单标记”，是因为它只需单独使用就能完整地表达意思，这类标记的语法是：或或最常用的单标记是或，它表示换行。Web程序设计前端和后端开发第章2双标记“双标记”由“始标记”和“尾标记”两部分构成，必须成对使用。 始标记

3、告诉Web浏览器从此处开始执行该标记所表示的功能。 尾标记告诉Web浏览器在这里结束该功能。始标记前加一个正斜杠（/）即成为尾标记。这类标记的语法是： 内容内容 其中“内容”部分就是要被这对标记施加作用的部分。Web程序设计前端和后端开发第章22.2.1 HTML基本语法HTML5 DemoHTML5 DemoWeb程序设计前端和后端开发第章22.2.1 HTML基本语法Web程序设计前端和后端开发第章22.2 HTML基本语法 2.2.2 属性语法 1 什么是属性 2属性语法 Web程序设计前端和后端开发第章22.2.2 全局属性 属性描述accesskey规定激活元素的快捷键。class规

4、定元素的一个或多个类名（引用样式表中的类）。contenteditable规定元素内容是否可编辑。contextmenu规定元素的上下文菜单。上下文菜单在用户点击元素时显示。data-*用于存储页面或应用程序的私有定制数据。dir规定元素中内容的文本方向。draggable规定元素是否可拖动。dropzone规定在拖动被拖动数据时是否进行复制、移动或链接。hidden规定元素仍未或不再相关。id规定元素的唯一 id。lang规定元素内容的语言。spellcheck规定是否对元素进行拼写和语法检查。style规定元素的行内 CSS 样式。tabindex规定元素的 tab 键次序。title规定

5、有关元素的额外信息。translate规定是否应该翻译元素内容。Web程序设计前端和后端开发第章22.2.2 属性语法 实例1 div style=“border:1px solid red”Web程序设计前端和后端开发第章22.3 HTML文件的命名 注意： 文件的扩展名要以.html或.html结束。 文件名中只可由英文字母、数字或下划线组成。 文件名中不要包含特殊符号，比如空格、$等。 文件名是区分大小写的，在Unix和Windows主机中有大小写的不同。 网站首页文件名默认是index.htm或index.html。Web程序设计前端和后端开发第章22.4 编写HTML文件的注意事项

6、所有标记都要用尖括号（）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令。 对于成对出现的标记，最好同时输入起始标记或结束标记，以免忘记。 采用标记嵌套的方式可以为同一个信息应用多个标记，如下：同一个信息同一个信息 在代码中，不区分大小写，比如，将写成或都可以。 任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是&nbsp、。因此，不同的标记间用回车键换行再编写是个不错的习惯。Web程序设计前端和后端开发第章22.4 编写HTML文件的注意事项标记中不要有空格，否则浏览器可能无法识别，比如不能将写成。下面的代码中有误，将该文件存为.html文件后，用浏览器打开

7、，所定义的文字没有在浏览器标题中显示，反而显示在正文中，而错误的标记也被当作正文来显示。Web程序设计前端和后端开发第章22.4 编写HTML文件的注意事项Web程序设计前端和后端开发第章22.4 编写HTML文件的注意事项 标记中的属性值，用双引号(“”)引起来： contentWeb程序设计前端和后端开发第章22.5 头部内容2.5.1 设置页面标题2.5.2 设置基底网址2.5.3 定义元信息2.5.4 设置页面关键字keywords2.5.5 设置页面过期时间expiresWeb程序设计前端和后端开发第章22.5.1 设置页面标题 基本语法 请在此输入标题名Web程序设计前端和后端开发

8、第章22.5.1 设置页面标题 语法说明在网页中设置网页的标题，只要在HTML文件的头部文件的中输入标题信息就可以在浏览器的上显示Web程序设计前端和后端开发第章22.5.1 设置页面标题 实例代码 嘿嘿，大家努力吧 请看标题栏!此行代码用于插入HTML显示的标题Web程序设计前端和后端开发第章22.5.1 设置页面标题 网页效果Web程序设计前端和后端开发第章22.5.2 设置基底网址 基本语法 Web程序设计前端和后端开发第章23.1.2 设置基底网址 语法说明href用于设置网页文件链接的地址，target用于设置页面显示的目标窗口。Web程序设计前端和后端开发第章22.5.1 设置基底

9、网址 实例代码 2007年1月16日，电子工业出版社博文视点公司召开了“博文视点三周年庆典暨颁奖晚会”。 刚刚过去的2006年对博文视点的发展来说是意义非凡的一年，在市场不断变化，道路并不平坦的一年中，博文视点能够稳住军心，坚持自己的出版方向，逐渐成为IT出版界的旗舰级机构。此行代码表示：当网页代码运行后，把鼠标放在设置好链接的“博文视点”上面，在状态栏上会显示“博文视点”链接的完整地址，并且在单击该链接后，网页会在当前窗口中被打开。Web程序设计前端和后端开发第章22.5.2 设置基底网址 网页效果Web程序设计前端和后端开发第章22.5.3 定义元信息必需的属性必需的属性属性值描述cont

10、entsome_text定义与 http-equiv 或 name 属性相关的元信息可选的属性可选的属性属性值描述http-equivcontent-type把 content 属性关联到 HTTP 头部。expiresrefreshset-cookienameauthor把 content 属性关联到一个名称。descriptionkeywordsgeneratorrevisedothersschemesome_text定义用于翻译 content 属性值的格式。Web程序设计前端和后端开发第章22.5.3定义元信息 语法说明标记中的http-equiv属性用于设置一个http的标题域，但确

11、定值由content属性决定，name属性用于设置元信息出现的形式，content属性用于设置元信息出现的内容。 Web程序设计前端和后端开发第章22.5.3定义元信息 实例代码 此行代码表示：当给各项输入正确的属性值后，都会在网页中显示一定的效果。Web程序设计前端和后端开发第章22.5.4 设置页面关键字keywords 基本语法Web程序设计前端和后端开发第章22.5.4 设置页面关键字keywords 语法说明Keywords用于说明定义的是关键字，value用于说明为该网页定义的关键字，可以是多个关键字。Web程序设计前端和后端开发第章22.5.4 设置页面关键字keywords 实例代码 设置文件关键字 此行代码表示在该HTML文件中，定义的关键字为“计算机、英语、经管、财会、职场”，当利用搜索引擎搜索图书时，输入任何一个关键字都可以搜索到该网页。Web程序设计前端和后端开发第章22.5.5 设置页面过期时间expires 基本语法 语法说明expires用于设计页面过期时间，content属性设置具体过期时间值。Web程序设计前端和后端开发第章22.5.5 设置页面过期时间expires 实例代码 设置页面过期时间 Expires用于设置网页的过期时间，content给出了网页过期的具体时间值。Web程序设计前端和后端开发第章22.6 实例单列页面html小实例