使用可视化编辑器 Dreamweaver , Frontpage
----------------------------------------------------------------------------------------------
<head> </head> 定义文档头部包头
<title> </title> 标题
<meta />
----------------------------------------------------------------------------------------------
<base>
<link>
<meta>
<script>
<style>
<title>
----------------------------------------------------------------------------------------------
<body> </body>局部内容
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
<p></p> 写标签值 解释写法 ： <p 属性=“属性值”>想写的<br />内容</p> 段落用 align="" left居左 center居中right居右
<p align="center">这里写上内容</p>
----------------------------------------------------------------------------------------------
<br /> 写标签值 解释写法 ： <br 属性=“属性值” /> 换行用
<p align="center">这里写上<br />内容</p>
----------------------------------------------------------------------------------------------
<pre></pre>预先格式化标签 文字多可以用这个自动换行
<pre>
这里写上内容
</pre>
----------------------------------------------------------------------------------------------
<font > </font> 写标签值 解释写法 ：<font 属性=“属性值”> </font> 字体标签
coler 规定文本的颜 face 规定文本的字体 size 规定文本文本大小1-7
<font coler="red" size="3" face="微软雅黑，宋体">这里写上内容</font>
----------------------------------------------------------------------------------------------
<h1></h1>~<h6></h6>标题用H1字可以定义最大到 H6字可以定义最小
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
----------------------------------------------------------------------------------------------
<i></i>，用来标记文字斜体
<b></b>，用来标记文字加粗体
<u></u>，用来标记文字下划线，
<strong></steong>，用来标记文字加粗体
<em></em>，用来标记文字斜体
<sun></sun>，用来标记文字下标显示
<sup></sup>用来标记文字上标显示
----------------------------------------------------------------------------------------------
<ul></ul>，无序列表
属性（disc 空心圆,circle 实心圆,square 实心方块）
<ul type="disc">
<li>这是一个列表项</li>
<li>这是一个列表项</li>
<li>这是一个列表项</li>
</ul>
----------------------------------------------------------------------------------------------
<ol></ol>，有序列表 属性（1,a,A,i,I）
<ol type="a">
<li>这是一个列表项</li>
<li>这是一个列表项</li>
<li>这是一个列表项</li>
</ol>
----------------------------------------------------------------------------------------------
<hr />水平线标签一个横线
属性名（align作用：控制水平线的对其方式,noshade noshade作用：控制HR元素显示颜纯,size像素PX 作用：控制水平线的高度厚度,width像素PX百分比% 作用：控制水平线的长度）
<hr size="20" noshade="noshade" width="50%" align="left"/>
----------------------------------------------------------------------------------------------
<!---->注释用在html里面可以用
<!-- 内容内容内容内
内容内容内
内容内容内
容内容-->注释用在html里面可以用
----------------------------------------------------------------------------------------------
（<）显示小于号大于号
特殊字符 效果
> 大于号（>）
< 小于号（<）
" 引号(")
® 注册商标()
© 版权符()
& &符号
空格
<strong>><®"©&</steong>，用来标记文字加粗体
----------------------------------------------------------------------------------------------
./当前目录路径
../上一级目录路径
<a href="../../demo.html" target="_self">点击跳转</a>
----------------------------------------------------------------------------------------------
<a href="mailto:123@admin">点击发送邮件</a>
发送邮件地址
<a href="mailto:admin@admin">admin@123</a>
----------------------------------------------------------------------------------------------
Target属性
_blank 在新窗口中打开被连接文档
_self 默认，在相同的框架中打开被连接文档
_parent 在父框架中打开被连接文档
_top 在整个窗口中打开被连接的文档
framename 在指定的框架中打开被连接文档
----------------------------------------------------------------------------------------------
<img>图片标签
<a href="www.baidu"
<img src="1.jpg" alt="这里显示不到图片显示文字" width="100" height="100" />
</a>
特殊字符 效果
src Src属性设置的是要插入图片的URL地址
alt alt属性用来为图像定义一串预备的可替换的文本
width 指定图片的宽度
height 指定图片的高度
----------------------------------------------------------------------------------------------
框架的分割处理//rows="50%,20%,30%" //rows="50%,20%,*"
<body> </body>
<frameset></frameset>
<frame />
属性
cols用像素或者百分比来分割左右窗口‘*’表示剩余部分,
rows用像素或者百分比来分割上下窗口‘*’表示剩余部分,
frameborder指定是否显示边框，0表示不显示，1表示显示,
border指定框架边框的粗细,
noresize《frame》指定框架不能够调节
----------------------------------------------------------------------------------------------
<html>
<head>
<meta>
<title> 标题</title>
</head>
<frameset cols="80,*" frameborder="1" border="1" >//rows="50%,20%,30%"
//fram
eborder="1"显示才能调用 border="1" 边框粗细
//<frameset rows="80,*" >//rows="50%,20%,30%"
<frame src="top.html name="topframe" noresize="noresize"/>//不能调节noresize
<frame src="main.html name="top" />
<frame src="32.html name="foot" />
</frameset>
</html>
----------------------------------------------------------------------------------------------
<html>
<head>
<meta>
<title> 标题</title>
</head>
<frameset cols="80,*" frameborder="1" border="1" >//rows="50%,20%,30%"
//frameborder="1"显示才能调用 border="1" 边框粗细
//<frameset rows="80,*" >//rows="50%,20%,30%"
<frame src="top.html name="topframe" noresize="noresize"/>//不能调节noresize
<frameset rows="80,*" frameborder="1" border="1" >
<frame src="main.html name="top" />
<frame src="32.html name="foot" />
</frameset>
</frameset>
</html>
----------------------------------------------------------------------------------------------
导航栏点击
<a href="www.baidu" target="top">百度</a>
----------------------------------------------------------------------------------------------
<noresize>
<body>
<h1>您的浏览器不支持框架</h1>
</body>
</noresize>
----------------------------------------------------------------------------------------------
HTML中的表单
<form></form>标签
<form>标签用于为用户输入创建HTML表单
属性
action url 规定当提交表单时，向何处发送表单数据
method get/post 规定如何发送表单数据
name name 规定表单的名称
enctype mime_type 规定表单数据在发送到服务器之前应该如何编码。
----------------------------------------------------------------------------------------------
<html>
<head>
标题头
</head>
<body>
<form action="./a.php" method="post" enctype="mnltipar/form-data" >//mnltipar/form-data 属性时一般是用来做上传数据用
用户名：<input type="text" name="user" maxlength="10" />//设置输入最大长度
<br />
密 码：<input type="password" name="user" />
</form>
</body>
</html>
<input type="text" name="namen" value="默认值" maxlength="12" />
<input type="text" name="namen"
----------------------------------------------------------------------------------------------
编辑框
用户名：<input type="text" name="user" maxlength="10" />//设置输入最大长度
<br />
密 码：<input type="password" name="user" />
<br/>
----------------------------------------------------------------------------------------------
复选框//checked默认被选中
兴 ；趣：
<input type="checkbox" name="xq1" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="xq2" value="football" />足球
<input type="checkbox" name="xq3" value="deskball" />足球
<br />
-------------------------------------------------------------------------
---------------------
单选框//
性 ；别：
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="sex" value="保密" checked="checked"/>保密
----------------------------------------------------------------------------------------------
提交按钮
<input type="submit" name="sub" value="提交" />
重置按钮
<input type="reset" name="reset" value="重置" />
----------------------------------------------------------------------------------------------
普通按钮
php实例代码详解
<input type="button" name="but" value="普通按钮" />
----------------------------------------------------------------------------------------------
上传框
<input type="file" name="head" />
----------------------------------------------------------------------------------------------
隐藏域
<input type="hidden" name="id" value="100" />固定值
----------------------------------------------------------------------------------------------
多行的文本输入控件
个性签名
<textarea name="content" cols="8" rows="3"> //cols 输入长度 rows 输入行数
内容
</textarea>
----------------------------------------------------------------------------------------------
下拉框 选择头像
<select name="choose">
<option value="1" >头像1</option>
<option value="2" >头像2</option>
<option value="3" selected="selected">头像3</option>
<option value="4" >头像4</option>
</select>
----------------------------------------------------------------------------------------------
表格通过<table></table>,<tr></tr>,<td></td>来标签完成的
属性 说明
Width 表格的宽度，可以用像素或者百分比表示
Height 表格的高度，可以用像素或者百分比表示
Align 表格在页面的水平对其情况
Bgcolor 表格的背景颜
Border 表格的边框粗细（像素），可以设置为0
Bordercolor 表格的边框颜
cellspacing 单元格之间的间距
Cellpadding 表格内内容与单元格之间的间距
----------------------------------------------------------------------------------------------
<table border="1" width="50%" height="400" align="center" bgcolor="#ffff00" bordercolor="red" cellspacing="0" cellpadding="5">
<tr>
<th align="right" valign="bottom" bgcolor="#ffffff">标题</th>
<th>作者</th>
<th>时间</th>
</tr>
<tr>
<td width="400" head="200">内容</td>
<td>玩玩</td>
<td>2015</td>
</tr>
</table>
----------------------------------------------------------------------------------------------
表格中的行水平对齐
<th align="right" valign="bottom" bgcolor="#ffffff">标题</th>
属性 说明
Align 行内内容的水平对其情况
Valign 行内内容的垂直对其情况
Bgcolor 行的背景颜
-------------------------------------------------------
---------------------------------------
表格中的单元格<td></td>
属性 说明
windth 单元格的宽度，可以用像素或者百分比表示
height 单元格的高度，可以用像素或者百分比表示
align 单元格内内容的对其情况
bgcolor 单元格的背景颜
colspan 单元格横向合并
rowspan 单元格纵向合并
<th align="right" valign="bottom" bgcolor="#ffffff" bgcolor="#cccccc" align="right" rowspan="2" colspan="2">标题</th>
----------------------------------------------------------------------------------------------
Web标准的构成
结构 HTML XHTML XML
表现 CSS 目前版本3.0
行为JavaScript脚本语言
----------------------------------------------------------------------------------------------
DIV+CSS的好处
1 高效的开发与简单维护
2 信息跨平台的可用性
3 降低服务器成本，加快网页解析速度
4 更良好的用户体验
使网页的表现与内容分离
----------------------------------------------------------------------------------------------
DTD tran
-
---------------------------------------------------------------------------------------------
在HTML中引入CSS方法
行内式
<h1 >学习内容</h1>
分离式
<head>
<title>无标题文档</title>
<style type="test/css">
h1{
color:blue;
}
</style>
</head>
<body>
<h1>学习内容</h1>
</body>
</html>
----------------------------------------------------------------------------------------------
在HTML中引入CSS的方法
导入式 新建一个mystyle.css
<style type="text/css">
@import"mystyle.css";
</style>
连接式
<link href="mystyle.css" rel="stylesheet" type="text/css" />
----------------------------------------------------------------------------------------------
<head> //导入式
<title>无标题文档</title>
<style type="test/css">
@import"./dome.css";
</style>
</head>
<body>
<h1>学习内容</h1>
</body>
</html>
----------------------------------------------------------------------------------------------
<head> //连接式
<title>无标题文档</title>
<style type="test/css">
<link href="./dome.css" rel="stylesheet" type="text/css" />
</style>
</head>
<body>
<h1>学习内容</h1>
</body>
</html>
----------------------------------------------------------------------------------------------
CSS 写内容
#优先级选择--行内样式>ID样式>类别样式>标记样式
.a后选择
#abc{
color:yellow;
}
h1{
color:blue;
}
td{ color:blue; }
a{ color:blue; }
.a{ color:blue; }//所有的class=a 都是这个颜
交集选择器
--------------
p.a{
color:red;
}
----------------
并集选择器
--------------
p,h1{
color:red;
}
----------------
body{
background-color:#e9e9e9;
background-image:url(www.hao1223/11.jpg)
background-repeat:no-repeat
}
-
-----
----------------------------------------------------------------------------------------
CSS选择器
含义和作用
标记选择器 html 标记
类别选择器 .classname
ID选择器 具有唯一性不能为2个
<h1 id="abc" class="a">学习内容</h1>
<p class="a">学习内容</p>
复合选择器
div.special{.....}
div#special{......}
交集选择器
--------------
p.a{
color:red;
}
----------------
并集选择器 div,h1,first,p.specia{............}
--------------
p,h1{
color:red;
}
----------------
后盖选择器 div h1.first span.firstLetter{.......}
----------------
<p class="a">学<font>习</font>内容</p>//里面的标签变红
<font>今天我们要学习</font>
----------------
p font{
color:red;
}
----------------
*号代表所有颜 或body
*{
color:red;
}
----------------
----------------------------------------------------------------------------------------------
CSS在XMHTL中的使用 优先级选择--行内样式>ID样式>类别样式>标记样式
*{font-size:12px;}
p{ color:red; }
#header { color:blue}
.footer{ font-size:16px;}
.
ok { color:yellow; }
<p>我是什么颜？</p>
<div id="header">我又是什么颜</div>
<div class="ok">亚麻</div>
<div class="footer ok">我是什么颜多大字号</div>
CSS优先级
<style>
p{font-size:20px;}
.rred{font-size:12px;color:red；}
#line3{font-size:40px;}
</style>
<p>1文本</p>
<p class="red">2文本</p>
<p id="line3" class="red">3文本</p>
<p id="line3">4文本</p>
----------------------------------------------------------------------------------------------
介绍文字和图像的排版
CSS文字样式
准备网页
设置字体
文字大小
行高
文字颜与背景颜
文字加粗，倾斜与大小写
文字的装饰
----------------------------------------------------------------------------------------------
CSS文本处理
文本缩进 ：text-indent :px % cm 如果值是负数 则向左.-9999则是一种隐藏
文本对齐: texr-align : left right center justify(两端)
彩 coler :#ffffff red rgb(0,0,255)
字体 font-family Arial,"黑体"，“宋体”
字体大小 font-size 可以是单位尺寸 也可以用绝对字体尺寸或相对字体尺寸(em)
字体粗细 font-weight:normal bold(700)bolder比normal粗lighter比normal细
字体修饰 text-decoration:underline(下划线)line-through(删除线)overline(上划线)
大小写 text-tramsform: capitalize(首字母)uppercase(大)lowercase(小)
行高 line-height 单行文本高度
----------------------------------------------------------------------------------------------
<h1 > //文本缩进
<div >//文本对齐
hen hao
</div>
<div >//文本对齐
hen hao
</div>
<h1 style="font-
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论