HTML与JS笔记总结.docx

《HTML与JS笔记总结.docx》由会员分享，可在线阅读，更多相关《HTML与JS笔记总结.docx（71页珍藏版）》请在冰点文库上搜索。

HTML与JS笔记总结

HTML与JS笔记总结目录

第一天1

第二天4

第三天11

第四天18

第五天20

第六天23

第七天25

第八天29

====================HTML基础_1=====================

第一天

1、浏览器（解释和执行HTML源码的工具）

5大浏览器：

IE、FF（FireFox）、Chrome、Opera、Safari（Apple）

引擎：

Trident引擎，（就是IE的WebBrowser控件）

WebKit引擎（开源浏览器内核），现在很多非IE核心的浏览器用的是WebKit引擎，比如遨游3或搜狗的双核、Chrome、Safari.

2、静态页面、动态页面

网站页面分为静态页面和动态页面两种：

a）静态页面：

后缀名为html或htm都是静态页面。

有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器；

b）动态页面：

动态页面中会包括一些脚本代码。

服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器，动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等编写。

htm、html都是静态页面，asp、aspx、jsp、php等都是动态页面。

3、HTML页结构

中可以包括：

//结束标签，如果忘记＇/＇,则整个页面都不显示。

当前文档中导入另外一个文档，并说明其关系。

指定网页中超链接的基准地址。

分两种：

1.关于网页的描述信息

2.模拟http响应头信息。

每1秒钟刷新一次当前页面。

4、颜色体系

●body标签的bgcolor属性可以设定网页的背景颜色。

bgcolor的取值可以是英文单词，也可以是十六进制的颜色（#000000黑色、#FFFFFF白色）。

●#00FF69这就是HTML中表示颜色的方式，每两个是一组，三组分别就表示R、G、B的值，是16进制表示。

●bgcolor=“rgb（10,125,200）”或bgcolor=“rgb（10%,125%,20%）”也可以但存在浏览器兼容性问题FF、Opera、Chrome不支持（*）

5、HTML和XML的联系、区别

●html与xml相同点：

•都是标记语言、注释都是：

--内容、内容-->

•都可以通过dom编程方式来访问

•都可以通过CSS来改变外观

●html与xml的不同点：

•xml比html语法要求更严格。

有开始标签必须有结束标签、大小写一致、属性用双引号等。

•xml侧重于数据存储，html侧重于数据展示。

趋势：

数据存储与数据表现相分离（html中只有要显示的页面内容，样式都有CSS来控制,html页面中不再有等标签，控制样式都用CSS）。

●xhtml：

可扩展超文本置标语言（eXtensible HyperText Markup Language，XHTML），更符合xml语法规范的html。

xhtml的出现主要是为了向xml过度，通过xml+css也能实现很好的页面。

【xhtml要求：

全部小写、有开始结束标签、属性用双引号】

●dhtml：

动态的html（DynamicHTML）。

HTML、样式表和JavaScript的组合

6、HTML常用标签：

文字格式

●h标签（标题），HTML定义了

到

六个h标签，分别表示不同大小的字体。

h1最大，h6最小。

●
回车，

分段。

前后会有比较大的空白，而
没有。

●

居中显示.

●粗体，推荐。

斜体。

带下划线。

强调，斜体

●_{下标，如：}

H₂O

●^{上标，如：}

10²

●字体标签，红色。

size（1-7）face（设置字体，注意：

用户计算机中必须有该字体才能正常显示）

●，size厚度，width长度，align默认为剧中显示

●

预格式化保持本色
7、HTML编码（以&开头，以;结尾，特殊字符）
常用的html编码：
"
"
©
©
&
&
®
®
<
<
²
²
>
>
³
³
空格
 
