HTML知识点总结
一.什么是html？
HTML（HyperText Markup Language） 超文本标记语言，运行在浏览器端。
二.HTML基本结构
<!doctype html> 声明文档类型
<html> 根标记标签 双标签
<head>
<title>网页标题</title>
<meta charset="utf-8"> 设置字符编码的类型,utf-8是万国码
</head>
<body>
</body>
</html>
三.段落标签
<p>段落的内容</p>
元数据标记定义HTML页面中的相关信息，语法格式如下：
<meta name="" content="">
<meta name="keywords" content="html,xhtml,css,javascript"> 设置搜索的关键字
<meta name="description" content="这是一个网页的描述"> 描述
四.图片标签
<img src="" alt="" />图片标签 单标记标签
属性：
1.src 引入图片路径
2.alt 替代文字 当图片加载不出来时，用来替代图片的文字
3.width 设置图片的宽度 值：数字 默认单位是像素
4.height 设置图片的高度 值：数字 默认单位是像素
5.title 提醒文字 当鼠标放到图片上时的提醒文字
路径：
1.当图片和html文件在同一级目录下，直接写图片名字
2.当图片所在的文件夹和html文件在同一级目录下，先写文件夹名称,再写图片名称 例如：xx文件夹/xx.jpg
3.当图片和html文件所在的文件夹在同一个目录下，用 ../ 跳出当前目录，然后再写图片名称 ../xx.jpg
4.当图片所在的文件夹和html文件所在的文件夹在同一个目录下，用 ../ 跳出当前目录，然后写图片所在的文件夹名称，最后写图片名称 ../图片文件夹名/xx.jpg
五.标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
共同点：都是标题标签 字体加粗，都有默认的外边距
不同点：字体大小不一样 h1~h6依次减小
六.列表
1.无序列表 没有先后顺序之分
<ul>
<li>列表项1</li>
<li>列表项2</li>
.....
</ul>
2.有序列表 有次序
<ol>
<li>列表项1</li>
<li>列表项2</li>
.....
</ol>
3.定义列表
<dl>
<dt>列表项（术语）</dt>
<dd>对列表项的说明</dd>
</dl>
七.字体排版标签
1.加粗
<b></b> 表示加粗
<strong></strong> 加粗 主旨表强调
2.倾斜
<i></i> 表示倾斜
<em></em> 倾斜 主旨表强调
3.上下标
<sub></sub> 表示下标
<sup></sup> 表示上标
八.超链接
<a href="">超链接</a>
属性：
1.href 跳转的路径
a)路径 相对路径或绝对路径
b)mailto:邮箱地址
c)锚点 #id值 如：回到顶部
2.target 链接打开的方式
a)_blank 在新窗口中打开
b)_self _parent _top
九.热点区域
<img src="图片路径" alt="" usemap="#name值" />
<map name="name值" id="name值" >
<area shape="" coords="" href="" target="" />
.....
</map>
area标签的属性：
1.shape 形状
a)rect 矩形
b)circle 圆形
c)poly 多边形
2.coords 坐标
a)如果shape=”rect” ,coords=”数值1,数值2,数值3,数值4” 数值1和数值2代表矩形左上角顶点的坐标，数值3和数值4代表右下角顶点的坐标
b)如果shape=”circle”, coords=”数值1，数值2，数值3” 数值1和数值2代表圆心坐标，数值3代表圆的半径
c)如果shape=”poly” , coords=”数值1，数值2，数值3，数值4,.......” 每两个数值代表一个多边形顶点的坐标
3.href 热点区域跳转的链接
4.target 跳转的方式，在新窗口打开
十.框架
1.行内框架
<iframe src="路径"></iframe>
属性：
1)src 引入框架的路径
2)frameborder 框架的边框
值： 1 默认 有边框
0 无边框
3)scrolling 框架的滚动条
值： yes 默认 有滚动条
no 无滚动条
4)width height 设置行内框架的大小
2.框架集 不能和body共用
<frameset cols="30%,400px,*">
<frame src="" />
<frame src="" />
<frame src="" />
.......
</frameset>
frameset的属性：
1）cols （列）或 rows（行） 值：数值 或 百分比 或 *（剩下所有）
2）frameborder 框架的边框
值： 1 默认 有边框
0 无边框
frame的属性：
1）src 引入框架的路径
2）scrolling 当前框架是否有滚动条
值： yes 默认 有滚动条
no 无滚动条
3）noresize 不能调整框架大小
十一.table表格
1.表格的基本结构
<table>
<tr>
<th>表格的标题</th> th默认字体加粗，水平、垂直方向都居中
<td>表格的单元格</td> td只默认垂直方向居中，水平方向居左
......
</tr>
......
</table>
table的属性：
1）border 边框
2）cellspacing 单元格与单元格之间的间隙
3）cellpadding 内容与单元格四周边框的距离
2.单元格的合并
1）列合并 colspan=”合并单元格的个数” 水平合并
2）行合并 rowspan=”合并单元格的个数” 垂直合并
十二.表单
<form action="' method="">
<input type="" name="" value="" />
</form>
1.form的属性：
action 行为 提交的路径（服务器地址）
method 方式 提交的方式
值：1.get 提交后，提交的内容会出现在地址栏里，安全性较低；提交的数据的大小有限制
2.post 提交后，提交的内容不会出现在地址栏里，安全性较get方式高；提交的数据大小无限制。
2.input的属性：
1）type 类型
值：
a) text 文本框
b) password 密码框
c) checkbox 复选框
d) radio 单选框 name必须保持一致
e) hidden 隐藏域
f) file 文件上传框
g) submit 提交按钮
h) reset 重置按钮
i) button 一般按钮
2）name 名字
3）value 值 初始值
label 是一个行内元素
复选框默认被选中 checked
<input type="checkbox" checked />
让按钮不可用,变灰 disabled
只读 readonly
点文字可以把复选框选中或取消：
<label>文字<input type="checkbox" /></label>
<label for="fav">文字</label><input type="checkbox" id="fav" />
单选框和复选框用法类似
4.文本域（多行文本框）
<textarea cols="" rows="" placeholder=”提醒文字”></textarea>
5.下拉选择框
<select>
<option value=""></option>
<option value=""></option>
.....
</select>
option默认被选中 selected
6.按钮
button放在form里面才有用
<button>提交按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">一般按钮</button>
注释
<!-- 注释语句 -->
其他
无自带样式的块级元素 <div></div>
无自带样式的行内元素 <span></span>
换行 <br />
水平线 <hr width="数字或百分比" align="left或right或center" /> align水平对齐方式
特殊字符：
空格    
大于号 >
小于号 <
版权 ©
块级元素 独占一行 能设置宽度和高度，行高，外边距，内边距等 display： block
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,hr,div,form,option
行内（内联）元素 能和其他元素在一行显示 不能设置宽度和高度 display:inline
b,strong,i,em,sub,sup,span,a,label
行内（内联）块级元素 能和其他元素在一行显示 能设置宽度和高度，行高，外边距，内边距等 display:inline-block
img,input,textarea,select,button
颜色样式：style="color:rgb(255,0,0);"
style="color:#f00;"
rgb: 十六进制:
r red (255,0,0) #f00
g green (0,255,0) #0f0
b blue (0,0,255) #00f
#000黑色
#fff白色
网友评论