HTML 学习整理

一、名词解释

一、 HTML : Hypertext Markup Language 超文本标记语言

二、 CSS : Cascading Style Sheet 层叠样式表

三、浏览器:解释和执行HTML源码的工具。

a) 五大浏览器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safari(Apple)

b) 解析引擎：

i. Trident引擎：（就是IE的WebBrowser控件）

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

四、各浏览器之间的兼容问题：（CCS和JS的兼容问题）

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

a) 静态页面：后缀名为html或htm都是静态页面。有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器；

b) 动态页面：动态页面中会包括一些脚本代码。服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器，动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等编写。

c) htm、html都是静态页面。

d) asp、aspx、jsp、php等都是动态页面。

六、开发工具：

a) 记事本、高级记事本(Editplus、Notepad++、UltraEdit)。

b) Dreamweaver、Expression Web(FrontPage的改头换面版) 等快速开发工具，这些工具是给页面美工用的。

c) 开发人员用VisualStudio写html就够了。

七、 HTML标签：

a) 所有内容都在<html></html>标签之内；

b) <head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中。

c) <head></head>内的<title></title>中设置的是页面的标题，<title></title>只能放在<head></head>中；

d) <body></body>是页面的主体，大部分显示内容都定义在这里。

八、 HTML注释： ：

a) 注释不允许嵌套

九、 html与xml相同点：

a) 都是标记语言、注释都是：

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

c) 都可以通过CSS来改变外观

十、 html与xml的不同点：

a) xml比html语法要求更严格。

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

c) xml侧重于数据存储，html侧重于数据展示。趋势：数据存储与数据表现相分离(html中只有要显示的页面内容，样式都有CSS来控制,html页面中不再有<font>等标签，控制样式都用CSS)。

十一、 html常用标签:

a) h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。

b) <br/>只是回车，<p>是分段。<p>前后会有比较大的空白，而<br/>则没有。

c) <center>居中显示.

d) <b>、<strong>粗体，<i>、<em>斜体。<u>下划线。

e) <sub>2</sub>下标，如：H<sub>2</sub>O

f) <sup>2</sup>上标，如：10<sup>2</sup>

g) <font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色） size（1-7） face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）

h) <hr> color size（厚度） width（长度） align=left/center/right （默认为剧中显示）

i) <pre> 预格式化保持本色 

j) HTML特殊字符：<（小于号，less than）；>（大于号，greater than）； （空格，Nonbreaking space ）。

k) 超链接：<a>标签的一些常用属性：href、title、target、name

l) 插入图片：<img src=“a.jpg”/>

m) 列表：dl→definition list(定义列表)，ul→unordered list(无序列表)， ol→ordered list(有序列表)。

n) 表格：<table>；创建行：<tr>；创建单元格：<td>；表格标题：< caption>；表页眉：<thead>；表主体：<tbody>；表页脚：<tfoot>；表头：<th>。

o) rowspan(合并行)、colspan（合并列）

p) <input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox表单标签：（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。

十二、 meta标签：（包括在head标签中。主要用来描述页面自身信息,元信息）

a) <meta name="keywords" content="新闻,娱乐,八卦"/>

b) <meta name="description" content="中国最全的八卦新闻"/>

c) <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码

d) <meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。

e) <meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" />三秒钟后重定向到新网页。

f) <meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。

g) <meta name="名字" content="值" />关于网页的描述信息。

h) <meta http-equiv="名字" content="值" />模拟http响应头信息。

十三、表单：

a) <form action="" method>

b) method = Post / Get

c) target：表单提交后返回的窗口

d) encoding：表单的编码方式

e) length：表单所含元素的数量

f) reset()：重置

g) submit()：提交

h) 事件：onreset; onsubmit;

十四、其他标签：

a) <input type="text" /> type = "radio" "checkbox" "password" "button" "reset" "file" "hidden" "image"

b) <select><option value="123">123</option></select>

c) <textarea rows="10" cols="30"></textarea>

d) Text：size宽度 value值 maxlength最大长度 readonly="readonly" 只读

e) Select：size上下宽度 multiple多选 <option>选项 <option selected="selected">选中 <optgroup label="111"><option>...</optgroup>分组

