艺术品商城网站开发,wordpress PHP cpanel,云购物商城,网页设计尺寸多大HTML5实际上不算是一种编程语言#xff0c;而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成#xff0c;这些标签以元素名的形式出现#xff0c;用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上#xff0c;而元… HTML5实际上不算是一种编程语言而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成这些标签以元素名的形式出现用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上而元素标签本身并不会被浏览器显示出来。
HTML5文档的基本结构如下
!DOCTYPE html
htmlheadtitle网页标题/title/headbody主体内容/body
/html
HTML5元素的内容一般以起始标签元素名开始以结束标签/元素名终止。例如首部标签head中的title标签用于标记网页标题该标签之间的内容将显示在浏览器窗口的标题栏中。主体标签body中的内容显示到网页上。
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词比如 htmlHTML 标签通常是成对出现的比如 b 和 /b标签对中的第一个标签是开始标签第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签
HTML文档 网页
HTML 文档描述网页HTML 文档包含 HTML 标签和纯文本HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档并以网页的形式显示出它们。浏览器不会显示 HTML 标签而是使用标签来解释页面的内容。
2.1.1 文档类型声明!DOCTYPE DOCTYPE是Document Type的简写含义为文档类型。HTML5文档基础结构中第一行!DOCTYPE html就是HTML5的DOCTYPE声明。 网页实际上有多种浏览模式例如兼容模式标准模式等。HTML5用!DOCTYPE标签定义文档该基于何种标准在网页中呈现。!DOCTYPE html意味着该网页的呈现标准是基于HTML5。当使用该DOCTYPE声明方式时浏览器会将此页面定义为标准兼容模式。
HTML4.01的文档类型声明较为复杂常见如下
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd在HTML5中该声明被大幅度化简
!DOCTYPE html在浏览器打开的网页页面任意位置右键点击选择“查看网页源代码”在页面顶端第一句就是DOCTYPE声明。 HTML5引入了新的特性和元素同时也取消了对部分过期元素的支持因此如果在HTML5的DOCTYPE声明下使用了HTML的过期元素网页可能无法正常显示预期的效果。
2.1.2 根标签html html是HTML5文档的根元素标签除顶部!DOCTYPE html文档类型声明以外所有的HTML5文档都是以html标签开始以/html标签结束。在html和/html标签内包含了两个重要的元素标签head首部标签和body主体标签分别用于标记文档的首部和主体部分。
2.1.3 首部标签head HTML5文档的首部以head标签开始以/head标签结束。head标签中的内容不会显示在网页的页面中。head标签中可包含title和meta等标签用于声明页面标题、字符集和关键词等。
网页标题标签title HTML5文档使用title和/title标签标记网页标题该标题会显示在浏览器窗口的标题栏中若省略title标签则网页标题会显示为“无标题文档”。建议在网页代码中保留该标签因为title标签还能用于当网页被添加到收藏夹时显示标题以及作为页面标题显示在搜索引擎结果中。
基础地址标签base base标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档中使用了相对路径时浏览器会用base标签指定的URL进行补全。例如
head
base hrefhttp://localhost/images/ /
/headbody
img srcsunflower.jpg /
/body此时在第一个图像标签img中src属性填写的是一个相对路径由于base标签的作用该路径会被浏览器自动补全为img src http://localhost/images/sunflower.jpg /。如果没有使用base标签来指定URL地址则浏览器会用当前HTML5文档的URL对图片地址进行补全。 base标签也可以为该网页上所有超链接统一设置打开方式。例如
head
base target_blank /
/headbody
a hrefhttp://www.baidu.com百度/a
a hrefhttp://www.163.com网易/a
/body在base标签中的属性target_blank指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。
元数据标签meta meta标签用于提供当前HTML文档的元数据这些数据不会直接显示在网页上但是对于机器是可读的适用于搜索引擎索引。通常meta标签可用于定义网页的字符集、关键词、描述、作者等信息。 (1) 字符集声明 Charset是Character Set的简写含义为字符集设置。浏览器统一默认的字符集是ISO-8859-1西文字符集如果使用了其他字符集浏览器需知道使用何种字符集才能正确地显示HTML页面。HTML5文档使用meta标签进行字符集声明。万维网初期使用的是ACSII字符集该字符集支持数字0-9、英文字母大写A-Z和小写a-z以及部分特殊字符。由于很多国家使用的字符不被ACSII支持因此浏览器统一默认的字符集是ISO-8859-1西文字符集。
以UTF-8字符集为例HTML4.01的字符集声明如下
meta http-equivContent-Type contenttext/html; charsetutf-8在HTML5中同样的内容声明方式会更为简洁写法如下
meta charsetutf-8(2) 关键词声明
使用meta标签定义网页关键词keywords的用法如下
meta namekeywords contentHTML5, CSS3, jQuery /(3) 页面描述声明
使用meta标签定义页面描述description的用法如下
meta namedescription contentThis is a tutorial about HTML5, CSS3, jQuery /搜索引擎会根据meta标签中的name和content属性来索引网页。
样式标签style 样式标签style可用于定义文档中指定区域的字体风格、背景颜色、对齐方式等各类样式信息。
例如
head
style
p {color: red}
/style
/head
body
p这是一个段落。/p
/body这段代码可以将HTML5文档中所有未指定字体颜色的段落显示为红色。 链接标签link
link标签用于连接外部资源和当前HTML5文档它只出现在首部标签head和/head中通常用于连接外部样式表。例如
head
link relstylesheet hrefmy.css /
/head这表示将CSS样式文件my.css指定的样式效果应用于当前网页中。
如果需要同时引用多个外部样式表文件则需要为每一个CSS样式文件单独使用一次link标签。例如
head
link relstylesheet hrefmy1.css /
link relstylesheet hrefmy2.css /
link relstylesheet hrefmy3.css /
/head这里对于CSS样式文件的引用使用了相对路径也可以根据实际需要填写URL地址。
脚本标签script
script标签为可选取决于当前页面是否需要使用脚本内容比如JavaScript。该标签可以直接引用外部脚本文件也可以直接将脚本命令写在script和/script标签中。例如
head
script srctest.js/script
/head和引用外部CSS文件类似如果需要同时引用多个JavaScript文件则需要为每一个JavaScript文件单独使用一次script标签。例如
head
script srctest1.js/script
script srctest2.js/script
script srctest3.js/script
/head2.1.4 主体标签body HTML5文档的主体部分以body标签开始以/body标签结束。body标签中的内容将全部显示在网页的页面中。body标签中可直接添加文本内容也可继续嵌套其他元素标签形成多样化的显示效果。
2.1.5 HTML5文档注释 为增加HTML5文档的可读性可为其添加注释部分。注释是文档中的说明文字不会被浏览器执行。HTML5使用!--...--标签为文档进行注释注释标签以“!--”开头以“--”结束中间的“...”替换为注释文字内容即可。!--...--标签支持单行和多行注释。
2.1.6 HTML5文档规范
1. 文件类型 一般来说纯HTML5开发推荐使用.html格式。和HTML4.01一样HTML5支持的常用文件后缀名为.html。在早期的DOS操作系统中文件扩展名限制为最多3个字符无法识别4位文件名因此.htm被用于兼容此类操作系统。目前这两种扩展名方式均被各类浏览器广泛支持互换后缀名不会引起打开错误但是通过URL地址访问时需要正确的扩展名。
2. 元素标签格式
元素标签一般情况下是成对出现的首尾标签的元素名称保持一致并且尾标签中需要加上斜杠符号。早期的HTML规范中标签的大小写是不敏感的因此老版本的网页中可能会存在如下写法
HTMLHEADTITLE早期存在的大写标签页面/TITLE/HEADBODY……/BODY
/HTML万维网联盟W3C明确规定了在新版本HTML5中必须使用小写格式包括元素标签本身和其中可能出现的属性均需要遵守此规范。 在HTML5中也存在部分标签是独立使用没有首尾标签成对出现。例如换行标签br和水平线标签hr等。由于此类标签单个就已经可以表达足够明确的含义并且不包含其他文本内容需要放置在其首尾标签之间因此结束标签没有存在的必要性。 目前这种无结束标签的元素标签有不同的写法存在例如水平线标签可以写成hr或hr /。HTML4.01以前版本可以直接写成hr但在XML规范中所有的标签都必须有结束标签因此必须加上斜杠符号表示完结。虽然目前这两种写法均能被浏览器正确显示但是从长远来看加上结束标志即斜杠符号的写法更为标准。
3. 字符实体的使用 在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号和大于符号是无法直接输出的因为它们会被误认为是元素标签的组成部分而连续空格也无法正确显示会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为字符实体Character Entities。 字符实体可借助其对应的字符名称或数字代码进行输出其格式如下
实体名称;
#实体数字;
实体名称和实体数字的写法都是以符号开头以;符号结尾其中实体数字前面还加有#符号以示区分。例如大于符号可以使用gt;或#62;表示。
常用的字符实体及其对应的表示方式如表所示 实体名称的出现是为了方便记忆但是部分实体名称不能完全被所有浏览器支持。例如单引号的实体名称apos;在IE浏览器中不被支持在这种情况下可以使用实体数字代替。
4. 图像文件的使用
网页文件常见的图像格式有
JPEG格式
JPEG格式指的是联合图像专家组Joint Photographic Experts GroupJPEG格式是第一个国际图像压缩标准。该格式的图像文件后缀名是.jpg或.JPG两种形式。
JPEG格式图像文件有以下特点
支持高级压缩弹性压缩比广泛支持互联网标准 GIF格式
GIF格式指的是图像交换格式Graphics Interchange FormatGIF该格式的图像文件后缀名是.gif或.GIF两种形式。
GIF格式图像文件有以下特点
无损性256种颜色隔行扫描动画效果
PNG格式
PNG格式指的是图像交换格式Portable Network Graphic FormatPNG该格式的图像文件后缀名是.png或.PNG两种形式。
PNG格式图像文件有以下特点
文件体积小支持透明显示色彩索引模式
2.1.7 HTML4.01转换为HTML5
基于HTML4.01开发的网页可以分成三个步骤转换为HTML5网页。
示例代码如下
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
htmlheadtitleHTML4.01网页转换HTML5/titlemeta http-equivContent-Type contenttext/html; charsetutf-8script typetext/javascript srctest.js/scriptlink typetext/css relstylesheet hreftest.css/headbody再见HTML4.01你好HTML5/body
/html步骤一化简DOCTYPE声明方式。
步骤二化简charset字符集描述方式。
步骤三可选取决于需要转换的文件是否包含该内容若存在外部css文件或js文件的引用可以直接省略其中的type描述。
修改后的代码如下
!DOCTYPE html
htmlheadtitle HTML4.01网页转换HTML5/titlemeta charsetutf-8script src”test.js”/scriptlink rel”stylesheet” href”test.css”/headbody再见HTML4.01你好HTML5/body
/html
