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 属性，定义线条的端点。

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()一样，但它不是输出字符串，而是把格式化的字符串以返回值的形式写入到一个变量中。

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

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在其它情况下的使用。

Bootstrap的使用手册及学习笔记

Bootstrap的使用手册及学习笔记Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。

关于Bootstrap的介绍和下载，大家可以去搜索查看。

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。

因此这一文档类型必须出现在项目的每个页面的开始部分：<!DOCTYPE html>2 <html lang="en">3 ...4 </html>HTML中定义的所有标题标签, 从<h1> 到 <h6> 都是可用的。

Bootstrap定义的全局font-size 是 14px，line-height 是 20px。

这些样式应用到了 <body> 和所有的段落上。

另外，对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。

在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css（压缩版）引入到页面中，它定义了Bootstrap的基本样式。

如果需要使用Bootstrap提供的组件，要将bootstrap.js或者bootstrap.min.js（压缩版）引入到页面中。

因为bootstrap的JS插件需要Jquery的支持，所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。

另外如果你希望你的页面支持响应式布局，必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后，否则便不具有响应式布局功能。

当然在Bootstrap3的版本中，bootstrap.css和bootstrap-responsive.css已经合并了。

《网页设计与制作》笔记_学习笔记

《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。

这包括网页的整体外观、结构和交互功能。

网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。

一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。

重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。

2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。

3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。

4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。

考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。

当时网页主要是以文本为主，简单的超链接连接不同的信息。

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

HTML学习1.HTML 文件结构：<html>...</html><head>...</head><body>...</body>2. 基本组成部分——HTML元素属性：HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。

元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

<html><head><title>my first page</title></head><body><p align="center">This is my first homepage!</p></body></html>3. <head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

4. <meta>元素下面可以插入很多很有用的元素属性。

介绍四种–<meta name="keywords" content="study,computer">用来标记搜索引擎在搜索你的页面时所取出的关键词。

–<meta name="author" content=“wutao">用来标记文档的作者。

–<meta http-equiv=“Content-Type”content=“text/html;charset=gb2312”>用来标记你的页面的解码方式。

–<meta http-equiv=“refresh” content=“5;URL=”>用来自动刷新网页5. <body>元素表明是HTML文档的主体部分。

在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

<body>元素中有下列元素属性：(1)bgcolorbgcolor属性标志HTML文档的背景颜色。

如：bgcolor="#CCFFCC"。

HTML对颜色的控制也有自己的语法。

HTML使用16进制的RGB颜色值对颜色进行控制。

background属性标志HTML文档的背景图片。

如：background=“images/bg.gif"。

可以使用的图片格式为GIF，JPG(3)bgproperties=fixedbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。

(4)texttext属性标志HTML文档的正文文字颜色。

如：text=“#FF6666”。

Text 元素定义的颜色将应用于整篇文档。

(5)超级链接颜色link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。

(6) leftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离如：leftmargin="20"topmargin="30“6.文字属性标记文字颜色、大小、字体、标题（分1-6）<BODY><Font color=#0000ff size=6 FACE="黑体">兰色字黑体</font><br><font color=#ff0000 size=4 face="楷体_gb2312">红色字楷体</font><br> <font color=#00ff00 size=4 face="宋体">绿色字宋体</font><h1>文字的标题大小</h1><h2>文字的标题大小</h2><h3>文字的标题大小</h3><h4>文字的标题大小</h4><h5>文字的标题大小</h5><h6>文字的标题大小</h6></BODY>7.文字布局行的控制：段(Paragraph) (可以看作是空行) <p>；空白占位符 (注意要有分号)让它自动换行<br>；不让它自动换行<nobr>8.HTML文字与段落格式控制<BODY>正常字<b>加粗字体bold</b><br>正常字<i>斜体字italic</i><br>正常字<u>下画线字underlined</u><br>正常字<s>带删除线文字strikethrough</s><br>正常字<sup>上标字superscript</sup><br>正常字<sub>下标字subscript</sub><br>正常字--<em>em标记-斜体</em><p></p>正常字--<strong>strong标记-对内容进行强调</strong><p></p>正常字--<code>code标记-等宽字符</code><p></p>正常字--<var>var标记变量或程序参数-以斜体字来显示</var><p></p> 正常字--<small>small标记-文本以小字体显示</small><p></p>正常字--<big>big标记-文本以大字体显示</big><p></p<p>化学式：</p> 化学式：<p>H<sub>2</sub>O(水)</p> HO(水)2<p>代数方程式：</p> 代数方程式：x=x1+x22+...+x n<p>x=x<sub>1</sub>+x<sub>2</sub><sup>2</sup>+...+x<sub>n</sub></p ></BODY>9.HTML文档可以插入注释。

注释内容不会在浏览器窗口显示HTML注释的格式为：<!—注释的内容--><!—多行注释内容-->10.文字的对齐<hn align=#>...</hn> (n=1,2,3,4,5,6)<p align=#>...</p> (#=left, center, right)<BODY><h3 align=left>align标志的左对齐</h3><h3 align=center>align标志的居中对齐</h3><p align=right>p标志中利用align标志实现右对齐</p><center>center标志的居中对齐</center></BODY>11.文字的分区<div align=#> ... </div> (#=left, center, right)<BODY><div align=left>文字段</div><div align=center>文字段.</div><div align=right>文字段</div><P align=left>作为一名顶级吉他大师，<div align=center>盖米·摩尔</div>是在用他的心在划弦，而绝不是用手指.</p></BODY>12.HTML段落与分行控制（1）<center>元素是一个独立的使所标记的字符居中的元素。

它的作用与使用<p>元素里的align=“center”类似例如：<center>居中段落</center>（2）标尺线<hr size = #>：设定线宽<hr width=#>：设定线长<hr align=#>：设定对齐方式 #=left, right<hr color=#> ：设定线的颜色<BODY text=#0000ff><H3 align=center>Horizontal rule</h3><hr><hr size=10><hr width=50><hr width=50%><hr width=50% align=left><hr width=50% align=right><hr size=10 width=80% color=#ff0000><hr noshade></BODY>（3）无序列表元素无序列表是由<ul>和<li>元素定义的。

无序列表的默认符号是圆点。

<ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。

目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）<BODY>无序列表<ul><li type=disc>圆点无序列表项1</li><li type=circle>圆无序列表项2</li><li type=square>方块无序列表项3</li></ul><hr>有序列表<ol><li type=A>有序列表项1</li><li type=A>有序列表项2</li><li type=A>有序列表项3</li></ol><hr></BODY>（4）有序列表元素<ol>元素也有自己的type属性，type属性的属性值有1、A、a、I、i 等。