传智播客HTML基础加强的课件和笔记及图片案例杨中科主讲.docx
《传智播客HTML基础加强的课件和笔记及图片案例杨中科主讲.docx》由会员分享,可在线阅读,更多相关《传智播客HTML基础加强的课件和笔记及图片案例杨中科主讲.docx(23页珍藏版)》请在冰豆网上搜索。
![传智播客HTML基础加强的课件和笔记及图片案例杨中科主讲.docx](https://file1.bdocx.com/fileroot1/2022-12/31/6f81d1c3-11da-405e-9825-4d86616c1dc6/6f81d1c3-11da-405e-9825-4d86616c1dc61.gif)
传智播客HTML基础加强的课件和笔记及图片案例杨中科主讲
第一节课
HTML基础加强班
●什么是浏览器?
1.浏览器就是接受浏览者的操作(打开一个网址、点击一个链接、点击一个按钮),然后帮浏览者去web服务器请求网页的内容(html格式返回),然后展现成人眼能够看得懂的可视化的页面的软件。
●IE=浏览器?
这个说法是错误的。
IE是浏览器的一种,还有FireFox、Opera、Charome等,注意遨游(Maxthon)、世界之窗、搜狗浏览器、360浏览器等并不是一种独立于IE的浏览器,其内核还是IE的内核,只不过是换了一个外壳而已,所以用遨游的不能嘲笑用IE的,否则就露怯了,试着用WeBrowse空间自己开发一个浏览器。
●所谓的Trident引擎就是WebBrosder空间,现在很多非IE核心的浏览器用的是Webkit引擎,比如遨游3或搜狗的双核、Chrome、Safari。
搞浏览器开发挺简单的。
●HTML就是描述网页长什么样子、有什么内容的一个文本。
在查看网页的描述内容的方式:
使用IE浏览器的话,在网页上点击右键,选择“查看源文件”
●浏览器兼容性问题:
描述文件是一个统一的,但是就像口语翻译一样,不同翻译翻译出来的东西也是有差异的,所以同一个网页在IE上和Firefox上看起来就可能长得不一样,最明显的就是以前qq空间上的页面在Firefox上线时就有问题,甚至有的网页在IE6、IE7、IE8商战的也不一样。
因此web开发过程中的一个中药也是最头疼的问题就是浏览器的兼容,测试Firefox(简称FF)、Chrome等浏览器安装各自的软件就可以,测试不同版本的IE可以用IETester。
●只要能跑IE和firefox就ok了。
小知识:
浏览器兼容性测试:
Acid。
测试标准:
对给定几个网页来测试,谷歌的Firefox100分,IE的98分。
浏览器开发引擎Webkit、Trident、Gecko。
QQ、暴风、千千静听等弹出的新闻中心是网页,是嵌在浏览器框架中的。
用visualstudio就可以开发。
静态页面、动态页面
●网站页面分为静态页面和动态页面两种
⏹静态页面:
有一个html页面文件保存在服务器上,浏览器要这个页面的时候服务器就把这个页面文件发给浏览器;
⏹东莞台页面:
服务器上没有脸拦着要看的页面,而是服务器动态生成的html页面发给浏览器,动态语言的服务端也易用C#,、php、java、c等编写。
●编写普通的html页面和任何后台语言无关的,可以使用dreamweaver、expressionweb等工具写,这些工具是给页面美工用的,开发人员用visualstudio写html就够了,不要把精力放到怎么把页面好看上,正规公司都有专门的页面美工,不正规的公司都是偷别人的美工页面,无论是偷别人的页面,还是使用美工公司开发出来的页面,对于开发人员要做的“填模板”工作都是一样的。
第二课
课前说明:
●内容:
html、css
●目标:
掌握手写html实现一般难度的web页面的能力(如网站注册表单),为学习打基础。
坚持手写html,可视化设计知识一种自学的手段。
●参考书:
张孝祥《javascript网页开发——体验式学习教程》
第一个网页
主流编程人员所用的为visualstudio2008,可以去官网下载。
有点大,3.7个G。
●新建web项目(新建→web应用程序),新建html页面(添加→新建项→web→html页)
●查看页面方式
⏹切换到“设计”视图,可以在这里查看初步的预览效果,不是很准,可以再“设计”试图工具箱中拖放空间可视化的设计,设计复杂页面的时候很少直接可视化设计
⏹在变机器上右键,选择“在浏览器中查看”。
无法进行调试。
⏹将要查看的页面设为起始页(在文件上点击右键“设为起始页”),然后点击“启动调试”,即可调试。
●学没有js、c#代码的时候用“在浏览器中查看”。
修改页面不用关闭浏览器再打开,刷新就可以。
第三课
Html页结构说明
●所有内容都在标签之内:
内存放的是头部信息,是对页面的描述,不会直接显示在页面中,内的
中设置的是页面的标题,只能放在中;是页面的主题,大部分显示内容都定义在这里。
●所有页面都应该至少含有这些部分,由于浏览器容错性强,所以即使不包含也能正常显示,但是最好还是写全了。
颜色体系
●Body标签中的bgcolor属性可以设定网页的背景颜色,
●#006699就是html中表示颜色的方式,每两个是一组,三组就分别表示R、G、B的值,是16进制表示。
关于RGB见备注
●可以使用vs内置的颜色选择对话框生成RGB值,也可以用取色器(比如DEBUG内置的取色器;打开IE,打开debugbar工具栏,点击吸管图标);html海域定义了一些颜色:
red、black、white等,比如bgcolor=“black”。
●配色不是一个专业开发人员考虑的,是美工的事情,所以对于颜色的取值不用太操心,知道有这么一会是就行了。
Html和xml的联系、区别
●Xhtml
●属性值:
html中属性值即可以用单引号括起来,也可以用双引号括起来、甚至不用引号都可以(不推荐),单双要配对。
●注释:
html使用和xml一样的
—注释内容-->来做注释。
●特殊字符:
html中<、>是有特殊含义的、空格不会被显示的(输入一个带空格的字符串试试),所以需要特殊符号,相当于c#中的“\n”转义符。
&it;(小于号);>;(大于号); ;(空格);实用工具,免除记忆。
●格式标签创建段落;
回车,也可以写成
,在html中有一些标签可以不关闭,
就是一个,这是和xml不同的地方,但是为了遵循xhtml规范,推荐像xml一样严格关闭。
![]()
●Html不把“”当成空格,因为html中经常有缩进,如果把缩进的空格在浏览器中以空格形式展现的话,排版会很麻烦。
“ ”表示空格。
●
不是万能的。功能有限。
文字格式
●
只是回(即换行),
是分段,
前后会有比较大的空白,而
则没有。
如图
●
网络创新小组居中显示如图
●h标签,html定义了
到六个h标签,分别表示不同大小的字体。●网络创新小组粗体
●字体标签,红色红色
url、超链接
●url:
表示资源在网络中的地址,比如
http:
//127.0.0.1/a.html、ftp:
//192.168.88.128/b.zip。
还有uri的概念,比url大,有的尅中使用uri之中说法,可以暂时看成和url一样大就行。
●超链接:
好123
点击,直接进入“好123”网站
●中还可以嵌套图片,这样就是点击图片打开连接
超链接深入
●相对url:
相对url表示相对于当前文档的资源,“/”表示网站根目录,“../”表示父目录,“../../”表示父目录的父目录,”../”或者不写任何斜线表示相对于当前路径的目录。
站内引用最好用相对url,这样域名改变了,目录改变了都不受影响。
●将的target属性设定为“_blank”就可以在新的窗口中打开超链接。
国内的网站都默认是在新窗口中打开。
●超链接:
baidu
●用的target属性为起名字:
这就是最后
这样可以通过跳到平台来跳转到超链接的部分。
●案例:
去评论、回到正文。
多敲几个回车
图片
●注意图片是连接的,不是插入的,所以如果src指向的文件不存在了,就看不了了。
Alt属性为图片无法显示使得显示文本,鼠标方式也会有悬浮提示“点击查看大图”;border属性指定边框,border=“0”不显示边框;width、height属性指定图片的显示大小,如果不指定则是原始大小。
●最好指定width、height,哪怕是原始尺寸大小,因为如果不指定大小,图片不占位置,图片下载后才调整大小,会造成页面很乱。
如果知道那个了width、height哪怕图片没有加载完成,也会先把位置占上。
●如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width、height来缩小,因为仍然会下载大图,使得加载速度很慢。
列表、表格
●列表:
(unorderedlist)
●还有有序列表
,很少用。
Orderedlist
●表格:
为表格,在内部用过
创建行,
内部通过创建单元格。 可以讲table的border属性设为0来隐藏表格线 ⏹ |
属性:align,水平对齐,可选值left、right、center;valign,垂直对齐,可选值top、middle、bottom。
⏹
也有align和valign。 tom | 20
| 男 | :子标签默认则继承父标签的属性,如果自己单组设定了属性,则会覆盖父标签的属性。
⏹还可以使rowspan、colspan来进行单元格的合并,vs可视化的功能来做就行。
⏹表头的td可以用th代替,这样就会表示粗体、居中显示。
⏹建议将表头用<>代替表单
●网站表单于填单
●
|