HTML笔记
单标记 ---------- <br/> <hr/> <img/> <input/> <meta/> <link/> 元素是用标记来表现的,一般起始标记表示元素的开始,结束标记表示元素的结束。把标记和标记之间的内容组合称为元素。标记相同而标记中对应的内容不同应视为不同的元素,同一网页中标记和标记内容都相同的元素如果出现两次也应视为不同的元素。 行内元素和块级元素 -------------------- 行内元素(inline)是指元素与元素之间从左到右并排排列,只有当浏览器窗口容纳不下才会转到下一行,块级元素(block)是指每个元素占据浏览器一整行位置,块级元素与块级元素之间自动换行,从上到下排列。 文本格式标记 ------------- 1.文本排版 2. 3. 文本排版 -------- 1.直接写文本 放在如下标记中:<div>...</div> <td>...</td> <body>...</body> <li>..</li> 2.用段落标记<p></p>格式化文本,各段落文本分行显示 3.用标题标记<hn></hn> 4.用预格式化标记<pre>…</pre>该标记中的文本内容将按原来的代码中的格式显示,保留所有空格、换行和定位符。如不使用该标记,文本中的空格等在浏览时是不显示的。 5.跑马灯<marquee>标记,一个特殊的文本标记,能使其中的文本在浏览器屏幕上不断滚动。 其中behavior=“alternate”设置滚动方式为来回滚动,设置为scroll表示循环滚动,设置为slide表示滚动到目的地就停止。direction属性用于控制滚动的方向,可以上下滚动或左右滚动。loop设置滚动的次数,loop为0表示不断滚动。scrollamount属性设置滚动的速度,scrolldelay属性设置两次滚动间的间隔时间。 文本换行 -------- 1.<br/> 2.强制不换行<nobr></nobr> 3.水平线标记<hr/> 文本中的特殊字符 ---------------- 原符号 代替字符 空格 < < > > +- ± 除 ÷ 文本修饰标记 ------------ 1.<font>标记 face(字体), size, color 2.<b></b>加粗, <i></i>倾斜>, <u></u>下划线, <em></em>倾斜, <strong></strong>加粗 3. 标题标记和段落标记有一个常用属性:align,可设置该标记元素的内容在元素占据的一行空间内的对齐方式(左对齐left、右对齐right、或居中对齐center) 列表标记 ------------------- 1.无序列表 2.有序列表 3.定义列表 无序列表 ----------- unordered list 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表始于 <ul >标签,每个列表项始于 <li >。 列表之间还可以进行嵌套,定义列表的列表项内部可以使用段落、换行符、图片、链接等。(<a href="">为超链接) 有序列表 --------- ordered list 有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol>标签。每个列表项始于 <li> 标签。 定义列表 ----------- defined list 自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以 <dl>标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以<dd>开始。 图像标记 ---------- JPG, GIF, PNG <img>行内元素 src url地址 alt 图片无法显示时的替换文字 title 鼠标悬停显示的文字(IE) align 图片的对其方式,默认为基线对齐 width,height 宽高 超链接标记 ---------- <a href="url" target="blank" title="" >链接文本</a> URL地址主要用来表示链接文件和调用图片的地址;target属性用于设置目标的打开方式;title属性用于设置超链接的提示文本。 "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 超链接的打开方式(target属性的取值) :1)在本窗口打开:_self (target的默认值);2)在新窗口打开:_blank;3)在父窗口打开: _parent 将链接的文件载入到父框架;4)在整个窗口打开:_top:将链接的文件载入到整个浏览器窗口中,并删除所有框架。_parent、_top仅仅在网页被嵌入到其他网页中有效,如框架中的网页,所以这两种取值用得很少。 表格标记 -------- 1.表格 2.<table>标记及其属性 3.表格的表头<th>标记 4.行标记<tr>,单元格标记<tr>属性 5.<caption>标记及其属性 表格 ------ 表格由 <table>标签来定义。每个表格均有若干行(由 <tr>标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 若给设置表格边框为20象素,同时通过bordercolor属性给边框加上颜色,bgcolor属性为表格的背景色。 对于IE来说,设置表格边框颜色会使单元格边框颜色跟着改变,其他浏览器一般不会。 border属性的设置只改变外边框,表格中每个单元格的宽度仍然是1。 但再将上例中的边框宽度改为0。结果是表格中的每个单元格的宽度也变成0。 cellpadding表示单元格中的内容到单元格边框之间的距离,默认值为0;cellspacing表示相邻单元格之间的距离,默认值为1。 width、height表格的宽和高,可以使用象素或百分比做单位,align表示表格的水平对齐属性,bgcolor表示表格的背景色,background表示表格的背景图像。 表格的表头使用<th>标签进行定义。 单元格标记<td>的常见属性:bordercolor为单元格边框的颜色,该属性仅IE支持;bgcolor为单元格的背景色;background为单元格的背景图像;align/valign 为单元格里的内容的水平或垂直对齐方式;colspan/rowspan为合并同一列相邻的几个单元格/合并同一行的几个单元格;width,height为单元格的宽和高,可以使用象素或百分比做单位。 注意:单元格td无border属性,因此无法设置单元格边框的宽度,单元格边框宽度只能是1或0。 <caption>用来为表格添加标题,默认情况下标题位于表格的上方,可以通过align和valign设置其位置,valign可选值为bottom或top,表示标题在表格的下方或上方。 表格标记的应用 -------------- 1.固定宽度的表格 2.用普通表格进行排版 3.特殊效果表格 制作固定宽度的表格 ------------------ 1.定义所有列的宽度,但不定义整个表格的宽度,只要单元格的内容不超过单元格的宽度,表格就不会变形 2.定义整个表格的宽度,在留出一列的宽度不定义 只有在单元格中插入图像时,为了保证单元而过和图像之间没有间隙,需要把单元格的宽和高设置为图像的宽和高,填充、间距和边框都设置为0,并保证单元格标记内除图像元素,没有其他空格或换行符。 用普通表格进行排版 ------------------ 制作特殊效果的表格 ------------------ 1.单元格为1的表格 2.双线边框的表格 3.垂直竖线 表单标记 -------- 1.<form>标记 2.<input>标记 3.<select>和<option>标记 4.<textarea>标记 5.表单的辅助标记 <form>标记 ---------- <form></form>标记用来创建一个表单域,即定义表单的开始和结束位置。限定表单的范围。所有表单对象,都要插入到表单域之中 <form>携带表单的相关信息,包括唯一标识表单的name属性,处理表单的脚本程序位置(action), 提交表单的方法(method) <body> <form name="HTML_01" action="HTML_act.aspx" method="get" > </form> </body> name="HTML_01" 表单唯一标识 action="HTML_act.aspx" 用来接收和处理浏览器递交的表单内容的服务器端动态的URL路径 method 属性值为get或post默认为get <input>标记 ----------- 收集用户输入信息的标记,单标记,其含义由type属性决定 type属性值 描述 text 文本域 password 密码域 file 文件域 checkbox 复选框 radio 单选框 button 普通按钮 submit 提交按钮 reset 重置按钮 hidden 隐藏域 image 图像域(图像按钮) <select>和<option>标记 ---------------------- <select>标记是下拉菜单框或列表框标记,是一个标记的含义由其size属性决定的元素,如果该标记没有设置size属性,那么表示为下拉菜单框,如果设置了size属性则变成了列表框,设置了multiple属性,则表示列表框允许多选。下拉列表框中的每一项由标记定义,还可以使用<optgroup>添加一个不可选中的选项 <textarea>标记 -------------- <textarea>…</textarea>是多行文本域标记,用于让浏览者输入多行文本,如发表评论或留言,跟帖。其中的“wrap”属性指多行文本的换行方式,有三种取值:“off”为不换行,输入时需按Enter键才换行;“virtual”为自动换行,该值为“wrap”的默认值;“physial”也会自动换行,但当提交数据时这些自动换行符<br/>标记也添加到数据中处理。下例为这是一个有4行,每行可容纳40个字符,换行方式为虚拟的多行文本域。 容器标记 -------- div和span是不含有任何语义的标记,用来在其中放置任何网页元素,就象一个容器一样,当把文字放入后,文字的格式外观都不会发生任何改变,应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。 <div>…</div>标记是一个块状的容器,其默认的状态就是占据整个一行。 <span>…</span>标记是一个行内的容器,其默认状态是行内的一部分,占据行的长短由内容的多少来决定。 颜色和背景 ---------- 1.颜色值 2.颜色名 3.背景 颜色值 ------ 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。 每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。 颜色名 ------ 仅有16 种颜色名被 W3C的HTML 4.0 标准支持,它们是:aqua(水绿)、black、blue、fuchsia(紫红)、gray、green、lime(浅绿)、maroon(褐)、navy(深蓝)、olive(橄榄)、purple、red、silver、teal(深青)、white、yellow。如果使用其它颜色的话,就应该使用十六进制的颜色值。(但能够被CSS识别的颜色名大约有140种。) 背景 ---- <body>拥有两个配置背景的标签。背景可以是颜色或者图像 1.背景颜色(Bgcolor):背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。 2.背景(Background):背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。 <body>标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。 框架 ---- 1.作用 2.frameset标记 3.frame标记 4.iframe标记 框架标记的作用 -------------- 如果想把一个浏览器窗口分成几个区域,每个区域都显示一个网页,则需要框架集 <frameset>和<frame>这两个标记是成对出现的 框架标记以前常用于网页的排版,现在用的较少,但网站的后台管理程序常用左右分割的框架版式 不能将<body></body>与<frameset></frameset>标签同时使用 frameset标记 ------------ 窗口框架的分割有两种方式,一种是水平分割,一种是垂直分割,在<frameset>标记中通过cols属性和rows属性来控制分割的方式 <frameset rows=“各个横向框架的大小或比例" cols="各个纵向框架的大小" border="像素值" bordercolor="颜色值" frameborder="yes|no" framespacing="像素值">…</frameset> 如果要去掉框架的边框,可设置frameborder="no",framespacing指框架和框架之间的距离,bordercolor属性IE浏览器不支持。 用cols属性将窗口分为左右部分 frame标记 --------- frame标记是一个单标记,定义了放置在每个框架中的HTML文档 <frame src="url" name="属性名" border="像素值" bordercolor="颜色值" frameborder="yes|no" marginwidth="像素值" scrolling="yes|no|auto" noresize="noresize" /> scrolling指定框架窗口是否允许出现滚动条; noresize指定是否允许调整框架的大小; 用src属性指定要显示的网页; 用name属性指定框架的名称,这样做的用途是,当其他框架中的链接要在指定的框架中打开时,可以设置其他框架中超链接的target属性值等于这个框架的name值。例如定义右边窗口name属性为main: <frame name="main"/>;左边窗口中的链接目标是main:<a href="add.htm" target="main">添加新闻</a>;这样add.htm会在框架名为main的窗口(右边窗口)中打开。 通过框架的嵌套可实现对子窗口的分割,例如有时需要先将窗口水平分割,再将某个子窗口进行垂直分割。 iframe内嵌框架 -------------- 框架集标记只能对网页进行左右或上下分割,如果要让网页的中间某个矩形区域显示其他网页,则需要用到浮动框架标记。 <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></iframe> src:URL地址,既可是HTML文件,也可以是文本、ASP等; width、height:"内部框架"区域的宽与高; scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示; FrameBorder:区域边框的宽度,为了让“内部框架“与邻近的内容相融合,常设置为0; name:框架的名字,用来进行识别。 头部标记 -------- 1.meta标记 2.link标记 3.style标记 4.script标记 5.base标记 6.title标记 meta标记 -------- meta是元信息标记,是描述网页文档信息的标记,可以描述文档的编码方式,文档的摘要,文档的关键字,文档的刷新,都不会显示在网页上 其中网页的摘要,关键字是为了让搜索引擎能对网页内容的主题进行识别和分类。 文档刷新可设置网页经过一段时间后自动刷新或转到其他url meta标记分为两类,如果它具有name属性,表示它的作用是提供页面描述信息; 如果它具有http-equiv属性,其作用就是回应给浏览器一些有用的信息 1.meta的name属性 keywords用来告诉搜索引擎你的网页的关键字是什么 description用来告诉搜索引擎你的网站的主要内容 2.meta的http-equiv属性 自动刷新 跳转url link标记 -------- link标记的作用是显示本文档和其他文档之间的联系 1.用来链接外部css <link href="../../../Styles/Scss.css" rel="stylesheet" type="text/css" /> 2.链接一个图标文件.ico用来改变地址栏的图标 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> style标记 --------- style标记是专用于在网页头部嵌入CSS代码的标记 <style type="text/css">h1{font-size:12px}</style/> script标记 ---------- script标记是用于嵌入脚本(如javascript)或链接外部脚本文件的标记,它既可位于网页头部,也可位于网页body部分 <script src="../../../Scripts/JqueryEasyUI/jquery-1.4.4.min.js" type="text/javascript"></script> base标记 -------- base标记为插入网页基链接属性 <base herf="news/"/> title标记 --------- 标题 XHTML验证 --------- XHTML文档是根据文档类型声明进行验证的 XHTML 文档是根据文档类型声明(DTD)进行验证的。只有将正确的 DTD 添加到文件的首行,XHTML 文件才会被正确地验证。 严格(Strict)DTD包含没有被反对使用的或不出现在框架结构中的元素和属性: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 过渡(Transitional)DTD包含严格 DTD 中的一切,外加那些不赞成使用的元素和属性。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 框架(Frameset)DTD包含过渡 DTD 中的一切,外加框架。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"