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最小。
●
回车,
分段。
前后会有比较大的空白,而
没有。
●
居中显示.●粗体,推荐。
斜体。
带下划线。
强调,斜体
●下标,如:
H2O
●上标,如:
102
●字体标签,红色。
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。 tom | 20
| 男 |
:子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。
•td属性:
rowspan(合并行)、colspan(合并列)进行单元格的合并。
•一个完整的表格。
table、caption、thead、tbody、tfoot、tr、th、td。