十五、框架

-> 基本语法

i. <frameset cols=“30%, *” rows=“”>
ii. <frame src=“URL” noresize=“noresize”/>
iii. <noframes><body></body></noframes>
iv. </frameset>
v. noresize设置是否可以拖动框架大小。

-> 内联框架

i. <iframe src=“URL”></iframe>

1.基础

HTML(HyperText Markup Language)
<font color="red">hello</font>文字属性修改
Acid 测试兼容
IETester 继承了各个版本的ie
有WebBrowser,控件,基于IE核心,很多都是嵌入了一个webBrowser控件
ie基于Trident, 先很多基于WebKit引擎
去下载维基百科
静态页面,动态页面,
静态页面:html,可以使用Dreamweaver, Expression Web(FrontPage的改头换面)等工具,美工用.vs2010开发用
动态页面:C#,VB,PHP编写实现
选取颜色,最后一项,选择,全屏幕取色

2.HTML,XHTML,XML区别
XHTML:比较标准的html语法,开始结束都有很明显的标记

DHTML:动态html，样式表和javascript的组合
HTML: 中可以不闭合,为了遵循XHTML规范,推荐像XML一样严格关闭.<br/> <img src="1.gif"/>支持dom编程，标记语言，侧重于数据展示
XML:严格规范要求，支持dom编程，标记语言，侧重于数据存储
格式标签:<p></p>创建段落;

注释:  HTML不把" ""当空格,因为HTML中经常有缩进, 如果把缩进的空格在浏览器中以空格形式展现的话,排版会很困那
" 表示一个空格&amp代表&进行转义为什么转义字符<>要用<>代替?就是因为<>有特殊含义,标签的定义

title标签中的内容一定和当前页面的内容相关

编写html代码的时候，一定要在内容的最前面，写上“文档定义”，<！DOCTYPE>遵循哪个html规范的代码，请浏览器使用对应版本的html规范来解析页面

3.文字格式
<h1~6></h1~6> 标签的使用：要根据具体的语义来使用，不要根据效果来选择。页面的样子要用css来控制。

<br/>只是回车自关闭标签，尽量不用，使用ul，li

<p>是分段.<p>前后会有比较大的空白,而<br/>则没有.
<center>传智博客</center>居中显示过时
h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体
<b>a</b>粗体.推荐<strong></strong>(可以表示这个是重点，重点放在strong标签里面，需要加粗使用css)

<i>斜体，建议使用<em>表示强调,

<u>下划线
<font></font>字体标签 <font color="red">红色</font> size是1~7 face="华文行楷"
<font size="30" color="red">红色</font>

<sub>变成下标 <sup>变成上标

<pre></pre>预格式化标签，保持本色

总结：尽量避免使用那些纯粹为了改变样式的标签，改变样式要使用css，而使用html来实现内容。目标是css和html一起描述

4.URL,超级链接,URL表示资源在网络中的地址,比如
     http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip 还有URI的概念,比URL大
     超级链接: <a href="http://www.rupeng.com">如腾网</a>
     <a>中还可以嵌套图片,这样就是点击图片打开链接
     <a href="http://www.rupeng.com"><img src="http:www.rupeng.com/forum/templates/ogo.gif"/></a>

5.超链接深入
     相对URL, /表示根目录, ../表示上一级目录, ../../上上级目录, ./或不写为当前目录,站内引用最好使用相对URL
     <a>的target属性设定为""_blank"就可以在新窗口中打开超链接"
     用name属性为<a>起名字:<a name="Last">这里是最后</a>,这样可以通过<a href="#Last">转到平台</a>来跳到超链接的部分..
     <a href="http://www.baidu.com" target="_blank">baidu</a>
     
target=“自定义” 这样打开都在一个窗口中打开，title类似于tooltip的效果，name(锚)

