body常用属性:
<body bgColor="#123123" background=""></body>
html文本标记
<b></b>:加粗 bold
<i></i>:斜体 italic
<u></u>:下划线 underline
<s></s>:删除线 strike
<sup></sup>:上标
<sub></sub>:下标
<font></font>字体标记
size:文子大小1-7,1小,7大
color:颜色值
face: 字体
<p></p>:表示一个段落
align:水平对齐方式,left,center,right
<br>:换行标记
<hr>:水平线标记
size:水平线的粗细,单位为px
color:水平线的颜色
width:水平线的宽度
noshade:去掉水平线的阴影
<pre></pre>:原封不动的输出
<h1>......<h6>:标题标记
HTML字符实体
空格:
< :<
> :>
& :&
¥ :¥
× :×
÷ :÷
HTML项目符号
无序列表
<ul type="disc(小黑点)|circle(空心圆)|square(实心方块)">
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
有序列表
<ol type="A" start="6">//type:编号类型,取值1,a,A,i,I | start:从第几个开始编号
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<marquee></marquee>:滚动字母标记
属性:
direction:滚动方向,up,down,left,right
width:滚动宽度
height:滚动高度
bgColor:滚动背景颜色
scrollAmount:滚动步长值,值越大,滚动越快
scrollDelay:两步之间的停留时间,以毫秒为单位,一秒=1000毫秒
loop:循环滚动的次数
图片标记:行内元素,单边标记
width:图片宽度
height:图片高度
border:图片边框粗细
src:图片路径(相对路径)
align:图片水平对齐方式,取值left,center,right
hspace:图片与左右文字之间的距离(水平距离)
vspace:图片与上下文字间的距离(垂直距离)
注意:
如果图片相等比例缩放,只需要指定width或者height其中的一个
align属性只能让文本居中,不能让图片单独居中
align可以是实现,图文混排效果,align = "left|right"
超链接:行内元素
常用属性
href:目标文件地址url,
target:目标文件显示窗口
_blank:在新窗口中打开目标文件
_self:在当前窗口中打开目标文件(默认)
_parent:在父级窗口来打开目标文件
_top:在最顶级窗口来打开目标文件
绝对地址URL
远程绝对地址:如:http://www.baidu.com
本地绝对地址:file:///C:/
特殊链接
下载链接<a href="images/winrar.rar">下载WinRAR解压缩文件</a>
邮箱链接<a href="mailto:3584685883@qq.com">请给我发邮件</a>
普通空连接<a href="#">普通空连接</a>
js链接:添加JS功能代码<a href="javascript:window.close()">关闭窗口</a>
锚点链接:定义记号
命名规则:可以包含字母,数字,下划线,但只能以字母开头
<a href = “文件名#锚点名称”>……</a>
文件名:可有可无。如果是同一个网页的不同部分跳转,不需要文件名;如果是跳到另一个网页的不同部分,这时必须要有文件名。
<meta>标记
http-equiv属性
设置网页的字符<meta http-equiv="Conten-Type" content="text/html;charset=utf-8" />
网页自动刷新
<meta http-equiv="refresh" content="2">//每隔两秒钟,自动刷新
<meta http-equiv="refresh" content="2;url=http://www.baidu.com">//两秒钟后,调到百度
name属性
<meta name="keywords" content="设置网页搜索的关键字" />
<meta name="direction" content="描述网页信息" />
表格结构
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table属性:
width:表格宽度,单位可以是百分比,也可以是固定值
height:表格高度
align:表格水平对齐方式,取值:left,center,right
border:边框粗细
bordercolor:边框颜色
bgcolor:表格背景色
background:背景图片url
cellpadding:单元格变现到内容间的距离(填充距离)
cellspacing:单元格与单元格之间的距离(间距)
rules:合并单元格边框线,取值:all
tr属性
bgcolor:行的背景色
height:行的高度
align:行中的文本水平居中,取值left,center,right
valign:垂直居中,取值:top,middle,bottom
<td>或<th>属性
td:普通的单元格,th标题单元格,居中加粗显示
width:单元格宽度
height:单元格高度
bgcolor:单元格背景色
background:单元格背景图片
align:水平对齐
valign:垂直对齐
rowspan:上下单元格合并,合并属性必须放在第一个单元格中
colspan:左右单元格合并,合并时,有增就得有减,要保证每行单元格的个数不变
表单
<form>标技属性-块元素
name:给表单起个名字,对js用来做表单验证
method:表单提交方式,取值get,post
action:指表单的处理程序,一般是PHP文件
enctype:指定标点数据的编码方式,这个属性只能用在method="post"的情况下
application/x-www-form-urldecoded//默认的加密方式
multipart/form-data//如果你上传文件,该值必须他自己
get方法和post方法
get方式不能提交敏感数据
get方式只提交少量数据,长度受限
get方式不能上传附件
post提交数据相对安全
post方式可提交海量数据
post方式可以上传附件
单行文本域:<input type="text" 属性="值">
单行密码域:<input type="password" 属性="值">
name:文本框的名字。可以使字母数字,下划线,只能以字母开头
type:表单元素的类型
value:文本框中的值
size:文本框的长度,以字符为单位
maxlength:最多可以输入多少字符
readonly:只读属性,可以先种,但不能修改readonly="readonly"
disabled:禁止属性,不能选中,不能修改disabled="disabled"
单选按钮<input type="radio" 属性="值">
name:元素名称
value:元素值,该value中数据将发往服务器
checked:默认选择那一项
注意:一组单选按钮,只能选择一个,但name的值必须一致。
复选框<input type="checkbox" 属性="值">
name:元素名称
value:元素的值
checked:默认选中
注意:复选框也是一组选项,因此name的值必须一致。在PHP中,使用数组来获取多个同名的name的值。复选框可以同时选多个,也可以一个都不选
下拉列表
<select>:标记的属性,只有一个name属性
<option>:标记的属性有两个:value属性,selected属性
selected:默认选中:selected="selected"
文本域<textarea name="名称" cols="宽度" rows="高度"></textarea>
name:元素名称
cols:宽度,是指多少个字符宽
rows:高度,指行高
各种按钮
提交按钮:<input type="submit" name="提交表单" />
重置按钮:<input type="reset" name="重新填写" />
图片按钮:<input type="image" src="路径" />//功能就是提交表单,与submit按钮功能一样
普通按钮:<input type="botton" onclick="javascript:window.close()" value="关闭窗口" />
隐藏域:<input type="hidden" name="名称" value="默认值" />
长传文件域<input type="file" 属性="属性">
name:表单元素的名称
value:表单元素的值,这个值其实就是上传的文件名
<caption>表格标题
<caption>标记是<table>的子标记,<caption>放在<table>开始标记之后
图片热点(图像地图)
标记结构
<img src="图片地址" usemap="#map" />
<map id="map" name="map">
<area shape="热区形状" coords="热区坐标" href="链接地址" />
<area shape="热区形状" coords="热区坐标" href="链接地址" />
<area shape="热区形状" coords="热区坐标" href="链接地址" />
</map>
<area>标记常用的属性
shape:热去的形状,取值:rect(矩形),circle(圆形),polygon(多边形)
coords:执区的坐标(位置)
如果shape=rect时,那么,coords="x1,y1,x2,y2",例如:coords="50,50,200,150"
(x1,y1)为矩形左上角的坐标值,(x2,y2)为矩形右下角的坐标值
如果shape=circle时,那么,soords="x,y,r",其中(x,y)为圆心坐标,r为半径
<frameset>属性
cols:划分左右型框架
cols = “200,*” //左框架的宽度为200px,剩下的都是右框架的
cols = “180,*,180” //左框架和右框架的宽分别为180px,剩下都是中间框架
cols = “20%,*” //划分框架时,可以用百分比来表示
rows:划分上下行框架
rows = “200,*” //上框架的高度为200px,剩下都是下框架的
rows = “180,*,180” //上框架和下框架高分别为180px,剩下都是中间框架
注意:cols属性和rows属性,每个框架只能用其中一个,不能两个同时用。
frameborder:是否显示框架的边框线,取值:1或0,yes或no
border:边框线的粗细
bordercolor:边框颜色
<frame>框架页的属性
src:该小窗口中,默认显示的网页地址
noresize:不能调整小窗口的大小,如:noresize="noresize"
scrolling:是否显示滚动条,取值:auto,yes,no
name:给当前小窗口起个名字,这个name就是给<a>标记target属性来用的
<noframes>:IE6不支持框架,高版本都支持。
<noframes>对不起,你的电脑太老了,该砸了,换新的!</noframes>
内嵌框架(行内框架,浮动框架):<iframe 属性 = “值”>对不起,你的浏览器版本太低!</iframe>
内嵌框架,相当于在现有的网页中,挖了一个“窟窿”,透过这个“窟窿”可以看见里面内容。
与普通框架的区别:<iframe>是<body>的子标记,因此,它应该放在<body>
src:引入文件地址
width:框架的宽度
height:框架的高度
frameborder:是否显示框架的边框线,取值:yes或no
scrolling:是否显示滚动条,取值:auto,yes,no
name:指定当前小窗口的名称,该名称也是给<a>标记的target属性来用
align:框架在网页中的对齐方式,取值:left,center,right
注意:src引入的文件只能是html文件或php文件,不能是其它文件。
补充
在placeholder里面进行换行 例如:<textarea placeholder="有限公司 服务中心" class="layui-textarea" name="one"></textarea>