当前位置：文档之家 › html手写代码学习笔记

html手写代码学习笔记

  • 格式：doc
  • 大小：90.50 KB
  • 文档页数：12

01-01.什么是HTML整个网页加载时最先执行的代码head，在英文里面是头部的意思。

在英文里面body是身体的意思。

整个网页的主体内容。

<html><head><style>21互联远程教育网</style></head><body></body></html>01-02.什么是属性举个例子，什么是属性。

一辆汽车每小时行驶多少公里这是它的属性，每公里耗油量也是它的属性。

一个本子长和宽是他的属性。

<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" text="#000000">大家好，欢迎大家收看21互联远程教育网</body></html>Text:非链接文本颜色Bgcolor:背景颜色01-03.十六进制详解01-04.如何定义网页背景<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff">大家好，欢迎大家收看21互联远程教育网</body></html>Background背景资料相对路径：图片如在你所编辑文件的上一层就用../表示，如在同一文件夹当中可先写出子文件夹名称再用/分开然后写图片名称,如果与你所编辑文件在同一文件夹当中可直接写出图片名称.图片名称需英文.绝对路径:例一辆车在某省某市某个区的停车库里面.01-05换行标签＜br/＞<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff">Hello world<br><br>大家好，欢迎大家收看21互联远程教育网</body></html><br>是空标记01-06.段落标签＜p＞<html><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff">Hello world<p>大家好，欢迎大家收看21互联远程教育网</p></body></html><html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff">Hello world<p align="center">大家好，欢迎大家收看21互联远程教育网</p></body></html><html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff">Hello world<p align="center"><b>大家好，欢迎大家收看21互联远程教育网</b></p></body></html><html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff">Hello world<p align="center"><b><i>大家好，欢迎大家收看21互联远程教育网</i></b></p></body></html><html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff">Hello world<p align="center"><b><i><u>大家好，欢迎大家收看21互联远程教育网</u></i></b></p> </body></html>align对齐center中心right 右边left 左边 b 粗体i斜体u下划线01-07.背景属性Bgproperties<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff" bgproperties="fixed"> Hello world<p align="center"><b><i><u>大家好，欢迎大家收看21互联远程教育网</u></i></b></p> </body>bgproperties是控制body背景的一个属性，他的属性值为fixed的时候，它将把背景图像冻结在浏览窗口，背景图就不会随着其他窗口内容而滚动了。

但这个属性须跟background属性扩展一起使用时才有效。

如<body background="0.gif" bgproperties="fixed">fixed 固定的<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#ffffff" bgproperties="fixed">Hello world<p align="center"><b><i><u>大家好，欢迎大家收看21互联远程教育网</u></i></b></p><hr size="7" width="50" align="center" noshade="noshade" color="#FF0000"></body></html>size 大小,尺寸<上下宽度> width 宽度<输入数字或百分比>没有阴影效果的水平线：<hr noshade="noshade">01-08.预定义格式标签＜pre＞<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"><center>Hello world<strong><em>大家好，我们这套课程是介绍HTML的手写代码教程</em></strong></center><pre> 大家好，欢迎大家收看21互联远程教育网</pre></body></html>B和strong都可以让字体变成粗体，i和em和var和cite和dfn都可以让字体变成斜体。

address不仅可以让字体变成斜体，还可以和br一样有着换行的功能。

