Web程序设计课件chapter02_第1页
Web程序设计课件chapter02_第2页
Web程序设计课件chapter02_第3页
Web程序设计课件chapter02_第4页
Web程序设计课件chapter02_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第二章HTML文档的结构2.1HTML文档的结构<!doctypehtml><html><head><title>网页的标题</title></head><body>

网页的内容

</body></html>以<html>开头，以</html>结尾。包括头部（head）和主体（body）两大部分。

<head>…</head>：网页的题头，说明文件命名与文件本身的相关信息。

<title>…<title>：网页标题，在浏览器的标题栏显示。

<body>…<body>：网页的正文。

2.2HTML基本语法2.2.1标记语法1、什么是标记2、标记类型和语法*单标记

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

始标记告诉Web浏览器从此处开始执行该标记所表示的功能。

尾标记告诉Web浏览器在这里结束该功能。始标记前加一个正斜杠（/）即成为尾标记。这类标记的语法是：

<标记>内容</标记>其中“内容”部分就是要被这对标记施加作用的部分。2.2.1HTML基本语法<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>HTML5Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li></li></ul></nav><section><article></article><article></article></section><aside></aside><footer></footer></body></html>2.2.1HTML基本语法2.2HTML基本语法2.2.2属性语法

1．什么是属性

2．属性语法

<标记名字属性1属性2属性3…>2.2.2全局属性属性描述accesskey规定激活元素的快捷键。class规定元素的一个或多个类名（引用样式表中的类）。contenteditable规定元素内容是否可编辑。contextmenu规定元素的上下文菜单。上下文菜单在用户点击元素时显示。data-*用于存储页面或应用程序的私有定制数据。dir规定元素中内容的文本方向。draggable规定元素是否可拖动。dropzone规定在拖动被拖动数据时是否进行复制、移动或链接。hidden规定元素仍未或不再相关。id规定元素的唯一id。lang规定元素内容的语言。spellcheck规定是否对元素进行拼写和语法检查。style规定元素的行内CSS样式。tabindex规定元素的tab键次序。title规定有关元素的额外信息。translate规定是否应该翻译元素内容。2.2.2属性语法实例1

<pid=“firstP”></p><htmllang=“en”><divstyle=“border:1pxsolidred”2.3HTML文件的命名注意：

文件的扩展名要以.html或.html结束。

文件名中只可由英文字母、数字或下划线组成。

文件名中不要包含特殊符号，比如空格、$等。

文件名是区分大小写的，在Unix和Windows主机中有大小写的不同。

网站首页文件名默认是index.htm或index.html。2.4编写HTML文件的注意事项

所有标记都要用尖括号（<>）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令。

对于成对出现的标记，最好同时输入起始标记或结束标记，以免忘记。

采用标记嵌套的方式可以为同一个信息应用多个标记，如下：<tag1><tag2>同一个信息</tag2></tag1>

在代码中，不区分大小写，比如，将<head>写成<HEAD>或<Head>都可以。

任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是 、<br>。因此，不同的标记间用回车键换行再编写是个不错的习惯。2.4编写HTML文件的注意事项标记中不要有空格，否则浏览器可能无法识别，比如不能将<title>写成<title>。下面的代码中有误，将该文件存为.html文件后，用浏览器打开，<title>所定义的文字没有在浏览器标题中显示，反而显示在正文中，而错误的<title>标记也被当作正文来显示。2.4编写HTML文件的注意事项2.4编写HTML文件的注意事项

标记中的属性值，用双引号(“”)引起来：<pid=“firstP”>content</p>2.5头部内容2.5.1设置页面标题<title>2.5.2设置基底网址<base>2.5.3定义元信息<meta>2.5.4设置页面关键字——keywords2.5.5设置页面过期时间——expires2.5.1设置页面标题<title>基本语法<!DOCTYPEhtml><html><head> <title>请在此输入标题名</title></head><body></body></html>2.5.1设置页面标题<title>语法说明在网页中设置网页的标题，只要在HTML文件的头部文件的<title></title>中输入标题信息就可以在浏览器的上显示2.5.1设置页面标题<title>实例代码<html><head> <title>嘿嘿，大家努力吧</title></head>

