html中的各种标签组件

html
----------------------------------------
html基本结构

----------------------------------------
body中的各种标签组件:
正文中的标题标签
h1~h6
要注意的是:

1)

的字体最大，

字最小。跟标签的size属性是反的，size值为1最小，值为7最大。

2)必须是独占一行

3)使用

到

标签，会让文字变大变粗。但千万不要因为想让文字变大变粗就给他加一个标题标签，这是错误！你可以使用或标签来实现

4)搜索引擎会把文章中出现的

到

标签来作为文章的结构与主次，从而进行索引。懂seo的朋友就知道，这个很重要！
段落与换行:
  换行标记:

  段落标记:

  把p标记中的文本当做一段文字, 一段文件完毕之后, 会自然换行.
 
分割线:
 

---

  
 
  属性:
 width: 宽度    
        300px   
        50% 占用父标记宽度的百分比
 align: 对齐方式
  left    居左
  center  居中
  right   居右

html实体:

提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

当要在页面中展现特殊字符时:
 >: >    great than
 <: <    less  than  或 <
 空格:  

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体

HTML 中有用的字符实体

注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

图片标签:  (单标记)
  可以在页面中显示一张图片
 
  属性:
   src:指定目标图片的路径
   width:宽度     px
   height:高度 
   
     宽高同时设置时会出现失真的现象,若需要等比例 缩放,则只需要设置其中一个即可.
 
  
  路径:
  绝对路径:
     操作系统绝对路径:
    windows: 以盘符开头的路径为绝对路径
      c:\Program Files\xxxx.jpg
    linux / Unix / Mac:
           以/(根目录)开头的路径为绝对路径
     /home/soft01/xxx.jpg
     网络端绝对路径:
        以http://开头的url路径
    http://tts6.tarena.com.cn/xxx.jpg
  
  相对路径:  
     指的是通过当前html文档和目标文件生成的路径.
     相对路径也可以指向目标文件.
   
     不以盘符和/(根目录)开头的路径:
   
   
网页所支持的图片格式:
JPG/JPEG:  体积小    图像有较小的失真
png:  显示颜色种类较多  体积较大    图像保存完好
gif:  支持动态图  体积小  显示的颜色非常少
 
png/gif:  支持透明色  
jpg:  不支持   
   
   
链接:
链接文本
属性:
  href: 点击链接之后跳往的目标地址
图片链接:
点击图片跳转 




图片热点链接
   这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：

    

    

    
     
     

    

【1】shape -- 定义热点形状
          shape=rect：   矩形
          shape=circle：圆形
          shape=poly：   多边形

【2】coords -- 定义区域点的坐标

     a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
         例：

     b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
         例：

     c.任意图形（多边形）：将图形之每一转折点座标依序填入
         例：

demo :
  


表格:


表格的第一种规范:

table: 表格标记
属性:
 width:  宽度
 height: 高度
 border: 边框宽度       
 align:  对齐方式    left|center|right
 cellpadding:  单元格的内边距
 cellspacing:  单元格与单元格之间的距离


tr:  表格行


td:  单元格
属性:
  rowspan: 合并行
  colspan: 合并列

表格的第二种规范:

   表格标题
表头






表体

表脚


使用时用第一种或第二种都可以. 
第一种更简单
第二种更规范

表单标签:
    表单用于收集用户信息, 一个表单中可以含有多个
    表单组件.


input标签:


文本框:

 type:定义了input组件的样式(文本框)
 name:定义了input组件的名称, 只有写上name属性
  的组件在提交的时候才可以向服务器传递数据.
 value:定义了页面加载后文本框中的默认值.


提交按钮:

 value:定义按钮上的文字
 
密码框:





单选按钮:

 name:多个单选按钮 若name相同,则为一组单选按钮.
  一组单选按钮只能选择一个.
 value:提交给服务器的参数值.  
 checked="checked" 若希望某个单选钮默认被选中,
  则需要添加该属性.
 
多选框:

&pwd=&sex=m&hobby=swimming&hobby=coding


checked="checked" 默认被选中


普通按钮:

value:代表按钮上的文字


重置按钮:
作用: 把当前表单中的所有组件的值恢复默认.





非input标签:
下拉列表框:
   下拉框
  text   下拉项
    下拉项
 
  
  option:
   text: 表示显示在下拉项中的文字
   value: 代表当前下拉项的值
  
多行文本域:
 
  


列表标记:

--------------------------------------------
CSS  级联样式表
  html主要侧重于定义内容结构,而css主要用于定义
  html页面样式的显示.


css的组成部分:


css选择器{
  属性:属性值;
  属性:属性值;
}




css的写法:
1. 编写css文件, 后缀名必须为css,把css的代码写在
     该文件中
2. 在html页面中引入该css文件.




1>css选择器:
  作用:可以选出当前页面的一个或多个标签组件,然后
  使用css样式属性对这些标签添加样式.
 
 1)通配符选择器:
  可以找出所有的标记
 * {  }
 
 2)标签选择器:
  可以找出相应标签名称的标记
 img {  }


 3)id选择器:
  可以找出相应id的一个标签组件
 id选择器的优先级是最高的.
 #p { } 


 4)分组选择器:
 p, li, #s {}
 
 5)class选择器:
  选出标签的class属性为div的多个标签组件
 

 .div {}
 
 6)派生选择器:
  一定要有父子标记关系. 
 div p{}






2>css样式属性:


布局属性: (box模型)
1>外边距(margin):
  margin: 10px;  上下左右外边距全为10px
  margin: 10px 20px; 上下外边距为10px 左右为20px
  margin: 0px auto; div水平居中
  margin: a b c d; 上 右 下 左方向外边距
  
  margin-left:  10px
  margin-right:
  margin-top:
  margin_bottom:


2>内边距(padding):
  padding:a;
  padding:a b;
  padding:a b c d;
  
  padding-top:
  padding-right:
  padding-bottom:
  padding-left:




常用的简单样式属性:


1>背景属性: background
background:
background-color: 背景颜色
red | blue | black |...
#ffffff
#fff
background-image:url("目标图片路径");

background-repeat: 背景图像平铺方式
repeat:
repeat-x:
repeat-y:
no-repeat: 

background-position: 背景图像定位



2>字体属性: font-
color: 字体颜色
font-size: 字体大小   px
font-family: 字体  黑体  宋体  ...
font-weight: 磅值 (粗细)
normal
bold
bolder
lighter
100~900

font-style:
normal 普通
italic 斜体




3>文本属性: text-
text-align: 文本对齐方式
left
center
right
line-height: 行高  
主要用于控制文本的垂直居中

text-decoration:
none
underline
overline
line-through




边框属性: border-
border:1px solid black;
border-width:
border-style:
border-color:
border-left-width:
...




列表相关属性:
list-style:none;




复杂属性:


display:
  可以控制组件的隐藏与显示 
none:  隐藏组件
block: 显示组件
block还可以把行级标记当做块级标记来显示.
因为只有块级标记可以设置width和height


行级标记: 多个标记占用一行

...
块级标记: 一个标记占用一行
h1~h6 p div  li  ul ...




float: 浮动属性
left:
right:

clear: 清除浮动
    left:  左边不允许有浮动对象
    right: 右边不允许有浮动对象
    both:  两边不允许有浮动对象