HTML知识点总结
html 超文本标记语言(结构层)
1.文档声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<p>段落标签</p>
<img src="路径" alt="图片加载失败时的文字"/>
</body>
</html>
2.块级元素
p <br/> h1-h6 ul ol dl dt dd div <hr/>
注:dl:定义列表 至少包含一条术语或一条说明
dt:定义列表项 标明一个术语要说明的对象
dd:列表项说明
<dl>
<dt>定义列表项</dt>
<dd>列表项的说明</dd>
</dl>
ul:无序列表 (默认样式 实心小圆点)
type属性 “square”实心方形 “circle”空心圆 “none”去掉小圆点属性
ol:有序列表 (默认样式 阿拉伯数字1,2,3......)
3.行内块级元素
img:(1)图片大小:<img width=“” height=""/>
(2)图标替代文本:<img alt="图片替代的文本内容"/>
(3)图片提示:<img title="提示文本"/>
4.行内元素
b strong i em span sup sub
注:b或strong 文本加粗
<b>:样式表现为粗体
<strong>:主旨是强调,表现为粗体
i:斜体 em:主旨是强调,表现为斜体
如果只是单纯的样式表现建议使用<b>或<i>
如果主要目的是强调,同时样式与其他元素表现出 区别的建议使用<strong>或<em>
<sup>上标 <sub>下标
5.嵌套
块级元素里可以嵌套任何元素
<div>
<h3></h3>
<div></div>
</div>
块级元素里可以嵌套行内元素
<div>
<strong>fff</strong>
</div>
<p>
<b></b>
</p>
块级元素里可以嵌套行内块级元素
<div>
<img src="" alt=""/>
</div>
6.特殊的符号:
空格:
小于号:<
大于号:>
版权:©
7.超链接
<a href="" target="_top" title="你是">我</a>
<a href="2.html">点击进入2网页</a>,点击文字进入2.html
<a href="2.html"><img src="two.jpg" /></a>,点击图片进入2.html
① a:link:未访问链接 ,如 a:link {color:blue}
② a:visited:已访问链接 ,如 a:visited{color:blue}
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}
④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}
a:active不能设置有无下划线(总是有的)
LoVe HAte 爱恨原则
target属性 目标
target的值
1._blank 在新窗口中打开,打开了一个新的网页
2._top
3._self
4._parent
后三种都是新窗口把原来的窗口给覆盖掉了
title 标题
鼠标到超链接上时显示的文本
用来放所有的样式的
<style>
div{
color:red;
font-size:20px;
}
a{
}
</style>
8.地图热点区域
<img src="图片路径" usemap="#id值"/>
<map id="id值" name="id值">
<area shape="值" coords="多个数值" href="路径"/>
<area shape="值" coords="多个数值" href="路径"/>
</map>
-----形状shape="值"
值:
1.圆形 circle
2.矩形 rect
3.多边形 poly
-----坐标coords="多个数值"
值:
1.三个值 圆 前两个值圆心坐标 最后一个值是圆的半径
2.四个值 矩形 前两个值 左上角的点的坐标 第三个值是矩形的宽度 第四个值是矩形的高度
3.多个值 多边形 每两个值确定一个角点的坐标
9.table
<1>table默认无边框
<2>table的属性
边框 border = "数值"
单元格之间的间距 cellspacing="数值"
内容到单元格边框的距离 cellpadding="数值"
th 默认样式 加粗 水平居中 垂直居中
td 默认样式 水平左对齐 垂直居中 style="text-align:center" align="center"
水平对齐方式:left(左对齐)、center(居中对齐)、right(右对齐)
--------合并单元格
1.行合并 上下合并单元格 属性 rowspan="合并的行数"
2.列合并 左右合并单元格 属性 colspan="合并的列数"
10.form表单
<form action="" method=""></form>
method 提交的方法
1.get
2.post
<form action="表单要提交的服务器的页面地址" method="get或者post">
<input type="text" name="自己起的名字" value="" />
</form>
input 属性
type值:
text 文本框
用户名:<input type="text" name="username" value="" placeholder="请输入用户名" maxlength="3"/>
password 密码框
密码:<input type="password" name="password" value="" maxlength="6"/>
3.radio 单选框 一组里的name必须是同一个值 默认被选中 给input标签加checked="checked" 或者 直接加checked
4.checkbox 复选框 默认被选中 给input标签加checked="checked" 或者 直接加checked
5.submit 提交按钮 value值记得加上
6.reset 重置按钮
7.button 一般按钮
8.hidden 隐藏域
9.file 文件上传框
文本域(多行文本框)
<textarea cols="列数" rows="行数">
</textarea>
下拉选项框(下拉列表)
<select>
<option value="值">内容</option>
<option value="值" selected>内容</option>
....
</select>