HTML学记笔记_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > HTML学记笔记

HTML学记笔记

 2013/12/4 12:26:09  PBDragon  博客园  我要评论(0)
  • 摘要:1、浏览器A、浏览器(browser):万维网(Web)服务的客户端浏览程序。通过HTTP协议与网页服务器通信,并向万维网(Web)服务器发送各种请求,对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。B、可以使用IETester工具,测试IE浏览器兼容问题(IE6IE7IE8共存)。C、现在常用的浏览器引擎有Trident、WebKit。2、静态网页与动态网页A、什么是静态网页使用HTML,XHTML,XML,CSS,JavaScript
  • 标签:笔记

1、 浏览器

A、浏览器(browser) :万维网(Web)服务的客户端浏览程序。通过HTTP协议与网页服务器通信,并向万维网(Web)服务器发送各种请求,对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。

B、可以使用IETester工具,测试IE浏览器兼容问题(IE6 IE7 IE8共存)。

C、现在常用的浏览器引擎有Trident、WebKit。

 

2、静态网页与动态网页

A、什么是静态网页

使用HTML,XHTML,XML,CSS,JavaScript,Flash等不需要服务器端运算的程序实现的网页。

B、什么是动态网页

使用ASP,PHP,JSP等需要服务器端运算的程序实现的网页。

 

3、HTML基本结构

A、<HTML></HTML>

HTML标签放置于HTML文件的头尾,它的作用是告诉浏览器这个文件是HTML文件。

<HEAD></HEAD>

HEAD 标签一般在HTML标签和BODY标签的中间,是用来定义一些头部说明。

<TITLE></TITEL>

TITLE标签是用来定义这个HTML文档的标题,让浏览者访问网页时能够一下子明白网页的相关内容。它将显示在浏览器左上方。

<BODY></BODY>

在<BODY>标签里,可以定义网页的背景色,文字,链接等的颜色,甚至可以调入一些程序执行。在<BODY>和</BODY>中间,是网页的主要内容,是直接呈现给网友的部分。

 

4、HTML与XHTML

A、XHTML 要求正确嵌套

正确:嵌套元素

<p>Dragon <em>XHTML教程</em>.</p>

不正确:层叠元素

<p>Dragon <em>XHTML教程</p>.</em>

B、元素和属性名必须小写

对于所有HTML元素和属性名, XHTML文档必须使用小写。因为XML是大小写敏感的.如 <li> 和 <LI> 是不同的标签。

C、对非空元素,必须使用结束标签

在基于SGML的HTML4中的一些隐含结束意义的元素允许忽略结束标签.XML不允许忽略结束标签.除了在DTD中被声明为空的元素,所有元素必须有结束标签。

正确:结束的元素

<p>XHTML教程.</p><p> CSS教程.</p>

不正确:未结束的元素

<p>XHTML教程.<p> CSS教程.

D、属性值必须在引号中

所有的属性值必须在引号中,即使是以数字形式的属性值

正确:在引号中的属性值

<table rows="3">

不正确:不在引号中的属性值

<table rows=3>

E、属性最小化

XML不支持属性最小化.属性-属性值必须完整成对的写出.像disabled,checked这样的属性名不能在不指定属性值的情况下出现.

正确:非最小化属性

<input checked="checked">

不正确:最小化属性

<input checked>

F、元素必须被关闭

空元素必须有结束标签,或者起始标签必须以/>结束.例如,<br/>或<hr></hr>。

正确:结束的空元素

<br/><hr/>

错误:未结束的空标签

<br><hr>

G、用id 属性代替name 属性

HTML 4.01 针对下列元素定义 name 属性:a, applet, frame, iframe, img, 和map。

在 XHTML 中不鼓励使用 name 属性,应该使用 id 取而代之。

正确:

<img src="picture.gif" id="picture1" />

错误:

<img src="picture.gif" name="picture1" />

 

5、HTML的格式标签

A、<br/>回车,<p>分段。

   <center>Dragon</center>居中显示。

   h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。

   <b>Dragon</b>粗体。

   <font></font>字体标签。

B、URL、超链接

URL表示资源在网络中的地址。

超链接<a href="http://www.cnblogs.com/PBDragon">Dragon</a>。

图片超链接<a href="http://www.cnblogs.com/PBDragon"><img src="http://www.cnblogs.com/PBDragon/logo.gif"/></a>。

C、超链接(续)

"/"表示网站根目录,"../"表示父目录,"../../"表示父目录的父目录。

将<a>的target属性设置为"_blank/"在新窗口中打开超链接。

