hml笔记
(一)html xhtml html5 的区别
Html 与 xhtml 的区别:
(1) xhtml标签必须被正确的嵌套;
(2) xhtml标签必须被关闭;
(3) 标签名必须用小写字母;
(4) 属性名必须为小写,必有值,值必须加“”引号(重要);
Xhtml 与 html5的区别:
将符合xhtml1.0 标准的
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
改为符合 html5 标准的
<!DOCTYPE html>
就可以将 xhtml网页转换为 html5文件。
此外还有
HTML5 中的一些有趣的新特性:
· 用于绘画的 canvas 元素
· 用于媒介回放的 video 和 audio 元素
· 对本地离线存储的更好的支持
· 新的特殊内容元素,比如 article、footer、header、nav、section
· 新的表单控件,比如 calendar、date、time、email、url、search
(二)class 与 id 的命名规则
(1)不能以数字开头;
(2)命名有大小写英文字母,下划线及其数字;
(3)其他的都可以放在第一位,作为命名,推荐使用大小写英文字母。对大小写敏感!
(三)对 html的一些简单介绍
(1)黑客方法:举例说明,去掉<title>我是美女</title> ,将</title>删掉就可以了!网页加载完毕,但是浏览区页面不显示内容!
(2)html不是编程语言,而是一种描述性的标记语言。
(3)<font size="7"></font>(1-7从小到大) ------font标签不被赞成使用!
(四)html 标记的语法(书写规则)
(1)<标记符>内容</标记符> 举例:<div>我很好</div>
(五)html 标记分为两种:单标记 与双标记
(1)单标记:标记符没有结束的标记,单一型标记。
单标记分为两种:有属性与 无属性。
单一型,有属性值 <hr width=”80%”/> 横线
单一型,无属性值 <br /> 换行
(2)双标记:有开始也有结束的标记。
双标记分为两种:有属性与 无属性。
有始有终型,有属性值 <div class=”one”>我很好</div> 容器
有始有终型,无属性值 <title>网页制作</title> 标题
(3)对于标记,有的属性是可有可无的,但是有的是必须有的!
例如上面的 class属性可有可无
但是
<input>标签中有许多属性,但是对每个元素来说,只有type属性和name属性
是必须的(提交或重置按钮只有type属性)。
(六)xhtml html 标签 一律采用小写,所有的标记都要小写。
(七)页面四部分(源代码中的效果,并不是浏览器的最终效果)
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
(八)meta标记
(1)meta 标记用于定义文件信息,对网页文件进行说明,便于搜索引擎查找。放置在<head></head>之间。
(2)
设置关键字:
<meta name="keywords"content="value" /> 多个关键字内容之间可以用","分隔
设置描述:
<meta name="description"content="value" />
设置作者:
<meta name="author"content="作者名" />
设置字符集:
<metahttp-equiv="content-type" content="text/html;charset=gb2312"/>
设置页面定时跳转:
<meta http-equiv="refresh"content="2;URL=http://www.baidu.com" /> 其中的2为跳转的秒数
(3)编码方式
gb2312 中文的编码方式,占2个字节
utf-8 国际标准 占内存多,占3个字节
(九)注释
(1)html注释 <!--网页注释-->
(2)css注释 /*css注释内容*/
(3)js注释
a) //注释行
//
注释内容
b) /*使用斜杠星注释代码块(多行) */
/*
注释内容
*/
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
注释:注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。
(十)初步杂谈
(1)<body>主体属性:手册 html xhtml Brower(浏览器) Script Javascript
(2)将来我们听到这此东西,其实都是一个:html元素 html标签 html标记
(3)html代码的本质为:xhtml+css
(4)有某些,html元素,有默认的值。
(5)推理法:---逻辑思维
左上都有边距,如果右边有边距,那边下边也有距离
(6)背景属性有一个层次关系从高级到低级:
背景图片 -- 背景颜色
(7)默认情况下,网页内容与浏览器边框之间是有距离的。左右上下都有边距。
若想没有边距(以下四个设置是与浏览器的边距):
leftmargin
topmargin
rightmargin
bottommargin
(8)body 属性(但是以下方式都不推荐使用,应该使用样式替代它)
<body bgcolor="gray" leftmargin="0"rightmargin="0" topmargin="0" bottommargin="0"link="#990033" vlink="#996600" alink="#3399CC" background="">
<!--bgcolor="背景颜色" leftmargin="左边界"rightmargin="右边界" topmargin="上边界" bottommargin="下边界"link="链接文本颜色" vlink="访问过的文本颜色" alink="激活的链接文本颜色" background="背景图像"-->
(9)font 标记(不推荐使用,应该使用样式替代它)
<font color="red"size="7" face="Microsoft YaHei">文字修饰</font>
(10)使用百度搜索的小技巧:-----很长的关键字,找不到时,找个短一些的
(十一)文件都有文件名,我们网页的文件名 html文件,可不可以使用中文?
解答:在本地电脑,没什么问题,将来网页文件都是保存在服务器上的额,建议都使用英文。
(十二)html语义说明:SEO网络优化,需要多使用语气词
<b></b>加粗
<i></i>倾斜
<u></u> 下划线
<s></s> 删除线
<sup></sup> 上标
<sub></sub> 下标
重点:
<strong></strong> 加粗(语气词)
<em></em> 倾斜(加粗)
用适合的html标记,去描述,我们的网页内容--网站优化技巧
(十三)写代码的流程
(1)先写我们的控制内容的标记,例如这内容比较重要,可以在语义上加权 <strong>关键字</strong>如果这部分内容是,这个文章网页的主题--推荐使用<h1>文章标题</h1>
(2)网页段落文字内容---- <p>段落内容</p>
(a)标题标记<h1>最好不要放在 p 标记里面,结构不好。
(b)a标签里面不能套a标签。
(十四)段落
(1)段落标记
<palign="center"></p>
属性 align 的值为 left center right
(2)段落标题
<hx></hx> 即 <h1> to <h6>
<h1> 定义最大的标题
<h6> 定义最小的标题
(3)<br /> 与 <hr />
<br /> 换行(换行不换段)
<hr /> 属性有 width size noshade align ,都不推荐使用,最好采用样式控制
<hr width="80%"/>
<hr width="2000"/> 这里的2000为 宽度为2000像素,横线不会折行,会出现水平滚动轴,一直向右将整个显示完全。
width 宽度
size 厚度
(4)在xhtml中,所有的标签都必须要用属性值,如果没有,使用属性名
例如 <hr noshade="noshade" /> ------xhtml
<hr noshade> -------html
属性 noshade
属性值为 noshade
当设置为 true时,水平线呈现纯色(2d效果)
当设置为 false时,水平线显示为 双色凹槽(3d效果)
(十五)特殊标记
(1)blockquote 块引用,首行缩进
a)<blockquote>与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
浏览器在 blockquote 元素前后添加了换行,并增加了外边距。
属性 值 描述
cite URL 规定引用的来源。
b)<blockquotecite="http://www.baidu.com">
标签嵌套使用:
</blockquote>
(2)pre 预格式化,格式保存,通常用来表示 源代码
举例
<pre>
*******
*****
***
* *
</pre>
(3)特殊符号
空格
空格:在一段开始的第一个字不管空格多少,都没有效果。在字与字中间有不管多少空格都只显示一个空格的效果。源代码中换行,体现的是只显示一个空格的效果。
版权符号 ©
注册商标 ®
" "
& &
< < (left的意思)
> > (right的意思)
(十六)列表:无序列表 有序列表 定义列表三种。
(1)无序列表<ul></ul>
<ultype="项目符号类型">
<li type="项目符号类型">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
(2)有序列表<ol></ol>
(a)<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
(b)
<olstart="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
(3)定义列表<dl></dl>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
定义列表效果展示:
计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...
(十七)图片
(1)图片展示格式
Gif 支持透明与动画,但是只支持 256种颜色
jpg 不支持透明与动画,但支持1670万种颜色
png 推荐使用,支持透明,不支持动画,但支持1670万种颜色,但是在IE6上的显示效果不好
(2)图片路径:
绝对路径
相对路径 ../向上一级../
根相对路径 以根目录开头 /
(3)img 属性
img的属性
src alt title width height border
align 值有以下几个,控制的是图片及其图片周围的文字之间的关系,并不是控制图片的位置显示
left 图片靠左,文字靠右,习惯用 left
right 图片靠右,文字靠左
top 文字垂直居上靠
middle 文字垂直居中
bottom 文字垂直居下(默认)
vspace 像素 定义图像顶部和底部的空白(垂直边距)-----不推荐使用
hspace 像素 定义图像左侧和右侧的空白(水平边距)-----不推荐使用
(十八)table
(1)传统的网页布局方式 ----使用 table 表格
其实table表格,原来是用于,保存数据的,保存这种有格式清晰的数据
(2)布局-table ----改用div
布局思想 --- 排版
1、从大向小排版
2、从左向右排版,从上向下 --按人眼视觉习惯
(3)表格标记
<table></table> --定义表格
<tr></tr> --定义表行
<td></td> --定义表列(单元格)
<th></th> --定义标题栏(文字加粗)
(4)cellpadding 与 cellspacing
cellpadding 内填充默认值为1
cellspacing 单元格与单元格之间的距离,外边距。默认值为2
cellpadding属性规定单元边沿与其内容之间的空白。
注释:请勿将该属性与 cellspacing 属性相混淆,cellspacing 属性规定的是单元之间的空间。
从实用角度出发,最好不要规定 cellpadding,而是使用 CSS 来添加内边距。
(5)属性
(A)table属性
<tablebgcolor="" background="" border="" cellpadding="单元格边框与内容之间的距离" cellspacing="单元格之间的举例"bordercolor="" align="" width="绝对值像素值或者百分比" bordercolorlight="设置边框亮部分的颜色(当border的值大于等于1时才有用)"bordercolordark="边框暗部分的颜色(当border的值大于等于1时才有用)">bordercolorlight="设置边框亮部分的颜色(当border的值大于等于1时才有用)" bordercolordark="边框暗部分的颜色(当border的值大于等于1时才有用)---只有ie支持,最好用css代替
(B)td属性
<tdwidth="200" height="20" bgcolor="blue"background="单元格背景图片" align="单元格水平对其方式" valign="单元格垂直对齐方式" rowspan="设置行合并数目" colspan="设置列合并数目" nowarp="nowrap" >
nowrap 设置在单元格中不换行
td 的属性中没有 border
valign: top middle bottom baseline(默认为与基线对齐) baseline与bottom效果类似,但是baseline 比 bottom 更好看
<tdwidth="200" height="16" bgcolor="blue" align="center"valign="middle" rowspan="3" colspan="2">
(C)合并单元格,其实就是删除多余的 td
(D)<th></th> 自动加粗居中代替td 标题表格
(6)总结
推出一个合并删除td的公式
***** 删除的个数 = 合并的个数 -1
***** 细线表格效果公式
1)将表格自身的 border="0"
2)表格设置背景颜色 = 细线颜色
3)设置单元格之间的距离 === 细线的间隔
(7)其他
1)当<td></td>之间没有内容时,默认是不显示边框。如果想看到边框,就加上  ;
2)内边框线与外边框线
边框没有中间的边框的设置(table标签下的属性 frame 与 rules)
table下的
frame属性(外侧边框的线)
属性值为:
void 不要显示表格的边线
above 只要显示表格的上边线
below 只要显示表格的下边线
hsides 只显示表格的上下边线
vsides 只显示表格的左右边线
lhs 只显示表格的左边线
rhs 只显示表格的右边线
box 会显示表格的所有边线
border 会显示表格的所有边线
规定外侧边框的哪个部分是可见的。
rules属性(内侧边框的边框线)
属性值有:
none 不显示任何边框线
groups 表示列组合水平部分
rows 只显示横行的边框线
cols 只显示直行的边框线
all 显示全部格框线
规定内侧边框的哪个部分是可见的。
(8)表格的标题
标签caption
<table>
<caption>...</caption>
</table>
<caption>下的属性值有:
属性名称 属性值
align top 标题在表格上方
bottom 标题在表格下方
left
right
(9)表格结构化()
<table>
<thead></thead> 表头区
<tbody></tbody> 表主题
<tfoot></tfoot> 表底部
</table>
(10)直列化格式
<colgroupbgcolor="red" span="2"></colgroup> 前两列变红
span 直列化数目 默认控制第一列
<colspanspan="3"></colspan>
<colspanbgcolor="red"></colspan> 那么第四列变红
(十九)超级链接---就像人体的血液---是互联网的血液
(1)<a href="链接目标" title="注释" target="打开链接窗口的形式">显示内容</a>
_blank 在新窗口中打开
_self 在自身窗口中打开(默认值)
_parent 在上一级窗口中打开,框架会经常使用
_top 在浏览器的整个窗口中打开,忽略任何框架
framename 在指定的框架中打开
(2)链接分类
1)内部链接:同一站点内的页面,当前文档与目标文档在同一站点内
<ahref=目标文档位置及其全称>
2)外部链接:当前文档与目标文档不在同一站点内
<ahref=URL(网址)>
3)E-mail链接:
并允许访问者向指定的地址发送邮件
<ahref="mailto:电子邮件地址">
4)锚点链接 ---可以跳转到,某个页面的某个位置(可以是本页面也可以是其他页面的指定位置)
创建锚点
<aname="锚点名称">显示内容</a>
链接锚点
<ahref="#锚点名称">显示内容</a>
例如:返回顶部,在顶部定一个name
若是其他页面的一个锚点链接
<ahref="锚点链接.html#n3">这是锚点链接页面的一个锚点</a>
5)设置空链接:就是目标端点的链接
<ahref="#">显示内容</a>:相当于刷新页面
例如:设为首页
<ahref="#" onClick="-----">设为首页</a>
添加收藏
<ahref="#" onClick="-----">加入收藏夹</a>
-----为省略内容
6)脚本链接:是一种特殊的链接,当单击设置
脚本链接的文本或图像时,可以运行相应的js语句
例如
<ahref="javascript:window.open ('http://www.163.com')">新浪</a>
关闭窗口:输入 javascript:window.close()
打开窗口:输入 javascript:window.open('文件名')
(3)链接重要的使用原则:必须是回路,有去有回。--优化,相关链接
(二十)表单基础
表单作用:传递信息
(1)标签:form标记
form标记用于创建一个表单,定义表单的开始与结束,他是一个容器,用于包含其他表单元素,例如文本框、单选框等。
表单元素必须入在form 标记内才有作用。
<form action=url(传送目标,处理表单信息的服务器端 应用程序) method=处理表单数据的方法(POST/GET)如 果不写method则默认提交方式为get,name=表单名称>
表单元素
</form>
POST方法可以传递大量信息(一般采用 post)
GET 方法将值附加到请求页面的URL中。适合传递少量信 息(默认方式)
(2)标签:<label>标注内容</label>
<label>标注内容</label> 标签 为 input 元素定义标注(标记)。
<label>标签的for属性应当与相关元素的 id属性相同
例如:
<label for="man">男</label> 标签包字
<input type="radio"name="sex" value="男" id="man" />
(3)input的差异
HTML 与 XHTML 之间的差异
在 HTML 中,<input> 标签没有结束标签。
在 XHTML 中,<input> 标签必须被正确地关闭。
(4)表单元素:input select textarea
表单元素(包在表单里面的元素),以input为例,但除了input之外,还有别的表单元素。其中两个比较重要一点。select(下拉框) 与 textarea(多行文本框)
(5)input标签
readonly 只读的,只能与type="text" 合用
1)单行文本框
<input name="文本框名称"type="text" value="初始值" size="显示字符数"maxlength="最多容纳字符数" readonly="readonly"(设置为只读)disabled="disabled"(设置为不可操作) >
举例:
用户名:<input type="text" name="Pname" value="请输入用户名"/>
2)密码框
<input name="文本框名称"type="password" value="初始值" size="显示字符数"/>
3)单选框
<input name="单选框名称"type="radio" value="提交值"checked="checked"(是否被选中)/>
name 不一样,浏览器会认为是两个不同的按钮
<input type="radio"name="man" value="男" checked="checked" />男
<input type="radio"name="woman" value="女"/>女
name 一样,浏览器会认为是一组按钮,出现的效果是只有一个可以被选中
<input type="radio"name="sex" value="男" checked="checked" />男
<input type="radio"name="sex" value="女"/>女
4)复选框
<input name="复选框名称"type="checkbox" value="提交值"checked="checked"(是否被选中) />
同一组 name 必须一样
5)浏览框
<input name="名称"type="file" size="显示长度" />
6)按钮
按钮
<input type="按钮类型(reset-重置表单、submit--提交表单、button--普通按钮)"name="按钮名称" value="按钮显示文本" />
7)图片按钮
<input name="图片按钮名称"type="image" src="图片路径" />
8)隐藏域
隐藏域(例如用户IP传递,隐藏域,位置随便摆放,原因是用户看不到,但要放在form内,)
<input name="名称"type="hidden" value="提交值"/>
9)重置与提交
提交与重置不需要 name 属性不是必须的,其他的必须含有type 与name属性
提交表单<input type="submit" />
重置表单<input type="reset" />
(6)select 标签:下拉框
a)菜单式
<select name="列表框名称">
<option selected="selected"(哪个为初始选择,就添加selected语句(只有一个))value="提交值">列表1</option>
<option value="提交值">列表2</option>
......
</select>
分组 <optgroup label="分组名称"></optgroup>
举例说明:
<select name="country">
<option value="中国" selected="selected">中国</option>
<option value="美国">美国</option>
</select>
<select name="city">
<optgroup label="-省份-">
<option>-省份-</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</optgroup>
</select>
b)列表式
<select name="列表框名称"size="显示的行数" multiple="multiple"(如果允许多选,则有该命令;否则没有此命令)>
<option value="提交值">列表1</option>
......
</select>
(7)多行文本域:textarea
<textarea name="多行文本框名称"cols="每行中的字符数" rows="显示的行数">
初始内容
</textarea>
(8)表单外框
<fieldset>...</fieldset> 定义围绕表单中元素的边框
<legend>...</legend>legend元素为fieldset元素定义标题
(9)表单元素杂谈
1)有的表单元素,都必须放置在表单标签中<form></form>
2)有的表单元素,以input为例,<input>标签中有许多属性,但是对每个元素来说,type属性和name属性
是必须的(提交或重置按钮只有type属性)
3)些表单元素的属性是相似的
(二十一)html小知识点
1)在适合的html标记中,加入页面的内容(信息)---信息载体-文字、图片以及放置视频和音频多媒体元素。
2)某些html标记,都有默认值。1-h6 ,默认文字加粗显示
3)一个网页设计水平,代码精简程度
4)做测试时,先大一点的值,后小一点的值
5)使用网页特效---但是也考虑用户体验
(二十二)flash动画插入:
使用<embed>...</embed>标记插入flash动画
属性 值 说明
src url flash路径
width 像素/百分比 flash宽度
height 像素/百分比 flash高度
wmode transparent 是flash背景部分透明
(1)视频flash大小尺寸一般为:360*300(px)
(2)<embed>...</embed>标记插入flash动画,存在浏览器兼容性问题
(3)在网页中插入flash方法(两个方法):
方法1:<embed></embed>
方法2、通过dreamweaver自动生成代码<object>
flash本身的播放,是需要一个插件(播放器)
有播放器,但看不了视频,需要安装插件,可能是你的浏览器安全设置
(4)企业视频推广思想方法:
1)上传的视频网站
2)拿到分享链接
(二十三)滚动字幕<marquee>滚动文字 与 图片</marquee>
属性
1)direction=“滚动方向” left right up down
2)behavior="滚动方式" scroll(一圈一圈绕着走)slide(只走一次) alternate(来回的走)
3)loop="滚动的循环次数" 若未指定则循环不止
loop="infinite"
4)bgcolor="背底颜色"
5)width="宽度"
6)height="高度"
7)onMouseOver="this.stop()"
8)nMouseOut="this.start()"
9)crollamount="速度"数值越大速度越快,一般值为2或者3最好
10)crolldelay="延时" (走一步,停一停)scrollamount与scrolldelay用一个就好
(二十四)框架
写框架时不需要body标记
<frameset rows="控制行数及行高"cols="控制列数及列宽" framespacing="框架间距" frameborder="是否显示框架边框(yes,no/1,0)"border="边框宽度" bordercolor="边框颜色">
<frame src="被包含的文件路径及名称"name="框架名称" noresize="是否允许改变框架尺寸"(true/false) scrolling="滚动条显示控制"(yes/no/auto)>
</frameset>
(1)框架的链接的操作,链接是加在,被包含文件中的。
框架制作流程:
1、先做主框架文件 126.html
2、再分别制作,被包含的文件 left.html 与 right.html
3、通过框架技术,将left与right包含在126中
4、如果好需要,框架中,操作其他文件,还必须要去制作其他文件
例如:
<framesetcols="240,*" border="100" bordercolor="blue">
<frame src="left.html"name="left" />
<frame src="right.html" name="right"/>
</frameset>
(2)<a>标签默认在本窗口打开 target属性,给这个左侧区域起名left,右侧区域取名right,在126框架里面起名字。
如果链接指向的目标,是一个框架中的区域,必须要给这个区域,起个名称。
<a href="链接目标"title="注释" target="打开链接窗口的形式">显示内容</a>
_blank 在新窗口中打开
_self 在自身窗口中打开(默认值)
_parent 在上一级窗口中打开,框架会经常使用
_top 在浏览器的整个窗口中打开,忽略任何框架
framename 在指定的框架中打开
例如:
<td><ahref="liframe.html" target="right">写信</a></td>
(二十五)内嵌框架---iframe
在网页之中,嵌入网页-----内嵌框架---iframe
<iframe src="被嵌套的网页位置及全称"width="宽度" height="高度" frameborder="是否显示边框[0/1]"scrolling="滚动条的出现方式[yes/no/auto]" name="框架名称"></iframe>
(二十六)从 html到 xhtml 到 html5 的历史
DOCTYPE是document type(文档类型)的简写,主要用来说明你用的XHTML或者html是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码,并展现出来。所以,要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。
(1)
<!DOCTYPE>声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML版本进行编写的指令。
在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5不基于 SGML,所以不需要引用 DTD。
提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。
(2)HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:<!DOCTYPE html>
(3)xhtml1.0 提供了三种 DTD声明可供选择:
1)XHTML 1.0 Transitional ----推荐使用
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML来编写标记。
过渡的:要求非常宽松的DTD,它允许您继续使用html4.01的标记(但是要符合xhtml的写法)
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2)XHTML 1.0 Strict ----要求严格的DTD
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)
。不允许框架集(Framesets)。必须以格式正确的 XML 来编写。
不能使用任何表现层的标记和属性,例如<br>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3)XHTML 1.0 Frameset ---含有框架
该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。
专门针对框架页面设计使用的DTD,如果你的页面中含有框架,需要采用这种DTD
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
(二十七)html文件分为:内容(信息) 结构(xhtml) 表现(css) 行为(javascript)
web标准是一系列标准,就是一系列技术标准
在使用时,是组合应用
1)结构化内容 xhtml
2)表现化内容 css
3)行为化内容 js
(二十八)匿名函数
匿名函数是一个“内联”语句或表达式。匿名函数只具备函数体没有函数名称。
因为它只在此处使用并且不需要在其他地方调用它,那么名称也就没有意义。
即使不会写匿名函数你写普通函数也可以实现相同的功能。
(二十九)xmlns 属性
对于 xmlns 属性:可供选择的命名空间,必须要加,并且值为固定值。
HTML 与 XHTML 之间的差异
xmlns 属性在 XHTML 中是必需的,但在 HTML中不是。不过,即使 XHTML 文档中的<html> 没有使用此属性,W3C 的验证器也不会报错。这是因为"xmlns=http://www.w3.org/1999/xhtml" 是一个固定值,即使您没有包含它,此值也会被添加到 <html> 标签中。
(三十)常识汇总
1)浏览器兼容
火狐版本:firefox setup3.6.18 最佳搭配的firebug 为 firebug-1.7.3-fx
2)xp系统 不能用 ie9
3)需要兼容的浏览器: ie6/7/8/9 火狐 谷歌 苹果浏览器等
4)网页是否有css样式,测试 测试方法----在浏览器,改变文字大小
5)长度单位:常用 em 与 px
6)为了将来的css代码优化,所有的属性值后面,都要带上“;”
7)css使用的字体,最好使用大家都有的字体。特殊字体---整成图片
8)分中英文字体,设置字体的顺序。将英文字体设置在前,中文在后。都可以用""引起来,中间","隔开。
举例子Object.style.fontFamily=font1,font2,....
Value Description
font1, font2,.... 字体族名称或类组名称的列表,由逗号分割。
提示和注释
提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。
将英文字体设置在前,中文在后
*****注释:如果字体族名称中含有空格,请为其加上引号。
注意:默认采用双引号,但是在双引号里面的字体名称(内容)用单引号引起来用于区分。
例如:
内联式
style="font-family:'Arial Black',Gadget, sans-serif;"
//有空格的需要用引号引起来 //在双引号里面的采用单引号用于区分//不同字体采用逗号隔开
嵌入式样式表
<style type="text/css">div{font-family:"微软雅黑";}</style>
9)line-hieght:150%;line-height:1.5em;想让文字在垂直方向上居中,将行高设置为元素的高度,行高=元素高度
*****文字的内容不能超过元素的宽度,也就是不能换行
10)font-weight:normal bold
css可以重新设置,xhtml标签的样式。例如<h1style="font-weight:normal"></h1>
(三十一)css方式
网页中加css方式有四种
1)内联样式表:直接写在现有的标记中
<p style="color:red">这里文字是红色的</p>
2)嵌入式样式表
<style>...</style>
3)采用外部样式表,整一个 style.css文件。要使用的网页,只需要调用即可。这才是xhtml+css的核心:结构与样式分离----推荐使用
<link href="style.css"rel="stylesheet" type="text/css"/>
4)导入样式表:也是将样式写到一个文件中,再导入到网页中。不推荐使用导入式样式表与链接式样式表的功能基本相同,只是语法和动作方式上略有不同,同样也将导入样式代码写在<head>标记内
<style type="text/css">
@importurl("basic.css");
</style>
导入样式表缺点(不推荐使用):
1、会占用html文件空间
2、有些浏览器,解析会有问题。浏览器会最后读取@import中内容。
3、会将多个导入样式表写在一个css文件中,最后在网页link链接一下
(三十二)css选择器
(1)选择器的选择
1)标签选择器 例如 p{}
2)class类选择器 .top{}
3)类选择器 #top{}
(2)css特性:
1)继承:子集继承父集的某些属性,子集也会拥有自己默认的属性(例如父亲的老婆子集不能继承)
2)层叠:子元素如果定义与父集相同的样式,会覆盖掉父元素的样式。
****后面的样式会覆盖前面的样式
3)css优先:
A)内联式【行内样式】 >内嵌式>链接式>导入式@import
css优先权:就近原则。作用范围越小,优先权越高。离要修饰目标越近的样式优先权越高
B)选择器优先权
内联式【p style="color:red;"】>id>类class>标签选择器
我们可以采用 !important 来提升重要性(优先权)
特殊情况,我们可以提升某个属性的权限
p{
background-color:#ffcccc !important; // ie6不支持该语句
background-color:#66cccc; }
(3)css控制文字
1)text-style:normal(默认正常) italic(斜体)
<i></i> 效果:斜体
<em>我本斜体</em> 效果:加粗斜体
2)text-decoration:blink ie不支持,火狐支持
3)字符间距(每个字符直接的间距)letter-spacing:normal(默认) length(长度单位) 中英文都有效果
4)单词间距 word-spacing:normal(默认) length(长度单位) 实际上是空格的间距,英文有作用,中文需要加上空格,一个空格的作用,多个空格也显示为一个空格的作用。
5)文本首行缩进text-indent:2em 也可以为负值
6)文本水平对齐方式:text-align:left right center
7)对象中空白处理:
white-space:normal [自动换行] pre[换行和空白受保护]nowrap[强制在同一行显示]
8)文本大小写控制
text-transfom:normal capitalize[每个单词的第一个字母转换为大写] uppercase[转换成大写] lowercase[转换成小写]
9)元素的垂直对齐方式
vertical-align:sub【设置文字为下标】super[设置文字为上标] top[把元素的顶端与行中最高元素的顶端对齐] text-bottom[把元素的底端与父元素的底端对齐]
设置周围文字的垂直对齐方式,本身的对齐方式通过line-height进行设置
(4)css伪类。css控制元素的某种状态:伪类
1)元素名称:伪类名称{属性:值}
例如超链接的鼠标经过状态
未访问的链接 a:link{color:#ff0000;}
已访问的链接 a:visited{color:#00ff00;}
鼠标经过时的链接 a:hover{color:#ff00ff;}
鼠标移动到链接上 a:active{color:#0000ff;}
伪类顺序:
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类顺序
L-V-H-A(原理为后面的覆盖前面的)
2)自定义链接的css类
a.类名称:状态
例如 a.web{color:red;}
css伪类用于向某些选择器添加特殊的效果
语法:
选择器:伪类名称{属性:值}
例如:
h1:hover{color:#ff00ff;]
:focus设置对象在成为输入焦点-鼠标点在哪里(该对象的onfocus事件发生)时的样式(IE6/7不支持)
3)a)css选择符的详细使用;b)css常用属性、css控制边框、背景灯c)css盒子模型,块状元素与内联元素
(三十三)css选择符命名,规范(语意化)
驼峰命名法:#headerBlock
帕斯卡命名法:#HeaderBlock
匈牙利命名法:#head_navigation
(三十四)css选择符:
作用:指定css样式所作用对象(范围)
1标签选择符
2id选择符:唯一性
3类选择符:多次出现,或者某个元素应用多个类
4通配符 * (最好不要用,慎用,小网站会用,大网站不用)
5选择符的嵌套使用 --包含选择符。代码精简-高手过招。父元素子元素{}--优化代码。
h1 strong{}
pstrong{}
6)选择符分组:选择符用逗号隔开
p,h1,h2,h3{font-weight:normal;}
7)标签指定时选择符:h1#content{}表示针对id为content的标签h1
h1.p1{}表示针对class为p1的标签h1
8)组合选择符:综合以上所有
h1.p1,#contenth1{}
(三十五)选择符的解释
控制所有元素---使用通配符---- 就是* -- 就是作用于所有html元素
(有的时候body控制不了的,可以用 *,虽然*作用范围很广,但是,他的效率最低,慎用)
*{margin:0;padding:0;} ----小网站会用,门户网站绝对不会用
例如新浪代码
body,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,big,cite,code,del,dfn,em,font,img,ins,kbd,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,th,td{margin:0;padding:0}
若使用*,给浏览器的压力很大,浏览器需要将全部标签全部读取一遍。具体标出来标签的话,这样提高效率,所以大的门户网站都是这样做的。
(三十六)css盒子模型
手机盒子模型
margin-与其他盒子的举例-盒子与盒子的距离(外补丁)
border-手机盒子的厚度-盒子的边框
padding-填充泡沫的厚度-盒子的边框与内容之间的距离padding(内补丁)
content-内容-盒子中的内容
整个盒模型在页面中所占的宽度是由:
左边界+左边框+左填充+内容+右填充+右边框+右边界 组成
(1)内容属性:内容本身的宽与高(width height)
(2)内填充属性:内容与边框之间的距离 padding:上右 下 左
padding
四个值:上 右 下 左
三个值:上 左右 下 (如果没有值,就去他的对面找)
两个值:第一个值:上下值;第二个值:左右值 (如果没有值,就去他的对面找)
一个值:上下左右都为这个值
margin与此类似,也可以设置成这四种状态。
(3)*****在定义盒子的宽度时,要考虑到,内填充、边界、外边距的存在。如果,增加了内填充,整个盒子宽度值,需要减去你增加的内填充值。
(4)杂谈
margin外边距与padding类似
***** margin不出来margin-top不出来时加border:1px solid blue;
***** 将来在使用外边距,要注意浏览器的兼容性问题。
**** 上下用padding,左右用 margin
***** 除了值为0的,其他的值后面都要加单位(px 或者 em 等)
**** 由于各个浏览器存在着,内外边距的,默认值,还不相同。我们需要将所有浏览器的默认内外边距,都从0开始计算
在实际工作中,不要用这个 *{margin:0;padding:0;},但是效率最低
用哪些元素,那些加padding:0;margin:0;
与浏览器的边框 body,ul,ol,li{padding:0;margin:0;}
(5)css继承性:
利用继承特点,将颜色、大小等属性,加给body,子元素就会继承。
但是有的标签 h1 会听自己的,不改变字体大小。
css的属性,虽然有继承的特点,但不是,所有的属性都有继承。
父亲的妻子不能继承
文字、颜色有继承性。宽高 margin padding无继承性。
border:线宽 线型 颜色;例如 border:1px solid #ff0000;
border-top-width:2px;
border-top-style:solid(实线) dashed(虚线,存在兼容性问题);
border-top-color:blue;
(6)列表属性:最常用 list-style:none;
ul,ol{list-style:none;} 不要列表的符号
(7)小技巧
1)html上来第一步,将内外边距归零。body,h1,p,div,ul,li{margin:0;padding:0;}
2)盒子水平居中:左右计算机自己算,自动,水平居中(将对象的左右外边距设为居中)margin:0 auto;
3)让盒子的内容垂直居中:line-height=盒子高度,但是注意不能换行
4)调试时,可以适当加背景颜色。
5)其实图片与文字是一样的,都是作为父级的元素
A)图片水平居中,相当于让文字居中显示
举例:
<p class="center"><imgsrc="../images/001.jpg"/></p>
设置css
.center{text-align:center;}
就可以让图片居中了,跟设置文字水平居中一样。
B)图片img的 align属性,设置的是图片与周围文字的摆放方式
C) 元素的垂直对齐方式
vertical-align:sub【设置文字为下标】 super[设置文字为上标] top[把元素的顶端与行中最高元素的顶端对齐] text-bottom[把元素的底端与父元素的底端对齐] 设置
周围文字的垂直对齐方式,本身的对齐方式通过line-height进行设置。
6)ul 与ol等等
body,h1,p,div,ul,li{margiadding:0;}
ul,ol{list-style:none;}
(三十七)html标签分为两种:块状元素(如div和 p)和 内联元素(例如a span标签)
(1)块状元素:{display:block;} 块状元素很霸道,能设置宽和高,独占一行。如:div p body h1-h6等
块状元素:一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)和高度(height)起作用。
(2)内联元素:内联元素很温柔,不能设置宽和高。不影响换行,可以设置背景颜色。内联元素只能容纳文本或者 其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)和高度(height)不起作用。常见内联元素为 a em span
(3)属性display的属性值的用法:
display:block;
block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
none:隐藏对象.与visibility属性的hidden值不通,其不为被隐藏的空间保留其物理空间。
inline:内联对象的默认值,将对象强制作为内联对象呈现,从对象中删除行
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联元素会被呈递在同一行内。
(三十八)背景
background:颜色 图片 平铺方式 固定方式 位置
背景颜色:background-color:#ccc;
背景图片:background-img:url() 默认是水平与垂直方向的平铺默认不平铺在左上角显示
背景平铺方式:background-repeat:[repeat no-repeat repeat-x repeat-y]
背景位置:background-position:top[left center right] center[left center right] bottom[left center right],x坐标 y坐标【第一个值为水平位置,第二个值为垂直位置】左上角是0 0.单位是像素(0px 0px)
背景图像的依附方式:background-attachment:[scroll(背景图像随对象滚动的) fixed(固定的)]
背景图片的依附方式:固定的含义是,将图片固定在,屏幕的某个位置,而不是元素的位置。
兼容性:
IE6只有html与body两个元素支持这个固定属性,其他的不支持fixed
(三十九)翻转技术
方法1)鼠标经过,大小相同,图片不一样
方法2)两张图片合成一张图片(css精灵技术,主要是为了,减少http请求)
运用伪类,表示一种状态
:link
:hover
优点显示页面:浏览器-服务器(交流) 相当于超市购物-结账时候
缺点:定位不好
(四十)杂谈
(1)手指的效果:默认a 的效果为 手指效果
cursor:pointer
(2)有的浏览器认为 ul li为内边距,有的认为为外边距。开始
就margin:0;padding:0;list-style:none;
(3)布局三种方式
1、默认文档流方式:以默认的html元素的结构顺序显示
2、浮动布局方式:通过设置html元素的float属性显示
3、定位布局方式:通过设置html元素的position属性显示
Float:none left(对象向左浮动,而后面的内容流向对象的右侧 // IE6、IE7存在浏览器兼容的) right
(4)清除浮动:就是可以去掉前面对象浮动,对后面对象的影响。Clear:none left right both
(5)为什么原来在同一行的两个块,会因为浏览器的大小,而改变原来的位置。
解决:在块外面加一个父元素的宽度。
(6)当父元素没有指定高度时,并且子元素有浮动时候,对父元素有影响,这个父元素的高度不会自动增加。
解决方法1:
额外标签法:加一个空盒子,其标签为clear:both //缺陷:增加代码量
<div>
<div class="left">左</div>
<div class="right">右</div>
<div class="clear"></div> //增加一个空标签
</div>
解决方法2:
给父元素增加 overflow:hidden 的方法
overflow:visible(默认) auto滚动条(根据需要给父亲加) hiddden(多余部分裁剪)
//缺陷:但是子元素出现定位布局,就会很难实现
(7)当我们要想使用绝对定位时候,必须要有两个条件:
1)必须给父元素加定位属性,一般建议使用position:relative;
2)给子元素加绝对定位position:absolute;同时要加方向属性top left
(8)ie6双倍边距:
浮动方向相同,margin方向一样,双倍边距。解决办法:display:inline
双倍间距三个条件:
1浮动
2margin
3方向一致
解决办法:display:inline
(9)字体
有时候中文字体会变为乱码:
写汉字 效果不明显。
这边直接将中文名称写为 英文。
解决办法:最好采用 unicode 编码
(10)CSS Hack
IE都能识别*;标准浏览器(如FF)不能识别*
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
FF不能识别*,但能识别!important;
IE6支持下划线,IE7和firefox均不支持下划线。
例如:
div{
background:orange;
*background:green;
_background:blue;
}
2014.04.11