HTML学习笔记
基本框架:特殊符号标签图像标签 ``超链接标签 ``列表、表格与框架无序列表 ```
```有序列表 `
`定义列表 `
`表格 `
`
内联框架 ``集合框架 ``表单表单元素标签 ` `多行文本域 ``下拉列表框 文件域
基本框架:
<html> ---文档标签
<head> ---头部标签
<title></title>---导航栏标题标签
</head>
<body> ---主体标签
</body>
特殊符号标签
< 小于号(“<”)
> 大于号(“>”)
" 引号
© 版权符号
<p></p> 段落标签
<hr/> 分割线标签
<br/> 换行标签
<b></b> 加粗标签
<s></s> 删除线标签
<u></u> 下划线标签
<sub></sub> 字体下标
<sup></sup> 字体上标
<em></em>或<i></i> 字体斜体标签
<small></small> 字体缩小标签
<h1></h1>-<h6></h6> 标题标签 (h1最大，h6最小)
图像标签 <img/>
超链接标签 <a></a>
/*link连接的颜色
alink正在点击的颜色
vlink已经访问的连接颜色 */
<body link="red" alink="yellow" vlink="green">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
</body>
锚链接创建步骤： 1、在乙位置做标记: <a name="名字">乙位置</a> 2、在甲位置跳转: 1.本页面跳转 <a href="名字">甲位置</a>, 从本页的甲位置跳转到本页中标记的乙位置 2.跨页面跳转 <a href="b页面.html#名字">甲位置</a> （B页面.html + #标记名）, 从a页面的甲位置跳转到b本页中标记的乙位置
列表、表格与框架
无序列表 <ul></ul>
<ul> ---声明无序列表
<li>橘子</li> ---声明无序列表项
</ul>
属性：
type=" "
值： "disc " 实心圆（默认值）
"circle" 空心圆
"square" 实体方心
"none " 无符号
内容编辑状态（适用于所有标签）
contentEditable="true" 可编辑
"false" 不可编辑（默认）
有序列表 <ol></ol>
<ol> ---声明有序列表
<li></li>--声明有序列表项
</ol>
属性：
type=" "
值： " 1 " 数字（默认值）
"a/A" 小写/大写字母
"i/I" 小写/大写罗马数字
start=" " 有序列表符号开始值（只能用数字，包含设置值）
内容编辑状态（适用于所有标签）
contentEditable="true" 可编辑
"false" 不可编辑（默认）
定义列表 <dl></dl>
<dl></dl> ---声明定义列表
<dt></dt> ---声明定义列表项
<dd></dd> ---定义列表项内容
表格 <table></table>
HTML 表格标签
标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<table></table> <caption></caption> <tr></tr> <td>&<th>
内联框架 <iframe></iframe>
属性： src =“引用页面.html” 引用地址 name="" 名字 frameborder="" 框架边框 （“0”无边框 “1”有边框【默认】） scrolling="" 是否有滚动条 （“yes”有【默认】 “no”无 “auto”自动） noresize="" 禁止调整框架窗口大小 width="" 框架宽度 height="" 框架高度
代码结构：
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</head>
<body>
<iframe src="index.html" name="iframe_a" frameborder="0"></iframe>
/*因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，
所以在点击链接时页面会显示在 iframe框架中。*/
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
</body>
</html>
集合框架 <frameset></frameset>
框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果
<head>
<title>框架</title>
<meta charset="utf-8">
</head>
<frameset rows="190px,*,190px">
<frame>
<frameset cols="20%,80%">
<frame>
<frame>
</frameset>
<frame>
</frameset>
</html>
表单
表单元素标签 <input type="表单元素"/>
**表单元素**:
"text" 文本框
"password" 密码框
"submit" 提交按钮
"reset" 重置按钮
"radio" 单选按钮 (注:名字相同为一组，一组只能选择一个)
"checkbox" 多选按钮
"file" 文件域 （配合form表单中的enctype文件域编码属性使用）
"image" 图片提交按钮
"button" 普通按钮
"hidden" 隐藏域
**表单元素类型标签属性:**
name="name" ---元素标示名字
value="" ---元素初始值
size="21" ---初始宽度 （默认“20”像素）
maxlength="16" ---输入的最大字符数
checked="checked" ---按钮默认被选中 （注：也适用于多选按钮）
autofocus="autofocus" ---让元素在页面打开时自动获取焦点
placeholder="请输入账号" ---对用户输入进行提示
readonly="readonly" ---只读
disabled="disabled" ---禁用
点击内容按钮或文本框被选中：
<input type="text" id="bj"> ---标记
<label for="bj"></label>---点击内容按钮被选中(id不能重复)
好处：
1.增强鼠标可用性。
2.自动将焦点转移到与该标注相关的表单元素上。
多行文本域 <textarea></textarea>
下拉列表框
文件域
<form enctype="multipart/form-data">
<input type="file" name="" value=""/>
</form>
