首页 > 代码库 > 2014年7月14日

2014年7月14日

2024-07-12 00:18:09   225人阅读

html +css 

 

建议：任何时候做任何的网页内容块：先考虑设置宽度。

 

一：浏览器的作用：接收从服务器返回的字符串，按一定的规则解析为用户可以看懂的图形界面。

 

二：常用浏览器：FF IE  Chrome

 

三：超文本标记语言：HTML：超文本标记语言

 

四：文档结构：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>网页标题</title>

  <meta name="Generator" content="EditPlus">

 </head>

 <body> 

网页主体内容 

 </body>

</html>

 

五：HTML语法

HTML是标记语言，所以语法的学习其实就是对一些W3C组织定义好的具有特定含义的标签的使用方法的学习。

标签

带有特殊含义的网页的标记元素

格式：<开始标签> 标签体 </结束标签>

特点

不区分大小写

标签名是固定的

分类

双标签          如：  <p> XX </p>标签应该成对出现

单标签          如： <br/>

属性

  1. 写在开始标签上的  名=“值”对代表该标签的属性 <font color=“red”></font>。
  2. 一个标签可以有多个属性，多个属性之间使用空格隔开。
  3. 注意：属性值最好使用单引号或者双引号引起来。

 

 

六：文本标签：

H1~H6:从大到小，加粗，单独占据一行

Ol/ul:是对段落而言，也就是说一个段落对应着一个符号或者编号

<br/>:换行

<p>:段落标签：一个段落占据单独一行

<hr/>:水平线

<span>:行内块

Table/tr/td:tr：1.在table里面,td在tr里面，内容只能写在td里面  2：Table里面有几个tr，说明有几行，tr里面有几个td,说明有几列。制作表格的原则：1.表格宁愿合并也不拆分  2.制作的时候先制作出最多的行和列

表格的宽和高的特点：

  1. 单列的宽一致（取大值优先）
  2. 单行的高一致（取大值优先）

 

 

七：转义字符：

 ---空格   <:--<   >  --->   "---“   ©  --版权符号

 

八：图片标签：

<img src=http://www.mamicode.com/”图片 路径“ alt=”图片无法显示时的提示” title=”鼠标上移后的提示” width=”宽” height=”高”/>

 

九：超链接标签：

超链接格式：<a href="e:/itcast/a.html" target=”在那个窗口里面打开页面”></a>

邮件格式：<a href="mailto:email"></a> 

脚本格式：<a href="javascript:void(0)"></a>

锚链接   ：<a name=“标记名”></a> 和 <a href="http://www.mamicode.com/#标记名"></a>

 

Target:_blank  _top   _self  _parent

 

十：音乐和视频：<embed src=http://www.mamicode.com/””>它可以帮助我们加入多媒体文件 但是需要注意，如果添加动画（swf）,它会给你自动的宽和高，这个时候你可以通过设置 width height来确定动画文件的显示大小

3)marquee  direction  top/bottom/left /right    scrollamount="单位时间内的速度" scrollDelay="滚动延时"

 

 

十一：框架页面：

frameSet:框架集：框架页面的集合：不能合并也不能拆分，框架集页面只是普通页面的集合，本身并不是源文件，所以不能包含body.   如果在某一行或者玩出现多个框架页面，很明显，这一行或者列又是一个框架集

 

1：创建框架集，为框架集中的框架命名

 

2.将超链接的目标target指定为相应框架的名称 

 

 

 

 

 

 

 

最好设置宽和高,不然系统给你一个默认值,而这个默认值你不一定需要

<iframe src="http://www.mamicode.com/top.html" width="960px" height="180px" scrolling="no" frameborder="0"></iframe>

 

十二：表单元素： 

1.类型：

  text:单行文本框    password:密码框   radio:单选按钮   checkBox:复选框   select:下拉列表  submit:提交   reset：重置   textarea:文本域

2.具体说明：

1.<form name="" id="" action="处理页面或者服务器地址" method="post/get"></form> 

Action：提交给那个服务器，或者处理页

Method:提交方式  get/post  ,post更安全，隐式提交，get是显式提交  post可以提交的数据更多

2．input type="text" name="" id="" size="字符个数" maxLength="" value="http://www.mamicode.com/里面显示默认值"/> ---没有name属性的表单元素的值不是会提交给服务器的

3．inpyt type="radio" name=""  checked> --一定要设置name属性，况且应该设置为一样

<input type="checkbox"/>

4．input type="password/>  

5．input type="submit"/>form自动提交按钮，拥有默认功能--提交

6．input type="reset"/> 会清空表单元素的值恢复到默认值

7．select> <option value="http://www.mamicode.com/id"> 文本</option></select>

8．textarea>这里是默认值</textarea>

9．nput type="image" src=""/>

10.adonly---只读   disabled----禁用

 

