用户名:  密码:   
您当前的位置:首页 > 网页设计 >  Html+CSS > 

2

上次修改时间: 2017-06-26 20:34:50      来源:网络总结      作者:钢铁长陈
上一页      路径:DSD\Learn\Html与CSS\html5+CSS3\      下一页

2.1.3 HTML结构
<html>标签
又包含head和body标签,h是元信息多数不显示出来

2.1.4 HTML语法
实际上是文本文件,由一些标签,遵守一些规则
标签包含一种对象,也叫元素
所有html标签都包含在<>尖括号中
大多数标签成对出现,分起始和结束,结束前加/
也有单个出现的的,如:<br /> //注它也有反斜杠,html 1.0一定要加反斜,后面版本可略去
在起始标签中可以包含很多属性,这些属性用来定义这个标签的一些细节,
 如:<body title="信息主体">  格式为:属性名=“属性值”
标签可以嵌套的,如:<div><h1><p> </p></h1></div> 
要显示的信息必须包含在body中,元信息包含在head中,所有信息要包含在html
html还要在首行定义文档类型,版本与规范
 如:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
还要在头部定义字符编码
 如:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
头部还要有标题
html中的注释<!-- 这里注释可以单行也可以多行-->

2.1.5 html标签
html标签有一百多个,常用就几十个
 打开学习素材和工具——参考手册——W3CSchool.chm——XHTML——XHTML1.0参考手册,可查看所有html标签
文档结构标签
 <html> 文档的起始和终止
 <head>
 <body>
文本格式标签,用以标识文本区块
 <title>
 hi ,i是1-6 一到6级标题 
 <p> 段落
 <pre> 预定义文本
字符格式标签
 <b><i><blink><big><small><sup><sub><cite>
 加粗,斜体,闪烁(IE不支持),放大,缩小,上标,下标,引用
列表标签
 <ul><ol><li> 无序列表,有序列表,列表项 
 <dl><dt><dd> 标识定义列表,
链接标签 ,也可以用来定义锚点
 <a>...</a> 如:<a href="">...</a> 
也可以用来定义锚点
 <a href="#btm">...</a> //跳到id处
 <a id="btm">...</a>
 <span id="btm">...</span>  //也可以跳到这里
表格标签
 <table><caption><th><tr><td> 表格,表标题,列标题,表行,表列
表单标签
 <from><input /><textarea><select><option> 表单 ,输入框,文本域,下拉菜单,下拉选项

2.1.6 HTML属性
每个标签都有自己私有属性,所有标签又有公共属性
核心属性,对所有元素
 class 定义类样式,元素的类
 id  元素的编号
 style 样式定义
 title 提示文本
 //有些标签没有这些基本属性,如html,head,title,base,meta,param,script,style这些用到头部区不需要基本属性
语言属性
 dir 文本显示方向ltr|rtl
 lang 语言代码 如:<body id="mybody" lang="en-us"
 //frameset,frame等不需要语言属性
键盘属性
 accesskey 设置某元素键盘快捷键,常用于表单
 tabindex tab次序
其它 
 alt 替换显示的文本,如图像不存在时,显示什么文字
 title 提示文本
 longdesc 大段描述
  <img longdesc="...."> 要在原码中才看得到
 blockquote 引用

2.2.1 XHTML结构
是html的升级版本,区别不大,主要为了兼容旧的浏览器与网页
在DW新建一个html时文档类型选择XHTML 1.0 Transitional,不选默认了是这个 
xhtml结构包括以下几部分
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  #定义的是html文档类型,!表这行是命令,该行区分大小写
  #"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"这句表文档类型定义,浏览器会根据这个dtd解析文档元素,下载后用记事本可以打开
 <html xmlns="http://www.w3.org/1999/xhtml"> 
  #xmlns="http://www.w3.org/1999/xhtml"是名字空间,xhtml结构必须要有这部分
  #用来标识名字空间,因为在纯xhtml中用户是可以自定义的标签的
 #html文档中可以不要上面两部分,其它部分同html

2.2.3 XHTML语法
它的语法是通过html语法简化来的的,遵守继承了html语法规范,
对代码要求更严格,如:
 必须包含doctype和名字空间
  #可在页面属性修改文档遵守的类型,菜单——修改——页面属性——标题/编码——文档类型
 所有标签必须闭合
  如在html中<img />可这样写,但在xhtml必须加斜杠/
 所有标签元素必须小写,html大小写都可以
 所有属性的值必须加引号,html不用加,如:<img width="34"/> html中可写为<img width=34 />

2.2.4 DTD解析
决定了网页文件的显示规则,<!DOCTYPE>为document type的简写
DTD是个文本文档,就是文档定义
从兼容性考虑必须声明在文档第一行声明,doctype
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  #doctype后在html表文档的顶级元素 public表公开 -//W3C表没经过w3c注册,
  #DTD XHTML 1.0 表文档类型是xhtml,1.0是版本号 Transitional表过度型,EN表文档语言
  #"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"表规则的引用地址
 
