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
或 <
空格:
浏览器总是会截短 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: 两边不允许有浮动对象
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