01-09.文字标签＜big＞、＜small＞、＜strike＞<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"><center>Hello world<strong><big>大</big><small>大</small>家好，我们这套课程是介绍HTML的手写代码教程</strong></center><pre> <strike>大家好</strike>，欢迎大家收看21互联远程教育网</pre>A<sub>1</sub>6<sup>2</sup></body></html>Strike 删除线big 大s mall 小sub 下标字sup 上标字01-10.标题元素＜h1＞——＜h5＞及文字元素＜font＞<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"> <center>Hello world<strong>大家好，我们这套课程是介绍HTML的手写代码教程</strong></center><pre> 大家好，欢迎大家收看21互联远程教育网</pre><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6></body></html>font没讲01-11.有序列表＜ol＞一<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"> <ol type="I"><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li><li>第五个项目</li><li>第六个项目</li></ol></body></html>ol称为有序清单标记Li表示有序清单中的各个项目01-12.有序列表＜ol＞二<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"> <ol type="1" start="3"><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li><li>第五个项目</li><li>第六个项目</li></ol></body></html><html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"> <ol start="2"><li type="a">第一个项目</li><li type="A">第二个项目</li><li>第三个项目</li><li>第四个项目</li><li>第五个项目</li><li>第六个项目</li></ol></body></html>01-13.有序列表＜ol＞三01-14.无序列表＜ul＞一<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"> <ol start="2"><li type="a">第一个项目</li><li type="A">第二个项目</li><li value="6">第三个项目</li><li>第四个项目</li><li>第五个项目</li><li>第六个项目</li></ol></body></html>Value设定当前项目从几开始<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"> <ul><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li><li>第四个项目</li><li>第五个项目</li><li>第六个项目</li></ul></body></html>01-15.无序列表＜ul＞二<html><head><style>21互联远程教育网</style></head><body bgcolor="#FF00aa" background="yangyan.jpg" text="#000000" bgproperties="fixed"><ul type="circle"><li type="disc">第一个项目</li><li>第二个项目</li><li type="square">第三个项目</li><li type="1">第四个项目</li><li>第五个项目</li><li>第六个项目</li></ul></body></html>ul没有设置属性和设置为type=“disc”时各项目前面为实心圆，ul设置属性type=“square”时各项目前面为实心方块，ul设置属性type=“circle”时各项目前面为空心圆。

合集下载

html5利用canvas手写签名并保存的实现方法

html5利用canvas手写签名并保存的实现方法