<body>

请看标题栏!</body></html>此行代码用于插入HTML显示的标题2.5.1设置页面标题<title>网页效果2.5.2设置基底网址<base>基本语法<html><head><basehref=”文件路径”target=“目标窗口”></head><body></body></html>3.1.2设置基底网址<base>语法说明href用于设置网页文件链接的地址，target用于设置页面显示的目标窗口。2.5.1设置基底网址<base>实例代码<html><head> <basehref=""target="_self">

</head><body>2007年1月16日，电子工业出版社<ahref="index">博文视点</a>公司召开了“博文视点三周年庆典暨颁奖晚会”。

刚刚过去的2006年对博文视点的发展来说是意义非凡的一年，在市场不断变化，道路并不平坦的一年中，博文视点能够稳住军心，坚持自己的出版方向，逐渐成为IT出版界的旗舰级机构。</body></html>此行代码表示：当网页代码运行后，把鼠标放在设置好链接的“博文视点”上面，在状态栏上会显示“博文视点”链接的完整地址，并且在单击该链接后，网页会在当前窗口中被打开。2.5.2设置基底网址<base>网页效果2.5.3定义元信息<meta>必需的属性

属性值描述contentsome_text定义与http-equiv或name属性相关的元信息可选的属性

属性值描述http-equivcontent-type把content属性关联到HTTP头部。expiresrefreshset-cookienameauthor把content属性关联到一个名称。descriptionkeywordsgeneratorrevisedothersschemesome_text定义用于翻译content属性值的格式。2.5.3定义元信息<meta>语法说明<meta>标记中的http-equiv属性用于设置一个http的标题域，但确定值由content属性决定，name属性用于设置元信息出现的形式，content属性用于设置元信息出现的内容。<metahttp-equiv="charset"content="iso-8859-1">

<meta

http-equiv="expires"content="31Dec2008">2.5.3定义元信息<meta>实例代码<html><head><metahttp-equiv=””name=””content=””>

…</head><body>…</body></html>此行代码表示：当给各项输入正确的属性值后，都会在网页中显示一定的效果。2.5.4设置页面关键字－keywords基本语法<metaname=”keywords”content=”value”>2.5.4设置页面关键字－keywords语法说明Keywords用于说明定义的是关键字，value用于说明为该网页定义的关键字，可以是多个关键字。2.5.4设置页面关键字－keywords实例代码<!实例3-1-5代码> <html><head><title>设置文件关键字</title><metaname=”keywords”content=”计算机、英语、经管、财会、职场”>

…</head><body>…</body></html>此行代码表示在该HTML文件中，定义的关键字为“计算机、英语、经管、财会、职场”，当利用搜索引擎搜索图书时，输入任何一个关键字都可以搜索到该网页。2.5.5设置页面过期时间－expires基本语法<metahttp-equiv=”expires”content=”value”>语法说明expires用于设计页面过期时间，content属性设置具体过期时间值。2.5.5设置页面过期时间－expires实例代码<html><head><title>设置页面过期时间</title><metahttp-equiv=”expires”content=”FRI,1JUN2007000000GMT”>

</head>

<body></body></html>Expires用于设置网页的过期时间，content给出了网页过期的具体时间值。2.6实例——单列页面<!doctypehtml><html><head> <title>html小实例</title></head><body> <header> <hgroup><h1>primarytitle</h1><h2>secondarytitle</h2> </hgroup> </header> <nav> <ul> <li>menuone</li> <li>menutwo</li> <li>menuthree</li><li>menufour</li> <ul> </nav> <section> <article> <hgroup><h3>江雪</h3><hgroup> <p>千山鸟飞绝</p> <

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论