html
----------------------------------------
html基本结构
<html>
<head></head>
<body></body>
</html>
----------------------------------------
body中的各种标签组件:
正文中的标题标签
h1~h6
要注意的是:
1)<h1>的字体最大，<h6>字最小。跟<font>标签的size属性是反的，size值为1最小，值为7最大。
2)必须是独占一行
3)使用<h1>到<h6>标签，会让文字变大变粗。但千万不要因为想让文字变大变粗就给他加一个标题标签，这是错误！你可以使用<font>或<b>标签来实现
4)搜索引擎会把文章中出现的<h1>到<h6>标签来作为文章的结构与主次，从而进行索引。懂seo的朋友就知道，这个很重要！
段落与换行:
换行标记: <br/>
段落标记: <p></p>
把p标记中的文本当做一段文字, 一段文件完毕之后, 会自然换行.
分割线:
<hr 属性名="属性值" />
属性:
width: 宽度
300px
50% 占用父标记宽度的百分比
align: 对齐方式
left 居左
center 居中
right 居右
html实体:
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
当要在页面中展现特殊字符时:
>: > great than
<: < less than 或 <
空格:
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体
HTML 中有用的字符实体
注释：实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
图片标签: (单标记)
可以在页面中显示一张图片
<img />
属性:
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: 不支持
链接:
<a> 链接文本 </a>
属性:
href: 点击链接之后跳往的目标地址
图片链接:
点击图片跳转
<a href="">
<img src=""/>
</a>
图片热点链接
这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：<img><map><area>。
<img src="图形文件名" usemap="#图的名称">
<map name="图的名称">
<area shape=形状 coords=区域座标列表 href="URL资源地址">
<!--可根据需要定义多少个热点区域-->
<area shape=形状 coords=区域座标列表 href="URL资源地址">
</map>
【1】shape -- 定义热点形状
shape=rect： 矩形
shape=circle：圆形
shape=poly： 多边形
【2】coords -- 定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
demo :
<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
<area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
<area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
<area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
<!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
<!-- onFocus="this.blur()" 去掉虚线框 -->
</map>
表格:
表格的第一种规范:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table: 表格标记
属性:
width: 宽度
height: 高度
border: 边框宽度
align: 对齐方式 left|center|right
cellpadding: 单元格的内边距
cellspacing: 单元格与单元格之间的距离
tr: 表格行
td: 单元格
属性:
rowspan: 合并行
colspan: 合并列
表格的第二种规范:
<table>
<caption></caption> 表格标题
<thead> 表头
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody></tbody>表体
<tbody></tbody>
<tfoot></tfoot>表脚
</table>
使用时用第一种或第二种都可以.
第一种更简单
第二种更规范
表单标签:
表单用于收集用户信息, 一个表单中可以含有多个
表单组件.
input标签:
文本框:
<input type="text" name="" value=""/>
type:定义了input组件的样式(文本框)
name:定义了input组件的名称, 只有写上name属性
的组件在提交的时候才可以向服务器传递数据.
value:定义了页面加载后文本框中的默认值.
提交按钮:
<input type="submit" value=""/>
value:定义按钮上的文字
密码框:
<input type="password" name=""/>
单选按钮:
<input type="radio" name="" value=""/>
name:多个单选按钮 若name相同,则为一组单选按钮.
一组单选按钮只能选择一个.
value:提交给服务器的参数值.
checked="checked" 若希望某个单选钮默认被选中,
则需要添加该属性.
多选框:
<input type="checkbox" name="" value=""/>
&pwd=&sex=m&hobby=swimming&hobby=coding
checked="checked" 默认被选中
普通按钮:
<input type="button" value=""/>
value:代表按钮上的文字
重置按钮:
作用: 把当前表单中的所有组件的值恢复默认.
<input type="reset" value=""/>
非input标签:
下拉列表框:
<select> 下拉框
<option value="">text</option> 下拉项
<option></option> 下拉项
</select>
option:
text: 表示显示在下拉项中的文字
value: 代表当前下拉项的值
多行文本域:
<textarea name=""></textarea>
列表标记:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
--------------------------------------------
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 class="div"></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
行级标记: 多个标记占用一行
<a></a>
<input/> <span></span> <s></s> <b></b>...
块级标记: 一个标记占用一行
h1~h6 p div li ul ...
float: 浮动属性
left:
right:
clear: 清除浮动
left: 左边不允许有浮动对象
right: 右边不允许有浮动对象
both: 两边不允许有浮动对象