干货系列,html基础日记!
2017-03-11 08:54
232 查看
一. 分帧标签
iframe: 一个网页包含另外一个网页(浏览器中的浏览器)
src: 跳转的路径
width: 指定小框架的宽度
height: 指定小框架的高度
scrolling: 滚动条 值为no/yes/auto,如果大于iframe,有滚动条.如果小于iframe,没有滚动条
frameborder: 框架的边框
name: 给框架起名字.
frameset: 把一个窗口分为多个小窗口,来显示不同的网页
[注]有frameset就不能有body标签
rows: 设置多少行
cols: 设置多少列
border: 边框
frameborder: 有无边框 0表示无边框 1表示有边框
bordercolor: 边框颜色
noresize: 不设置窗口大小,不可以拖动 默认可以设置
frame: 用来显示每一个小窗口的内容
src: 跳转的路径
scrolling: 有无滚动条 no/yes/auto
name: 就是给小窗口起名字,用来点击时,跳转的链接
noframes: 不支持frameset框架的浏览器来显示内容
二. 表单(重要)
输入框: <input /> 单边标签:
size: 存放字体的宽度
value: 输入框默认的值,光标放上去显示在最后边
placeholder: 输入框默认的值, 输入框颜色变灰, 光标放上去显示在最前边 输入内容时,默认值消失
readonly: 表示只能读,不能写
disabled: 占位符, 只能读不能写, 输入框变灰
maxlength: 能显示的最大字符长度
type: 值有很多种
text: 文本 默认不写也是文本类型
password: 密文
submit: 提交按钮
button: 按钮,后边结合js使用
radio: 单选框
[注] 1.name值必须一致
2.所有的单选框都必须给一个value
3.默认选中使用checked
checkbox: 复选框
[注] 1.nane值必须一致 love[]
2.所有的复选框都必须有value
file: 上传文件
hidden: 隐藏 应用: 提交用户信息时,需要通过唯一确定id来确定用户信息
name: 给输入框起名字
表单: <form></form> [注] 所有要提交的内容都必须放到form表单中
action: 要提交的方式---跳转的文件 一般都是提交到php文件中.
method: 提交方法 get post
get: 默认的传参方式
post: 一般把数据提交到后台某个文件中
target: 打开目标地址的方式 _self _blank
enctype: 编码类型
只有在上传文件时才使用 enctype="multipart/form-data"
label: 专门为单选框中的点击文本时,做一个默认选中的操作
for 只有for的值与单选框中id的值一致,才有效果吧
下拉框: <select></select>
size: 下拉框中显示内容的长度
name: 起名字
multiple: 多选
<option></option>
value:给内容设置默认的值
selected: 默认选中
文本域: <textarea></textarea>
cols 设置多少列
rows: 设置有多少行
按钮: <button></button> [注] button的效果跟input框中type的属性值submit一致
三. 头标签
不显示在浏览器中
所有的内容都放在head标签中
标题: <title></title>
link: 结合css文件使用
<link rel="stylesheet" type="text/css" href="路径" />
SEO优化: <meta name="keywords" content=" " />
<meta name="description" content=" " />
自动跳转: <meta http-equiv="refresh" content="4;url=http://www.baidu.com" />
字符编码: <meta charset="utf-8" />
四. 无意义标签
div/span/footer/header/section(部分,局部)
div: 块标签
span: 行标签
五. DTD文档类型定义
H5标准: <!DOCTYPE html>
附录:一些例子!
1.iframe用法例子:
<html>
<head>
<meta charset="utf-8" />
<title>iframe框架</title>
</head>
<body>
<a href="http://www.163.com" target="change" >去网易</a><br />
<iframe src="http://www.baidu.com" width="500" height="300" frameborder="0" scrolling="no" name="change" ></iframe>
</body>
</html>
2.frameset分框架
<html>
<head>
<title>frameset</title>
<meta charset="utf-8" />
</head>
<frameset rows="200,*" border="10" bordercolor="yellow" frameborder="1">
<frame src="http://www.baidu.com" />
<frameset cols="20%,*">
<frame src="http://www.163.com" />
<frame src="http://www.sohu.com" />
</frameset>
</frameset>
<noframes>
<body>不支持的浏览器显示这里的内容</body>
</noframes>
</html>
3.input用法例子
<html>
<head>
<title>输入框</title>
<meta charset="utf-8" />
</head>
<body>
<input type="password" size="10" placeholder="请输入用户名" maxlength="6" /><br />
<input type="submit" value="立即注册" />
</body>
</html>
4.form表单<重要>例子
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="4;url=http://www.baidu.com" />
</head>
<body>
<form action="" method="get" >
<input type="hidden" name="id" value="34" />
用户名: <input type="text" placeholder="请输入用户名" name="username" /><br />
密码: <input type="password" name="password" /><br />
性别: <input type="radio" name="sex" value="0" id="nan" />
<label for="nan" >男</label>
<input type="radio" name="sex" value="1" checked id="nv" />
<label for="nv">女</label><br />
爱好: <input type="checkbox" name="love[]" value="sing" />唱歌
<input type="checkbox" name="love[]" value="dance" />跳舞
<input type="checkbox" name="love[]" value="draw" />画画
<input type="checkbox" name="love[]" value="dadoudou" checked />打豆豆<br />
头像: <input type="file" name="file" /><br />
籍贯: <select name="jg" size="3" multiple>
<option value="beijing">北京</option>
<option value="shanxi">陕西</option>
<option value="hebei">河北</option>
<option value="henan">河南</option>
<option value="shandong" selected>山东</option>
</select><br />
备注: <textarea cols="20" rows="10"></textarea><br />
<input type="submit" value="立即注册" /><br />
<input type="button" value="按钮" /><br />
<button>提交</button>
</form>
</body>
</html>
希望能和大家一块交流!
iframe: 一个网页包含另外一个网页(浏览器中的浏览器)
src: 跳转的路径
width: 指定小框架的宽度
height: 指定小框架的高度
scrolling: 滚动条 值为no/yes/auto,如果大于iframe,有滚动条.如果小于iframe,没有滚动条
frameborder: 框架的边框
name: 给框架起名字.
frameset: 把一个窗口分为多个小窗口,来显示不同的网页
[注]有frameset就不能有body标签
rows: 设置多少行
cols: 设置多少列
border: 边框
frameborder: 有无边框 0表示无边框 1表示有边框
bordercolor: 边框颜色
noresize: 不设置窗口大小,不可以拖动 默认可以设置
frame: 用来显示每一个小窗口的内容
src: 跳转的路径
scrolling: 有无滚动条 no/yes/auto
name: 就是给小窗口起名字,用来点击时,跳转的链接
noframes: 不支持frameset框架的浏览器来显示内容
二. 表单(重要)
输入框: <input /> 单边标签:
size: 存放字体的宽度
value: 输入框默认的值,光标放上去显示在最后边
placeholder: 输入框默认的值, 输入框颜色变灰, 光标放上去显示在最前边 输入内容时,默认值消失
readonly: 表示只能读,不能写
disabled: 占位符, 只能读不能写, 输入框变灰
maxlength: 能显示的最大字符长度
type: 值有很多种
text: 文本 默认不写也是文本类型
password: 密文
submit: 提交按钮
button: 按钮,后边结合js使用
radio: 单选框
[注] 1.name值必须一致
2.所有的单选框都必须给一个value
3.默认选中使用checked
checkbox: 复选框
[注] 1.nane值必须一致 love[]
2.所有的复选框都必须有value
file: 上传文件
hidden: 隐藏 应用: 提交用户信息时,需要通过唯一确定id来确定用户信息
name: 给输入框起名字
表单: <form></form> [注] 所有要提交的内容都必须放到form表单中
action: 要提交的方式---跳转的文件 一般都是提交到php文件中.
method: 提交方法 get post
get: 默认的传参方式
post: 一般把数据提交到后台某个文件中
target: 打开目标地址的方式 _self _blank
enctype: 编码类型
只有在上传文件时才使用 enctype="multipart/form-data"
label: 专门为单选框中的点击文本时,做一个默认选中的操作
for 只有for的值与单选框中id的值一致,才有效果吧
下拉框: <select></select>
size: 下拉框中显示内容的长度
name: 起名字
multiple: 多选
<option></option>
value:给内容设置默认的值
selected: 默认选中
文本域: <textarea></textarea>
cols 设置多少列
rows: 设置有多少行
按钮: <button></button> [注] button的效果跟input框中type的属性值submit一致
三. 头标签
不显示在浏览器中
所有的内容都放在head标签中
标题: <title></title>
link: 结合css文件使用
<link rel="stylesheet" type="text/css" href="路径" />
SEO优化: <meta name="keywords" content=" " />
<meta name="description" content=" " />
自动跳转: <meta http-equiv="refresh" content="4;url=http://www.baidu.com" />
字符编码: <meta charset="utf-8" />
四. 无意义标签
div/span/footer/header/section(部分,局部)
div: 块标签
span: 行标签
五. DTD文档类型定义
H5标准: <!DOCTYPE html>
附录:一些例子!
1.iframe用法例子:
<html>
<head>
<meta charset="utf-8" />
<title>iframe框架</title>
</head>
<body>
<a href="http://www.163.com" target="change" >去网易</a><br />
<iframe src="http://www.baidu.com" width="500" height="300" frameborder="0" scrolling="no" name="change" ></iframe>
</body>
</html>
2.frameset分框架
<html>
<head>
<title>frameset</title>
<meta charset="utf-8" />
</head>
<frameset rows="200,*" border="10" bordercolor="yellow" frameborder="1">
<frame src="http://www.baidu.com" />
<frameset cols="20%,*">
<frame src="http://www.163.com" />
<frame src="http://www.sohu.com" />
</frameset>
</frameset>
<noframes>
<body>不支持的浏览器显示这里的内容</body>
</noframes>
</html>
3.input用法例子
<html>
<head>
<title>输入框</title>
<meta charset="utf-8" />
</head>
<body>
<input type="password" size="10" placeholder="请输入用户名" maxlength="6" /><br />
<input type="submit" value="立即注册" />
</body>
</html>
4.form表单<重要>例子
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="4;url=http://www.baidu.com" />
</head>
<body>
<form action="" method="get" >
<input type="hidden" name="id" value="34" />
用户名: <input type="text" placeholder="请输入用户名" name="username" /><br />
密码: <input type="password" name="password" /><br />
性别: <input type="radio" name="sex" value="0" id="nan" />
<label for="nan" >男</label>
<input type="radio" name="sex" value="1" checked id="nv" />
<label for="nv">女</label><br />
爱好: <input type="checkbox" name="love[]" value="sing" />唱歌
<input type="checkbox" name="love[]" value="dance" />跳舞
<input type="checkbox" name="love[]" value="draw" />画画
<input type="checkbox" name="love[]" value="dadoudou" checked />打豆豆<br />
头像: <input type="file" name="file" /><br />
籍贯: <select name="jg" size="3" multiple>
<option value="beijing">北京</option>
<option value="shanxi">陕西</option>
<option value="hebei">河北</option>
<option value="henan">河南</option>
<option value="shandong" selected>山东</option>
</select><br />
备注: <textarea cols="20" rows="10"></textarea><br />
<input type="submit" value="立即注册" /><br />
<input type="button" value="按钮" /><br />
<button>提交</button>
</form>
</body>
</html>
希望能和大家一块交流!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML干货系列!html基础日记!
- HTML学习日记（1-基础）
- [HTML基础系列]目录导航
- 4 HTML&JS等前端知识系列之Dom的基础
- HTML系列之基础标签(一)
- 机器视觉系列—— Vision 基础知识上集 http://bbs.elecfans.com/jishu_466819_1_1.html (出处: 中国电子技术论坛)
- Java多线程干货系列—（一）Java多线程基础
- 码农干货系列【9】--javascript光线追踪基础
- 前端系列之HTML基础知识概述
- Java多线程干货系列—（一）Java多线程基础
- html基础知识点系列1--常见元素及其语义用法
- HTML+CSS纯干货就业前基础到精通系统学习2016/9/3
- AxureRP7.0基础教程系列 部件详解 HTML Button HTML按钮
- Java多线程干货系列（1）：Java多线程基础
- Web基础系列一、Html(网页结构)
- Java基础与提高干货系列——Java反射机制
- HTML的一些基础知识（干货）(一）
- html5基础学习日记0_HTML新建、图片、特殊字符代码、标签
- [转]Java多线程干货系列—（一）Java多线程基础
- Java多线程干货系列（1）：Java多线程基础