html结构:
<标记>
内容
<标记>
标记属性:
<标记 属性=属性值 属性1=属性值1>内容<标记>
在网页编写的时候尽量使用小写
<-注释内容->
利用tab给代码缩进
使用实体名称来代替符号。
html基本结构:
<html>文档标记,网页的开始和结束
<head>文件头标记,网页的标题,关键字标记
<title>网页的文件标题标记,网页的浏览器上的主题。
<body>网页主体部分,可以标记p h1 br hr等标记,构成我们所看到的网页。
body的常见属性有 bgcolor,text,link,vlink,alink
<meta>提供页面的元信息,针对SOE的属性,必须的属性是Content
例如 <meta name="key words" content="you key words">,必须放在head元素内。
<meta charset="UTF-8">
文档标记
br 强制换行
p 换段落
center 居中对齐
pre 预格式化
li 列表项目
ul 无序列表
ol 有序列表,可嵌套,可设置type值
dl,dt,dd 定义型列表
hr 水平分割标记
div 分区显示标记,用来编排大段落和格式化表。
文本标记
h1-h6,六个级别的标题格式
font 字体设置标记,三个属性,size,color,face
b,字体加粗
i,斜体字
sub 上标文字
sup 下标文字
tt 打印机字体标记
cite 引用方式,斜体
em 强调,通常显示为斜体
small 可以多个嵌套,会显示多级变小。
big 多级变大
u 下划线字体标记
图像标记
img 图像标记,src 制定图片路径,名称,格式。width 宽,hight高,border边框宽度,alt,加载完成后显示指定的文字,没有下载或者加载失败,文字代替图像显示,搜索引擎通过文字抓取图片。
超链接
href,链接网页视频图片。#aaa,锚链接。
target,blank新窗口打开,seif(默认)在本窗口打开,parent,父窗口打开(多框架),top顶层窗口打开(框架中用)
name指定页面锚链接。
表格标记
- table,表格标记
- caption,标题标记,位于table后,tr之前
- th表头标记,位于首行或者首列
- td是数据标记,标示单元格内的具体数据。
- td和th都是单元格标记,必须嵌套tr内
- th文字默认会被加粗,td不会
border,表哥边框宽度
align 表格显示位置left center right
cellspacing,单元格之间的间距
cellpadding,单元格内容与单元格边框的显示距离
frame,控制表格最外层的四条边线。void无边框,above只有上面有,below底部有,hsides顶部和底部有,lhs左侧有,rhs右侧有,vsides左右侧有,box包含全部边框,border包含全部边框
rules控制单元格之间的分割线,no表示无分割线,all所有分割,rows只有行,clos只有列,groups行列之间有。
tr标记,bgcolor,align bottom top middle,valign center left right
HTML框架
把浏览器分割开,同窗多页面。
frameset,cols平分数量,rows上下分数量,例如rows="30%,70%"
src 指定加载页面
name 框架名称,链接标记target的所需要参数
noresize表示不能调整框架大小,没有设置表示可以调整
scrolling,是否需要滚动条,auto,yes,no
frameborder,是否需要边框,1显示,0不显示。
表单设计
form 表单标记,定义表单开始位置和结束位置
基本格式form action="service address(表单内容接受地址) " name= method="post|get"
method传送数据的方式,分为post和get,
- post方式提交,表单中的数据一并包含在表单的主体种,一起传送到服务器种处理,没有数据大小限制。
- get提交,表单的内容附加在url地址后面,限制提交的长度不能超过8192个字符,不具备保密性。
action 表单处理程序的url地址,如果为空,则使用当前文档的url地址,如果表单中不需要使用action属性,也要制定其属性为"no"
enctype设置表单的资料的编码方式
target和超链接的属性类似,用来制定目标窗口。
按钮:inputtype= submit提交,reset充值 button 普通
radio单选
chekebox复选
单选和复选可以用cheked默认选择好的项目
input type=hidden 隐藏表单域
多行文本域,textarea,cols=? rows=?
菜单下拉select ,option value=value selected
CSS样式的方法
内链式样式表
<body style=background-color:green;margin:0,padding:0;"><body>
嵌入式样式表
style type="text/css"> <style> 需要放在head中
引入式样式表 link rel=stylesheet type=text/css href=style.css
css定义样式表
html标记定义:p,选择器,定义那个标记中的内容执行其中的样式,一个选择器可以控制若干个样式属性,他们之间需要用;隔开,最优一个可以不用加;
class定义:<p class=“p”>....</p>
class定义以“.”开始
ID定义:p id=“p”
以#开始
P{属性:属性值;属性1......}
组合选择器
h1,h2,h3,h4{color:red;font-size:14px;} 组合选择器,可以用","隔开
伪装元素选择器
a:link 正常连接的样式
a:hover 鼠标放上去的样式
a:active选择链接时的样式
a:visited 已经访问过的链接样式
常见属性:
color:#ff6600
color:green
color:rgb(255,255,255)
color:rgba(255,255,255,1) (透明度)
font-size :
px
%根据父元素的百分比
smaller 比父元素更小
larger 同上
inherit 继承父元素
定义字体:font-family:微软雅黑,serif; (可以用“,”隔开,以确保当字体不存在的时候用下一个。用于字体属性。
字体加粗font-weight: normal (400),bold(700) ,lighter(更细),取100-900的整百数。
图片属性:
background-color:
background-image:rul
background-repeat:
repeat 重复平铺满,no-repeat不重复
background-position: 图片位置
center
left,right,top ,bottom
简写方式:
background:#f2f2f2 url(image/bg.gif) no-repeat 20px 20px
边框属性
border-style
border-bottom -style 下边框样式(单独定义其中一个方向的边框)
边框风格样式:
none无边框
solid直线
dashed虚线边框
dotted点状边框
double双线边框
groove凸边框
ridge 垄边框
inset
outset
inherit 继承
border-color 统一风格
border-top-color 上边框颜色(单独风格)
列表属性:
list-style-image 设置图像列表标记,url图像路径,none无图像
简写: list-style:square inside url(XX.jpg)
div和span盒模型
div和span在html表集中存在意义为了用css样式。
div和span的区别在于,span是内联元素,div是块元素。
盒子模型:
外边距margin
内边距padding
边框宽度border
盒子宽度width
盒子高度height
布局相关属性