加强机关网站内容建设,电商平台设计公司,手机网站怎么建立,雅昌网站做古董交易HTML5中的一个主要变化是#xff1a;将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这合乎情理。HTML元素负责文档内容的结构和含义#xff0c;内容的呈现则由应用于元素上的CSS样式控制。下面介绍最基础的HTML元素#xff1a;文档元素和元数据元素。
一、构建…HTML5中的一个主要变化是将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这合乎情理。HTML元素负责文档内容的结构和含义内容的呈现则由应用于元素上的CSS样式控制。下面介绍最基础的HTML元素文档元素和元数据元素。
一、构建基本的文档结构
文档元素只有4个DOCTYPE元素、html元素、head元素、body元素。
1. DOCTYPE元素
每个HTML文档必须以DOCTYPE元素开头。其告知浏览器两件事情第一它处理的是HTML文档第二用来标记文档内容的HTML所属的版本。 注意在HTML4中要求的DTD已不再HTML5中使用
如果网页代码含有DOCTYPE元素浏览器就会按你所声明的标准解析如果不添加DOCTYPE元素将使网页进入怪异模式(quirks mode)两者会有一定的区别
!-- HTML4 --
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//ENhttp://www.w3.org/TR/html4/strict.dtd
!-- HTML5 --
!DOCTYPE HTML
复制
2. 其他元素
!DOCTYPE HTML
htmlheadtitletitle/title/headbody文档内容/body
/html
复制
需要注意的时head元素中必须有一个title元素
二、用元数据元素说明文档
元数据元素应该放在head元素中。
1. 设置文档标题title元素
2. 设置相对URL的解析基准
base元素可用来设置一个基准URL让HTML文档中的相对链接在此基础上进行解析。base元素还能设定链接在用户点击时的打开方式以及提交表单时浏览器如何反应在第12章表单中讲述。
!doctype html
html langen
headmeta charsetUTF-8titleBase Test/title!-- 指定相对URL的基准URL --base hrefhttp://avatar.csdn.net!-- 指定链接打开方式为:当前页面 --base target_self
/head
body!-- 图片地址:http://avatar.csdn.net/1/4/A/1_ligang2585116.jpg --img src/1/4/A/1_ligang2585116.jpg alt奋飞a hrefhttp://blog.csdn.net/ligang2585116李刚的博客/a
/body
/html
复制
注意如果不指定基准URL那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。
3. 用元数据说明文档
meta元素可以用来定义文档的各种元数据每个meta元素只能用于一种用途。 1指定名/值元数据对 需要用到其name和content属性。提供了5个预定义的元数据名称。 元数据名称 说明 application name 当前页所属web应用系统的名称 author 当前页的作者名 description 当前页的说明 generator 用来生成HTML的软件名称 keywords 一批以逗号分开的字符串用来描述页面的内容
说明告知浏览器如何对内容分类和分等级过去主要的手段就是使用keywords元数据。现在由于其被滥用来制造页面内容和相关性的假象从而降低了对其重视性。 2meta广泛用途
!-- 文档内容的字符编码 --
meta charsetUTF-8
meta http-equivcontent-type contenttext/html charsetUTF-8
!-- 5s后刷新当前页面 --
meta http-equivrefresh content5
!-- 5s后跳转到MyBlog --
meta http-equivrefresh content5; http://blog.csdn.net/ligang2585116
复制
4. 定义CSS样式
style元素用来定义HTML文档内嵌的CSS样式link元素用来导入外部样式表中的样式。 1指定样式适用的媒体 media属性可用来表明文档在什么情况下应该使用该元素中定义的样式。 设备 说明 all 所有设备默认 aural 语音合成器 braille 盲文设备 handheld 手持设备 projection 投影机 print 打印预览和打印页面 screen 计算机显示器屏幕 tty 电传打字机之类的等宽设备 tv 电视机
!doctype html
html langen
headmeta charsetUTF-8titleStyle Test/title!-- 显示样式 小于500px --style mediascreen and (max-width:500px)div{background-color: blue;color: white;}/style!-- 显示样式 大于500px --style mediascreen and (min-width:500px)div{background-color: grey;color: white;}/style!-- 打印样式 --style mediaprintdiv{background-color: green;font-weight: bold;}/style
/head
bodydiv注意我的背影颜色吼!!!/div
/body
/html
复制 需要注意的是在使用上述media属性时需要进行全面测试并且准备好不可用的备用样式。 2指定外部资源 link标签同样支持media属性。其中ref属性决定浏览器对待link元素的方式。 值 说明 author 文档作者 help 当前文档的说明文档 icon 图标资源 license 当前文档的相关许可证 stylesheet 载入外部样式表
!DOCTYPE html
html langen
headmeta charsetUTF-8titleLink Test/titlelink relshortcut icon hreffavicon.ico typeimage/x-icon /
/head
body
/body
/html
复制
注意如果网站标志文件位于项目根目录下就无需使用link元素加载其会自动请求加载该文件。
三、使用脚本元素
与脚本相关的有两个元素第一个是script定义脚本并控制其执行过程第二个是noscript规定浏览器不支持脚本或禁用脚本情况的处理方法。 在引入外部资源时如果使用自闭合标签浏览器会忽略这个元素不会加载引用的文件。 其加载资源时可以使用asyncscript元素默认行为是在加载和执行脚本同时暂停处理页面该属性可以让资源异步加载和defer告知浏览器等页面载入和解析完毕后才能执行脚本控制。
!-- 未启用或不支持脚本 --
noscript!-- 5s后跳转到http://blog.csdn.net/ligang2585116 --meta http-equivrefresh content5; http://blog.csdn.net/ligang2585116
/noscript
