html知识点总结

来源：互联网发布：兰州李知女人编辑：程序博客网时间：2024/06/15 22:39

【class id style name 每个标签都有的属性】
一、html的格式
<html>
<head>
<title></title>
<meta charset="uft-8" />
</head>
<body>
</body>
</html>
二、body的属性
text 文本的颜色
bgcolor 背景色
leftmargin 左边距
rightmargin 右边距
link 链接未访问时的颜色
alink 链接被点击时的颜色
vlink 链接被访问过后的颜色
三、html中常用的标签
<b>文本</b> <strong>文本</strong>是否加粗
<i>文本</i> <cite>文本</cite><em>文本</em> 是否设置为斜体
<u>文本</u> 是否添加下划线
<s>文本</s> 是否添加删除线
<sub>文本</sub> 把文本设置为下标
<sup>文本</sup> 把文本设置成上标
<font face="字体：如楷体" size="1-7" color="颜色">文本</font>
<br /> 换行
<nobr>文本段落</nobr> 强制不换行(即使文本中存在换行)
<hr width="hr的长度" size="粗细" color="颜色"/> 分割线，有三个属性
<p></p> 段落标签
<pre></pre> 预格式处理
<h1></h1> 标题标签，从h1到h6
四、字符实体
& &
< <
> >
© 版权
™ 商标
® 注册商标
× 乘法
÷ 除法
五、列表
<ul type="circle disc square"> 无序列表
<li></li>
</ul>
<ol stype="1 A a I i" start="4" reversed> 有序列表
<li></li>
</ol>
<dl> 自定义列表
<dt></dt>
<dd></dd>
</dl>
六、URL统一资源定位符
http://www.baidu.com:80/index.html?username='h'&age='18'
http: 协议
www.baidu.com: 网址
80: 端口
index.html: 请求的文件
?username='h'&age='18': ?属性名='属性值'&属性名='属性值'
七、超链接
<a href=""></a> a标签
href: href="http://www.baidu.com" 跳转地址
href="mailto:123@qq.com"发送电子邮件
href="tel:15111065048"打电话
title 标题
target: 链接的打开方式
_blank 新的标签页
_self 当前页面
_top(跟top一样的效果)是当前窗口，但是把窗口最大化
_parent 父级窗口，最大化当前页面的那个窗口
锚点，a标签的应用（一般用来定义某个位置），例子如下
<a id="#position">要找到那个位置</a>（注意这个位置的id里面需要添加上#，如果要定义另
一个页面的位置，则需要在#前面加上页面)
<p>(这里用p只是为了更好区分要找的这个位置)
<a name="position">我就是那个位置</a>
</p>
八、img标签
<img /> 用来显示图片
src="填写图片的地址"
绝对路径：相对于当前目录
相对路径：相对于磁盘
width:图片的宽度
height:图片的高度
title:图片的标题，把鼠标放在上面就能出来
alt:当图片显示不出来时就会显示这里面的内容
map 地图
map用法的例子:(shape代表设定的区域的形状 coords代表坐标)
<img src="地址" id="shape" usemap="shape" href="要跳转的地址" />
<map name="shape">
<area shape="rect" coords="x1,y1,x2,y2" />
（矩形对角线上的坐标）naem跟id是用来进行联动的
/*<area shape="circle" coords="x,y,r" >*/
(圆的圆心和半径)href是点击这个区域时要跳转的地址,注意href是在img里面的
</map>
九、音频、视频(border bordercolor是无效的)
src 地址
autoplay 自动播放
loop 循环，不需要值
controls 显示控制条
audio（无需设置width height：是无意义的）
<audio scr="" controls autoplay loop></audio>音频
video
width: 宽度
height: 高度
<video width="" height="" controls autoplay loop><video>
十、表格
<table>
<caption></caption>
<tr>
<th></th>
<td></td>
<tr/>
</table>
width: 表格的宽度
height: 表格的高度
colspan 合并列
rowspan 合并行
cellspacing 表格中单元格之间的距离
cellpadding 单元格中内容与边距的距离
border 边框的粗细
bordercolor: 边框的颜色
bgcolor: 背景色
th th中的内容会加粗居中,作用跟td一样
tr 表示一行
td 表示一个单元格
caption 修饰表格的标题
align 对齐方式（left center right）
valign 垂直对齐方式（top middle bottom）

11、frameset框架（用时需要去掉body）
<frameset rwos="20%,*" border="" bordercolor frameborder="0/1" >
<frame scrolling="yes/no/auto" src="http://www.baidu.com"></frame>
<frameset cols="30%,*">
<frame scr="1.html"></frame>
<frame scr="" name="right"></frame>
</frameset>
</frameset>
1.html中的链接
<a href="http://www.taobao.com" target="rigth">我要去淘宝</a>
【注意】framset中的frame之间进行联动时，如果某个frame中不需要填写src地址，也必须写上src这个属性，值不填写就好了不然会显示不出来注意要点击链接产生联动时，target是写在要点击的链接里面注意target的值跟name的值一定是要对应的，frame中填写地址是src不是href，frameset中注意bgcolor这个属性无效 scrolling是frame中的属性属性值有yes no auto 而frameborder是frameset中的属性，属性值有0 1，注意划分framset 的时候使用cols rows 等于它们的值，值之间用逗号隔开，可以划分成多块还有border bordercolor属性
十二、表单
<form action="" method="" enctype="multipart/form-data">
用户名:<input type="text/css" />
用户名:<input type="text/css" placeholder />
用户名:<input type="text/css" readonly />
用户名:<input typ="text/css" required />
用户名:<input type="text/css" disabled />
密码:<input type="password" />
上传的文件：<input type="file" />
性别:<input type="radio" name="sex" value="男" id="nan" /><lable for="nan">男</lable>
<input type="radio" naem="sex" value="女" id="nv" /><lable for="nv">女</lable>
爱好:<input type="checkbox" name="hobe[]" value="yumaoqiu" />羽毛球
<input type="checkbox"name="hobe[]" value="bingpangqiu" />乒乓球
<input type="checkbox"name="hobe[]" value="lanqiu" />篮球
<input type="checkbox"name="hobe[]" value="zuqiu" />足球
籍贯:<select name="area" multiple size>
<option value="hunan">湖南</option>
<option value="guangzhou" selected>广州</option>
<option value="guangxi">广西</option>
</select>
取色器:<input type="color" />
日期:<input type="date" />
纯数字:<input type="number" maxlength=""/>
邮箱:<input type="email" />
电话号码:<input type="tel" />
文本域:<textarea rows="" cols="" value="" style="resize:none"></textarea>
提交:<input type="submit" />
重置:<input type="reset" />
隐藏:<input type="hidden" />
按钮:<button></button>
图片：<input type="image" name="" value="" />
</form>
十四、头元素标签
<title></title>
<link rel="stylesheet" type="text/css" href="1.css" />
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="refresh" content="3;url(地址)";
十五、无意义标签
<div></div>
<span></span>

阅读全文

0 0