HTML学习笔记

合集下载

dom学习笔记

DOM一、基本概念1、DOM ：Document Object Model 缩写，文档对象模型。

2、元素：一个元素就是HTML 标签，包括其中的属性和内容。

二、元素对象1、浏览器本身、文档，以及HTML 元素都可以当作对象。

2、把元素声明成对象的三种方法：1）使用var test =document.getElementById(‘s’)test 就是id 为s 的元素的对象实例2）onclick=”show(this)”this 就代表这个元素的对象实例3）<script for=”s”event=”onclick”>xxx</script>三、事件源、事件、事件处理程序1、事件源：在哪里发生2、事件：发生什么事3、事件处理程序：处理发生事的程序四、元素对象1、公共属性：1）Object.属性：设置元素属性。

a.href =‘’;2）object.getAttribute(“元素名”)：获取元素属性值var i =a.getAttribute(‘href’);3）Object.innerText ：修改HTML 内容（只操作文本）。

4）Object.innerHTML ：修改HTML 内容（可以插入HTML 标签）。

a.innerHTML =“<img src=’xxx.jpg’/>”;5）Object.style ：返回对象的样式，是一个对象类型a.style.color =“red”;6）Object.className ：CSS 类名<style>.test{color:red;}</style>a.className =‘test’;7）Object.appendChild(‘s’)：向本元素中嵌入其它元素。

var img =document.createElement(‘img’);a.appendChild(‘img’);8）Object.removeChild(‘s’)：删除本元素中内嵌的元素。

HtmlTextWriter学习笔记

HtmlTextWriter学习笔记这两天正好在研究自定义控件制作，HtmlTextWriter在控件制作中发挥重要作用，能够帮助我快速生成html语句。

因此决定写下笔记，方便以后查阅。

HtmlTextWriter的名称空间是System.Web.UI，如果在winform程序下使用，不要忘了添加System.Web.dll引用。

HtmlTextWriter与Html32TextWriter这两个类不存在继承和被继承关系。

HtmlTextWriter支持Html4.0标准，而Html32TextWriter支持Html3.2标准，在msdn中一般不建议将Html32TextWriter实例话，它仅为支持低版本的浏览器而设计。

HtmlTextWriter初始化HtmlTextWriter的构造函数要求必须传递一个与TextWriter接口兼容的实例。

大家可以根据需要选择合适的TextWriter 接口实现类，因为该类的选择将决定最终生成的Html文本的输出方式，例如我想把结果输出到一个TextBox中，于是我就使用了StringWriter类的实例作为参数传入：StringWriter sw=new System.IO.StringWriter();HtmlTextWriter writer=new HtmlTextWriter(sw);如果要获得结果，只需要使用sw.toString()就可以了。

注意，HtmlTextWriter本身不提供输出方法或属性。

HtmlTextWriter常用方法1. void RenderBeginTag(HtmlTextWriterTag tagKey)用于创建Html开始标签，如<body>，这里的HtmlTextWriterTag是一个枚举类型，里面有所有的标准Html4.0标签枚举值，如果我要使用添加body标签，就是RenderBeginTag(HtmlTextWriterTag.Body)2. void RenderEndTag()与RenderBeginTag一一对应，有几个RenderBeginTag就必须有几个RenderEndTag，当然，RenderEndTag不一定要马上跟在对应的RenderBeginTag之后，要根据Html语句决定。

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。

canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。

浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。

⼆、基本⽅法绘图环境：语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。

当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。

【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。

绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制：⽅法⼀：<script src="canvas.js"></script> ⽅法⼆：<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤：通过id来捕获canvas元素创建 context 对象指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。

渡一教育前端笔记

以下是一份渡一教育前端学习笔记，供您参考：1. HTML：HyperText Markup Language，超文本标记语言。

2. meta 标签：<meta charset="utf-8">，用于定义文档的字符编码。

utf-8 是万国码，包括所有国家的语言。

3. lang 属性：<html lang="en, ch">，用于标识语言，为爬虫而标识。

en：英文；ch：中文。

4. div 标签：一个区块级元素，用于组合文档中的块级元素。

5. onclick 属性：用于添加和移除事件处理程序。