2.2.5 名字空间
就是为了解决在不同文件中重名的问题
如:
 <document xmlns="http://www.html5.cn/zhangsan">
 </document>
 <document xmlns="http://www.html5.cn/zhangsan1">
 </document>
 <html xmlns="http://www.w3.org/1999/xhtml"> #这句似有用似无用,但为与xml兼容还是要的
  #html5中就这些似用有似无用清理掉了

2.3.1 HTML5语法
语法同html4,扩展名也是html,进行了简化
用DM新建html4与html5查看其头部的区别, #注:DM8不支持新建html5的文档,即新建时,文档类型里没有html5可选
html4的头
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
html5的头: #不区别大小写,更简单
 <!doctype html>
 <html>
也可以加上系统标识符
标准解析模式,怪异模式,标准模式,也叫非怪异模式,怪异模式是根据浏览自身解析,非怪异模式是根据w3c解析
定义字符编码的区别:
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> #以前的
 <meta charset="utf-8"> #html5的 使用以前也是有效,但不能混合使用两种方式
可以省略元素的结束标记
 1.0版必须有结束标记,
 html5可以省略结束标记,如<li>,可以不要</li>
 还可以可以省略所有标记
 <html><head>等都可以不要,直接写文档就可以了,传统网页中是不能解析的
 元素值可以是双引号,单引号,无引号都可以
 语法好像是在走回头路,化繁为简
 
2.3.2 HTML5元素
 和html4区别不大,但引入了很多新的
分为七大类
 内嵌,在文档中添加其他类型的内容,audio,video,canvas,iframe等
 流
 标题 段落标题,h1,h2,group
 交互,button,textarea等
 元数据,head
 短语 mark,kbd,sub,sup等
 #以上所有都可以用css定义样式
5新增的结构元素
 header 标记头部区域内容
 footer
 cection
 article
 aside
 nav 导航辅助
5新增的功能元素
 <hgroup>
 <figure>
 <figcaption>
 <video></vodeo> #html4中用object
 <object></object>
 <time> #定义时间,4中用<span>
 <output>
 <source> #资源
 <menu></menu>
5也废弃一些元素
 big,center,font,s,stricke,tt,u 这些能通过CSS定义,不需要标签了
 框架元素也不建议使用了
 支持浮动iframe
 applet,bgsound,blink,marquee 这些有些浏览器支持
 
2.3.3 HTML5属性
5增加了废弃了一些属性
 autofocus 自动获取焦点,增加的
 placeholder 对用户输入提示
 form 指定表单框
 required 提交时对元素进行检查,没输入内容不能提交
 autocomplete,min,max,multiple,patternstep
 list
 datalist
 media 规则链接文件的类型
 area 热点链接
 hreflang
 rel
 link,sizes,icon,
 base 基连接
 target
废弃的一些属性,见视频中的表

2.3.4 HTML5全局属性
 所有元素都可以共用的属性即全局属性
 contentEditable 可编辑,布尔值,true表可编辑,默认为false 配合脚本可以发送到服务器端
  #以前版本要转化为文本框或文本区
 designMode 设计模式,整个页面是否可编辑,可编辑时contentEditable都可以编辑,值为on/off
  #带有一定不安全性,有的浏览器不支持
 hidden 隐藏,通知浏览器不显示该元素,在源码中可以看见,布尔值
 spellcheck 用户输入文本文本框进行语法检查,布尔值
 tabindex 用tab可以访问任何一个元素

2.3.5  HTML5其它功能
选择器API,查找指定元素,以前是用js.getElementById
querySelector() 找到页面第一个匹配的参数
queryselectorAll() 返回所有匹配的,上面是找第一个匹配的
 document.querySelector(".highClass",".lowClasses) #第一个参数是选择器,第二个是结束范围
 document.querySelector("td:hover"); #当鼠标经过td时获取这个元素,td:hover是伪类选择器
代码示例:
#点击id为findHover的按钮后,鼠标移动到那个td上就是td中的值显示到id为hoverResult的标签中
<button type="button" id="findHover" autofocus>查看鼠标焦点目标位置</button>
<div id="hoverResult"><div>
<script type="text/javascript">
document.getElementById("findHover").onclick = function() { #只要id为findHover的标签被点击就激活函数
 var hovered = document.querySelector("td:hover"); #鼠标经过td时就把这个td的名称赋给hvoered
 if (hovered)  #当hovered不为空时
  document.getElementById("hoverResult").innerHTML = hovered.innerHTML; 
   #将hovered的值赋给id为hoverRresult的标签
 }
</script> 
js日志和调试 在IE设置——开发人员工具,或按F12,用以对页面进行调试
json是一种数据格式,作用组件被html5支持,它是以js脚本形式存放数据,使用它不用兼容性问题
 通过关连数组可以很容易访问数据
5还增加了js引擎和其它一些渲染功能,新增功能都是是API形式出现的