• DIV+CSS基础培训 java程序员


    常用标签

    基本标签

    <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)
    ; 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-;
    边框宽度
    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标准标签或样式

     

  • 相关阅读:
    Python正课15 —— 流程控制之while循环
    Python正课14 —— 深浅Copy
    Python正课13 —— 流程控制之if判断
    Python正课12 —— 成员运算 与 身份运算
    Python正课11 —— 逻辑运算
    Python正课10 —— 条件
    Python正课9 —— 可变不可变类型
    Python正课8 —— 运算符
    Python正课7 —— 与用户交互
    Python正课6 —— 垃圾回收机制
  • 原文地址:https://www.cnblogs.com/java20130725/p/3215451.html
Copyright © 2020-2023  润新知