一、什么是html?
Html是Hyper text mark language ,是超文本标记语言。是用来编写网页的标记语言。最主要的目的是提供网页内容。不做美化。
超文本:一个是超越普通文本,电子档,可以通过超链接把不同地域,不同类型的各种资源集合到一起,好像在本地浏览一样。信息共享,信息传递,丰富多彩的效果,比如flash,视频。
Mark Language:它是一门基于标记(标签、元素)的语言。只是一门标记语言,虽然设计之初想干好多事情,提供网页内容,美化网页,加动作特效。。。但是最终由于难度,还是基本只提供内容。结构化内容。
结论:html学习非常简单,就是学习一些标记和属性。
二、Html快速入门
html的编写用任何文本编辑器都可以,是基于ascii编码的。后缀名是.html、.htm、xhtml、dhtml等。.htm以前系统喜欢的后缀名。比如exe、bin、bat等。
html只是一个普通文本文件吗?不是。遵循的是web标准,web标准是一系列的标准,比如html,css,javascript等。(web标准化的目的是让不同的浏览器厂商生产出来的各种浏览器可以在各种终端上显示相同的效果)Html需要用浏览器打开,实际是由浏览器解释执行(凡是浏览器解释执行必定有浏览器差异性),呈现效果给用户。
网页中的标签的都用小写(虽然大写也可以,但是基于xhtml的标准就是全部用小写)
三、Html入门案例详解
骨架标签
骨架标签分4个,html head,title,body。基本所有的html网页都应该包含以上4个标签。
注意:
a.标签一般成对出现
b.标签可以,多重嵌套,但是不能交叉嵌套
c.所有的html标签都应该出现在<html></html>内部.
d.html源代码中的效果和网页呈现效果是不一样的。比如在html源代码中换行在网页是没有效果的,道理很简单:html是由浏览器解释执行,浏览器只认识html标签。源代码中敲入的回车换行浏览器不认识。所以在html中想要做事情要找标签,并且要用合适的标签标记合适的内容。
e.html中的基本概念:标签、属性、元素。
标签分类:单标签(有属性和没属性),双标签(也是)
属性:可以用来附加一些信息给标签,比如颜色、外观,位置等等。。
从这点可以看到html不只是提供货内容也可以简单地控制外观,样式。由于不够强大,再加上web标准要求,将来会被css取代。比如font标签、center标签等就是被废弃的。
属性中有几个特殊的:
有一类属性值是长度(绝对和相对):100px 100%(相对父亲)
有一类属性值是颜色:red, rgb(20%,20%,20%) , #000000
还有一种是size <font color="red" size="7"> big small
<font color="red" style="font-size:100px;">
Html控制外观还是不强大,css就厉害了
还有一类Align:left center right 相对父亲的对齐方式
还有一类属性:没有属性值,属性名做属性值。比如form中input type=checkbox checked selected=selected 或 selected
元素:元素=开始标签+内容+结束标签
可用面向对象的思维去理解html中整个文档。将标签理解为引用类型,将标签属性理解为成员变量,深刻理解html就是一个根对象,有子孙对象,对象与对象之间有父子、兄弟等关系。
将html文档整理理解为一棵对象树非常重要。
f.Html是一门语法极其不严格的标记语言。有推荐没有强制执行,比如标签大小写,属性值单引号、双引号、不加引号都行,有开始没结束也行。。。
建议:标签、属性都小写,属性值加双引号。有开始有结束。
四、常用标签(选控件)
4.1、<head>
Head标签中的内容是不会在网页中显示的,一般用来设置页面的标题(title),获取可以设定相应外部文件的引入,或者设置相应的meta等信息
4.2、文本标签
标题、段落、字符格式化
Word上来先看标签,一个网页上来肯定是标题最重要
标题标签:和word一样,主标题 次标题….
<hn>--------------</hn> n从1到7
设置h有利于被搜索引擎找到。
接着看段落 <P> <p> 国内段落和国外段落 前后空行和缩进俩个字
段落中有一些字体想要粗体,斜体,下划线,删除线,上标,下标
Html用字符格式化标签实现以上效果
<b></b>
<i></i>
<s></s>
<del></del>
<u></u>
<sup>
<sub>
·换行:对于html而言,代码中的换行不会在页面中显示。需要使用相应的换行标签,br和p。对于br而言,里面没有任何内容,需要使用自结束标签
·列表标签
4.3、常用其他标签
csdn 和 iteye(javaeye)
转移字符的兼容性不好,有另外一种数字表示的转义很通用。但是不容易记住。就好比ip和域名一个道理。
A标签可以用来做锚点 例如百度百科
Title属性,鼠标表放上去显示。比如新闻标题比较长的时候,可以用省略号。鼠标移动上去时候,弹出框显示全。
Width和height如果都设置,会按设置的显示。如果只设置一个,另一个会根据图片本来大小等比例缩放。
提问:如何让图片滚动呢?
如何让搜索引擎找到我们页面的图片?对于以图片为主的网站非常重要!增加alt和title。
4.4、表格标签
A1 | A2 | A3 |
B1 | B2 | B3 |
C1 | C2 | C3 |
A1 | A2 | A3 | A4 |
B1 | B2 | B3 | B4 |
C1 | C2 |
A | A | A | |
B | B | B | |
C | C |
表格注意:
所有内容都要写到table中
空td的表现
合并单元格
4.5、表单
常用的表单标签:原则上所有的表单标签都要放置在form标签中
Input标签可以用来设置文本框,密码框等数据
4.6、多媒体
使用Web如此流行的原因之一是可以再网页上加入图像、声音、动画和电影文件。虽然
过去对这些文件大小的限制局限了它们的作用,但是新技术(比如流技术及宽带)已经使多
媒体网页成为了可能。
4.6.1 FLASH动画的插入
4.6.2 MP3音频及WMV视频的插入
五、布局标签(页面布局)
我们看到所有的网页都是分块的,和java图形界面编程时候用的panel比较类似。Html
布局是俩种:表格布局和div布局。
5.1、表格布局
导航图片
| ||||||||||||||||||
首页 | 学习天地 | 娱乐天地 | 休闲天地 | 退出系统 | ||||||||||||||
|
| |||||||||||||||||
CopyRight |
表格布局缺点:
很可能会表格嵌套的层次会过深,页面代码充斥着太多的table。都不知道哪里是某个表格的开始哪里又是它的结束。
更严重的问题是,如果页面要改版,悲剧了,要重新写了基本上(比如一行原来2个td,必须要改3个,考css做不到)。如果是div+css就不会重写内容,只需要重写css就是另外一个完全不同的页面了。
5.2、div布局(span)
补充:块标签和内联标签
5.3、Frameset(框架或窗口分帧)
点击普通a标签,页面会跳转到另外页面,之前的内容就没有了。如何实现点击a之后不要跳转页面、实现局部刷新呢?
要用到frame。有俩种一种是frameset,一种是iframe,iframe是在页面的某一个位置嵌套,已经被ajax淘汰了。并且iframe已经被html5淘汰了,html5淘汰了大量的html标签。例如font,center等。我们现在讲的都是html保留的。
Frameset标签不能在body中设置
六、最佳实践
一个网页用的颜色不能多、除非你对颜色的控制非常强。整体给人感觉是亮色。
上网的时候看到好看的页面,截张图保存下来,你的文件夹就有大的网页模板。你想要做项目的时候,去各个网页拼一个完整网页。
要模板的最大的目的是颜色搭配。和整体布局。