完整的HTML结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

</body>

</html>

样式的引用

一。内部编写

<head>

<title> </title>

<style type="text/css">

body {background:black; text-spacing:0.5em}

.div_css1 {align="center" margin:20px}

.p_css1 {color:red; font:(Style)itlic||oblique (variant)small-caps||none (weight)800(400=norml 700=bold) (size)4em (family)“宋体”||Times New Norman}

</style>

<div class="">

(if ues:   so use the style just 1 times)!!!

#div_css {}

<div id="">

(or ues:    so don't write"class or id =?" )

div.p {}

div p {}

二。外部引用

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

超链接的样式

a {}         // all super links

a:link {}         //no linked links

a:visited{}           //alredy linked links

a:hover{}         //on mose move to the link

a:action{}      // 点击时

插入flash文件

<object type="application/x-shockwave-flash" date="///" width="" height="" id="">

<param name="movie" value="///"/>

<param name="allowscriptAcess" value="sameDomain"/>

<param name="quality" value="best"/>

<param name="bgcolor" value="#FFFFFF"/>

<param name="scale" value="noScale"/>

<param name="salign" calue="TL"/>

<param name="FlashVars" value="playerMode=embedded"/>

</object>

插入视频

<object type="video/x-ms-wmv" date="////xx" width="" height="">

<param name="src" value="////xx"/>

<param name="autostart" value="true"/>

<param name="controller" value="true"/>

</object>

插入网页块

<iframe

src="xx"

width=""

height=""

scrolling="auto"

frameborder="o"

name="xx">

</iframe>

插入表单

<form action="#" name="" id="" method="post"> </form>

一。文本输入（账号，密码）

账号<input type="text" name="" id="" maxlenth=""/>

密码<input type="password" name="" id="" maxlenth=""/>

二。提交表单

<input type="submit" name="" id="" value="确认"></input>

三。单选

<input type="radio" name="" id="" value="xx">xx</input>

<input type="radio" name="" id="" value="xx">xx</input>

四。多选

<input type="checkbox" name="" id="" vslue="xx">xx</input>

<input type="checkbox" name="" id="" vslue="xx">xx</input>

<input type="checkbox" name="" id="" vslue="xx">xx</input>

五。下拉菜单

<select name="" id="">

<option vslue="xx">xx</option>

<option vslue="xx">xx</option>

<option vslue="xx">xx</option>

</select>

六。列表（没有下拉）

<select name="" id="" size="个数">

<option value="">xx</optin>

.......

......

</select>

悬浮文字框

<fieldset>

<legend>xx</legend>

</fieldset>

滚动文字

<maquee direction="up || left" scrollamount="0-x" onmouseover="stop()" onmouseout="start()">

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

</marquee>

表格

<table>

<tr>

<td>xx</td>

</tr>

<tr>

<td colspan="num">xx</td>   //合并横向

<td rowspan="num">xx</td>   //合并竖向

</tr>

</table>

文字的一些属性

设置元素内容的文本属性

(1)举例设置文本首行缩进

text-indent:2em;

(2)举例设置文本对齐方式

text-align:left | right | center;

(3)举例设置文本修饰方式

text-decoration:underline;

(4)举例设置字间距

letter-spacing:2em;

(5)举例设置词间距

word-spacing:0.5em;

(6)举例空白显示形式 P56

white-space:pre;

外边距margin:围绕在元素边框之外的可选区域。

内边距padding：文本内容到边框之间的可选区域

元素浮动

浮动：

float

有2个方向: left  right none(不浮动)

对于文字浮动，必须设置高度，宽度，如果不设，后后果自负。

例

<img style="float:right" src="..."/>

清除浮动：

clear:none;  //允许元素的两边都可以有浮动

clear:left;  //不允许左边有浮动元素

clear:right; //不允许右边有浮动元素

clear:both;  //两边都不允许有浮动元素

定位类型position

分类：

static（静止）此为默认，即按照正常的文本流，占用正常的位置。

fixed（固定的） 相对于浏览器窗口定位（保留原位置）

position:absolute;

绝对定位：相对于父级元素（被包含容器）。

position:relative;

相对定位:相对于没有设置position时的正常位置定位

原始空间会保留下来。（意思就是说按static的位置算的地方不会出现另外的标签。如DIV，IMG等等。）

例子：

<head>

<style type="text/css">

.div_1 {width:150px;height:200px;}

.text1 {width:200px;height:100px;left:160px;}

</style>

</head>

<body>

<div>

<div class="div_1" style="position:absolute;">

哈,我是一个帅哥

</div>

<div class="text1" style="position:absolute;">

是不是哦，我晕你

</div>

<div style="position:relative;left:10px;top:15px;">

我看看行不行。</div>

</div>

</body>

运行结果为：哈我是一个帅哥  是不是哦，我晕你

我看看行不行。

解释：“哈我是一个帅哥”用的是absolute 绝对定位，它相对于第一个DIV来定位，因为第一个DIV是它的父级元素，将它包含在里面。所以它出现在顶部起头。（因为没对其设置left 和top等）

“是不是哦,我晕你”也是absolute 绝对定位，它相对于第一个DIV定位，设置了left值为160px，大于上一个div的宽度，所以不会重合。

“我看看行不行”用的是relative 相对定位，它相对与父级元素定位，也就是第一个DIV，它定位的位置从父级元素里面的最开始位置算起，所以，如果不设置top的话就会和第二个div重合。而字体的大小一般为15px‘

指定裁剪区域

position:absolute;

clip:rect(top right bottom left);

top:从上到下裁去top的长度。

left:从左到右裁去left的长度。

right:从左到右裁出right的长度。

bottom:从上到下裁出bottom的长度

将块级元素转化为字符级元素

display:inline;

将字符级元素转化为块级元素

display:block;

处理溢出

position:absolute;（必须为absolute）

overflow:visible;  //溢出区域可见

overflow:hidden;   //溢出区域不可见

overflow:scroll;   //溢出区域出现滚动条

盒模型

有 margin padding border width  height

简写时安上右下左顺序来写

如：border-width：1em 2em 2em 2em

注意：上下左右这几个属性：

在设置时如果只出现3个值，则代表上 左右 下

2个值: 上下  左右

1个值：全部  =出现4个一样的值

插入多媒体

<embed src="1.swf" width=300 height=200></embed>

<embed src="1.mp3" width=300 height=200></embed>

<embed src="1.wmv" width=300 height=200></embed>　

转载

html+css基础的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  10. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. Velocity引擎导致jvm内存外内存泄露

    我公司一兄弟,在controller层,每次调用controller的时候都创建了velocity引擎,而且没有去关闭,最终导致的现象就是jvm的内存信息正常,但是jvm之外的内存发生了泄露,导致是用 ...

  2. NTFS 文件系统解析

    1. windows 下磁盘文件读写 下面是读取D:\磁盘上的第0扇区 512 Bytes CreateFile()打开磁盘,获取文件句柄: SetFilePointer()设置读写的位置: Read ...

  3. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  4. 使用jQuery出现the function undefined

    出现function undefined往往是相关的JS文件没有导入导致,在相关文件都导入的情况下,使用jQuery提供的方法还会出现function undefined错误,或许就是jQuery对象 ...

  5. OSC本地库推送到远程库

    1.新建远程库: 例如:http://git.oschina.net/intval/learngit 2.本地生成ssh密钥 ssh-keygen -t rsa -C "intval@163 ...

  6. 读取本地HTML的小说阅读器应用源码项目

    该源码是一个不错的读取本地HTML的小说阅读器,读取本地HTML的小说阅读器,并且源码也比较简单的,非常适合我们的新手朋友拿来学习,有兴趣的朋友研究下. 源码下载: http://code.662p. ...

  7. [原创]obj-c编程17:键值观察(KVO)

    原文链接:[原创]obj-c编程17:键值观察(KVO) 系列专栏链接:objective-c 编程系列 说完了前面一篇KVC,不能不说说它的应用KVO(Key-Value Observing)喽.K ...

  8. 2.java.lang.NullPointerException(空指针异常)

    调用了未经初始化的对象或者是不存在的对象 经常出现在创建图片,调用数组这些操作中,比如图片未经初始化,或者图片创建时的路径错误等等.对数组操作中出现空指针, 即把数组的初始化和数组元素的初始化混淆起来 ...

  9. 2016 Multi-University Training Contest 7 总结

    第七场多校的排名稍微有了一点回升,然而也并不太乐观. 开场欣君秒出了02题的公式,磊哥开始打表验证,发现可行,一A. 我觉得06题有些思路,开始写,但是发现复杂度优化不下去,于是弃疗. 磊哥做了10题 ...

  10. Hibernate get 和load的区别

    1 load是要用的时候才从数据库去查询,get 是马上查询. 2 对于不存在的记录,get会报空指针异常,load会报 org.hibernate.ObjectNotFoundException:  ...