可以在行间写 onclick='alert("a")'，也可以在外部通过 JavaScript 代码添加事件处理程序。

6. JavaScript：一种脚本语言，用于在浏览器中实现交互效果。

可以通过 window 对象来访问浏览器窗口及文档对象。

7. 事件处理程序：用于处理用户与页面交互时发生的事件，比如点击、鼠标移动等。

可以添加事件处理程序，处理用户与页面的交互。

8. 函数：可以用来封装一段代码，实现特定功能。

可以在JavaScript 中定义函数，并使用函数名来调用函数。

9. this 关键字：在事件处理程序中，this 指向触发事件的元素本身。

10. DOM：Document Object Model，文档对象模型。

HTML 中的每个元素都是一个DOM 对象，可以通过JavaScript 来访问和操作这些对象。

11. window 对象：浏览器窗口的代表，是 JavaScript 中最常用的对象之一。

可以通过 window 对象来访问浏览器窗口及文档对象。

12. alert() 函数：用于弹出一个带有指定消息和确定按钮的警告框。

以上是渡一教育前端学习笔记的主要内容，供您参考。

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赋予⽹页更好的意义和结构。

（个人收集学习笔记）4字符串处理与正则表达式

（个人收集学习笔记）4字符串处理与正则表达式第四章字符串处理与正则表达式一、字符串处理介绍1、如果字符串处理函数和正则表达式都可以实现字符串操作，建议使用字符串处理函数，因为效率高。

2、因为PHP 是弱类型语言，所以其他类型的数据一般都可以直接应用于字符串操作函数里，而自动转换成字符串类型进行处理。

3、还可以将字符串视为数组，或当作字符集合来看待。

$str[0]$str{0}二、常用的字符串输出函数1、echo()函数：使用它的效率要比其他字符串输出函数高。

2、print()函数：功能和echo()一样，但它有返回值，成功返回1，不成功返回0。

3、die()函数：exit()函数的别名。

1）参数如果是字符串，则该函数会在退出前输出它。

2）如果参数是一个整数，这个值会被用做退出状态。

值在0-254之间，退出状态255由PHP 保留，不会使用。

状态0用于成功终止程序。

4、printf():用于输出格式化字符串。

1）例子：printf(“%s age is $d”,$str,$num);2）%d ：带符号十进制数%u ：无符号十进制数%f ：浮点数%s ：字符串%b ：二进制数%c ：依照ASCII 值的字符%%：返回百分比符号%o ：八进制数%x ：十六进制数（小写字母）%X ：十六进制数（大写字母）3)如果%符号多于arg 参数，则必须使用占位符。

占位符被插入到%符号之后，由数字和\$组成。

如：printf(“The %2\$s book contains %1\$d pages.That’s a nice %2\$s full of %1\$d pages”,$num,$str);%2\$s 代表$str 。

5、sprintf()函数：用法和printf()一样，但它不是输出字符串，而是把格式化的字符串以返回值的形式写入到一个变量中。

三、常用的字符串格式化函数字符串的格式化就是将字符串处理为某种特定的格式。

DOM学习笔记(一)

DOM学习笔记（一）一、Dom入门DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。

比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。

JavaScript→Dom就是C#→.Net Framwork。

没有.net，C#只能for、while，连WriteLine、MessageBox都不行。

Dom就是一些让JavaScript 能操作HTML页面控件的类、函数。

DOM也像WinForm一样，通过事件、属性、方法进行编程。

CSS+JavaScript+DOM=DHTML二、Dom事件事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。

有时间事件响应的代码太多，就放到单独的函数中：<script type="text/javascript">function bodymousedown() {alert("网页被点坏了，赔吧！");alert("逗你玩的！");}</script><body onmousedown="bodymousedown()">bodymousedown后的括号不能丢，因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。

动态设置事件可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样function f1() {alert("1");}function f2(){alert("2");}<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />//注意f1不要加括号。

NekoHTML学习笔记

NekoHTML学习笔记J. Andrew Clark用Java写了一系列的工具(Java APIs)，NekoHTML是其中之一。

NekoHTML是一个简单地HTML扫描器和标签补偿器(tag balancer) ,使得程序能解析HTML文档并用标准的XML接口来访问其中的信息。