6.图片
     <image src="a.jpg"/> src alt title width height
     src指向的文件地址 alt 属性为图片无法显示时的显示文本,鼠标方式去也会有悬浮提示"点击查看大图"
     border属性指定边框,border="0",不显示边框;
     with、height属性指定图片的大小,如果不指定则是图片的原始大小.
     最好指定with,height,哪怕是原始尺寸大小,因果如果不指定大小,图片会不占位置,图片下载后才能调整大小,会造成页面很乱.
     如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下witch,height来缩小,因为仍然会下载大图,会使得加载速度很慢.

px是绝对单位，像素

em是相对单位，根据里面文字的大小

7.列表、表格
<ul><li>灌水区</li><li>版务区</li><li>原创贴图</li></ul>. unordered list 无序
<ol></ol>有序的列表,用得很少 type=“1|a|A|...”

     <table border="1">
          <tr align="right"><td>姓名</td><td>性别</td></tr>
     </table>
     <tr>的属性:align,水平对齐,可选值left,right,center; valign,垂直对齐,可选top,middle,bottom
     <td>也有align和valign.
     (*)还可以使用rowspan,colspan进行单元格的合并,用vs可视化的功能来做就行
     (*)表头的td可以用th代替,这样就会表头粗体,居中显示
     建议表头用<thead>代替<tr>
     <td>也有align和valign,<tr align="right"><td>姓名</td><td align="left">性别</td></tr>,td如果没有设置,默认继承父亲类型

cellspacing单元格之间的距离 cellpadding单元格内距

8.表单
     <form>标签为表单标签.如果要把数据提交到服务器,则需要
     <input type="" value="" >
     type 有bottun(普通按钮),text,checkbox(复选框),image(图片),submit(提交到服务器),file(选取文件),password(密码输入框),radio(单选),reset(重置按钮)
<input type="image" src="">

注意区别id和name的，id主要用来给js进行操作的，name主要用来提交数据标记。

表单提交到服务器的是value值

9.缩略图
正确的使用方法:缩略图最好用比较小的图片,原图用大的图

10.input表单详情
     submit:点击submit按钮表单,中文IE下默认按钮文本为提交查询 ,可以设置value改变
     text::size(长度大小控制),maxlength(限制输入长度),readonly(只读)
     checkbox::checked(是否被选上),必须有属性值,好的习惯很重要
     radio::相同name属性为一组,不同radio设定不同的value值,这样通过取指定的name的值就可以知道谁被选中了
     file::form的enctype必须设置multipart/for-data,method属性为POST(*)
     image::使用src属性指定图片的地址,用来美化的“登录按钮”

11.<select>表现
     用于创建类似于winform的ComboBox或者ListBox
     如果size属性大于1就是listbox,否则就是combobox
     <select size="">
          <option value="1">显示的文字</option>
     </select>
     实现选择是slected,不选择是需要value="-1",编程判断select
     <optgroup label="不能选择"></optgroup>实现combobox中不能选择的项,很少用

12.textarea 多行文本
<textarea cols="100" rows="5">这里是帖子的默认内容</textarea>
可以设置大小,属性: cols, rows控制列,行

13.label 可以得到焦点,for属性指定要修饰的控件的ID
<label for="ma">婚否</label><input id="ma" type="checkbox"/>

14.fieldset: GroupBox效果将一些控件框起来
     <fieldset>
          <legend>GroupBox类似效果控件</lengend>
          <input type="text"/>
     </fieldset>

15.meta标签(*)元信息、元数据、元素据

主要用来描述网页自身的信息，比如：网页使用的编码、网页关键字、内容摘要、页面多长时间刷新一次、......

例如：
<meta name=“keywords” content=“新闻,娱乐,八卦”/>
<meta name=“description” content=”中国最全的八卦新闻”/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码
<meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。
<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。发帖成功后提示“发帖成功，即将转向帖子查看页面”。
<meta http-equiv=“Cache-Control” content=“no-cache” /> 禁止浏览器缓存页面。

15.css(层叠样式表),描述控件是什么样子
     三种使用方法:
          内联:style="background-color:Red;border-color:Green".可以描述各种
          页面嵌入,在head,的title,后面写
<style type="text/css">

input

{

background-color: Red ;

border-color: Green ;

}

</style>

background-image:url()

外部引用: input { background-color:Red; border-bottom-color:Green; } p { color:Blue;

}

