HTML 学习整理

最新推荐文章于 2023-03-02 20:40:05 发布

weixin_30823001

最新推荐文章于 2023-03-02 20:40:05 发布

阅读量142

点赞数

原文链接：http://www.cnblogs.com/reganLi/p/3404008.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>

玩下遮布效果

转载于:https://www.cnblogs.com/reganLi/p/3404008.html

weixin_30823001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 学习整理

一、名词解释一、 HTML : Hypertext Markup Language 超文本标记语言二、 CSS : Cascading Style Sheet 层叠样式表三、浏览器:解释和执行HTML源码的工具。a) 五大浏览器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safari(App...
复制链接

扫一扫