html5利⽤canvas⼿写签名并保存的实现⽅法最近公司在做⼀个签名的功能，主要⽤到了canvas画线的功能结合移动端touch事件js部分是这样的：window.onload = function() {new lineCanvas({el: document.getElementById("canvas"),//绘制canvas的⽗级divclearEl: document.getElementById("clearCanvas"),//清除按钮saveEl: document.getElementById("saveCanvas"),//保存按钮// linewidth:1,//线条粗细，选填// color:"black",//线条颜⾊，选填// background:"#ffffff"//线条背景，选填});};function lineCanvas(obj) {this.linewidth = 1;this.color = "#000000";this.background = "#ffffff";for (var i in obj) {this[i] = obj[i];};this.canvas = document.createElement("canvas");this.el.appendChild(this.canvas);this.cxt = this.canvas.getContext("2d");this.canvas.width = this.el.clientWidth;this.canvas.height = this.el.clientHeight;this.cxt.fillStyle = this.background;this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);this.cxt.strokeStyle = this.color;this.cxt.lineWidth = this.linewidth;this.cxt.lineCap = "round";//开始绘制this.canvas.addEventListener("touchstart", function(e) {this.cxt.beginPath();this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);}.bind(this), false);//绘制中this.canvas.addEventListener("touchmove", function(e) {this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);this.cxt.stroke();}.bind(this), false);//结束绘制this.canvas.addEventListener("touchend", function() {this.cxt.closePath();}.bind(this), false);//清除画布this.clearEl.addEventListener("click", function() {this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);}.bind(this), false);//保存图⽚，直接转base64this.saveEl.addEventListener("click", function() {var imgBase64 = this.canvas.toDataURL();console.log(imgBase64);}.bind(this), false);};这是效果图：附上html和css<div id="canvas"><p id="clearCanvas">清除</p><p id="saveCanvas">保存</p></div>html,body{width: 100%;height: 100%;}#canvas{width: 100%;height: 100%;position: relative;}#canvas canvas{display: block;}#clearCanvas{width: 50%;height: 40px;line-height: 40px;text-align: center;position: absolute;bottom: 0;left: 0;border: 1px solid #DEDEDE;z-index: 1;}#saveCanvas{width: 50%;height: 40px;line-height: 40px;text-align: center;position: absolute;bottom: 0;right: 0;border: 1px solid #DEDEDE;z-index: 1;}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

手写源码阅读笔记

手写源码阅读笔记

有关“手写源码”的阅读笔记
有关“手写源码”的阅读笔记如下：
1.了解代码的基本结构和功能：在阅读源码之前，先了解代码的基本结构和功能，包括
代码的组成部分、各个部分的作用以及它们之间的相互关系。

2.逐行阅读代码：从代码的开头开始，逐行阅读代码，理解每一行代码的作用和逻辑。

对于复杂的代码段，可能需要反复阅读和理解。

3.理解代码的算法和数据结构：源码中可能涉及到一些算法和数据结构，需要理解它们
的工作原理和使用方式。

这有助于更好地理解代码的逻辑和功能。

4.注释和文档：阅读源码时，需要注意代码中的注释和文档，它们可以帮助理解代码的
功能和实现方式。

5.实践和调试：在阅读源码的过程中，可以尝试运行代码并调试它，以验证自己对代码
的理解是否正确。

在阅读手写源码时，还需要注意以下几点具体内容：
1.耐心和细心：阅读手写源码需要耐心和细心，需要反复阅读和理解代码。

2.理解和实践：阅读手写源码不仅仅是理解代码的逻辑和功能，还需要理解和实践其中
的算法和数据结构。

3.文档和注释：在阅读手写源码时，需要注意文档和注释，它们可以帮助理解代码的功
能和实现方式。

4.调试和实践：在阅读手写源码的过程中，可以尝试运行代码并调试它，以验证自己对
代码的理解是否正确。

总之，手写源码的阅读笔记需要耐心、细心和实践，通过不断地学习和实践，可以提高自己的编程能力和理解能力。

html手写代码[整理版]

html手写代码[整理版]

html手写代码<body text=""> 设置非链接文字（普通文字）的颜色bgproperties="fixed" 文字滚动背景不动；；；颜色属性:1 2 位（红色）3 4位（绿色）5 6位（蓝色）bgcolor="背景颜色" background="网页背景" ../网页的上层文件<p>标签的属性 align="下一段中的文字对齐方向"<b></b>和<strong></strong>以粗体显示<i></i>,<cite></cite>,<em></em>,<var></var>,<dfn></dfn>以斜体显示 <u></u>加下滑线 <address>斜体加换行</address><hr> noshade属性（取消水平线的立体属性“阴影”）<center>要居中的内容</center><strike>要加上删除线的文字</strike> <big>要加大的文字</big><small>要缩小的文字</small> sub下标 sup上标<ol><li></li></ol>有序排列 type属性="排序方式" start="3"排序从三开始<li>的属性 type="排序类型" value="开始的值"<ul><li></li></ul>无序排列<table> cellspcing 表格之间的距离 cellpadding文字与边框的距离 bgcolor背景颜色<td>valign垂直对齐 top顶 middle居中对齐 bottom底端对齐</td><img src="" hspace="水平方向空白" vspace="垂直方向空白"><a href="链接网站" >图片链接<a><img="" src="" usemap="map(代表有热点区域片)" /></a><map name="" id="map"><area shape="热点形状：rect矩形circle 圆形poly不规则图像" coords="左上角和右下角的坐标"/></map><frameset rows=（框架横向的划分） cols="框架的垂直划分（12，*）" framespacing="两个边框的距离" frameborder="有无边框（值有1,0，yes，no）">框架标签<frame src="网页 id="" name="框架名字" scrolling="(yes和no)框架是否有滚动条"（框窗"<frameset><noframes><body></body></noframes> 当浏览器不支持框架时显示<body>和</body>之间的文字<iframe src="">当浏览器不支持iframe标签时显示的文字</iframe><marquee>width和height属性限制文字滚动的宽度和高度behavior属性决定文字滚动的方式scrollamount滚动速度 loop滚动次数元标签<meta name="description" content="描述信息"><meta name="keywords" contect="关键字">特殊符号在代码中的显示用指定的代码显示CSS行内样式 style= "border:#ffffff 10px solid(实线)"dotted虚线style="font-style:italic(斜体字)" font-size字体大小style="font-variant:small-caps" 将文字变成小型大写style="font-weght:{bold(粗体相当于把值设为700)，bolder（比normal粗一点)，lighter(比正常要细)}"style="font-family:"字体"" 一种字体不加引号或单引号多种加双引号style="text-decoration:underline(下划线),overline(上划线),line-through（中线）"style="text-align:文本对齐方式"style="letter-spacing:文字间的间隔像素"style="color:#颜色属性"background:可以设置多种属性如颜色背景图片background-color:设置背景颜色background:url() background-image:url()设置背景图片background-repeat:背景图片是否重复有no-repeat（不重复）repeat-x（横向重复）repeat-y（纵向重复）background-position:center（水平位置）center（垂直位置）; 控制图片的位置也可精确的控制图片的位置ru：background-position:*px或*% *px或*% 此处的px可省略也可特定设置水平和垂直的位置background-position-x（或y）margin（外空白）[余量]style="margin:*px"设置图片与border的空白style="margin-{left||right||bottom||top}:*px"设置单方的空白style="margin:*(上下空白) *（左右空白）"style="margin:*(left) *(right) *(bottom) *(left)"padding(内空白)[填充]usage and margin（用法与margin一样）css内联样式标签样式<style type="text/css"><!--a:link{}/*超链接未连接的时候*/a:hover{}/*当鼠标经过的时候*/a:active{}/*当单击超链接的时候*/a:visiited{}/*当访问过之后的样式*/这四个是伪类；；；；--></style>类样式<style type="text/css"><!--.* a:link--></style>在需要应用超链接css处添加代码 class="*"选择符组p,b{指定两个标签的相同样式}类选择符b.reg其中b是标签名reg是css类样式名When application[应用] in b labels[标签] add code in class ="reg" to register[登记][应用时在b标签中添加代码class="reg"]Class lable if added before the tag name only to the corresponding[应用] lables such effective[有效] [类标签前要是添加了标签名则该类只对对应的标签有效]ID选择符#ID（id号）When using in the tag[标签] to join id=""【当使用时在标签中加入id=""】td#one(标签#one)限定ID的作用标签包含标签td p（标签标签） {css样式}此css作用于td中的p标签与上面的.* a:link用法差不多伪类和类的结合 a.red:link method of use[使用方法]class=red；这种方法限制了此css只能在a标签中使用.red a:link 这种方法不限制css所应用的标签;;外部链接<link rel="stylesheet" （使用指定的样式表格式）type="text/css"(指定使用的文件是样式表文件) href="css/文件名"（css文件路径）>设为首页样式代码<a style="behavior:url(#default#homepage)"onclick="this.style.behavior='url(#default#homepage)';this. sethomepage(‘填入要设的网页’);return(false);" href=#>文字</a><a onclick="window.external.addfavorite('要收藏的网页','网站名称')" href=#>文字</a>例子（主页和收藏）<html><head><title>made of luye</title></head><body><a href=# style="behavior:url(#default#homepage)"onclick="this.style.behavior='url(#default#homepage)';this. sethomepage('')">homepage</a><p>111</p><a href=#onclick="window.external.addfavorite('' ,'qwer')">favorite</a></body></html>margin和padding的区别margin是标签与标签之间的空白padding 是标签之内的空白；。

HTML5+CSS3笔记

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>。