这个解析器能投扫描HTML文件并“修正”许多作者（人或机器）在编写HTML文档过程中常犯的错误。

NekoHTML能增补缺失的父元素、自动用结束标签关闭相应的元素，以及不匹配的内嵌元素标签。

NekoHTML的开发使用了Xerces Native Interface (XNI)，后者是Xerces2的实现基础。

一、运行要求从NekoHTML主页上下载nekohtml-latest.zip，目前版本是0.8.NekoHTML要求运行在java1.1或更高版本，Xerces-J 2.0或更高版本。

（我在试用时，随便拿了个xerces的包来用，结果例如运行老时不能通过，折腾半天后才发现版本不够所致.:)二、使用NekoHTML1、透明地创建HTML解析器利用Xerces2.0为基础，应用程序通过JAXP实例化解析器对象时，可以透明地创建HTML解析器，此时只需要将NekoHTML的jar文件，在CLASSPATH中放在Xerces的jar文件之前即可。

nekohtmlXni.jar中的META-INF/services/org.apache.xerces.xni.parser.XMLParserConfiguration 文件会被Xerces的读取并取代标准的设置文件，此处org.apache.xerces.xni.parser.XMLParserConfiguration文件的内容就是一个字符串“org.cyberneko.html.HTMLConfiguration”。

这种方法的好处是简单透明，缺点是影响了Xerces在其它情况下的使用。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML 参考手册- (HTML5 标准)按字母顺序排列New : HTML5新标签标签描述定义注释<!DOCTYPE>定义文档类型<a>定义超文本链接<abbr>定义缩写<acronym>定义只取首字母的缩写，不支持HTML5<address>定义文档作者或拥有者的联系信息<applet>HTML5中不赞成使用。

定义嵌入的 applet。

<area>定义图像映射内部的区域<article>New 定义一个文章区域<aside>New 定义页面的侧边栏内容<audio>New 定义音频内容<b>定义文本粗体<base>定义页面中所有链接的默认地址或默认目标。

<basefont>HTML5不支持，不赞成使用。

定义页面中文本的默认字体、颜色或尺寸。

<bdi>New 允许您设置一段文本，使其脱离其父元素的文本方向设置。

<bdo>定义文字方向<big>定义大号文本，HTML5不支持<blockquote>定义长的引用<body>定义文档的主体<br>定义换行<button>定义一个点击按钮<canvas>New 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形<caption>定义表格标题<center>HTML5不支持，不赞成使用。

定义居中文本。

<cite>定义引用(citation)<code>定义计算机代码文本<col>定义表格中一个或多个列的属性值<colgroup>定义表格中供格式化的列组<command>New 定义命令按钮，比如单选按钮、复选框或按钮<datalist>New 定义选项列表。

请与 input 元素配合使用该元素，来定义input 可能的值。

<dd>定义定义列表中项目的描述<del>定义被删除文本<details>New 用于描述文档或文档某个部分的细节<dfn>定义定义项目<dialog>New 定义对话框，比如提示框<dir>HTML5不支持，不赞成使用。

定义目录列表。

<div>定义文档中的节<dl>定义列表详情<dt>定义列表中的项目<em>定义强调文本<embed>New 定义嵌入的内容，比如插件。

<fieldset>定义围绕表单中元素的边框<figcaption>New 定义<figure> 元素的标题<figure>New 规定独立的流内容（图像、图表、照片、代码等等）。

<font>HTML5不支持，不赞成使用。

定义文字的字体、尺寸和颜色。

<footer>New 定义 section 或 document 的页脚。

<form>定义了HTML文档的表单<frame>定义框架集的窗口或框架<frameset>定义框架集<h1> to <h6>定义 HTML 标题<head>定义关于文档的信息<header>New 定义了文档的头部区域<hr>定义水平线<html>定义 HTML 文档<i>定义斜体字<iframe>定义内联框架<img>定义图像<input>定义输入控件<ins>定义被插入文本<kbd>定义键盘文本<keygen>New 规定用于表单的密钥对生成器字段。

<label>定义 input 元素的标注<legend>定义 fieldset 元素的标题。