优先级：内联样式》 id选择器》类选择器》标签选择器

17.<div>
层<div>,表示一个层,可编程,把一堆东西块起来
层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏,整体移动等,div非常强大和常用

18.文档流可以进行块地多种定位

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

position:absolute;绝对定位,
即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移，或者是整个文档。
position:fixed;固定定位,IE6及以下版本不支持。
即完全脱离文档流, 相对于视区进行偏移.
position:relative;相对定位,
这个属性值保持对象所在文档流中的位置，相对于元素在文档流中位置进行偏移. 但保留原占位.可以设置top, left, right, bottom定位
position:static; 默认值文档流
使用z-index,需要设置position:absolute;z-index大的在上面。

18.span
div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局,显示一般只输入文字

19.常用样式
     css计量单位,css中表示宽度,px(像素),30%(百分比),em(相对单位),.width:20px
     background-color:Red 背景颜色
     border-style:solid实现,默认无边框边框风格   border-color 边框颜色 border-width 默认0无边框
     display:元素是否显示,可选值none(不显示),block(显示为块级元素,此元素先后会带换行符),inline(显示为内联元素,元素前后没有换行符)
     cursor,鼠标在元素上是显示的光标图案,可选值: cursor(默认光标), pointer(超链接上的手),text(输入),wait(漏斗,等待),help(帮助)等,cur或者ani格式
     LI不显示圆点:LIST-STYLE-TYPE:none 一般设在li或者ul
20.样式选择器
     样式适合哪些元素,三种,标签选择器,class选择器,id选择器
     class选择器
          .warning{background:Yellow;}
          .heighlight{font-size:xx-large;cursor:help;}
21.样式优先级
     <div class="warning" style="background-color:Blue;">
         你好的,点我吧
</div>
     style覆盖class,style的优先级比较高
22.标签+class选择器
     class可以针对不同的标签,同样的样式名针对不同的样式
     input.acc{color:Green;}
     label.acc{background:blue;}
     ....
     <input type="text" class="acc" value="sfdfdf" />
<label class="acc">3333333333333333333333</label>
23.id选择器
     #username
     {
          font-size:xx-large;
     }

<input id="username" type="text" value="aaaaaaaaa" />
     style,class可以同时组合使用
     <input id="username" class="acc" style="font-size:xx-large" type="text" value="123123123" />
24.更多选择器
     关联选择器
     P strong{background-color:Red;}
     <strong>sdfsdfsdfdsf</strong>
     <p><strong>sdfsdfdsfds</strong></p>
     组合选择器
     H1,H2.input{backuground-color:Red;border-color:Green;}
25.伪选择器为标签的不同状态设定不同的样式
     A:visited{TEXT-DECORATION: none}
     A:active{TEXT-DECORATION: none}
     A:link{TEXT-DECORATION: none}
     A:hover{TEXT-DECORATION: underline}

不是所有的元素都支持伪选择器。（不同浏览器支持情况不一样,IE7以下不支持input:hover等标签。），目前大多数只在A标签时使用。

注意浏览器缓存问题。

其他伪类：:first-letter首字母、:first-line首行、:focus获得焦点

思考：页面上部分超链接默认是红色、部分超链接默认是白色。怎么实现？（.myAnchor:link）

26. float

27.iframe（不分割当前）

28.frameset

</frameset>

玩下遮布效果

HTML 学习整理的更多相关文章

