```clike
```clike
```bash
```bash
**编写工具**:aptana/dreamweaver/
**常用的标记与格式:** <html> <head> <title>
**标题标记**</title>
**<!--网页标记对-->** </head> *<body>
**<!--以下是标题对-->**<h1>标题1</h1> *有六种字号 号越小字越大*
<p>这里表示段落</p><!--内容多了之后会自动换行-->
p>空格</p>
<p><font size="+3">空格 123</p><!--空格--><p>在本条代<br>码中出现<br>了多条强制换行符</p><!--回车-->标准写法为<br />
<hr />横线
<!--
这里放第—行注释
这里放第二行注释但是你能看到么?!
-->
物理字体:
<b>这个是粗体</b>
<u>这个是下划线</u>
≤I>这个定科1体</1>
<S>这个是删除线</s> <strike>
这个是<sup>.上标</sup>
这个是<sub>下标</sub>
```bash
**逻辑字体:**
```bash
<em>这个是强调</em>
<strong>这个是加重</strong>
<small>这个是小字</small>
<big>这个是大的</big>
**字体标记:**
<font size=" +3"> html </font> <!--字体大小的调整1 ~7也可以是减号-- >
<font color= "red" > html lalallalala </font> <!--可以是颜色的单词也可以是RGB的颜色值例如
#000000 W#W标准-->
<font color=#ccccc> html lalallalala </font>
face= "黑体"字体设置
★<pre>格式文本化在网页设计的过程中可能会向用户展示一部分计算机代码， 而展示计算机代码
较长时或许会用到这一个指令
其中<xmp> ../xmp>相似但是这条语句会进行htmI代码的解释
<code>... </code>代码式的小型固定宽度字体显示的文本
<kbd>...</kbd>代码样式固定宽度字体渲染
<tt>... </tt>代码样式固定宽度字体渲染文本
<var> .. </var>代码样式斜体渲染
<smp>...</smp>字体相对要细一点
**文字布局:**
文字-<p>文字二<p>两行文字之间空出- -行的作用<p />是<p> </p>的简写但是由于<p>
</p>里面没有内容所以说会出现空格
<br>如果存在多个会出现多个空行
<nabr>不换行控制
fjakdjfkjalkdfj
dsfadfdsagafdsg
</nobr>
**文字对齐:**
<p align= "right" >HTMI啦啦啦</p> left right center左对齐右对齐居中align可放在<p>与
<div>里面
**列表:**
<ul>无序列表有序为<ol type="#..<ol>其中#可以用aAil 1等来表示
<li>表项1 </li>
<li>表项2</li>
<li>表项3</li>
</ul>
文字滚动事例: <marquee direction="right" >做人要厚道< /marquee> right left down up可
以在txt编辑随便找一个浏览器运行
scrollamount = " 500"表示速度
behavior可以用来设置滚动属性alternate表示来回循环滚动slide表示内容滚动一次就停止
loop="3"表示循环三次
scrolldelay="10"设置滚动的时间间隔走一走停- 停
bgcolor="red"滚动的背景颜色
width= " 250" height= "55"
**图片移动**: <marquee width=" 600px" height= "200px" bgcolor= " #66666">
<img scr="html.jpg">图片的大小在marquee中移动
</marquee>
1.
<img scr="cnjpg"> scr表示的是路径width=" 200px" height表示宽度和高度
alt= "hello world"表示鼠标指针在图片上的时候显示交互的文字
align示对其方式top right bottom left middle顶右底(默认)左中间表示图像和文本的关
**系**
border="10px"边框大小也可以选择去除边框
target="_ blank" 目标为空或者可以设置为_ self等
http://www.baidu.com">
<a href= "mailto:lalall@163.com"> </a> <作者的邮箱>
**锚点**
<a href= " #htmlbook" >点击到锚点处</a>
<a name="htmlbool" >在这里设置一个锚点。在网页第一页做锚点 </a>在同一网页可以加多个
锚点链接可以设置在本网页外在URL地址后加"#" 后再加锚点名称
有时候单击图像的不同位置会出现不同的链接，矩形，圆形，多边形，这些分别用rect circle poly
实现。在<img> 里放的是usermap,后面接的是地图的名字。
在声明地图的时候，用<map> </map>包围。map里面放的是name的名称，以便在其他地方调
用。在<map> </map >里有区域，由<area>属性指定用什么形状，后面紧跟Shape
Shape后面接rect circle poly之中的一个，coords里面是像素href里面是连接的地址。
**相对路径:** C:\Users\dezha\Desktop\htmljpg 绝对路径页面不存在百度搜索
< map name="Face">
<area shape=" rect" href= " page.html" coords="140,20,280,60">
<area shape= "poly" href= "image.html" coords= " 100,100,180,80,200,140">
<area shape=" circle" href=" new.html" coords= "80, 100,60" >
</map>
**表单:**
<form> .. </form>
<form action=" show.aspx" method="get" > action表示表单提交后发送的地址发送方式
method有GET和POST两种基本区别是POST传输的值比较大值可以传给数据库可以是URL后台
<input type="text" > *text password checkbox多选radio单选hidden submit reset
<br>
<input type=" password">
<br>
**多选单选框**
<input type="checkbox" name =book> html知识
<input type =" checkbox" name =book checked >css知识checked表示选中状态
<input type =" checkbox" name=book> html+css知识
<br>
**下拉列表.**
<select>
<option>选项一</option>
<option selected>选项二</option5>
</select>
<input type="button" value="提交">
**图片域**
<input type="image" src="图片路径"/>用来代替提交按钮
**文件域**
<input type="file" />点击浏览可以浏览本地文件
**隐藏域**:在页面内看不见但是可以用来装载需传输的数据
<input type ="hidden" name =”name" value=“我是隐藏域里的值" />
**表格**:其中每个格子被称为单元格
<table> </table> <tr> </tr>表示对-行做标记<td >表示对表元标记<th>示表头，可以省略
<th rowspan=3> </th>表格中的跨多行
<td rowspan=3> </td >表格中的td跨多行
<th colspan=3></th>或者下面表示跨多列
<td colspan=3></td>
<table border= "1" width= "300"> border表示边框宽度值height width表示高度和宽度
<th align="#"> </th>表示表格中的对齐方式center left right
<table align=" #"> <table>表示表格在网页中的对齐cellspacing示的单元格之间的间距
cellpadding表示单元格的边距
</form>
**文本域**
<textarea name=book rows=6 cols=60>名称行高在需要输入多行文字或者是需要填写大量
文字时用到没有用到<input>标签
</textarea>
**框架**:可用于向浏览器窗口中装载多个html网页文件，每个frame (帧每个htm|文件占据一个)
里的网页都是相互独立的。当网站的每个网页部分是不变的时候比较适合
通常在一个帧里面导航链接，将需要变化的文件放到另- -个帧里面
框架型网页:如果一个网页的导航菜单是固定的,在页面中的信息可以上下移动，这就可以认为该
页面是一个框架型的网页。其基本语法为< frameset> </frameset>放在<head >标记对后面
与之并列。其中又有frame标签<frame> </frame >来表示在框架内放入什么文件
<frameset cols= "25%,50%,*"> rows为水平分割*b表示剩下的frameborder=" no"表示隐藏边
框
biadu.com" scrolling= "no"> scrolling表示滚动条有auto yes和no三种属性
hao123.com" >
163.com" >网页不可更改大小
</frameset>
< noframes>对不起您的网页不支持框架< /frames>
<frameset>在<html>标记对内，不能够与<body>并列
可以用来制作导航框架
**内联框架**:存在于<body> </body>之中，也叫做浮动框架用<iframe > </iframe >或者<iframe/>来表示sina.com.cn" />
网页中的多媒体:可以播放flash mid waw mp3等格式的多媒体文件
<embed src=url > url表示多媒体的路径，可以是绝对路径也可以是相对路径src可以插入midi
wav aiff au mp3格式自动播放格式autostart=true|false
循环播放格式loop=true|false|-个数字hidden= truelfalse设置面板的隐藏height width设置面
板的大小单位为px
对齐方式align=top bottom center baseline left right texttop控制面板的顶部与当前行中最高
的文字顶部对齐middle中间与当前行的基准线对齐absmiddle absbottom与当前文本对齐
</body>
</html>
DIV层用来进行网页的布局可以与<table>做替换可以有多层最外层的别成为容器
```bash
**代码举例:**
<html>
<head>
<title> DIV布局</title>
<style type ="text/css">
/*设置层的样式*/
#header
background:blue;
height;100px;
#content{}
#right
width:33%;
height:250px;
float:right;
background:green;
#left
width:33%;
height:250px;
float:left;
background:orangr;
#middle
width:33%;
height:250;
float:left;
background:yellow;
#bottom
height:80px;
background:grey;
clear:both;
</style>
< /head>
<body>
<div id="header" >头部</div>
<div id=" content">
<div id= "right" >网页体右边</div>
<divid=" left "> 网页体左边</div>
<div id ="middle">网页中间</div>
</div>
< div id=" bottom" >网页底部</div>
</body>
< /htmI>
扫一扫
23万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
