HTML笔记
张鹏老师html笔记整理
</font>
<br>
<font color="green" size="2"> 2013-07 </font>
<font color="grey" size="2">-推广</font>
<font color="blue" size="4">
<u>2013全新索尼
<strong>
<font color="red">笔记本电脑
</font>
</strong>旗舰索尼VAIO Pro新登场!
</font>
</u>
<br>
<font size="2">索尼
<font color="red">笔记本电脑</font>VAIO Pro-轻,薄,彰显品质.新一代超极本(TM)创新源自英特尔科技.全新索尼
设置图片高
border
数字
设置图片边框
align
left
图片靠左，文字靠右
right
图片靠右，文字靠左
top
文字垂直居上靠
middle
文字垂直居中
bottom
文字垂直居下（默认）
vspace
像素
定义图像顶部和底部的空白（垂直边距）
HTML知识点
HTML基础知识一、什么HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
二、HTML能干什么您可以使用HTML 来建立自己的WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
三、HTML长什么样子•<!DOCTYPE html>声明为HTML5 文档•<html>元素是HTML 页面的根元素•<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
•<title>元素描述了文档的标题•<body>元素包含了可见的页面内容•<h1>元素定义一个大标题•<p>元素定义一个段落四、HTML都包含那些标签五、HTML实例1)我的第一个网页2)注释标签：对代码进行说明<!--单行注释,也可以对多行文字进行注释-->3)常用格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换行<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调文本</strong> 4)标题标签5)列表标签6)超链接:7)分隔窗口8)块级元素和行内元素块级元素：凡是默认自动占满网页整行的元素（自动换行），称为块级元素<hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...行内元素：不能占满网页整行的元素<font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...9)表格标签tr:行；td：单元格10)表单元素：11)多行文本域。
html5笔记——section标签
html5笔记——section标签定义和⽤法<section> 标签定义⽂档中的节（section、区段）。
⽐如章节、页眉、页脚或⽂档中的其他部分。
注意：section 不是⼀个专⽤来做容器的标签，如果仅仅是⽤于设置样式或脚本处理，专⽤的是 divsection ⾥应该有标题（h1~6），但⽂章中推荐⽤ article 来代替⼀条简单的准则是，只有元素内容会被列在⽂档⼤纲中时，才适合⽤section元素。
section的作⽤是对页⾯上的内容进⾏分块，如各个有标题的版块、功能区或对⽂章进⾏分段，不要与有⾃⼰完整、独⽴内容的article混淆。
⼀个section通常由内容和标题组成，通常不推荐那些没有标题的内容⽤section，在这个⽹站可以检测没有标题的section，section的作⽤是对页⾯上的内容进⾏分块，如各个有标题的版块、功能区或对⽂章进⾏分段，不要与有⾃⼰完整、独⽴内容的article混淆。
使⽤<section>以下内容来⾃：<section>可以相互嵌套，在页⾯中定义了⼀个特殊的顶级区块，于是可以从<h1>开始列提纲⽽不⽤担⼼会破坏⽹页的纲要。
尽管没找到明确说明，但我个⼈认为在每⼀层<section>⾥还是仅使⽤⼀个<h1>为佳。
以Wordpress主题为例，我认为与#sidebar相对的#content部分，使⽤<section>包裹⼀堆<article>作为页⾯的主要内容并不太合适。
⽽使⽤<section>⽤在整体布局是明显错误的了。
⽽适合使⽤<section>标签的地⽅有：⽂章的评论列表，有着整齐的结构；⽂章内容的⽬录，有着⽂章内部结构纲要；侧栏widget，在中我看到了这样的设计，因为widget内容⼤都是评论列表、⽂章列表，有着清晰的结构且是独⽴完整的⼀部分；包裹⽂章中各个章节的段落，但要在编辑器完成，⽬前来看并不易⽤。
HTML5学习笔记--------》HTML5概要与新增标签！
HTML5学习笔记--------》HTML5概要与新增标签！⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要，特别是移动互联⽹。
为了增强浏览器功能Flash被⼴泛使⽤，但安全与稳定堪忧，不适合在移动端使⽤（耗电、触摸、不开放）。
HTML5增强了浏览器的原⽣功能，符合HTML5规范的浏览器功能将更加强⼤，减少了Web应⽤对插件的依赖，让⽤户体验更好，让开发更加⽅便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很⼩，这并不符合⼀个好产品的演进规则。
1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。
它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强⽹络应⽤的标准集。
HTML5是HTML最新版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。
⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联⽹应⽤迅速发展的时候，使⽹络标准达到匹配当代的⽹络需求。
1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5，但是各个浏览器⽀持的⽅式以及语法有所差异性。
⽀持Html5的浏览器包括Firefox（⽕狐浏览器），IE9 及其更⾼版本，Chrome（⾕歌浏览器），Safari，Opera等现代浏览器。
⽀持得分：如果想了解更多请看本⽂的兼容性那⼀节的内容。
PC端（总分555分）：平板（总分555分）：移动（总分555分）：1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现（CSS3）1.4.1. 语义特性（Class：Semantic）HTML5赋予⽹页更好的意义和结构。
HTML制作1-2课时个人笔记
HTML单机独立网页WWW 是world wide web(环球信息网)的缩写，也可简称为web,中文名为“万维网”。
http协议超文本传输协议用于从WWW服务器传输超文本到本地浏览器的传送协议网页首页（主页）内页（分页）内页一般为信息的载体，外爷一般为连接点HTML即超文本标记语言，或成为“多媒体文件语言”，可以标记超链接、文本样式、页面标题、插入图片或动画等多媒体元素，以此来创建Web页面HTML文件是有HTML命令组成的描述性文本，原则上可以用任何文本编辑器对其进行编辑。
一个基本的HTML文档的结构应该包括头部（Head）、主体（Body)两大部分。
头部描述浏览器所需的信息，主体包含所要页面的具体内容。
HTM超文本标记语言的标记符是通过标签（也叫标记符）来定义网页内容的。
HTML超文本标记语言表在使用过程中，所有的标签都必须用家括号括起来。
HTML中的表情大多是成对出现的，而后面的标签都是在前面标记的文字之前应加一个“/”，如<A> </A> 或<HTML> </HTML>等，在一对标签中前面表示开始后面表示结束。
HTML基本机构如下所示：<HTML><HEAD><TITLE>冬奥会中国代表队载誉归来</TITLE> (这里显示的是文档或网页标题)</HEAD><BODY>新华社北京2月28电参加****往机场迎接</BODY></HTML>其中<HTML>是最外层，表示这对标记间的内容是HTML文档，<HEAD>是头部信息<TITLE>是标题，<BODY>和</BODY>之间及就是网页文档内容。
HTML常见标签：<!-- --> :注释标记，在“<--”与“-->”之间的内容不在浏览器中显示。
HTML笔记
Microsoft Jscript 提供了11 个内部（或“内置”）对象。
它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及String 对象。
Number 对象除了Math对象中可用的特殊数值属性（例如PI）外，在 Microsoft Jscript 中，Number 对象有几个其他的数值属性。
Microsoft JScript 特性- ECMAJScript 字母顺序的关键字列表编码函数escape()：将非字母、数字字符转换成ASCII码求值函数eval()：•事件：用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。
事件名称适用对象意义说明Abort i mage 终止当图形尚未完全加载前Blur 失去焦点Change t/pw/ta/select 改变DragDrop window 拖曳Error img/win 错误加载文件或图形时发生错误Focus 取得焦点Move w indow 移动Reset form 重置Submit formClick/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove窗口对象的属性和方法：格式：[window.]属性[window.]方法（参数）opener.属性opener.方法（参数）self.属性self.方法（参数）parent.属性parent.方法（参数）top.属性top.方法（参数）窗口名称.属性窗口名称.方法（参数）•窗口对象的属性：document 当前文件的信息location 当前URL的信息name 窗口名称status 状态栏的临时信息defaultStatus 状态栏默认信息history 该窗口最近查阅过的网页closed 判断窗口是否关闭，返回布尔值opner open方法打开的窗口的源窗口outerHeight 窗口边界的垂直尺寸，pxouterWidth 窗口边界的水平尺寸，pxpageXOffset 网页x-position的位置pageYOffset 网页y-position的位置innerHeight 窗口内容区的垂直尺寸，pxinnerWidth 窗口内容区的水平尺寸，pxscreenX 窗口左边界的X坐标screenY 窗口上边界的Y坐标self 当前窗口top 最上方的窗口parent 当前窗口或框架的框架组frames 对应到窗口中的框架length 框架的个数locationbar 浏览器地址栏menubar 浏览器菜单栏scrollbars 浏览器滚动条statusbar 浏览器状态栏toolbar 浏览器工具栏offscreenBuffering 是否更新窗口外的区域personalbars 浏览器的个人工具栏，仅Navigator•窗口对象的方法：alert(信息字串) 弹出警告信息confirm(信息字串) 显示确认信息对话框prompt(提示字串[，默认值]) 显示提示信息，并提供可输入的字段atob(译码字串) 对base-64编码字串进行译码btoa(字串) 将进行base-64编码back() 回到历史记录的上一网页forward() 加载历史记录中的下一网页open(URL，窗口名称[，窗口规格])focus() 焦点移到该窗口blur() 窗口转成背景stop() 停止加载网页close()enableExternalCapture() 允许有框架的窗口获取事件disableExternalCapture() 关闭enableExternalCapture()captureEvents(事件类型) 捕捉窗口的特定事件routeEvent(事件) 传送已捕捉的事件handleEvent(事件) 使特定事件的处理生效releaseEvents(事件类型) 释放已获取的事件moveBy(水平点数，垂直点数) 相对定位moveTo(x坐标，y坐标) 绝对定位setResizable(true|false) 是否允许调整窗口大小resizeBy(水平点数，垂直点数) 相对调整窗口大小resizeTo(宽度，高度) 绝对调整窗口大小scroll(x坐标，y坐标) 绝对滚动窗口scrollBy(水平点数，垂直点数) 相对滚动窗口scrollTo(x坐标，y坐标) 绝对滚动窗口setInterval(表达式，毫秒)setTimeout(表达式，毫秒)clearInterval(定时器对象)clearTimeout(定时器对象)home() 进入浏览器设置的主页find([字串[,caseSensitivr,backward]]) 查找窗口中特定的字串print()setHotKeys(true|false) 激活或关闭组合键setZOptions() 设置窗口重叠时的堆栈顺序•窗口对象的事件处理程序：onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload•屏幕对象：描述屏幕的显示及颜色属性。
HTML初级知识点总结,最详细的总结
HTML超文本标记语言，一种规范预定义,已经定义好的各种标记，只需要我们把对应的标记放到合适的位置一. HTML基本语法与基本结构(重点）标记的使用1、标记一般成对出现，包含开始标记和结束标记2、标记可以嵌套使用，但是不能交叉使用3、标记不区分大小写属性的使用（属性控制内容的格式,额外的格式）1、书写位置在开始标记中2、格式：属性名=“属性值",多个属性之间使用空格分割3、不同的标记属性可能相同也可能不同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不冲突时，效果叠加，属性冲突时，就近原则html的基本结构〈html>-—--声明网页〈head〉———-网页的头部信息<title〉标题〈/title〉—---网页的标题</head><body〉—---网页的主体，网页内容主要展示的部分网页的主要内容</body>〈/html〉二. 文本格式的应用1、标题标记<hn>,n的取值1-6,1级标题最大效果:加粗显示，带有自动换行属性:align控制标题的对齐方式，取值left（左对齐，默认值）|center(居中）｜right （右对齐）2、段落标记<p〉效果:把内容分段展示，自动换行属性:align，控制段落内容的对齐方式,取值left（左对齐，默认值）|center（居中）｜right(右对齐）3、换行符〈br /〉，单标记，不需要结束标记，换行但不分段空格符号: 表示一个空格强制换行符：<br /〉4、水平线标记<HR />，单标记效果：水平线,默认是一个粗细为2px（像素）的线条属性：size 控制水平线的粗细，取值为整数，单位为像素（px）width 控制水平线的长度,取值可以是像素单位,也可以是百分数（相对于浏览器窗口百分比)noshade设置水平线不带有阴影，该属性不需要取值color 设置水平线的颜色，取值可以是英文的颜色值，也可以是十六进制的颜色代码align 控制水平线的对齐方式，取值left(左对齐）｜center(居中，默认值）|right(右对齐）5、分节标记<div〉效果：把内容设置为一节，前后带有自动换行属性：align控制div中内容的对齐方式,取值left（左对齐，默认值）｜center（居中）|right（右对齐）6、居中标记符<center>效果：把center标记中的内容居中显示7、文本控制标记<font>效果:控制字体的各种显示样式属性：size 控制字体的大小，取值为绝对值时，1--7，数字越大字体越大，取相对值时,参考的是默认字体（3号），取值在-2-—+4之间color 控制字体的颜色face 控制字体的字体，取值可以是多个值，多个值之间使用逗号分割,取值时从左往右依次取值，找到合适的值为止，假如都不支持，使用默认格式显示8、字体的物理样式加粗：<b>斜体：〈i>下划线:〈u〉删除线：<s〉上标:<sup〉下标：〈sub>1、常用逻辑字符〈ADDRESS〉网页设计者或维护者的信息,通常显示为斜体<CITE> 表示文本属于引用,通常显示为斜体<CODE〉• 表示程序代码,通常显示为固定宽度字体<DFN> • 表示定义了的术语，通常显示为黑体或斜体〈EM> 强调某些字词，通常显示为斜体〈KBD〉表用户的键盘输入,通常显示为固定宽度字体〈SAMP> 表示文本样本,通常显示为固定宽度字体〈STRONG〉特别强调某些字词，通常显示为粗体<VAR> 表示变量，通常显示为斜体2、列表标记1、有序列表,〈ol〉，需要配合〈li>标记使用一个<li>标记对应一个选项ol的属性：type 控制列表的符号样式，取值1|A|a｜i|I，默认是1start 控制列表的起始值，取值为任意的整数li的属性:type控制选项自身的符号样式，取值1|A｜a|i|Ivalue控制选项本身的起始值，取值为任意整数，但是修改自身起始值之后,会对同一个列表中本选项之后的同级<li〉标记产生影响2、无序列表，<ul>，配合<li>标记使用一个<li>标记对应一个选项ul的属性:type 控制所有选项的符号样式，取值disc(实心圆，默认值）｜circle（空心圆）｜square（方块）li的属性：type控制选项本身的符号样式li标记用在ol中，type属性的取值跟ol的type属性取值走，用在ul中，跟着ul的type属性取值走3、定义列表，<dl〉，完成对定义列表的声明<dt>，术语标记，可以理解为类似于列表选项的标题使用〈dd>,描述标记，可以理解为类似于列表的选项使用三. 在网页中使用图片标记：〈img>,单标记，不需要结束标记属性: src 引入图片资源的路径绝对路径：资源在服务器上的位置，该位置是从盘符出发相对路径：资源在服务器上的相对位置，从网页本身出发.。
HTML笔记
HTML筆記●在一個表格中增加一行:<table id=idTB><tr><td>……</td></tr></table><script>oTR=idTB.insertRow(); oTD=idTB.insertCell() ;</script> 注意的是：每格的插入是從最后的單元格開始插入，可以通過idTB.rows.length來獲得表行數。
●可先用<span id="txt"></span>在一個地方做個標記，然後引用如javascript:document.getElementById('txt').innerText='数据查询中,请稍后........';等方法可以在指定的地方輸出所想要的東西，取消的話用document.getElementById('txt').style.display = "none";來隱藏輸出的東西。
●先在一張圖的屬性中設定usemap=#mapname,然後可以用<map name=mapname><areashape=rect cords=x1,y1,x2,y2 href=”xxxx.php”target=_blank></map>來指定圖片的某個區域的熱連接。
●各种媒体文件在线播放代码1.mid格式<embed src="<:FILENAME:>" type="audio/midi" hidden="false" autostart="true" loop="true"height="20" width="200"></embed>2.mp3格式<embed controller="true" width="200" height="20" src="<:FILENAME:>" border="0"pluginspage="/quicktime/download/indext.html"></embed>3.avi格式<embed src="<:FILENAME:>" border="0" width="<:WIDTH:>" height="<:HEIGHT:>"type="application/x-mplayer2"></embed>4.flash格式<embed src="<:FILENAME:>"pluginspage="/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="<:WIDTH:>" height="<:HEIGHT:>"play="true" loop="true" quality="high" scale="showall" menu="true"></embed>5.mpg格式<embed src="<:FILENAME:>" border="0" width="<:WIDTH:>" height="<:HEIGHT:>"type="application/x-mplayer2"></embed>6.mov格式<embed controller="true" width="<:WIDTH:>" height="<:HEIGHT:>" src="<:FILENAME:>"border="0" pluginspage="/quicktime/download/indext.html"></embed>7.rm格式<OBJECT>" height="<:HEIGHT:>"><PARAM NAME="CONTROLS" V ALUE="ImageWindow"><PARAM NAME="AUTOSTART" Value="true"><PARAM NAME="SRC" V ALUE="<:FILENAME:>"><embed height="<:HEIGHT:>" width="<:WIDTH:>" controls="ImageWindow"src="<:FILENAME:>?embed" type="audio/x-pn-realaudio-plugin" autostart="true" nolabels="0"autogotourl="-1"></OBJECT>8.anthware格式<object classid="CLSID:15B782AF-55D8-11D1-B477-006097098764"codebase="/pub/shockwave/cabs/authorware/awswax65.cab#version=6,5,0,66"; width="640" height="480"><param name="SRC" value="sdfs.aam"><param name="PALETTE" value="background"><param name="WINDOW" value="inPlace"><param name="BGCOLOR" value="#FFFFFF"><embed src="sdfs.aam" palette="background" window="inPlace" bgcolor="#FFFFFF"pluginspage="/shockwave/download/index.cgi?P1_Prod_Version=Shock waveAuthorware"; type="application/x-authorware-map" width="640" height="480">●<body onLoad= alert("你要写的话")>開啟网頁時彈出對話框。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML笔记
3.9
<link>只连接css文件
ASCII 16进制表示
euc-kr 韩文
<meta name属性用于搜索引擎的搜索>
<p>段落效果不能叠加
<br>换行效果可以叠加
<dody>属性bgproperties=FIXED 画面固定，文字滚动
属性margin 页面的余白leftmargin左右都余白
绝对路径\
相对路径/
../ 上一级文件夹 ./ 当前文件夹
锚点：<a name="x"></a> <a href="#x"></a>
跳转到另一个页面的某个地方：<a href="URL#name"> ... </a> <a name="name"> ... </a> <li>圆点标记
<hr>标尺线
<h1></h1> <h2></h2> <h6></h6> 标题1、2、3 属性align=center 居中效果
开一个新的(浏览器)窗口在<a>标记中加入属性target="页面（窗口）名称"
<image src="URL"> 插入图片
3.10
<hr size="高度" width="宽度" noshade align=布局color="">
<div>层
<ul></ul>无序列表中间加<li>圆点标记可以嵌套-
<ol></ol>有序列表可嵌套
3.11
<img src="URL"> 图像aling=right/left 这2个属性只操作图像本身。
align=top/center/bottom/middle 这4个属性操作图像旁的文字。
<br clear=all>保留指定的一行在图片旁边，其余的换到新的一行。
<img vspace纵向hspace横向border边框width图像宽height图像高>
客户端图象映射图：
<img src="url" usemap="#name">
<map name="name"> <area shape="形状" href="url" coords="坐标"> </map>
表格<table></table> border
一行<tr></tr>
表头<th></th> css不能改<th> 禁用！
单元格<td></td>
合并单元格rowspan纵向colspan横向
3.12
<table cellspacing表元间隙cellpadding表元内部空白设置bordercolor表格边框颜色
align=left/center/>
<tr/td align=left/center/right表格文字的布局valign=middle/top/bottom/baseline垂直布局>
<caption标题（不建议使用）align valign>
<table/td/tr bgcolor背景颜色background背景图片(不用于<tr>)>
表格边框色彩的亮度控制<table bordercolorlight=# bordercolordark=#>
按行分组
<thead> ... </thead> <tbody> ... </tbody> <tfoot> ... </tfoot>
按列分组
<colgroup align=left/right/center>
列的属性控制
<col align=left/right/center span=#>
<table frame框架=box/above上/below下/hside上下/vside左右/lhs左/rhs右/void不显rules分隔线=group/rows/cols/none>
3.15
<form action="url"（2k大小的限制）method="get/post"> get明文传送，不安全容量小，效率高。
post安全
<input type=text/password/checkbox/radio/image/hidden/submit/reset/button/file>
单选钮，必须有2个以上，否则不能选。
size属性只对text/password有用。
多个radio 只能写一个checked。