<li>定义列表的项目<link>定义文档与外部资源的关系<map>定义图像映射<mark>New 定义带有记号的文本。

请在需要突出显示文本时使用 <m> 标签。

<menu>不赞成使用。

定义菜单列表。

<meter>New 定义度量衡。

仅用于已知最大和最小值的度量。

<nav>New 定义导航链接的部分<noframes>定义针对不支持框架的用户的替代内容。

HTML5不支持<noscript>定义针对不支持客户端脚本的用户的替代内容。

<optgroup>定义选择列表中相关选项的组合。

<option>定义选择列表中的选项。

<output>New 定义不同类型的输出，比如脚本的输出。

<p>定义段落。

<param>定义对象的参数。

<pre>定义预格式文本。

<progress>New 定义运行中的进度（进程）。

<q>定义短的引用。

<rp>New <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

<rt>New <rt> 标签定义字符（中文注音或字符）的解释或发音。

<ruby>New <ruby> 标签定义 ruby 注释（中文注音或字符）。

<s>不赞成使用。

定义加删除线的文本。

<samp>定义计算机代码样本。

<section>New <section> 标签定义文档中的节（section、区段）。

比如章节、页眉、页脚或文档中的其他部分。

<select>定义选择列表（下拉列表）。

<small>定义小号文本。

<source>New <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

<span>定义文档中的节。

<strike>HTML5不支持，不赞成使用。

定义加删除线文本。

<strong>定义强调文本。

<sub>定义下标文本。

<summary>New <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

<sup>定义上标文本。

<table>定义表格。

<tbody>定义表格中的主体内容。

<td>定义表格中的单元。

<textarea>定义多行的文本输入控件。

<tfoot>定义表格中的表注内容（脚注）。

<th>定义表格中的表头单元格。

<thead>定义表格中的表头内容。

<time>New 定义日期或时间，或者两者。

<title>定义文档的标题。

<tr>定义表格中的行。

<track>New <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

<tt>定义打字机文本。

<u>不赞成使用。

定义下划线文本。

<ul>定义无序列表。

<var>定义文本的变量部分。

<video>New <video> 标签定义视频，比如电影片段或其他视频流。

<wbr>New 规定在文本中的何处适合添加换行符。

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.CSS 可以通过以下方式添加到HTML中:∙内联样式- 在HTML元素中使用"style"属性∙内部样式表 -在HTML文档头部 <head> 区域使用<style>元素来包含CSS∙外部引用 - 使用外部 CSS文件最好的方式是通过外部引用CSS文件.每个表格从一个table 标签开始。

每个表格行从tr 标签开始。

每个表格的数据从td 标签开始。

HTML 元素<="" p="">开始标签*元素内容结束标签*<p>这是一个段落</p><a href="default.htm">这是一个链接</a><br>*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 属性参考手册查看完整的HTML属性列表: HTML 标签参考手册。

下面列出了适用于大多数 HTML 元素的属性：属性描述class为html元素定义一个或多个类名（classname）(类名从样式文件引入)id定义元素的唯一idstyle规定元素的行内样式（inline style）title描述了元素的额外信息(作为工具条使用)HTML 标签参考手册菜鸟教程的标签参考手册提供了有关这些标题及其属性的更多信息。

您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。

标签描述<html>定义 HTML 文档<body>定义文档的主体<h1> - <h6>定义 HTML 标题<hr>定义水平线定义注释HTML 标签参考手册菜鸟教程的标签参考手册提供了有关 HTML 元素及其属性的更多信息。

标签描述<p>定义一个段落<br>插入单个折行（换行）HTML 文本格式化标签标签描述<b>定义粗体文本<em>定义着重文字<i>定义斜体字<small>定义小号字<strong>定义加重语气<sub>定义下标字<sup>定义上标字<ins>定义插入字<del>定义删除字HTML "计算机输出" 标签标签描述<code>定义计算机代码<kbd>定义键盘码<samp>定义计算机代码样本<var>定义变量<pre>定义预格式文本HTML 引文, 引用, 及标签定义标签描述<abbr>定义缩写<address>定义地址<bdo>定义文字方向<blockquote>定义长的引用<q>定义短的引用语<cite>定义引用、引证<dfn>定义一个定义项目。