html笔记大全
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名称为canvas、宽度为400px、⾼度为300px--><canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制： ⽅法⼀：<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像--><script src="canvas.js"></script> ⽅法⼆：<!--或者直接在body⾥编写代码--><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+CSS3笔记
HTML5一、HTML5 概述二、HTML5基本格式一．HTML5 文档结构1.第一步：打开Sublime Text 3，打开指定文件夹；2.第二步：保存index.html 文件到磁盘中，.html 是网页后缀；3.第三步：开始编写HTML5 的基本格式。
<!DOCTYPE html> //文档类型声明<html lang="zh-cn"> //表示HTML 文档开始<head> //包含文档元数据开始<meta charset="utf-8"> //声明字符编码<title>基本结构</title> //设置文档标题</head> //包含文档元数据结束<body> //表示HTML 文档内容<a href="">百度</a> //一个超链接元素（标签）</body> //表示HTML</html> //表示HTML 文档结束二．文档结构解析1.Doctype文档类型声明（Document Type Declaration，也称Doctype）。
它主要告诉浏览器所查看的文件类型。
在以往的HTML4.01 和XHTML1.0 中，它表示具体的HTML 版本和风格。
而如今HTML5 不需要表示版本和风格了。
<!DOCTYPE html> //不分区大小写2.html 元素首先，元素就是标签的意思，html 元素即html 标签。
html 元素是文档开始和结尾的元素。
它是一个双标签，头尾呼应，包含内容。
这个元素有一个属性和值：lang="zh-cn"，表示文档采用语言为：简体中文。
<html lang="zh-cn"> //如果是英文则为en3.head 元素用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。
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+css+javascrtpt 课程笔记3(吐血整理)
javascript 3=============================================================================== 1.Dom（文档对象模型）编程简介DOM = Document Object Model(文档对象模型)，根据W3C的DOM规范，DOM是HTML 与XML的应用编程接口（API），它将整个页面映射为一个由层次节点组成的文件。
编程人员通过访问dom 对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。
2.html dom层次图dom编程的核心是各个dom 对象。
HTML DOM定义了访问和操作HTML文档的标准方法。
HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)，每个节点是一个HTML DOM内置对象。
3.BOM（浏览器对象模型）介绍通过使用BOM，可移动窗口、更改状态栏文本。
bom 是w3c 组织提出的，他建议所有的浏览器都应当遵循这样的设计规范。
可以说bom 和dom 关系密切, 相互影响，bom 为纲，dom为目，我们可以简单的理解，dom 是bom 中document的具体实现。
要求浏览器必须支持4.常用dom对象window对象window 对象表示一个浏览器窗口或一个框架。
在客户端JavaScript中，Window 对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。
注：在使用window对象的方法和属性的时候，可以不带window，如下window.alert(“韩顺平!”)等价于：alert(“韩顺平”)。
常用方法和属性：✧alert() 显示消息和一个确认按钮的警告框✧confirm() 显示消息以及确认按钮和取消按钮的对话框✧setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式✧clearInterval() 取消由setInterval()设置的定时器✧setTimeout() 指定的毫秒数后调用一次函数或计算表达式✧clearTimeout() 取消由setTimeout()设置的定时器✧moveTo() 把窗口的左上角移动到一个指定的坐标✧moveBy() 可相对窗口的当前坐标把它移动指定的像素✧resizeBy() 按照指定的像素调整窗口的大小✧resizeTo() 把窗口的大小调整到指定的宽度和高度✧open() 打开一个新的浏览器窗口或查找一个已命名的窗口✧close() 关闭窗口✧closed 返回窗口是否已被关闭✧status 设置窗口状态栏的文本✧opener 返回对创建此窗口的窗口的引用✧onload 页面装载✧onunload 关闭窗口案例：一个js版用户登录系统，当用户输入顺平密码是123，就跳到第二个页面，5秒后，自动跳转到第三个页面。
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("你要写的话")>開啟网頁時彈出對話框。
HTML学习笔记——DOCTYPE和DTD，标准模式和兼容模式
HTML学习笔记——DOCTYPE和DTD，标准模式和兼容模式主要涉及知识点：HTML与XHTMLHTML与XHTML的区别DOCTYPE与DTD的概念DTD的分类以及DOCTYPE的声明⽅式标准模式（Standard Mode）和兼容模式（Quircks Mode）标准模式（Standard Mode）和兼容模式（Quircks Mode）的区别HTML与XHTMLHTML:超⽂本标记语⾔ (Hyper Text Markup Language)XHTML:可扩展超⽂本标记语⾔ (EXtensible HyperText Markup Language)，是⼀种置标语⾔。
HTML是⼀种基于标准通⽤标记语⾔（SGML）的应⽤，XHTML则基于可扩展标记语⾔（XML）XHTML的⽬标是取代HTML，与HTML4.01⼏乎相同，是更严格更纯净的 HTML 版本。
HTML 和 XHTML 的区别简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。
本质上说，XHTML是⼀个过渡技术，结合了部分XML的强⼤功能及⼤多数HTML的简单特性。
建⽴XHTML的⽬的就是实现HTML向XML 的过渡。
在HTML5成为主流之前，Html4.01⼀直是⼤多数⼈使⽤的Html版本，Html5⽬标是取代HTML4.01和XHTML1.0标准，旨在提⾼⽹页性能，增加页⾯交互。
HTML与XHTML的区别XHTML 与 HTML 4.01 标准没有太多的不同。
主要的不同体现在下⾯⼏点：XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须⽤⼩写字母。
XHTML ⽂档必须拥有根元素。
DOCTYPE与DTD的概念 ⽂档类型定义(Document Type Definition)是⼀套为了进⾏程序间的数据交换⽽建⽴的关于标记符的语法规则，是HTML的验证机制。
HTML学习笔记
HTML学习笔记王慧东2017/11/6基础知识1、html：超文本标记语言，标记：就是用来描述网页内容的一些特定符号，不是编程语言，而是一种描述性的标记语言。
2、制作html网页文件a、新建一个记事本文件，将他重命名*.htmlb、在里面输入网页的信息内容c、在要修饰的内容的两侧加html标记3、html标记的语法：标记分为两种：单标记、双标记a、<标记符>没有结束的标记---单标记<标记名称>单一型，无属性值，如<br><标记名称属性=“属性值”>单一型，有属性值，如<hr width="50%">b、<开始标记><结束标记> ---双标记<标记名称></ 标记名称>没有属性值，如<title></title><标记名称属性=“属性值”></ 标记名称>有属性值<bodybgcolor="red"></body>注意：源代码中的效果，并不是浏览器最终的效果。
4、标记与属性、属性之间以空格分隔，属性不区分先后顺序，且属性不是必须的。
5、在xhtml中，规定，所有html标记都要小写，所有标记都要有关闭html---xhtml<br>---<br />6、html文档结构所有的网页文件，通常由四对标记来构成，文档的骨架：<html>标识网页文件的开始与结束，所有html元素都要放在这对标记中<head>标识网页文件的头部信息，如标题、搜索引擎的关键字等<title>标识网页文件的标题标题</title></head><body>标识网页文件的主题部分正文</body></html>7、meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。
韩顺平_轻松搞定网页设计html+(DIV+CSS)+javascript视频笔记(全)
韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font><!--使用<font color=red></font>来调整字体颜色--></br><!-2-><font size=7 color=blue>hello world1</font><!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7--></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font><!--使用CSS中<font style="font-size:40px"></font>将字体调整更大--></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--*****************html超链接案例***************--><!--*****************html超链接默认格式***************--><a href="">超链接</a> </br> <!--超链接基本格式--><!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--><a href=""target= "-blank">在新窗口打开</a><!--超链接在新窗口下打开文件--></br><a href=""target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><!--*****************图片元素***************--><img src ="a.jpg" width="100" > <!--***********插入图片************--><a href=""><img src ="a.jpg" width="100" ></a> <!--***********图片链接************--> <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> <!--*******border表示为插入的图片加上边框********--></body></html>Table表格：<!--<table border=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><!--<table border=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>--><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***--></table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><frame src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><!--frame元素中有一个属性，相当于给该frame取名--><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密 码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区**<!--cols表示行，rows表示列-->*******</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font><!--使用<font color=red></font>来调整字体颜色--></br><!-2-><font size=7 color=blue>hello world1</font><!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7--></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font><!--使用CSS中<font style="font-size:40px"></font>将字体调整更大--></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--*****************html超链接案例***************--><!--*****************html超链接默认格式***************--><a href="">超链接</a> </br> <!--超链接基本格式--><!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--><a href=""target= "-blank">在新窗口打开</a><!--超链接在新窗口下打开文件--></br><a href=""target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><!--*****************图片元素***************--><img src ="a.jpg" width="100" > <!--***********插入图片************--><a href=""><img src ="a.jpg" width="100" ></a> <!--***********图片链接************--> <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> <!--*******border表示为插入的图片加上边框********--></body></html>Table表格：<!--<table border=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><!--<table border=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>--><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***--></table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><fram e src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><!--frame元素中有一个属性，相当于给该frame取名--><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密 码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区**<!--cols表示行，rows表示列-->*******</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>DIV+CSS部分笔记当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
《从0到1 HTML5 Canvas动画开发》读书笔记思维导图
8.7 透明处理
8.8 createImageDat a(...
9.2 径向渐变
9.1 线性渐变
9.3 阴影
10.2 beginPath() 方法和c...
10.1 什么是路径？
10.3 isPointInPath()...
11.2 clip()方法
11.1 什么是状态
11.3 save()方法和 restor...
4
6.4 切割图片
5
6.5 深入图片 操作
7.1 变形操作简介 7.2 图形平移
7.3 图形缩放 7.4 图形旋转
7.5 变换矩阵 7.6 深入变形操作
7.7 实战题：绘制绚 丽的图形
7.8 实战题：绘制彩 虹
8.1 像素操作简介 8.2 反转效果
8.3 黑白效果 8.4 亮度效果
8.5 复古效果 8.6 红色蒙版
12.1 Canvas对象
12.2 globalAlpha属性
12.3 globalComposit e...
12.4 strokeStyle 和fil...
第二部分 Canvas进阶
第13章 事件操作 第14章 物理动画
第15章 边界检测 第16章 碰撞检测
第17章 用户交互 第18章 高级动画
05
3.5 三次 贝塞尔曲线
1
4.1 线条操作 简介
4.2
2
lineWidth属
性
3
4.3 lineCap 属性
4
4.4 lineJoin 属性
5 4.5
setLineDash ()方法
5.2 文本操作方法
5.1 文本操作简介
5.3 文本操作属性
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内容⼤都是评论列表、⽂章列表，有着清晰的结构且是独⽴完整的⼀部分；包裹⽂章中各个章节的段落，但要在编辑器完成，⽬前来看并不易⽤。
HTML语言-学习笔记-yjddd出品
多行文本框
<text area rows=4 cols=20 name=简历 width=3000></textarea>
按钮
<input type=submit>提交</input>
<input type=reset value=重填>重填</input>
ps:针对form的内容重填；
loop 循环次数，height=100%
清单标签
1、有序标签 order list
<ol></ol>
<ol type=i start=6>
<li>孝敬父母
<li>工作任劳任愿
<li>组织能力强
</ol>
2、无序清单
<ul>
<li>
</ul>
type属性值
css层叠样式表
cascading,style,sheet;
标签<style></style>位置放置在<head></head>
属性
<style type=text/css>
td<!-- td的样式 -->
{
border-left-color:#000000;
border-right-color:#000000;
<body>标签中的属性
bgcolor 背景颜色
topmargin 顶边距
bottommargin 底边距
HTML+CSS常用代码（笔记）
HTML+CSS常⽤代码（笔记）注释标签：对代码进⾏说明<!-- 单⾏注释,也可以对多⾏⽂字进⾏注释 -->常⽤格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换⾏<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调⽂本</strong>../：返回上⼀级（⽗级）⽬录标题标签<h1>我是⼀级标题标签(最⼤)</h1><h2>我是⼆级标题标签</h2><h3>我是三级标题标签</h3><h4>我是四级标题标签</h4><h5>我是五级标题标签</h5><h6>我是六级标题标签(最⼩)</h6>列表标签⽆序列表：<ul type="disc"> <!--disc:圆点；circle：圆圈；square：⽅块--><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>有序列表：<ol type="1"> <!--1，a/A，i/I--><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>⾃定义列表：图⽂混排<dl><dt>标题，图⽚</dt><dd>描述</dd></dl>CSS样式 内嵌样式:放在<head>标签之间语法：<style type="text/css">选择器名 {属性名:属性值;}</style>所有标签（*）* {padding:0px; /*清除默认内边距*/margin:0px; /*清除默认外边距*/}⽂本属性line-height:20px; /*⾏⾼*/text-align:center; /*对齐：Left|right|center|justify*/text-decoration:none; /*⽂本修饰None：默认|underline：定义⽂本下的⼀条线|overline：定义⽂本上的⼀条线|line-through：定义穿过⽂本下的⼀条线*/ Letter-spacing:5px; /*字母之间的间距*/Text-indent:40px; /*⾸⾏的缩进⽅式：px/%*/字体标签及属性<font>字体标签</font><!--字体CSS属性--><style type="text/css">font-size:字体⼤⼩（常⽤单位：px/%/em...）;color:颜⾊;font-style:字体样式;font-family:字体系列;font-weight:字体粗细;</style>例：<font size="6" color="#FF0000" face="微软雅⿊">我是字体标签</font>背景相关的属性background-color: red; /*设置背景颜⾊*/background-image: url(图⽚路径); /*设置背景图⽚（图⽚路径没有引号包裹）*/background-repeat: no-repeat; /*设置背景的平铺⽅式：Repeat-x、repeat-y、no-repeat*/Background-attachment: Fixed; /*设置滚动：Scroll、Fixed*/background-position: center; /*设置背景的坐标，偏移量,如left、right、center、button*/background-position:100px -100px;/*第⼀值：左右偏移量，正：向右偏移，负：向左偏移；第⼆值：上下偏移量，正：向下偏移，负：向上偏移*//*可以为px、%、cover、continuecover: 不会造成图⽚失真，会铺满整个标签。
html笔记
第一天HTML【教学内容】HTML基本标签◆Html介绍◆文件标签◆排版标签◆块标签◆字体标签◆清单标签◆图形标签◆链接标签◆表格标签HTML表单标签◆Form标签◆Input种类◆Select与option标签◆Textarea标签HTML框架及特殊字符◆框架标签◆其它标签与特殊字符【教学总结】【第一阶段】【学习目标】1.了解html常用标签2.掌握html中的表格标签3.理解综合案例4.掌握超链接标签【内容：html基本标签】Html介绍1.什么是html?Html是用来描述网页的一种语言。
●HTML 指的是超文本标记语言(Hyper Text Markup Language)●HTML 不是一种编程语言，而是一种标记语言 (markup language)●标记语言是一套标记标签 (markup tag)●HTML 使用标记标签来描述网页2.Html的作用？Web浏览器的作用是读取html文档，并以网页的形式显示它们。
浏览器不会显示html标签，而是使用标签来解释页面上的内容.简单说，html就是用于展示信息的。
3.Html书写规范a)Html标签HTML 标记标签通常被称为HTML 标签(HTML tag)。
●HTML 标签是由尖括号包围的关键词，比如<html>●HTML 标签通常是成对出现的，比如<b> 和</b>●标签对中的第一个标签是开始标签，第二个标签是结束标签●绝大多数的标签都具有属性,建议属性值使用引号引起。
例如:<bodytext=”red”>●大多数标签是可以嵌套的b)Html创建Html文件可以直接使用文本编辑器来创建，保存时，后缀名为html或htm整个文件是在<html>与</html>标签之间在<html>标签间有<head>与<body>子标签。
例如:c)空的html标签●没有内容的HTML 元素被称为空元素。
(完整版)HTML爱淘课学习笔记
爱淘课学习笔记1、html头部标记（1) 网页标题标记〈title〉</title〉；(2）meta标记meta叫做元信息标记,这个元素提供的信息不显示在页面中，一般用来定义页面的关键字、页面说明、刷新等。
meta标记不需要结束标记，一个尖括号内就是一个meta内容，在一个html页面中可以有多个meta。
meta元素的属性有两个:分别是name和http—equiv.name-—设置网页的关键字和描述信息等；设置关键字：如：<meta name=”keywords” content=”百度贴吧" >设置描述信息，如：<meta name=”description”content="这是描述信息” /〉其他的，还可以设置网页作者,如：〈meta name=”author” content=”周杰伦" / 〉http-equiv——定义网页语言的属性,当访客浏览你的网页时，浏览器会自动识别并设置网页中的语言；设置语言：<metahttp—equiv=”content-type”content=”text/html”charset=”GB2312” />(前半部分需要记忆，只需要更改charset的属性值就可以了，可以更改为中文、日文、英文等)。
设置网页在指定时间自动跳转:〈meta http—equiv=”refresh”content="5;url=http://www。
” / 〉即网页打开5秒钟之后，自动跳转到百度页面上。
2、body标签（1）body标签的属性①设置网页背景色或网页背景图body标签中用bgcolor来定义网页的背景颜色，属性值为16进制的颜色值。
直接写在body标签的尖括号里即可。
如：<body bgcolor="＃FF00FF”>body标签中用background属性来定义网页的背景图，如：<body background=”1.jpg”〉（建议图片地址使用相对路径)②设置文字的颜色—-通过body标签的text属性如:<body text="＃FFFF00”>我们可爱的学校〈/body〉预览网页，可发现字体的变化。
笔记一：Login.html
笔记⼀：Login.html作为⼀个初学者，在学习PHP中遇到不少的问题，现在开始将我们学习的所有页⾯进⾏剖解和疑问解答，⾸先是Login.html 这个页⾯全部都是静态HTML语⾔，所以没有太多的讲的，但是最重要的有⼀点，就是要注意将HTML页⾯填写的数据传到loginCheck.php中进⾏数据的处理时，需要对form标签进⾏认真的编写：<form name="f2" action="LoginCheck.php" method="post">..账号：<input type=”text” name=”name” value=””>密码：<input type=”password” name=”pw” value=””>..<.form>此处的3个标签是⼀定不能少的，第⼀个是名字，要先对它进⾏命名，然后action就是将这个表单⾥的数据提交给谁来处理，当然这⾥是提交给LoginCheck.php去处理，第三个就是method，翻译过来就是⽅法、⽅式，意思就是说将这个表单⾥的数据通过什么⽅式传送到LoginCheck.php⽹页⾥⾯去。
因为是做PHP的疑问笔记，就不对HTML进⾏解释了，这⾥的input标签中的type是指类型：包括button、checkbox、file、hidden、image、password、radio、reset、submit、text这⾥只⽤到text和password；name是指这个input的名字，value就是⽂本框中的值。
Login页⾯的笔记就到这⾥了。
实战开发时完整的代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title>login</title><meta charset="utf-8"><link href="styles/login.css" rel="stylesheet" type="text/css"></head><body><form name="f2" action="LoginCheck.php" method="post"><div id="top"><img id="logo" src="images/logo.jpg"><span id="toptext"><a>设为⾸页</a>|<a>加⼊收藏</a>|<a>关于我们</a>|<a>联系我们</a></span></div><div id="main"><div id="pic"><div id="loginBox"><b class="alphaBg">这个层⽤来显⽰背景</b><div class="loginItem"><div class="title"><p>管理员⼊⼝</p></div><div class="content"><div class="item">登录名：<br><input type="text" name="uid" class="input"></div><div class="item">密码：<br><input type="password" name="pwd" class="input"></div><div class="item"><br><input type="image" src="images/btnLogin.png"></div></div></div></div><div id="btnChange"></div></div></div><div id="bottom"><a>关于我们</a>|<a>官⽅博客</a>|<a>客户服务</a>|<a>隐私政策</a>|<a>今时代公司版权所有 © 2014-2015<a> </div></form></body></html>。
HTML5学习笔记(Color)
HTML学习(颜色名)HTML 文档类型HTML设定字符集：meta http-equiv=Content-TypeHTML字符集用于说明HTML页面的内容所使用的文字和语言。
HTML语言用于告诉浏览器该以什么内码、什么语言来显示网页。
错误的设置网页的字符集会导致页面出现乱码的现象。
语法：<meta http-equiv="Content-Type" content="text/html"; charset="xxx">说明：http-equiv传送HTTP通信协议的标头。
content定义网页使用的内码，其中charset定义该网页内码所使用的语言类别。
示例：<meta http-equiv="Content-Type" content="text/html"; charset="gb2312">该示例表示该网页所使用的字符集是GB2312简体中文。
以下是部分HTML字符集代码列表：gb2312 简体中文big5 繁体中文EUC_KR 韩语Shift_JIS 或EUC_JP 日语KOI8-R / Windows-1251 俄语iso-8859-1 西欧语系（荷兰语,英语,法语,德语,意大利语,挪威语,葡萄牙语,瑞士语.等十八种语言）iso-8859-2 中欧语系iso-8859-5 斯拉夫语系（保加利亚语,Byelorussian语,马其顿语,俄语,塞尔维亚语,乌克兰语等）uft-8、unicode多语言国内基本上用的是gb2312 简体中文、big5 繁体中文、uft-8多语言。
<meta charset="UTF-8"> <!-- for HTML5 --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />ZC: 注意：源码文件(?.html 等)，需要保存为UTF-8编码格式的文件HTML 代码:<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ]2. $("A>B") 查找A元素下面的直接子节点例子：匹配表单中所有的子级input元素。
html做笔记
html做笔记如何用HTML做高效的笔记HTML是一种用于创建网页的标记语言，它可以让我们用简单的标签来定义网页的结构和样式，也可以让我们用超链接来连接不同的网页或资源。
HTML不仅可以用于制作网站，也可以用于做笔记。
用HTML做笔记有以下几个优点：- HTML笔记可以在任何浏览器中打开，不需要安装特定的软件或插件，也不需要担心格式的兼容性和转换问题。
- HTML笔记可以利用超链接来组织和管理笔记，可以实现跨文件、跨网页、跨平台的链接，也可以实现本页的锚点链接，方便快速跳转和查找。
- HTML笔记可以利用CSS和JavaScript来美化和增强笔记，可以自定义笔记的颜色、字体、布局、动画等，也可以添加一些交互和功能，如搜索、排序、筛选、折叠等。
那么，如何用HTML做高效的笔记呢？以下是一些基本的步骤和技巧：1. 准备工具。
要用HTML做笔记，我们需要一个文本编辑器和一个浏览器。
文本编辑器可以用任何能够编辑纯文本的软件，如记事本、VSCode、Sublime Text等，浏览器可以用任何能够解析HTML 的软件，如Chrome、Firefox、Edge等。
另外，我们还可以安装一些扩展或插件，来帮助我们更方便地编辑和查看HTML，如Emmet、Live Server、Highlighter等。
2. 创建文件。
要用HTML做笔记，我们需要创建一个以.html 为后缀的文件，这个文件就是我们的笔记文件。
我们可以给这个文件起一个有意义的名字，如html_note.html，然后用文本编辑器打开这个文件，开始编辑我们的笔记内容。
3. 编写结构。
要用HTML做笔记，我们需要遵循HTML的基本语法，用一对一对的标签来定义我们的笔记内容。
一个最简单的HTML文件的结构如下：html<html><head><title>我的HTML笔记</title></head><body><!-- 这里是我的笔记内容 --></body></html>4. 编写样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.HTML的简介2.HTML: 超文本标记语言，网页语言。
超文本标记语言：超出文本的范畴。
标记：HTML所有操作都是通过标签实现的。
标签就是标记。
<标签>HTML的后缀.htm 或者.html 。
HTML规范：开始<html>结束</html>。
成对出现。
特殊的标签单个出现<br/>换行。
内容：1.<head>设置相关内容</head> <title>标题</title>2.<body>显示在页面上的内容</body>3.标签成对出现<head></head>4.标签不区分大小写。
5.有些标签没有结束标签，在标签内结束，<hr/>水平线。
HTML的核心思想（*****）网页很多数据，不同的数据需要显示的效果不一样，这个时候需要使用标签把要操作的数据（包装起来），通过修改标签的属性值实现标签数据样式的变化。
一个标签相当于一个容器，想要修改容器内的样式，只需要改变容器的属性值，就可以实现容器内数据的样式变化。
HTML最常用的标签3.文字标签和注释标签*文字标签：修改文字的样式- <font></font>属性 size:文字的大小范围1-7 超出默认为7。
color：文字颜色两种表示：1.英文单词：red green 。
2.使用16进制表示#ffffff*注释标签：<!-- html的注释 --> 。
4.标题标签，水平线标签和特殊字符标题标签：大小依次变小自动换行<h1></h1><h2></h2><>……水平线标签：<hr/> 属性：**Size:水平线粗细 **Color:颜色代码<hr size=”5” color=”blue”/><br/><br/>换2行。
特殊字符: <:< >:> 空格： & : & 5.列表标签展示效果<dl>传智播客 <dt>传智播客</dt>财务部 <dd>财务部</dd>学工部 <dd>学工部</dd>人事部 <dd>人事部 </dd></dl>***<dl></dl>:表示列表范围***<dt></dt>:表示上层内容***<dd></dd>:表示下层内容***<dd></dd>:表示下层内容***………………………………………..****<ol></ol>:有序列表的范围属性type:设置排序方式 1（默认）a i。
**在ol标签里面<li>具体内容</li>代码：<ol><li>财务部</li><li>学工部</li><li>人事部</li></ol>****<ul></ul>:有序列表的范围属性type: 实心圆circle 空心圆disc 实心方块square ,默认disc5、图像标签（******）<img src=”图片的路径”width=””height=””alt=”图片上显示的文字”/> --src:图片的路径--width:图片的宽度–height：图片的高度–alt：图片上显示的文字。
6、路径的介绍**绝对路径：完整的路径。
**相对路径：一个文件相对于类外一个文件的位置。
**html文件和图片在同一个路径下，直接把名字写在路径下。
**图片在html下一层的路径，把后面的路径拿过来用。
**图片在html上一层的路径， ../加上图片的名字。
../../ 表示上2层路径。
7、案例联系*<pre>原样输出标签</pre>8、超链接标签（*****）***链接资源<a href=”链接到资源的路径”> 顶部</a>href: 链接的资源的地址，里面的如果是空链接时”#”表示。
target:设置目标打开的方式，默认在当前页打开。
_blank : 在新的页面打开。
_self : 在当前页面打开。
***定位资源***如果想定位资源：定义一个位置<a name=”top”>顶部</a>**回到这个位置<a href=”#top”>回到顶部</a>9、表格标签（*****重要的很******）<table>表格的范围属性：border=”1” bordercolor=”blue”cellspacing=”0”width=”40”height=”40”.border:表格线 bordercolor:表格线颜色 cellspacing:单元格之间的距离。
<tr align=”left”>表示行</tr> <td>在行标签的里面表示行里面的单元格</td>在tr和td标签下属性：显示方式 align: left center right***<th>表格实现居中加粗标签</th>***表格标题写着table里面***<caption>表格标题标签</ caption ><tr> *** 表示几行。
<td></td> *** 表示每行的单元格。
<td></td><td></td></tr></table>表格技巧：先数有几行有几行就有几个<tr></tr>，在数每行有多少个单元格<td></td>。
**合并单元格跨行:rowspan=”几行”跨列:colspan=”几列”10、表单标签<form>表示定义一个表单的范围</form>****** form里面的属性***action=”路径”数据跳到页面。
***method=”请求的方式”有以下2种。
1.get和post,默认是get。
2.get请求携带提交数据，安全性低，数据大小有限制。
Post相反。
*****enctype:做文件上传需要设置这个属性。
**输入项：可以输入内容和选择内容的部分。
必须加一个name 属性。
必须有一个value属性值--大部分的输入项使用<input type=”输入项类型”/>***普通输入项：<input type=”text”/><br/>***密码输入项：<input type=”password”/><br/>***单选输入项：<input type=”radio”/><br/>***文件输入项：<input type=”file”/> 上传用。
--- 在里面加属性：name=””----Name属性值一定要一样**实现默认选项 checked=”checked”放在想选择的属性上。
***多选输入项：<input type=”checkbox”/><br/>--- 在里面加属性：name=””----Name属性值一定要一样----必须有一个value属性值。
必须加一个name 属性。
***下拉输入项（不是在input标签里面的）。
<select name=”birth”name=”mingzi” ><option value=”1992”>1992 selected=”selected”</option> *** 选项 <option value=”1993”>1993</option><option value=”1993”>1993</option></select>**实现默认选项 selected=” selected”放在想选择的属性上***文本域<textarea cols=”20” rows=”10”></textarea>***隐藏项（代码中有而在页面上不会显示）<input type=”hidden”/>***提交按钮<input type=”submit” value=”按钮上的字”/>输入项name的值=输入的值***参数类似于key=value形式.***图片提交按钮：<input type=”image “src=”图片路径”/>**重置按钮(回到输入项的初始状态)<input type=”reset” value=”按钮上的字”/>**普通按钮<input type=”button” value=”按钮上的字”/>11、案例：使用表单来实现注册页面。
-------使用表格实现页面效果。
-------超链接不想要她有结果 href=”#”-------如果表格里面的单元格没有内容，使用空格作为占位符&nasp;-------使用图片提交表单<input type=”image”src=”图片的路径”/>。
12、html中其他的常用标签的使用b：加粗s：删除线u：下划线i：斜体pre:原样输出sub:下标sup:上标div:自动换行显示块span:不会自动换行在一行显示块p:段落标签比br标签多换一行。
13、html的头标签的使用*html两部分组成head和body**在head里面的标签是头标签**title:表示游览器显示的内容。
**meta:设置页面上的一些内容。
<meta name=”keywords”content=”毕姥爷，熊出没，刘翔”>**content:内容的意思。
<meta http-equiv=”refresh”content=”3”;url=”绝对定位的地址”/>refresh:刷新后面3表示内容刷新的时间为3秒.**base标签：设置超链接的基本设置<base target=”_blank”/>**link标签：引入外部文件**明天css，可以使用link标签引入css文件。