用name属性为<a>起名,<a name="last">这里是最后部分</a>。这样可以通过<a href="#last">转到..</a>来跳转到某部分。

D、列表、表格

列表:<li>表示列表项。<ul>表示无序排列,<ol>表示有序排列。即在<ul> </ul>中写入<li>可以构成一个无序列表,而在<ol> </ol>中写入<li>构成的是一个有序列表

表格:<table></table>为表格,通过<tr>创建行,<tr>内通过<td>创建单元格,将table的border属性设为0隐藏表格线。

<tr>的属性:align水平对齐,可选left、right、center;valign垂直对齐,可选top、middle、bottom。

<td>的属性:也有align、valign。

注意:子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。

 

 

6、表单

A、form标签用于为用户输入创建 HTML 表单。

表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

B、form的必要属性action

   规定当提交表单时,向何处发送表单数据。

C、form的可选属性accept 规定通过文件上传来提交的文件的类型。

accept-charset服务器处理表单数据所接受的字符集。

enctype规定表单数据在发送到服务器之前应该如何编码

method 以get、post方法发送表单数据。

name规定表单的名称。

Target 以_blank、_parent、_self、_top 规定在何处打开 action URL。

D、input标签用于搜集用户信息。

   根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

E、input的type属性可选button、checkbox、file、hidden、image、password、radio、reset、submit、text 元素类型。

F、select 元素可创建单选或多选菜单。

当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性。

   如选属性:disabled 规定禁用该下拉列表。

multiple 规定可选择多个选项。

name 规定下拉列表的名称。

size 规定下拉列表中可见选项的数目。

option 元素定义下拉列表中的一个选项(一个条目)。

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。

   如选属性:disabled规定此选项应在首次加载时被禁用。

label定义当使用 <optgroup> 时所使用的标注。

selected 规定选项(在首次显示在列表中时)表现为选中状态。

value定义送往服务器的选项值。

 

G、TextArea标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

   必需的属性:

cols number 规定文本区内的可见宽度。

rows number 规定文本区内的可见行数。

可选的属性:

disabled规定禁用该文本区。

name规定文本区的名称。

readonly规定文本区为只读。

H、label标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

   注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

 

7、CSS样式表

CSS(层叠样式表)用于美化页面,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。CSS有以下三种方式来插入样式:

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

 

8、DIV和SPAN

层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理。Div是将内容放到一个矩形的区块中,会影响布局。

Span:只是把一段内容定义成一个整体进行操作,不影响布局显示。

 

9、CSS常见样式

1、CSS计量单位:CSS中表示宽度、距离时有多种计量单位:px(像素)、30%(百分比)、em(相对单位)等。常见:width:20px。

2、background-color:Red;背景颜色;color:文本颜色。

3、border-style:solid;边框风格,实线,还是dotted(点)等值;border-color:边框颜色;border-width:边框宽度。例子:style=“border-color:Red;border-width:1px;border-style:dotted;”

4、display:元素是否显示,可选值none(不显示)、block(显示为块级元素,此元素前后会带有换行符。)、inline(显示为内联元素,元素前后没有换行符)等。

5、cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接)。

6、LI不显示圆点:LIST-STYLE-TYPE:none;一般设在LI或者LU上。

 

10、CSS样式选择器

selector有三种方式:HTML selector , CLASS selector , ID selector还有几个扩充的选择器:关联选择器,组合选择器,伪元素选择器。

HTML selector: 选择器 { 属性1:值;属性2:值 }

CLASS selector: .class(类别名称){ 属性1:值;属性2:值;}

ID selector: #id(id选择器) { 属性1:值;属性2:值; }

注:在CSS中少用ID selector,但在javascrip里面会得已广范使用。因为可以根据这个ID值来操纵和定位这个特定的HTML标签。

关联选择器:指用一个空格隔开的两个或更多的单一选择器组成的字符串。

组合选择器:可以对多个标签对采用相同的样式。

 

11、样式优先级

[1位重要标志位] > [4位特殊性标志] > 声明先后顺序

!important > [ id > class > tag ] 

使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。

4位特殊性标志 [0.0.0.0]

1、内联样式 [1.0.0.0]

2、ID选择器 [0.1.0.0]

3、类,属性,伪类选择器 [0.0.1.0]

4、元素标签,伪元素选择器 [0.0.0.1]

 

LVHA伪类,样式按LVHA优先级顺序从右至左覆盖,不同的顺序会产生不同的效果。

a:link - 默认链接样式

a:visited - 已访问链接样式

a:hover - 鼠标悬停样式

a:active - 鼠标点击样式

发表评论
用户名: 匿名