目录
第一章 HTML第一天
本章要点:
1、常用浏览器的介绍以及浏览器内核;
2、Html概述和Html编译器以及Html基本结构;
3、静态页面以及动态页面;
4、Html标题、段落、换行与字符实体;
5、Html常用标签以及每个标签的语义;
6、Html图像、绝对路径和相对路径;
7、Html超链接以及其属性介绍;
8、Html列表和表格。
一、常用浏览器与浏览器内核
1、常用浏览器
Chrome(推荐谷歌) Firefox(火狐) IE浏览器
Opera浏览器 safari浏览器
2、浏览器内核
浏览器内核的理解?
主要分成两部分:渲染引擎(layout或engine)和JS引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等)、整理信息(加入CSS等),以及计算网页的显示方式,然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
JS引擎:解析和执行JS来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只是指渲染引擎。
常见的浏览器内核有哪些?
Trident内核(IE内核):IE,MaxThon,TT,The World,360,搜狗浏览器等[MSHTML]
Gecko内核(Firefox内核):Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核(opera前内核):Opera7及以上[Opera内核原为:Presto,现为:Blink]
Webkit内核(safari内核):Safari,Chrome等[Chrome:Blink(Webkit的分支)]
二、Html概述和Html编译器及Html基本结构
1. Html简介
HTML是 Hyper Text Markup Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
2. Html编译器介绍
(1) 、Notepad++
Notepad++是一款非常经典的编辑器,它的功能比Windows 中的 Notepad强大得多,不仅有语法高亮度显示,也有语法折叠功能、代码自动补全等,你还可以根据自己的喜好设置用户界面,使用扩展功能。
(2) 、Sublime Text2
Sublime Text是具有漂亮的用户界面、强大功能和优良性能的一款代码编辑器,你可以在Windows、OS X和Linux等主流操作系统上运行使用,而且现在一直可以免费使用。
(3) 、Adobe Dreamweaver
DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
(4) 、Hbuilder
支持HTML5的Web开发IDE。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。
(5) 、EditPlus
EditPlus是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器,另外它也是一个非常好用的HTML编辑器,它除了支持颜色标记、HTML 标记,同时支持C、C++、Perl、Java。
(6) 、CoffeeCup HTML Editor
它是一种体积小,易于使用的应用程序,可以帮助编辑和预览HTML文件。它有着许多的版本,可以按钮操作Javascript脚本,进行字体设计、帧设计、颜色向导、抓取等。它是HTML编辑器中非常好的一款。
(7) WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
3. Html基本结构
1)、<HTML>标签
<html>标签的作用相当于设计者在告诉浏览器,整个网页是从<html>这里开始的,然后到</html>结束。
对于<html>这个标签,我们经常看到这样一句代码:
html xmlns="http://www.w3.org/1999/xhtml
其实上面这句代码声明了该网页使用的是W3C组织的 XHTML标准。
2)、<head>标签
head标签是页面的“头部”,只能定义一些特殊的内容。
3)、<body>标签
body标签是页面的“身体”,一般网页绝大多数的标签代码都是在这里编写。
在此说明一下:
①对于HTML的基本结构,你至少要默写出来,这些都要记忆。
②记忆标签小技巧:根据标签字母意思就很容易记忆了,比如<head>表示“页头”,<body>表示“页身”。
三、静态页面以及动态页面
1. 静态页面
静态网页也称为普通网页,是相对网页而言的。静态网页不是指网页中的元素都是静止不动的,而是指网页文件中没有程序代码,只有HTML(超文本标记语言)标记,一般后缀为.htm、.html、.shtml或.xml等。在静态网页中,可以包括GIF动画,鼠标经过Flash按钮时,按钮可能会发生变化。
静态网页一经制成,内容就不会再变化,不管何人何时访问,显示的内容都是一样的。
如果要修改网页的内容,就必须修改其源代码,然后重新上传到服务器上。
对于静态网页,用户可以直接双击打开,看到的效果与访问服务器是相同的,即服务器参加与否对页面的内容是不会有影响的。这是因为在用户访问该网页之前,网页的内容就已经确定,无论用户何时、以怎样的方式访问,网页的内容都不会再改变。
静态网页的工作流程可以分为以下4个步骤。
1) 编写一个静态文件,并在Web服务器上发布;
2) 用户在浏览器的地址栏中输入该静态网页的URL(统一资源定位符)并按回车键,浏览器发送请求到Web服务器;
3) Web服务器找到此静态文件的位置,并将它转换为HTML流传送到用户的浏览器;
4) 浏览器收到HTML流,显示此网页的内容;
静态网页的内容不会发生任何变化。其工作原理图,如下所示。