码迷,mamicode.com
首页 > Web开发 > 详细

HTML笔记

时间:2014-11-04 06:53:33      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:html笔记

常用的字体属性

Font 在一个声明中设置字体的所有样式属性

Font-family 定义字体类型

Font-size 定义字体大小

Font-weight 定义字体的粗细

常用的文本属性

Line-height 设置行高(即行间距),常用取值为25px28px

Text-align 设置对齐方式,常用取值为leftrightcenter

Letter-spacing 设置字符间距,常用取值为3px8px

Text-decoration 设置文本修饰,常用取值underline(下划线)、none

text-decoration:none  去下划线

White-space 规定如何处理空白,例如规定是否换行等,常用取值为nowrap(不换行)

常用的背景属性

Background 在一个声明中设置所有的背景属性

Background-color 设置背景颜色

Background-image 设置背景图片

Background-repeat 设置背景的平铺方式

Background-position 设置背景出现的初始位置

Background-repeat属性对应的取值

Repeat 横纵向都平铺,不填时的默认值

Repeat-x横向平铺

Repeat-y 纵向平铺

No-repeat 背景图不重复平铺

盒子属性:①margin(外边框)

Margin-top 上外边距

Margin-right 右外边距

Margin-bottom 下外边距

Margin-left 左外边距

Border(边框)

Border-color 边框颜色

Border-width 边框宽度

Border-style 边框样式,常用的取值如下:none(默认值,无边框)、solid(实线)、dashed(虚线)

Border-top 上边框

Border-right 右边框

Border-bottom 下边框

Border-left 做边框

Padding(内边框)

Padding-top 内容与上边框之间的距离

Padding-right 内容与右边框之间的距离

Padding-bottom 内容与下边框之间的距离

Padding-left 内容与左边框之间的距离

常见的浮动设置

Floatleft 设置元素左浮动

Floatright 设置元素右浮动

Floatnone 默认值,不浮动

常见的清除设置

Clearleft 在左侧不允许有浮动元素

Clearright 在右侧不允许有浮动元素

Clearboth 在左右侧均不允许有浮动元素

Clearnone 默认值,允许两侧都有浮动元素

超链接伪类

Alink a.link{color:#999;} 未单击访问时的超链接样式

Avisited 单击访问后的超链接样式

Ahover 鼠标悬浮其上的超链接样式

Aactive 鼠标单未释放的超链接样式

 

框架<frame>的常用属性

Frameborder 是否显示框架周围的边框

Name 框架标识名

Scrolling 是否显示滚动条

Noresize 是否允许调整框架窗口的大小

Target(目标)属性的取值

_brank  在新窗口中打开链接

_self 在链接所在网页的自身窗口中打开链接

框架窗口名 :在指定的框架窗口中打开链接

_parent 在父框架集中打开链接,如果不是框架网页,则含义同“_self

_top 在顶级窗口即整个浏览器窗口中打开链接

List-style:常用的列表类型图标

None 去掉修饰符号

Disc  实心圆<ul默认类型>

Circle 空心圆

Square 实心正方形

Decimal 数字<ol默认类型>

基本的块级标签

标题标签<h1>-<h6>

      段落标签<p></p>

      水平线标签<hr/>

常用于布局的块级标签

有序列表标签<ol></ol>

      无序列表标签<ul></ul>

      定义列表标签<dl></dl>:扩展运用到图文混编的场合

      表格标签<table></table>

      表单标签<form></form>

      分区标签<div></div>

 

行级标签

      图像标签<img/>

      范围标签<span>

      换行标签<br/>    (运用文本框后面)

 

常用的四种块状结构

      div-ulol-li:常用于分类导航或菜单等场合

      div-dl-dt-dd:常用于图文混编场合

      table-tr-td:常用于规整数据的显示场合

      form-table-tr-td:常用于表单布局的场合

插图语法

<img  src=”图片地址” alt=”图像的替代文字” title=”鼠标悬停提示文字”/>

 

超链接基本语法:

<a  href=”链接地址”  target=“目标窗口位置”>链接文本或图像</a>

表单的基本语法

<form  action     =”表单提交地址” mathod =“提交方法”

 

文本框:

<p>用户名:<input  type =text value=“文本框初始值” size=”宽度”  name=userName/></p>

密码框

<p>密码:<input  type =password size=”宽度”  name=pass/></p>

重置、提交与普通按钮

<p>

<input  type =submit value=“提交按钮”  name=button/>

<input  type =reset value=“重置按钮”  name=reset/>

<input  type =button value=“普通按钮”  name=cancel/>

</p>

 

下拉列表框

<select  name=“指定列表名称” size=“行数”>

<option  value=“可选项的值” selected=selected(默认选中)>......</option>

<option value=“可选项的值”>.......</option>

……

</select>

多行文本域

<textarea  name=textarea cols=40 rows=”6”>初始文本内容</textarea>

隐藏域

<input  type=”hidden”  name =userid value=666/>

 


HTML笔记

标签:html笔记

原文地址:http://zhangzhipeng.blog.51cto.com/9115459/1571405

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!