1、HTML知识点总结
2016-03-10 11:15
615 查看
HTML
基本组成
所有标签必须成对出现
开始标签<html></html>结束标签
头部标签<head></head>
<title></title>页面标签
内容标签<body></body>
<!--注释内容-->注释
body的属性：
bgcolor 页面背景色
text 文字颜色
topmargin 上页边距
leftmargin 左页边距
rightmargin 右页边距
bottomargin 下页边距
background 背景壁纸
一般标签
1.1格式控制标签
<font></font>控制字体、大小;
<b></b>字体加粗；<i></i>倾斜；<u></u>下划线；
<center></center>居中；<br>或</br>相当于回车
表示空格;
1.1.2内容容器标签
<h1></h1>...<h6></h6>标题(会自动换行)
<p></p>段落标签
<span></span>层标签（默认用多少空间，占多少空间）；<div></div>(默认占一行)
<ol><li>内容</li><li>内容</li></ol>表示有序列表；
<ul><li>内容</li><li>内容</li></ul>表示无序列表；
相对路径；绝对路径
1.2、常用标签
超链接标签：<a href="超链接地址" target=“-blank”>超链接的文字</a>
制作锚点：<a name=""></a>做锚点的标签；
<a href="目标链接的name的值"></a>做锚点的链接
图片标签
<img src="图片地址" alt="显示的文字" with="" height=""/>
1.3.1、表格
<table></table>表格；
属性：
width;border:边框；cellpadding 内容跟边框的边距；
cellspacing：单元格间的间距；align：对齐方式；
bgcolor：背景色；background:背景图片
<tr></tr>行;<td></td>单元格；<th></th>表头
单元格合并：
colspan="n"(合并同一行)
rowspan="n"(合并同一列)
1.3.2、表单<form>
形式：<form id="" name=""></form>
1、文本输入
文本框<input type="text" name="" id="" value=""/>
密码框<input type="password" name="" id="" value=""/>
文本域<textarea name="" id="" cols="" rows=""></textarea>
隐藏域<input type="hidden" name="" id="" value=""/>
2、按钮
提交按钮
<input type="submit" name="" id="" disabled="disabled" value=""/>
重置按钮
<input type="reset" name="" id="" disabled="disabled" value=""/>
普通按钮
<input type="button" name="" id="" disabled="disabled" value=""/>
图片按钮
<input type="image" name="" id="" disabled="disabled" src="图片地址"/>
使按钮失效
3、选择输入
单选按钮组
<input type="redio" name="" checked="checked" value=""/>
复选框组
<input type="checkbox" name="" checked="checked" value=""/>
文件上传
<input type="file" name="" id=""/>
<lable for=""><lable/>为input元素定义标注。
下拉列表框
<select name="" id="" size="" multiple="multiple"> <option value="值">内容1</option><option value="值">内容2</option>...</select>
JavaScript简介
1、它是什么？
它是脚本语言，宿主文件为HTML。
3、它的用法
位置分三块，最好写在</html>之后。
<script language="javascript">代码必须放在这里面</script>
4、三个常用对话框
alert("")警告对话框
confirm("")确定对话框
子主题 1
prompt("要显示的文字")弹出可以输入内容的对话框
2、它与Java有什么关系
它是微软的
2、CSS样式表(层叠样式表)
1、内联样式表
<p style="font-size:14px"></p>
3、外部样式表
点右键-css样式-附加样式表。一般用link连接方式
<style type="text/css">*{ margin:0px;padding:0px;}</style>
2、内嵌样式表
<style type="text/css">p{ 样式}</style>
作为一个独立区域内嵌在网页里，必须写在head标签里
2.1.2、选择器
1、标签选择器
2、class选择器。都是"."开头
3、ID选择器。以"#"开头
4、复合选择器
a、用","隔开，表示并列。
b、用空格隔开，表示后代
c、筛选"."
2.2样式属性
2.2.1、背景与前景
background-...
2.2.2、边界和边框
border,margin,padding
2.2.3、列表与方块
width,height;list-style-...
2.2.4、格式与布局
1、position:fixed 锁定位置(相对于浏览器)
2、position：absolute a-外层没有，b-外层有
3、position：relative 相对于默认位置的移动
4、z-index分层(像摞纸)
5、float：left，right
overflow：hidden ；超出部分隐藏
超链接样式
半透明效果
1.4、框架
1、frameset 最外城的去掉body用frameset
子主题 1
2、iframe 在原来页面嵌入小窗口显示其他页面
<iframe src="其他页面地址"></iframe>
2、JavaScript语法
1、基本数据类型
2、变量：用var定义
3、类型转换:自动和强制，一般用强转
如:parseint();parsefloat();isNaN()数字是否合法；
4、运算符；5、语句；6、数组；7、函数
3、JavaScript的DOM操作
Windows对象操作
Windows.open
1、写页面地址2、-blank打开的方式
3、控制打开的窗口格式
toolbar=no无工具条
menubar=no无菜单栏，status=no无状态栏
resizable=no窗口大小不可调
Windows.close：关闭当前窗口
关闭多个子窗口
四、间隔与延迟
间隔执行一段代码；清除间隔执行
延迟一段时间执行一段代码
window.setTimeout("要执行的代码"，延迟的毫秒数)
五页面调整；模态和非模态对话框；windows.history对象；window.location对象;
5、window.status
6、window.document对象
docunent.getEelmentById=("id")最多找一个
根据name找，找出来的是数组；
根据classname找，找出来的是数组；
二、操作内容
1、非表单元素2、表单元素
三、操作属性
四、操作样式
如：图片轮播
第4部分、表单验证和事件
1、表单验证
举例：电话号码、身份证、邮箱等需要要验证
2、正则表达式
3、事件
鼠标单击触发onclick;双击ondblclick;
鼠标移到上面、离开时的触发...
基本组成
所有标签必须成对出现
开始标签<html></html>结束标签
头部标签<head></head>
<title></title>页面标签
内容标签<body></body>
<!--注释内容-->注释
body的属性：
bgcolor 页面背景色
text 文字颜色
topmargin 上页边距
leftmargin 左页边距
rightmargin 右页边距
bottomargin 下页边距
background 背景壁纸
一般标签
1.1格式控制标签
<font></font>控制字体、大小;
<b></b>字体加粗；<i></i>倾斜；<u></u>下划线；
<center></center>居中；<br>或</br>相当于回车
表示空格;
1.1.2内容容器标签
<h1></h1>...<h6></h6>标题(会自动换行)
<p></p>段落标签
<span></span>层标签（默认用多少空间，占多少空间）；<div></div>(默认占一行)
<ol><li>内容</li><li>内容</li></ol>表示有序列表；
<ul><li>内容</li><li>内容</li></ul>表示无序列表；
相对路径；绝对路径
1.2、常用标签
超链接标签：<a href="超链接地址" target=“-blank”>超链接的文字</a>
制作锚点：<a name=""></a>做锚点的标签；
<a href="目标链接的name的值"></a>做锚点的链接
图片标签
<img src="图片地址" alt="显示的文字" with="" height=""/>
1.3.1、表格
<table></table>表格；
属性：
width;border:边框；cellpadding 内容跟边框的边距；
cellspacing：单元格间的间距；align：对齐方式；
bgcolor：背景色；background:背景图片
<tr></tr>行;<td></td>单元格；<th></th>表头
单元格合并：
colspan="n"(合并同一行)
rowspan="n"(合并同一列)
1.3.2、表单<form>
形式：<form id="" name=""></form>
1、文本输入
文本框<input type="text" name="" id="" value=""/>
密码框<input type="password" name="" id="" value=""/>
文本域<textarea name="" id="" cols="" rows=""></textarea>
隐藏域<input type="hidden" name="" id="" value=""/>
2、按钮
提交按钮
<input type="submit" name="" id="" disabled="disabled" value=""/>
重置按钮
<input type="reset" name="" id="" disabled="disabled" value=""/>
普通按钮
<input type="button" name="" id="" disabled="disabled" value=""/>
图片按钮
<input type="image" name="" id="" disabled="disabled" src="图片地址"/>
使按钮失效
3、选择输入
单选按钮组
<input type="redio" name="" checked="checked" value=""/>
复选框组
<input type="checkbox" name="" checked="checked" value=""/>
文件上传
<input type="file" name="" id=""/>
<lable for=""><lable/>为input元素定义标注。
下拉列表框
<select name="" id="" size="" multiple="multiple"> <option value="值">内容1</option><option value="值">内容2</option>...</select>
JavaScript简介
1、它是什么？
它是脚本语言，宿主文件为HTML。
3、它的用法
位置分三块，最好写在</html>之后。
<script language="javascript">代码必须放在这里面</script>
4、三个常用对话框
alert("")警告对话框
confirm("")确定对话框
子主题 1
prompt("要显示的文字")弹出可以输入内容的对话框
2、它与Java有什么关系
它是微软的
2、CSS样式表(层叠样式表)
1、内联样式表
<p style="font-size:14px"></p>
3、外部样式表
点右键-css样式-附加样式表。一般用link连接方式
<style type="text/css">*{ margin:0px;padding:0px;}</style>
2、内嵌样式表
<style type="text/css">p{ 样式}</style>
作为一个独立区域内嵌在网页里，必须写在head标签里
2.1.2、选择器
1、标签选择器
2、class选择器。都是"."开头
3、ID选择器。以"#"开头
4、复合选择器
a、用","隔开，表示并列。
b、用空格隔开，表示后代
c、筛选"."
2.2样式属性
2.2.1、背景与前景
background-...
2.2.2、边界和边框
border,margin,padding
2.2.3、列表与方块
width,height;list-style-...
2.2.4、格式与布局
1、position:fixed 锁定位置(相对于浏览器)
2、position：absolute a-外层没有，b-外层有
3、position：relative 相对于默认位置的移动
4、z-index分层(像摞纸)
5、float：left，right
overflow：hidden ；超出部分隐藏
超链接样式
半透明效果
1.4、框架
1、frameset 最外城的去掉body用frameset
子主题 1
2、iframe 在原来页面嵌入小窗口显示其他页面
<iframe src="其他页面地址"></iframe>
2、JavaScript语法
1、基本数据类型
2、变量：用var定义
3、类型转换:自动和强制，一般用强转
如:parseint();parsefloat();isNaN()数字是否合法；
4、运算符；5、语句；6、数组；7、函数
3、JavaScript的DOM操作
Windows对象操作
Windows.open
1、写页面地址2、-blank打开的方式
3、控制打开的窗口格式
toolbar=no无工具条
menubar=no无菜单栏，status=no无状态栏
resizable=no窗口大小不可调
Windows.close：关闭当前窗口
关闭多个子窗口
四、间隔与延迟
间隔执行一段代码；清除间隔执行
延迟一段时间执行一段代码
window.setTimeout("要执行的代码"，延迟的毫秒数)
五页面调整；模态和非模态对话框；windows.history对象；window.location对象;
5、window.status
6、window.document对象
docunent.getEelmentById=("id")最多找一个
根据name找，找出来的是数组；
根据classname找，找出来的是数组；
二、操作内容
1、非表单元素2、表单元素
三、操作属性
四、操作样式
如：图片轮播
第4部分、表单验证和事件
1、表单验证
举例：电话号码、身份证、邮箱等需要要验证
2、正则表达式
3、事件
鼠标单击触发onclick;双击ondblclick;
鼠标移到上面、离开时的触发...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Html.DropDownList（）赋默认值
- HTML name、id、class 的区别
- HTML 讲师笔记--第三次试讲
- 开发规范2：HTML
- 2016.3.8__HTML 基础_第二天
- 2016.3.7__HTML 基础_第一天
- 从EditText设置setError不能显示提示文本说说Html的fromHtml用法
- 插入透明背景Flash的HTML代码
- html包含html文件的方法
- Html学习笔记(3)-Html标签(2)
- Html学习笔记(4)-Html标签(3)
- Html学习笔记(5)-Html标签(4)
- Html学习笔记(6)-与浏览者交互，表单标签
- Html学习笔记(1)-Html初步
- IntelliJ-Idea工具的常用快捷键和在html里的常用快捷键
- 移动html特殊链接：打电话，发短信，发邮件
- html表单标签
- To remove HTML markup, use BeautifulSoup's get_text() function解决方案
- HTML编码
- html-琐碎知识点1