本文档详细介绍了HTML的基础知识，包括文档结构、常用块级标签、行级标签、表单元素、框架集、表格、多媒体等内容。
学习资料：网易云课堂-Web前端开发｜Html/CSS/Javascript
地址：http://study.163.com/course/courseMain.htm?courseId=1002905013#/courseDetail?tab=1
第一课 结构
<!doctype html>
<html>
<head>
<title>自学真他妈难啊！</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8"/>
<meta name="keywords" content="html学习,好好学习"/>
<meta name="description" content="在网易云课堂内开始学习..."/>
</head>
<body>
好好学习html！坚持下去！
</body>
</html>
--------------------------------------------------
第二课 常用块级标签
标题标签 <h1></h1> ... <h6></h6> #共6级每一级字体大小不同，按级划分内容层级。
段落标签 <p></p> #每个段落标签会使用一行来显示。
水平线标签 <hr/> #在改行显示一条水平线。
有序列表标签 <ol><li>...</li></ol> #按序列排序每一个<li></li>内容。
无序列表标签 <ul><li>...</li></ul> #按相同图标排序每一个<li></li>内容。
定义列表标签 <dl><dt><dd>...</dd></dt></dl> #<dt>中添加标题<dd>中添加该标题形容，可描述多行。
分区标签 <div></div> #对网页进行整体分块，用id=""可给该区块命名。
--------------------------------------------------
第三课 常用的行级标签
<b> #粗体
<i> #斜体
<em> #强调，效果与斜体相同
<strong> #粗体，与b标签效果相同
<small> #小号字体
<sub> #定义下标
<sup> #定义上标
<bdo> #定义文本显示方向，内有dir=""属性，取值ltr或rtl
超链接标签 <a href="地址" target="目标窗口">链接文本、地址、图片等</a>
# href 指定超链接所关联的资源
# target 指定指定框架集张总哪个框架来装在关联资源，该属性可以是_self（自身）、_blank（新窗口）、_top（顶层框架）、_parent（父框架）。
图像标签 <img src="图片地址" alt="提示文字"> #src为图片路径，alt当图片无法显示时添加备注。
<span>标签 <span>...</span> #对文本内行中指定元素进行定义。
换行标签 <br/> #行距比<p>标签要小。
常用特殊符合 空格 -- 大于号 -- > 小于号 -- < 引号 -- " 版本号 -- ©
--------------------------------------------------
第四课 frameset框架集
<frameset cols="20%,50%,*" rows="50%,*" border="5" noresize="noresize"> #cols纵向（列）分割，rows横向（行）分割，border边框厚度，noresize可拒绝浏览器中框架的滑动。
<frame src="top.html" name="该页面名字"/> #以上面cols分割为例此处应该分为三个页面。
...
</frameset> #该标签不能与<body>标签同时出现，除非将<body>中添加至<noframes></noframes>标签中，用于显示当浏览器不支持<frameset>框架集的文字注释。
--------------------------------------------------
第五课 iframe内嵌框架
<iframe>标签常用属性
frameborder="0" # 规定是否显示框架边框。（0或1）
name="frame_name" # 指定该页面名称。
scrolling="yes" # 规定是否显示滚动条。（yes,no,auto）
src="url" # 指定显示文档的url。
width="100%" # 框架高度比例。（也可使用px像素）
height="400px" # 框架宽度像素。（也可使用%。）
<iframe>语法
<body>
<iframe src="url" name="名称" frameborder="是否显示边框" scrolling="是否显示滚动条">
</iframe>
</body>
--------------------------------------------------
第六课 表格标签
表格相关元素
<table>...</table> #定义表格。
# 表格的一些属性：width（宽）,height（高）,border（边框厚度）,bgcolor（背景颜色）,cellspacing（外边框间隔长度）,cellpadding（内边框间隔长度）,align（对其方式，left，right，center）等，不推荐在这里设置属性，大多用CSS设定。
<caption>...</caption> #定义表格标题。
<tr>...</tr> #定义表格行，该元素只能包含<td><th>两种元素。
<td>...</td> #定义单元格，两个主要属性：colspan=""（指定跨多少列）rowspan=""（指定跨多少行）。
<th>...</th> #定义表格页眉单元格。
<tbody>...</tbody> #定义表格主体。
<thead>...</thead> #定义表格头。
<tfoot>...</tfoot> #定义表格脚。
--------------------------------------------------
第七课 form标签及常见表单元素
语法：
<form action="表单提交的地址" method="提交方式">
...文本框，按钮等表单元素...
</form>
常用属性：
action # 指定表单提交后服务器哪个处理程序进行表单处理。
enctpye # 用于指定表单数据编码方式
· application/x-ww-form-urlencoded:默认编码方式，将表单控件中值处理成URL编码方式。
· mutipart/form-data:以二进制流方式处理表单数据。
· text/plain:当表单的action属性为mailto:URL的形式时使用。（多用于发邮件）
method # 指定向服务器提交的方式一般为get和post两种方式。
· get方式请求会将请求参数的名和值转化成字符串附加在原URL之后，因此可在地址栏中看到请求参数的名和值。切get船速的数据量较小，一般不能大于2KB。（地址栏会出现用户名或密码，不安全，一般表单不用get请求。）
· post方式的请求传送数据量较大，通常可认为不受限制，往往取决于服务器的限制。post方式请求参数是房在HTML的HEADER中传输，用户在地址栏看不到请求参数，安全性高。
--------------------------------------------------
第八课 常见表单元素
input 元素
<input.../> # type类型
· 单行文本框： text
· 密码输入框： password
· 隐藏域： hidden
· 单选框： radio
· 复选框： checkbox
· 图像域： image 如指定此类型即可指定width和height属性。
· 文件上传域： file
· 提交、重置、普通按钮： submit、reset、button。
input 常用属性
name 为该属性命名，同一属性内命名相同，如单选复选按钮。
id 为该属性指定唯一的id名，可与该属性name命名相同。
cheacked="checked" 设置单选、复选框初始状态是否处于选中状态，当type属性为checkbox或radio时可指定。
disabled="disabled" 设置首次 加载时禁用此元素。
maxlength 该属性是一个数字，指定文本框允许输入的最大字符数。
readonly="readonly" 指定该文本框内不润徐修改（可以用JavaScript脚本修改）。
size 该属性是一个数字，指定该元素长度（如文本框长度）。
src 指定图像域所显示的图像URL，type为image时可使用。
value · 当type选项为复选CheckBox时，该值被提交至服务器，如用1,2,3区分复选内容或输入id相同内容。
· 当type选项为按钮submit、reset、button时，该值为按钮上显示的内容。
button 元素
<button type="类型">
普通文本、格式化文本、图像
</button>
button 常用属性
type 指定该按钮类型，有button、reset、submit。
name 为该属性命名，同一属性内命名相同，如单选复选按钮。
disabled="disabled" 设置首次 加载时禁用此元素。
总结：button按钮与input按钮相比，提供了更强大和丰富的内容。
<label for="需关联元素的ID">...</label> # 可通过for属性绑定另一元素，通过鼠标点击将焦点转移至相关联的表单控件上，增强用户体验。
列表框和下拉菜单 表单元素
<select name="指定列表名称" size="行数">
<option> value="选项值" selected="selected">...</option>
...
</select>
注释：下拉菜单和列表菜单区别在于没有size选项。
列表框和下拉菜单 常用属性
disabled 指定是否禁用此元素，该属性只能为disabled或空。
multiple="multiple" 设置该列表可是否允许多选。
size 指定该列表框内同时显示多少列表项。
<select>...</select>中包含如下两个子元素：
<option>...<option> 定义每个列表框或菜单项，属性如下：
· disabled 禁用该选项。
· selected 指定初始状态是否被选中。
· value 指定该选项对应的请求参数值。
<optgroup>...</optgroup> 定义列表项分组或菜单项分组，属性如下：
· lable 指定该选项组的标签，必填。
· disabled 禁用该选项组所有选项。
多行文本框 表单元素
<textarea name="..." cols="列宽" rows="行宽">
文本内容...
</textarea>
多行文本框 属性
cols：指定文本框宽度，必填。
rows：指定文本框高度，必填。
readonly：是否为只读模式。
第九课 多媒体
<embed>播放音频
<embed src="xxx.mp3" width="200" height="200" autostart="true" loop="true">
</embed>
<embed>播放flash视频
<embed sr="xxx.swf" width="200" height="200" loop="true" quality="high"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
属性
· src 指定播放文件
· width、height 设置播放器宽和高
· autostart 是否自动播放
· loop 是否循环
· quality 播放质量
· PLUGINSPAGE 如浏览器没有播放插件会自动从该属性指定的地址下载插件。
<object>标签
作用：可使用该标签给浏览器加载插件，来实现播放音频和视频。（该标签兼容性不好，微软发明IE支持）
<objcet>播放音频
<object data="xxx.mp3">
<param name="src" value="xxx.mp3">
<param name="autoplay" value="true">
</object>
<object>播放视频
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="300"
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0">
<param name="movie" value="xxx.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
</object>
属性
· data 指定播放文件
· classid 设置浏览器activeX控件的ID号
· codebase 类似<embed>中的PLUGINSPAGE，无插件会从此位置下载。
备注：因为<object>兼容差，所以如需实现可将<embed>嵌入到<object>中来实现。
扫一扫
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