表格：制作规则的页面内容块。不适合做需要嵌套的结构块， 因为不利于SEO，所以一般情况下，表单会与表格一起使用来到注册或者登陆页面的目的。

 

Div(整体结构)  ul/ol（多行多列内容的规则排列）  dl/dt/dd（图文混排）

样式表：

1.文本样式

2.背景图片/背景颜色

3.结构---布局----DIV

4.ul/li

一：样式的特点：

1)样式没有简写，多个英语单词用-连接

2)多个样式用;间隔

二：常用的文本样式：

Color:颜色

Font-size:以后做网页的时候如果没有特别需要，文本的大小都是12px

Font-family:字体

Text-align:水平方向对齐：left /center /right

Text-indent:字符左缩进

Letter-spacing:字符间距

Font-weight:bold   加粗

Line-height:行高---做单行文字的垂直居中（如果是多行：display:table-cell;vertical-align:top/middle/bottom）

text-decoration：underline/none  --下划线

三：背景：

margin-bottom: 0pt; margin-top: 0pt;">Background-image:背景图片

Background-repeat:repeat   no-repeat  repeat-x repeat -y

Background-position:X  Y，left/center/right   top /center/bottom,如果你只设置第一个值，那么Y方向默认是垂直居中(前提你为BODY添加了高度)--以后你可以将你需要使用的图片放在一个位图上,通过偏移来实现不同的图片需要

四：UL/LI  -----当你看到网页的内容是有规则的排列.. 新闻列表

List-style:none:去掉列表前面 的项图标

Float:left/right/none:因为LI是块级元素，会单独占据一行，所以为了他能够多个LI放置到同一行，就需要设置float

五：div---做网页主体结构---一个块级元素，单独占据一行,不要轻易为外层容器添加border margin padding值，因为它会影响到其它的块。

Width:宽度

Height:高度

Border:边框  border-top  border-right  border-bottom    border-left  边框一定要添加style ( solid  dashed  dotted)  它会改变原始层的宽和高

Border-width :边框宽度 px为单位 

Border-style: solid  dashed  dotted  -----一定要添加这个属性

Border-color:颜色

简写：border:1px solid red

Margin:外边距:它会改变原始层的宽和高，可能造成其它元素的错位，所以没有特别需要不要为其添加这个值，它是层外面的距离 。

Padding:内间距 它会改变原始层的宽和高，可能造成其它元素的错位，所以没有特别需要不要为其添加这个值，它是层内部的距离 。

Margin,padding: 一个值：代表四个方法

二个值：上下/左右

三个值：上/左右/下

四个值：上/右/下/左

div的宽度===div本身的width宽度+2*border+2*margin+2*padding

六：关于float:

1:当你为一个层设置高度是auto的时候 默认情况下高度会根据内容的高度自动变化，但是如果里面有浮动元素，它会清除高度自动变化属性。如果发现某个层被覆盖了，一般就需要添加clear样式属性。解决方案如下：

<div style="clear:both; line-height:0px"> </div>

七：CSS---cascading style sheet ---层叠样式表：相同的属性会根据某一些规则覆盖。如果不同样式就会层叠---累加

1样式的书写位置：

1.行内：最不常用的 ,在标签里面写 <p style="color:red">

2.内嵌：写在head里面

<style type="text/css">

 

</style>

3.外部样式表。将CSS写一个单独的文件。可以重用，同时实现的W3C标准所建议的内容和样式分离。分式合作，可以使我们不用太关心前台界面是如何生成的。它也可以节省流量---钱。

2.如果书写样式（样式的三个类型）

标签样式：相当于修改了标签的默认原始属性,使用的时候不需要调用（嵌套）

类样式：以.开头，后面是样式的名称（建议不要使用纯数字，不要使用已经存在 的标签名称），调用的时候使用class="名称"

ID选择器：如果ID是标识元素，那么它应该是唯一的，如果ID做为样式，那么可以重用，定义的时候使用#修饰，调用的时候用id="名称"

  js: document.getElementById("")

优先级：ID>CLASS>标签，但是不管什么情况，style=""行内样式是最高的。

3.实现样式的嵌套：

1.传统的样式有以下不好：

 /*

            1.如果你需要某个元素有效果，就必须显示调用

            2.有时候我无法从类的名称猜到这个类样式到底是为那个元素来书写的同，因为从类样式不能体会到网页的结构层次。

            3.命名真是大问题啊。有可能你上面写了，但是你忘记了，下面再写一个。

            */

2。解决方法：使用嵌套 

 

 

3.调用多个类：

 

<p class="a1 a2 a3"></p>

 

伪类样式：本质是一个标签，但是可以扩展为一个类。

a:link:添加了超链接但是没有做任何处理时的状态

a:hover:鼠标上移时候的状态

a:active:鼠标点击还没释放时的状态

a:visited:访问过后的状态

 


联系
我们