张孝祥javascript学习笔记1---HTMLCSS

本节摘要及说明：本节只是对学习过程中知识点的一个简单的记录。

<body>标签的属性

Text属性:用于设定整个网页中的文字颜色

link属性:用于设定一般超链接文本的显示颜色

alink属性：用于设定鼠标移动到超链接上时，超链接文本的显示颜色

vlink属性:用于设定访问过的超链接文本的显示颜色

background属性:用于设定背景墙纸所用的图像文件，可以是GIF或JPEG文件的绝对路径

bgcolor属性:用于设定背景颜色，当已设定墙纸时，这个属性会失去作用，除非墙纸具有透明部分

leftmargin属性:用于设定网页显示画面与浏览器窗口左边沿的间隙，单位为像素

topmargin属性:用于设定网页显示画面与浏览器窗口上边沿的间隙，单位为像素

class、name、id、style等属性

注释与特殊字符

用这种风格加入注释

特殊字符可以用数值码和引用实体两种方式表示,例如，©、&copy；

HTML编码	显示或处理结果
<	<
>	>
&	&
&quot；	"
®	®
©	©
™	™
	空格字符

格式标签

<p></p>用来创建一个段落

<br>换行

<nobr></nobr>防止浏览器对比较长的内容自动换行

<blockquote></blockquote>缩进效果显示

<center></center>水平方向居中显示

<marquee>ww</marquee> 水平动态效果

<ul><li></li></ul>圆点表示的列表项

<ol><li></li></ol>数字标示的列表项

<pre></pre>预格式化

文本标签

<b></b>粗体

<i></i>斜体

<u></u>下划线

<sub></sub>下标

<sup></sup>上标

<tt></tt>打字机风格的文本

<cite></cite>引用方式的文本

<em></em>强调的文本

<strong></strong>加重的文本

<font></font> <font>标签的三个属性:face、size和color 没有安装字体就显示浏览器默认的字体

超链接标签

target属性表示在新的窗口中打开目标网页

用<a name=””>定义定位标记，例如，<a name=”标记1”>第一部分</a>

使用<a href=”#标记1”>跳转到第一部分</a>就可以定位到网页中的”标记1”这个位置

<a href=””>打开网页所在的目录</a>

图像标签

alt 鼠标放在图片上时的提示文本图像无法加载时显示的文字

align 指定图像与周围文本的对齐方式

border 图像边框的方式单位像素

width 图像在浏览器中的宽带单位像素没有指定大小以图像原始的大小显示

height 图像在浏览器中的高度单位像素没有指定大小以图像原始的大小显示

<hr>标签，可以设置size，color，width和noshade等属性

size 粗细 olor 颜色 idth 宽度 noshade 是否有阴影

图像超链接

图像地图

表格

帧标签

不能定义在body标签当中,帧标签当中也不能显示body标签

target属性四个内置的取值：_blank,_parent,_self,_top

<noframes>标签

表单标签

action属性:设置接收和处理浏览器递交的表单内容的服务器程序的URL

method：post/get

target：用来指定服务器返回结果显示的目标窗口或目标帧

title：设置当前网站访问者的鼠标放在表单任意位置过几秒时，浏览器用黄色小浮标显示的内容

enctype：指定浏览器使用哪种编码方法将表单数据传送给WWW服务器。该属性可以有两种取值：application/x-www-form-urlencoded和multipart/form-data。默认的设置值为application/x-www-form-urlencoded

type：submit、reset、text、checkbox(checked)、radio、hidden、file、image

</select>

<textarea cols=”” rows=””>默认内容,无value属性</textarea>

<label>

meta 标签

meta标签的name属性设置:keywords、description、Robots(此时content的设置值可以是index,noindex,follow,nofollow,all,none)、generator（用于说明编辑此网页软件的名称，此时content就是软件名称）、author、copyright

meta标签http-equiv的属性设置:content-type (文本类型和字符集编码)、refresh(指定时间段刷新或跳转到指定页面)、expires(禁止浏览器使用缓存页面)、Windows-Target(设置防止自己的网页被别人当做一个frame页面调用，可以设置此属性，此时content=”_top”)、pragma(可以禁止浏览器在本地计算器上缓存当前页面，此时content=”no-cache”)、page-enter和page-Exit(页面进入和退出的特殊效果)

头元素

<title></title>标签对

<base>标签用于指定网页中的超链接的基准地址，以及改变网页中所有使用相对地址的URL的基准地址

几个主要的属性:

href

REL与REV 定义了两个资源的关系类型(Contents,index,glossary,copyright,next,previous,start,help,bookmark,stylesheet,alternate,shortcut Icon)

TITLE 可选属性目标资源的描述信息，关系

TYPE 目标资源的MIME类型 TYPE=”text/css” TYPE=”text/javascript”

MEDIA 指定目标资源被接收的介质和资源(screen,print,projection,aural,braille,tty,tv,all)

<meta>标签

分区标签

<div></div>可以用来组合其他的HTML元素，但不能嵌套在段落元素中。

CSS(层叠样式表)

设置CSS的几种方式：

--内联样式表(Inline sytles)

--嵌入样式表(Embedded style sheets) 用注释包起来是为了有些不能支持style样式的浏览器

