网站培训(一).pptx

网站培训（一） 主讲人：胡成杨 网站结构 每个网站都有它自己的结构（右图就是一个简单的网站结构），对于网站制作者来说，每一个页面又都是一个HTML文件，前端的同学就通过对HTML的编程来实现对网页设计的实现接下来我就要给你们讲如何用HTML去进行一个网页的制作。 什么是HTML HTML指的是超文本标记语言（Hyper Text Markup Language） HTML不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 HTML使用标记标签来描述网页 HTML文档的结构 一个完整的HTML文件包含头部和主体两个部分的内容，在头部内容里，可定义标题、样式等，文档的主体内容就是要显示的信息。 html head !--头部内容开始-- title 一个简单的HTML示例 /title /head !—头部内容结束-- body !—主体部分开始-- h1我的第一个网页/h1 /body !—主体部分结束-- /html HTML头部内容 head…/head是HTML文档的头部标记, 在浏览器窗口中，头部信息是不被显示在正文中的，在此标记中可以插入其它用以说明文件的标题和一些公共属性的标记。 如要指定HTML文档的网页标题（它将显示在浏览器窗口顶部标题栏），就要在头部内容中提供有关信息。用title元素来指定网页标题，即在title/title之间写上网页标题 html head title我的第一个网站/title /head body /body /html 红色框里显示的就是tittle标记包含的内容 HTML主体内容 在标记body和/body中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等元素。 例如下列代码，在body部分添加了几个关于文本和段落的标记。 html head title我的第一个页面/title /head body h1这里是文章的标题。/h1 p这里是文章的段落。/p /body /html HTML基本语法 HTML用于描述功能的符号称为“标记”。html、head、body等都是标记。标记通常分为单标记和双标记两种类型。 HTML标记语法 单标记 单标记仅单独使用就可以实现某种功能。 基本语法： 标记名称 语法说明： 最常用的单标记是br,它表示换行。 HTML标记语法 双标记 双标记由首标记和尾标记两部分构成，它必须成对使用。首标记告诉Web浏览器从此处开始执行该标记所表示的功能。尾标记告诉Web浏览器在这里结束该标记。 基本语法： 标记名称内容/标记名称 语法说明： 其中“内容”部分就是要被这对标记施加作用的部分。 例如，“b“标记的作用是，告诉浏览器介于标记b和/b之间的文本应以粗体显示。（这里的“b”是“粗体（bold）”的意思。 标记可以包含标记，即标记可以成对嵌套，但是不能交叉地嵌套。下面的代码就是错误的： BI这是错误的交叉嵌套代码/B/I。 HTML属性语法 HTML通过标记告诉浏览器如何展示网页，如br告诉浏览器显示一个换行。另外还可以为某些元素附加一些信息，这些附加信息被称为属性。 例如，标记hr的作用是在网页中插入一条水平线,那么这条水平线的粗细、对齐方式等就是该标记的属性，如： hr size=5px align=center HTML属性语法 基本语法： 标记名称 属性名1=属性值 属性名2=属性值 语法说明： 属性应写在首标记内，并且和标记名之间有一个空格分隔。例如，上例中hr标记中，align为属性，center为属性值，属性值可以直接书写，也可以使用括起来。以下写法也是正确的： hr size=5px align=center 建议使用””括起来 HTML的注释 注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。可以使用注释对程序代码进行解释，适当的注释对以后代码的阅读和维护产生很大的帮助。 基本语法： !-- 注释内容 -- 语法说明： 左括号后需要写一个惊叹号，右括号前就不需要了。 编写HTML文件的注意事项 “”和“”是任何标记的开始和结束。元素的标记要用这对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠“/”； 标记可以嵌套使用，但不能嵌套标记。任何回车符和空格在HTML代码中都不起作用。为了代码清晰，建议不同的标记都单独占一行； 标记中可以放置各种属性，属性值都用“”括起来； 编写代码，一般应该使用缩进风格，以便更好的理解页面的结构，便于阅读和维护。 下图就是一个缩进样例： 编写HTML文件的注意事项 为了使浏览器能正常浏览网页，在用记事本或别的HTML开发工具编写好HTML文档后，在保存HTML时，对HTML文