第三讲 HTML基础课件.pptxVIP

第三讲 HTML基础魏小林主要内容HTML概述HTML标签：元素、属性和值文本与图像标签 学习目标熟练两个方面的内容：标签的用途标签在浏览器中的默认样式能够运用HTML基本知识，制作案例：享美网页面课堂导引——代码填空html/html将下面的代码补全HTML概述——语义化定义：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。好处：1. 更容易被有哪些信誉好的足球投注网站引擎收录。2. 更容易让屏幕阅读器读出网页内容。HTML概述——基本html结构由文档头、文档体构成html head　头 部 信 息 /head　 body　文 档 主 体， 正 文 部 分 /body/htmlHTML概述——基本html结构1.?html/html称为根标签。2.?head?标签用于定义文档的头部，它是所有头部元素的容器。头部元素有title、script、?style、link、?meta等标签。3. 在body和/body标签之间的内容是网页的主要内容如h1、p、a、img等网页内容标签。HTML概述——基本html结构课堂练习：利用DW创建一个站点（随堂练习），并建立一个页面（index.html），并输入如下代码页面声明：html5文档 Html文档的开始 字符编码声明 网页文档的头部 页面标题结束页面头部 页面主体开始和结束结束页面HTML概述——html和css的关系1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。HTML概述——html和css的关系课堂示例:为页面主体添加样式主要内容HTML概述HTML标签：元素、属性和值文本与图像标签HTML语法——标签标签由“”和“”括起，分为单标签和双标签双标签是必须成对使用的标签如html和/html title和/title 页面标题body和/bodyp和/p 段落h1和/h1 一级标题（h1……6) HTML语法——标签HTML标签 单标签是单独使用的标签 hr 标签，表示插入一条横线 img标签，表示插入一幅图片 HTML标签——基本语法标签由元素、属性和值组成。 标签由英文尖括号和括起来，如html就是一个标签。 html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。如：（1）?p/p（2）?div/div（3）?body/bodyHTML标签——基本语法标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：div里嵌套p，那么/p必须放在/div的前面。如下图所示。HTML标签不区分大小写，h1和H1是一样的，但建议小写，因为大部分程序员都以小写为准。 HTML标签——元素元素是一个网页的基本组成部分，如h1元素、p元素等元素名不区分大小写，并使用规定的标签来标识这些元素 例如： title 认识html标签 /title 其中，title是元素名， title与/title之间的文本表示元素title的内容。 HTML标签——属性及属性值标签除了可以有自己的名字以外，还可以有属性 格式为： 标签名字 属性1属性2属性3 … a href= “”搜狐 /ahr width=80% color=“#ff0000” align=“center“主要内容HTML概述HTML标签：元素、属性和值文本与图像标签文字与图像图像和文本，是网页设计中不可或缺的组成部分，合理地使用这些元素，可以使网站充满生命力和说服力，吸引更多的浏览者，加深浏览者对网站的印象 body—网页上显示的内容放在这里动手实现下面的网页，猜一猜这些标签的语义P——添加段落p段落文本/p注意一段文字一对p标签p标签的默认样式，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。课堂练习我来试试，亲自感受一下段落标签的使用1、在body标签里添加录入三个段落hx——为网页添加标题hx标题文本/hx (x为1-6)hx——为网页添加标题课堂练习我来试试，亲自感受一下标题标签的使用1、给上述文章加上标题 《第九大菜系》strong和em标签——加入强调语气em输入想强调的文本/em strong输入想标记为重要性的文本/strong 在浏览器中em 默认用斜体表示，strong 用粗体表示。课堂练习我来试试，亲自感受一下强调标签的使用1、为玉米炒提子和贵、丑、少加上强调课堂练习看你是否真正学会了标签的语法利用title、h1和p标签，设计出如下页面q标签——短文本引用q引用文本/q语义：引