<head>

<!--

P{FONT-SIZE:20pt;COLOR:red;FONT-FAMILY:宋体}

-->

</style>

</head>

其中，p成为选择器，有三种类型的选择器：html标签、class、id

--外部样式表(Linked style sheets)

首先编写一个test.css文件，文件中的内容如下：

P {
        FONT-SIZE: 20pt;
        COLOR: red;
        FONT-FAMILY: '宋体'
    }

网页中引入css样式：

--输入样式表(imported style sheets)

@import url(test.css);

样式规则选择器

--HTML selector:p,div

分别为某个HTML标签的各个类定义样式规则

<style>

P.stop{color:red}

P.warning{color:green}

P.normal{color:yellow}

</style>

--Class selector: 关联clss selector、独立class selector

为某个类别的所有HTML标签定义样式规则

<style>

.blueone{color:blue}

</style>

--ID selector:一个网页文件中只能有一个元素能使用某一ID属性值，ID selector就是为样式规则定义语句选择具有某一ID属性值得HTML元素。

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

P EM{color:green}

--组合选择器为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个，每个选择器用逗号隔开

H1，H2,P{color:green}

--伪元素选择器指对同一个HMTL元素的各种状态和其所包括的部分内容的一种定义方式，例如，对于超链接标签的正常状态、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行

格式如下：

HTML元素:伪元素{属性:值}

常用的伪元素：

A:active、A:hover、A:link、A:visited、P:first-line、P:first-letter

块级元素，如DIV标签设置了宽和高的HTML元素

类选择器与伪元素一起使用的格式：HTML元素.类名.伪元素{属性:值}

CSS样式属性分类

--字体--背景--文本--位置--布局--边缘--列表--其他

font-family、font-size(绝对大小和相对大小，相对大小的设置可以为larger或smaller，绝对单位有：px、mm、cm、in、pt、pc，相对单位有em、ex、%)、font-style、text-decoration、font-weight、

font-variant、text-transform、Color(三种表示方法:#RRGGBB、rgb(R,G,B)、red)、

background-color、background-image(例如:{background-image:url(‘’)})、background-repeat(设置值:no-repeat,repeat,repeat-x,repeat-y)、background-attachment(设置值:fixed,scroll)、background-position(left,center,right,20px,top,center,bottom)、background、word-spacing、letter-spacing、vertical-align(设置值:sub(下标),super(上标),top(与顶端对齐),middle(居中),bottom(与底端对齐),相对于元素行高的百分比)、text-align(设置值:left,right,center,justify),text-indent(文本第一行的缩进值),

white-space(normal,pre,nowrap),line-height

Filter(CSS滤镜)

<div style="width:12;height:40;background-color:red;
filter:Alpha(opacity=80)Blur=(Add=5,Direction=135)"> CSS滤镜<br>www.baidu.com</div>
<div style="width:12;height:40;background-color:red;
filter:Alpha(opacity=80)Blur=(Add=5,Direction=135)FlipV">CSS滤镜<br>www.baidu.com</div>

filter参数:

-alpha(opacity=?,finishopacity=?,style=?,StartX=?,StartY-?,FinishX=?,FinishY=?)

-BlendTrans(Duration=?)

-Blur(Add=?,Direction=?,Strength=?)

-Chroma(Color=?)

-DropShadow(Color=?,Offx=?,Offy=?,Positive=?)

-FlipH,FlipV,Gray,Invert,Light,Xray

-Glow(Color=?,Strength=?)

-Mask(Color=?)

-RevealTrans(Duration=?,Transition=?)

-Shadow(Color=?,Direction=?)Direction取值为45的整数倍

-Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strenght=?)

位置

位置属性就是指定元素的位置，它是CSS-P中的内容，CSS-P是CSS的一个扩展，它可以用阿里控制任何网页元素在浏览器文档窗口中的位置

Position 设置值:absolute,relative,static

left

top

width

height

Z-index

边缘

margin(margin-top、margin-right、margin-bottom、margin-left)

padding(padding-top,padding-right,padding-bottom.padding-left)

border-width(border-top-width,设置值：thin,medium,thick或数值)

border-color(border-top-color)

border-style(border-top-style)设置值:none,dotted,dashed,solid,double,groove,ridge,inset,outset

border(border-top)

列表

list-style-type 设置值：disc(实心圆),circle(空心圆),square(方块),decimal(阿拉伯数字),lower-roman(小写罗马数字),upper-roman(大写罗马数字),lower-alpha(小写英文字母),upper-alpha(大写英文字母),none(无项目符号)

list-style-image

list-style-position 设置值:inside,outside

list-style

其它

Cursor 设置值:hand(手型),crosshair(‘+'型),text(‘|’型),wait(等待),default,help,e-resize(东箭头),ne-resize,n-resize,nw-resize,w-resize,sw-resize,s-resize,se-resize,auto

样式规则的注释与有效范围

样式表中的注释

使用”/*要注释的内容*/”格式进行注释，注释不能嵌套

样式规则的继承

所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则

样式规则的优先级

-ID选择器>CLASS选择>HTML标签选择器

-内联样式表>嵌入样式表>链接样式表

转载于:https://www.cnblogs.com/java-pan/archive/2012/03/26/html-css.html