¥
¥
8、URL（超链接）
●超级链接：
如鹏网。
target属性的一些取值：
_blank:
在新窗口中打开超链接。
国情：
国内的网站很多都是默认在新窗口中打开。
_self:
在自己的窗口中打开
_parent:
父窗口中打开
_top:
表示在顶级窗口打开
框架名称：
在指定框架中打开。
●a标签的一些常用属性：
href、title、target、name（锚记时用）
点击图片打开连接
相对URL：
表示相对于当前文档的资源，“/”表示网站根目录，“../”表示父目录，“../../”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。
站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。
锚记：
用name属性为起名字：
这里是最后。
这样可以通过转到平台来跳转到超链接的部分。
URL:
统一资源定位符（表示资源在网络中的地址）
URI:
统一资源标识符。
9、图片
✓如果文件不存在，就不显示。
alt属性为图片无法显示时的显示文本，鼠标放上去也会有悬浮提示；title用来显示当鼠标放到图片上时显示的文字；border="0"不显示边框；width、height指定图片的显示大小，如果不指定则是图片的原始大小。
✓最好指定width、height，哪怕是原始尺寸大小，因为如果不指定大小，图片会不占位置，图片下载后才调整大小，会造成页面很乱。
如果指定了width、height哪怕图片没有加载完成，也会先把位置占上。
✓如果网页上要显示小图（比如缩略图），不要仅仅是把大图设定一下width、height来缩小，因为仍然会下载大图，会使得加载速度很慢。
✓易错，不要以为把bmp后缀改为jpg就是改文件格式了！
10、补充
●px（Pixel）单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的（随着屏幕分辨率而变化）,国内推荐；QQ截图也是使用PX作为长度宽度单位。
●em单位名称为相对长度单位。
相对于当前对象内文本的字体尺寸，国外使用比较多；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
11、列表、表格
●dl→definitionlist（定义列表）。
一般用于名词解释之类。
/
●ul→unorderedlist（无序列表），注意多个ul嵌套时的写法。
●ol→orderedlist（有序列表），
●
与
都有一个type属性，用来设置序列的显示样式。
type的取值可以是：
1、a、A、i、I、disc、circle、square。
（可用CSS控制ul、ol的type样式）
●表格：
为表格，在内部通过创建行，内部通过创建单元格。
可以将table的border属性设为0来隐藏表格线。
•填充、间距cellpadding内容和表格边线之间的距离cellspacing单元格之间的间距。
•的属性：
align，水平对齐，可选值left、right、center；valign，垂直对齐，可选值top、middle、bottom。
•也有align和valign。
tom20男：
子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。
•td属性：
rowspan（合并行）、colspan（合并列）进行单元格的合并。
•一个完整的表格。
table、caption、thead、tbody、tfoot、tr、th、td。
该标签相当于GroupBox控件，该标签内的
，用于设置在该区域左上方显示的文字
12、HTML（HyperTextMarkUpLanguage，超文本标记语言）
注意：
文档类型定义：
DocumentTypeDefinition，DTD
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
====================HTML基础_2=====================
第二天
1、DIV和CSS
div和span：
●div：
将内容放到一个矩形的区块（层）中，当成一个整体进行处理。
会影响布局（两端会换行），应用在网页布局
●span：
把一段内容定义成一个整体进行操作，不影响布局、显示（两端没有换行）。
一般用来圈住一小段文字，设置不同的样式。
为什么不用标签，因为用可以通过CSS来设样式。
在span中使用p虽然仍然显示，但这种写法是错误的
●html这些标签去哪里查？
msdn目录→web开发→HTMLandCSS→HTMLandDHTMLReference→Objects
CSS（层叠样式表，CascadingStyleSheets，为网页设置外观，美化页面）：
好处：
1）通过布局、定位，美化外观
2）能实现内容与样式的分离，方便团队开发，可以统一定义格式、修改
HTML标签的外观样式比较单一：
页面色彩不生动、样式修改不方便
常见CSS样式：
●Css样式的属性的键值对之间用“：
”隔开，而不同的属性之间用”；”（分号）隔开。
●css中表示宽度、距离时的计量单位：
px（像素）、30%（百分比）、em（相对单位）等。
background-color:
Red;背景颜色；
color：
文本颜色
border-style:
solid;边框风格，实线（默认是没有），还有dotted（点）等值；
border-color：
边框颜色；
border-width：
边框宽度（默认是0）。
●display：
元素是否显示，none（不显示）、block（显示为块级元素，此元素前后会带有换行符。
）、inline（显示为内联元素，元素前后没有换行符）
display:
none隐藏，不占位置、visibility:
hidden隐藏，但还是占着位置
display：
inline将div变成span
display:
block将span变成div，只有在设置为block后，才能设置宽和高的属性
●cursor，鼠标在元素上时显示的光标图标，可选值：
cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。
还可以通过cursor:
url（dinosau2.ani）使用ani、cur格式的自定义光标图片。
●LI不显示圆点：
list-style-type:
none;一般设在li或者ul上
●margin（与表格的cellspacing属性类似）、padding（与表格的cellpadding类似。
）
margin:
值1;//上右下左都是值1。
margin:
值1值2;//上下为值1，左右为值2.
margin:
值1值2值3;//上为值1左右为值2下为值3;
margin:
值1值2值3值4;//每个值分别是：
上右下左;（顺时针方向）
2、样式选择器（标签、类、id选择器）
●对于非元素内联的样式需要定义样式选择器，可以和style同时组合使用
40px;color:
red"type="text"value="a“/>
●选择器的优先级：
Style>Id选择器>类选择器>标签选择器
标签选择器
input{border-color:
Yellow;color:
Red;}，对于指定的标签采用统一的样式
类（class）选择器
.highlight{font-size:
xx-large;cursor:
help;}
aaa
注意：
1）样式名称开头加“.”点；
2）同一个标签可以应用多个类选择器（名称用空格隔开）。
如果样式表中的定义有重复，以最后一个定义为准。
3）标签+‘.’+Class选择器名：
class选择器也可以针对不同的标签，实现同样的样式
•input.accountno{text-align:
right;color:
Red;}
•
id选择器：
#username{font-size:
10px;}
注意：
样式名称开头加“#”
伪选择器（为标签的不同状态设定不同的样式）：
A:
visited：
点击过超链接的样式；
A:
active：
选中超链接时的样式；
A:
link：
超链接未被访问时的状态；
A:
hover：
鼠标移到超链接时的状态。
说明：
text-decoration:
underline/none（不显示下划线）
注意：
不是所有的元素都支持伪选择器。
（IE7以下不支持input:
hover等标签。
），目前大多数只在A标签时使用。
•注意浏览器缓存问题。
其他选择器：
●层次选择器（包含选择器）（用空格隔开）：
Pstrong{background-color:
Yellow}，表示P标签内的strong标签内的内容使用的样式
adfasfd
●组合选择器（用逗号隔开），同时为多个标签设定一个样式
H1,H2,input{background-color:
Green}
●其他CSS选择器：
div>p（子选择器）、div+p（相邻选择器）、…。
IE7以下不支持。
3、使用CSS的三种使用方式
1）元素内联（行内样式表），直接将样式写入元素的style属性中，中间用分号隔开。
如：
,适用于样式没有可复用性的场合。
2）页面嵌入（内嵌样式表）：
在head中加入
表示页面中所有input都是采用指定的样式。
适合于样式复用，减小页面体积
3）外部引用（外部样式表），将css内容写入css后缀的文件，然后在页面中通过引用，适合于多个页面共享css
注意：
●