博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DIV+CSS基础培训
阅读量:4963 次
发布时间:2019-06-12

本文共 3496 字,大约阅读时间需要 11 分钟。

常用标签

基本标签

<html></html> 创建一个HTML文档

<head></head> 设置文档标题和其它在网页中不显示的信息

<title></title> 设置文档的标题        

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

<br>换行插入一个回车换行符

 

<a href="URL"></a> 创建超文本链接

 

表格标签

<table></table> 创建一个表格    

<tr></tr> 表格中的每一行

<td></td> 表格中一行中的每一个格子  

<th></th> 设置表格头:通常是黑体居中文字

 

表单标签

<form></form> 创建表单  

action="..."接收数据的服务器的URL

method="..."HTTP的方法(get, post)。其中get是被反对使用的

<select name="name"></select> 创建下拉菜单

<textarea name="name" cols=40 rows=8></textarea> 创建一个文本框区域,列的数目设置宽度,行的数目设置高度

<input type="checkbox" name="name"> 创建一个复选框,文字在标签后面

<input type="radio" name="name" value=""> 创建一个单选框,文字在标志后面

<input type=text name="foo" size=20> 创建一个单行文本输入区域,size设置以字符串的宽度

<input type="submit" value="name"> 创建提交(submit)按钮

<input type="reset"> 创建重置(reset)按钮

<BUTTON></BUTTON> 创建一个按钮        

<LABEL></LABEL> 为一个控件提供标签

<TEXTAREA></TEXTAREA> 创建一个允许用户多行输入的区域

 

实例

名:

<input type="text" name="firstname">

<br />

姓:

<input type="text" name="lastname">

 

用户:

<input type="text" name="user">

<br />

密码:

<input type="password" name="password">

 

我喜欢自行车:

<input type="checkbox" name="Bike">

<br />

我喜欢汽车:

<input type="checkbox" name="Car">

 

男性:

<input type="radio" checked="checked" name="Sex" value="male" />

<br />

女性:

<input type="radio" name="Sex" value="female" />

 

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" selected="selected">Fiat</option>

<option value="audi">Audi</option>

</select>

 

<textarea rows="10" cols="30">

 

<input type="button" value="Hello world!">

 

<input type="submit" value="Submit" />

 

<input type="submit" value="发送">

<input type="reset" value="重置">

 

<label>身高:<input type="text" /></label>

<label>体重:<input type="text" /></label>

 

姓名:<br />

<input type="text" name="name" value="yourname" size="20">

<br />

电邮:<br />

<input type="text" name="mail" value="yourmail" size="20">

<br />

内容:<br />

<input type="text" name="comment" value="yourcomment" size="40">

 

常用样式

字体属性(font)

大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PXPD

行高 line-height: normal;(正常) 单位:PXPDEM
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

 

区块属性: (Block)

对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进text-indent: 数值px;
垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

空格white-space: pre;(保留) nowrap;(不换行)

显示display:block;() inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

 

方框属性: (Box)

width:; height:; float:; clear:both; margin:; padding:;     顺序:上右下左

Padding:10px 9px 8px 7px;  padding:10px 5px; padding-left:10px;

 

边框属性: (Border)

border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:;
边框宽度
border-color:#;
简写方法border10px solid #fff;

 

样式继承

父标签中定义css,在子标签中定义css遵循子没有的样式,就继承父的样式,子标签有的,将覆盖父标签的样式;

 

有些属性是不能继承的;

border属性, Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。

 

样式遵循就近原则

样式分类

 

不可使用行内样式,不到万不得已不使用内嵌样式

盒子模型

内联元素和块级元素

block(块)元素的特点:

①总是在新行上开始;

②高度,行高以及外边距和内边距都可控制;

③宽度缺省是它的容器的100%,除非设定一个宽度。

④它可以容纳内联元素和其他块元素

<p></p> <div></div>

 

inline元素的特点:

①和其他元素都在一行上;

②高,行高及外边距和内边距不可改变;

③宽度就是它的文字或图片的宽度,不可改变

④内联元素只能容纳文本或者其他内联元素

例如:<a></a> <span></span>

 

 

初步设想:

1.      各块级元素都有固定且唯一的 ID

2.      一级功能模块独立使用一张CSS样式表

3.      常用属性通过class 从公用样式表调用

4.      尽量少使用背景图片

5.      少使用非W3C标准标签或样式

 

转载于:https://www.cnblogs.com/java20130725/archive/2012/05/29/3215451.html

你可能感兴趣的文章
Linux 标准 I/O 库
查看>>
.net Tuple特性
查看>>
Java基础常见英语词汇
查看>>
iOS并发编程笔记【转】
查看>>
08号团队-团队任务5:项目总结会
查看>>
SQL2005 删除空白行null
查看>>
mysql备份与恢复
查看>>
混沌分形之迭代函数系统(IFS)
查看>>
边框圆角Css
查看>>
使用Busybox制作根文件系统
查看>>
jpg图片在IE6、IE7和IE8下不显示解决办法
查看>>
delphi之模糊找图
查看>>
Javascript模块化编程的写法
查看>>
oracle 使用job定时自动重置sequence
查看>>
在项目中加入其他样式
查看>>
OMAPL138学习----DSPLINK DEMO解析之SCALE
查看>>
restframework CBV试图的4种方式
查看>>
大图居中,以1920px为例
查看>>
[C陷阱和缺陷] 第7章 可移植性缺陷
查看>>
linux中configure文件默认执行结果所在位置
查看>>