js数组学习整理
原文地址:js数组学习整理常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
TweenMax学习整理--特有属性
TweenMax学习整理--特有属性构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓 ...
HttpClient学习整理
HttpClient简介HttpClient 功能介绍 1．读取网页(HTTP/HTTPS)内容 2.使用POST方式提交数据(httpClient3) 3．处理页面重定向 ...
!!对python列表学习整理列表及数组详细介绍
1.Python的数组分三种类型:(详细见 http://blog.sina.com.cn/s/blog_6b783cbd0100q2ba.html) (1) list 普通的链表,初始化后可以通过特 ...
Java设计模式（学习整理）---命令模式
设计模式之Command(学习整理) 1.Command定义不少Command模式的代码都是针对图形界面的,它实际就是菜单命令,我们在一个下拉菜单选择一个命令时,然后会执行一些动作. 将这些命令封装 ...
Wix学习整理（5）——安装时填写注册表
原文:Wix学习整理(5)--安装时填写注册表一 Microsoft操作系统的注册表什么是注册表? 注册表是Mircrosoft Windows中的一个重要的数据库,用于存储系统和应用程序的设置信 ...
Wix学习整理（6）——安装快捷方式
原文:Wix学习整理(6)--安装快捷方式一为HelloWorld案例添加安装快捷方式通常我们安装一个应用软件的时候,都喜欢在桌面或开始菜单中添加快捷方式以便我们快速访问.现在我们就在上篇添加注 ...
Wix学习整理（7）——在开始菜单中为HelloWorld添加卸载快捷方式
原文:Wix学习整理(7)--在开始菜单中为HelloWorld添加卸载快捷方式通过前面的几篇随笔,我们已经给我们的HelloWorld提供了填写注册表信息,以及开始菜单快捷方式和桌面快捷方式.这些 ...
Wix学习整理（4）——关于WiX文件格式和案例HelloWorld的分析
原文:Wix学习整理(4)--关于WiX文件格式和案例HelloWorld的分析关于WiX文件格式 .wxs是WiX的源文件扩展名..wxs文件以类XML文件的格式来指定了要构造Windows In ...
Wix学习整理（3）——关于Windows Installer和MSI
原文:Wix学习整理(3)--关于Windows Installer和MSI 关于Windows Installer Windows Installer是微软Windows操作系统自带的一个软件安装和 ...

随机推荐

Sending data to USB printer in C#?
using System; using System.Drawing; using System.Drawing.Printing; using System.IO; using System.Run ...
基于WebForm+EasyUI的业务管理系统形成之旅 -- 系统设置(Ⅰ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 总体介绍>,主要介绍系统总体的界面效果和用户体验UI设计. 在MVC.MVP大行其道的今天,写WebForm该系列篇章, ...
HDU3047 Zjnu Stadium 带权并查集
转:http://blog.csdn.net/shuangde800/article/details/7983965 #include <cstdio> #include <cstr ...
IE9以下版本浏览器对HTML5新增标签不识别，导致CSS不起作用的问题
使用Javascript来使不支持HTML5的浏览器支持HTML标签.目前大多网站采用的这种方式(Bootcss官方例子也是如此). 在<head></head>标签内添加 2 ...
HW输入字符串长度，字符串，计数m。从前往后计数，当数到m个元素时，m个元素出列，同时将该元素赋值给m，然后从下一个数计数循环，直到所有数字都出列，给定的数全部为大于0的数字。输出出队队列。
package huawei; import java.util.Scanner; public class 约瑟夫环 { private static class Node { public int ...
Java笔记(八)……数组
数组的概念同一种类型数据的集合.其实数组就是一个容器. 数组的好处可以自动给数组中的元素从0开始编号,方便操作这些元素. 数组的格式元素类型[] 数组名 = new 元素类型[个数]; int[ ...
virtualenv下配置nginx uwsgi Django
1.安装virtualenv,创建虚拟环境django15 sudo apt-get install virtualenv virtualenv env source bin/active pip i ...
【Java基础】继承的一些总结
什么是继承把一些类的具有共性的东西剥离出来形成一个新的类,然后各个其他类保留自己独有的特性,并用关键字extends继承这个剥离出来的新的类,可以最终达到各类原始相同效果,但是在每个类中,单用一个“ ...
【Java基础】继承中的代码块和构造方法的执行顺序探索
本文讲述有关一个类的静态代码块,构造代码块,构造方法的执行流程问题.首先来看一个例子 /** * Created by lili on 15/10/19. */ class Person{ stati ...
删除旧Ambari集群
年少无知,安装了1.2.0版本.开源社区动力太强,更新的吼吼的跟不上啊,升级发生错误,于是就想重装了.在网上找到了一个很好的删除脚本,分享一下.原文链接 http://www.cnblogs.com/ ...

HTML 学习整理

一、名词解释

HTML 学习整理的更多相关文章

随机推荐

热门专题