网页设计与制作基础（HTML5+CSS3）课件 第2章 HTML5基础.pptx

第2章HTML5基础

目录HTML文档基本组成01常用的HTML标签02HTML5新增元素03

2.1.html文档结构HTML标记：html/html，标明是一个HTML文档。首部标记：head/head，提供与网页相关的信息，比如网页标题等等。正文标记：body/body，里面包含文档主要内容，例如文本、图象、动画、超链接等。

head标记head元素用于定义文档的头部，它是所有头部元素的容器。这些头部元素包含元信息、样式表定义及引用外部样式表、脚本语言定义等，具体主要包含以下几部分：title：定义文档标题，它的内容将在浏览器的标题栏出现。meta:可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。例如matacharset=”utf-8”声明此页面使用”utf-8”字符编码格式，支持中文显示。例如＜metaname=“viewport”content=“width=device-width,initial-scale=1,maximum-scale=1“＞声明页面宽度和设备宽度一致，缩放比例为1，保证了移动端的页面在不同的手机上以同样的大小来显示。

head标记style:定义文档的样式，也可以用link链接外部样式表。例如标签styletype=text/csslink=st1.css/style将样式表文件st1.css导入文档中。Script:定义脚本语言。既可以包含脚本语言，也可以通过src属性指向外部脚本。base:定义页面中的所有链接的基准URL。

2.2HTML标签2.2.1HTML结构标记html/html:html文档标记head/head:html头部标记body/body:html主体部分标记

2.2.1HTML内容标签p/p:段落标记。用于分段，段落之间有固定的间距。span/span:用来组合文档中的行内元素,以便通过样式来格式化它们。br/:换行标记，此标记为单标记。hr/:水平线标记，一般用于分隔内容。table/table:表格,包含行tr和列td。h1/h1:小标题标记。在html中，小标题样式除了h1，还有h2,h3,h4,h5,h6共6种小标题样式。ahref=””/a:超链接，表示对文字设置超链接，ahref=“”浙江师范大学/a，div/div：层布局。img/：图片，例如imgsrc=“img/p1.jpg”/

ulli/liul无序列表，用于将相关内容以条目的方式呈现，使内容看起来更加简洁明了。ulli富强、民主、文明、和谐/lili自由、平等、公正、法治/lili爱国、敬业、诚信、友善/li/ululli的列表默认为项目符号列表olli/li/ol有序列表，olli的列表默认为为数字列表，olli富强、民主、文明、和谐/lili自由、平等、公正、法治/lili爱国、敬业、诚信、友善/li/ol2.2.1HTML内容标签

form/form：表单,主要包含以下元素：input元素，根据不同的type属性，input元素又可以分为：inputtype=text?定义供文本输入的单行输入字段；inputtype=password?定义密码字段；inputtype=radio定义单选按钮；inputtype=checkbox定义复选框；inputtype=submit?定义提交表单数据至表单处理程序的按钮；inputtype=button”?定义按钮；select元素（下拉列表）selectname=pcoptionvalue=联想联想笔记本/optionoptionvalue=惠普惠普笔记本/optionoptionvalue=神州神州笔记本/optionoptionvalue=方正方正笔记本/option/select2.2.1HTML内容标签

2.2.2HTML字符格式标记b/b:标识强调文本，以加粗显示。i/i:标识引用文本，以斜体显示。big/big:标识放大文本，以放大效果显示。small/small:标识缩小文本，以缩小效果显示。cite/cite：标识引用文本，以引用效果显示。blink/blink:标识闪烁文本，以闪烁效果显示（IE不支持）。sup/sup:标识上标文本，以上标效果显示。sub/sub:标识下标文本，以下标效果显示。

HTML5引入了多个新的语义元素用来更加细致地描述页面及文档结构。他们用于明确web页面的不同部分，header:为article元素定义文章“头部”信息。na