系统学习目录
第一篇——HTML/HTML5
第二篇——CSS/CSS3
第三篇——JavaScript
第四篇——jQuery
第五篇——Ajax & JSON
第六篇——Bootstrap
第七篇——Less
笔记目录
写在前面的:从今天(2019-11-04)开始系统的学习html,以w3cschool提供的微课和文档为基准,记录自己之前不知道的知识点。各位仅供参考。今天(2019-11-19)w3cschool的HTML微课学习完了,发现确实是微课讲了很多基础的东西也很实用,此文章之后就是在日常工作中的一点点补充了。
标签
属性
title
:大部分标签都具有的一个基本属性,用于鼠标悬浮该标签时展示提示文本。
格式化标签
<b>
:加粗;<i>
:斜体;<sub>
:下角标;sup
:上角标;ins
:插入;del
:删除;small
:小号字;strong
:强调(加粗);<em>
:强调(斜体)。
预留实体字符
,<
小于号:<
,>
大于号:>
,&
和号:&
,"
引号:"
,'
撇号:'
(IE不支持),¢
分:¢
,£
镑:£
,¥
人民币/日元:¥
,€
欧元:€
,§
小节:§
,©
版权:©
,®
注册商标:®
,™
商标:™
,×
乘号:×
,÷
除号:÷
。
<a>
- 在
<a>
标签中使用target
属性,你可以规定在何处打开链接文档。 target
属性值有:_blank
:在新窗口中打开被链接文档。_self
:默认。在相同的框架中打开被链接文档。_parent
:在父框架集中打开被链接文档。_top
:在整个窗口中打开被链接文档。framename
:在指定的框架中打开被链接文档。
<head>
标签 | 描述 |
---|---|
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<noscript> | 定义在脚本未被执行时的替代内容(包含普通 HTML 页面的 body 元素中能够找到的所有元素。) |
<style> | 定义了HTML文档的样式文件 |
自定义列表
- 自定义列表以
<dl>
标签开始。 - 每个自定义列表项以
<dt>
开始。 - 每个自定义列表项的描述以
<dd>
开始。
<iframe>
- 可以把需要的文本放置在
<iframe>
和</iframe>
之间,这样就可以应对不支持<iframe>
的浏览器(一些旧的浏览器不支持<iframe>
)。 frameborder
用于定义<iframe>
是否显示边框。 属性默认值为“1”,表示开启边框。设置 frameborder 属性值为 “0” ,则表示移除<iframe>
的边框。
<table>
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头(表头单元格) |
<tr> | 定义表格的行 |
<td> | 定义表格单元(标准单元格) |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
- 在使用了
<thead>
、<tbody>
、<tfoot>
后,表格是“从头到脚”显示。也就是说,不论放在哪,都优先显示,再以此类推往下加载。
<form>
enctype
:<form>
的一个属性。application/x-www-form-urlencoded
为默认值,在发送前对所有字符进行编码(将空格转换为 “+” 符号,特殊字符转换为 ASCII HEX 值)。multipart/form-data
,不对字符串编码,当使用有文件上传表单控件时必须为此值。注:只有 method=“post
” 时才使用 enctype 属性。autocomplete
:用于form或input域的输入提示。当用户在自动完成域中输入时,浏览器应该在该域显示填写的选项。值:on
,off
<input type="submit" value="提交" />
定义了提交按钮。<button type="submit">提交</button>
同样效果。
<button>
submit
:该按钮是提交按钮(除了 IE 浏览器,该值是其他浏览器的默认值)。button
:该按钮是可点击的按钮(IE 浏览器的默认值)。reset
:该按钮是重置按钮(清除表单数据)。- 不同的浏览器对 元素的 type 属性使用不同的默认值。所以要始终为
<button>
元素规定type
属性。
<fieldset> , <legend>
- 两者都是一种表单标签,后者写在前者里。
<fieldset>
定义了一组相关的表单元素,并使用外框包含起来。<legend>
定义了 元素的标题。效果如图:
内容类型(HTML)
- 元数据(Metadata):通常出现在页面的
head
中,设置页面其他部分的行为和表现。<base>
、<link>
、<meta>
、<script>
、<noscript>
、<style>
、<title>
。 - 内联(Embedded):在文档中添加其他类型的内容。
<audio>
、<video>
、<canvas>
、<iframe>
、<img>
、<math>
、<object>
、<svg>
。 - 交互(Interactive):与用户交互的内容。
<a>
、<audio>
、<video>
、<button>
、<details>
、<embed>
、<iframe>
、<img>
、<input>
、<label>
、<object>
、<select>
、<textarea>
。 - 标题(Heading):定义段落标题。
<h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
、<hgroup>
、<svg>
。 - 短语(Phrasing):文本和文本标记元素。
<img>
、<span>
、<strong>
、<label>
、<br />
、<small>
、<sub>
等。 - 区段(Sectioning):定义标题、内容、导航和页脚的范围。
<article>
、<aside>
、<nav>
、<section>
。 - 流(Flow)内容:包含在文档正常流中的大多数HTML5元素。
- 相同的元素可以属于多个内容模型。
HTML5 的元素按优先等级定义为结构性元素、级块性元素、行内语义性元素和交互性元素四大类。
结构性元素
- 结构性元素主要负责 Web 的上下文结构的定义,确保 HTML 文档的完整性,这类元素包括以下几个:
<header>
:页面主题上的头部,注意区别于<head>
元素。<nav>
:是专门用于菜单导航、链接导航的元素,是 “navigator” 的缩写。<article>
:用于表示一篇文章的主题部分,一般为文字集中显示的区域。<section>
:在 Web 页面应用中,该元素也可以用于区域的章节表述。<footer>
:页面的底部(页脚)。
级块性元素
- 级块性元素主要完成 Web 页面区域的划分,确保内容的有效分隔,这类元素包括以下几个:
<aside>
:用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。<figure>
:是对多个元素进行组合并展示的元素,通常与<figcaption>
联合使用。<figure> <img src="https://www.w3cschool.cn/statics/images/logonew2.png" alt="The Pulpit Rock" width="304" height="58" /> <figcaption>这是一个由figure标签包裹的图片</figcaption> </figure>
<code>
:表示一段代码块。<dialog>
:用于表达人与人之间的对话,该元素还包括<dt>
和<dd>
这两个组合元素,它们常常同时使用。<dt>
用于表示说话者,而<dd>
用来表示说话者的内容。注意:目前只有 Chrome 和 Safari 6 支持 dialog 标签。<dialog open> <dt>提示:</dt> <dd>好好学习,天天向上</dd> </dialog>
行内语义性元素
- 行内语义性元素主要完成 Web 页面具体内容的引用和表述,是丰富内容展示的基础,这类元素包括以下几个:
<meter>
:表示特定范围内的数值,可用于工资、数量、百分比等。<meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60%</meter>
<time>
:表示时间值。<p>我们在每天早上 <time>9:00</time> 开始上班。</p> <p>我在 <time datetime="2021-02-14">情人节</time> 有个约会。</p>
<mark>
:定义带有记号的文本。<p>Do not forget to buy <mark>milk</mark> today.</p>
<progress>
:用来表示进度条,完成对进度的表示和监视。<progress>
标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用<meter>
标签代替。<video>
:视频元素,用于支持和实现视频(含视频流)文件的直接播放,支持缓冲预载和多种视频媒体格式,如 MPEG-4、OggV 和 WebM 等。<audio>
:音频元素,用于支持和实现音频(音频流)文件的直接播放,支持缓冲预载和多种音频媒体格式。
交互性元素
- 交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础,这类元素包括以下几个:
<details>
:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与<legend>
交互才会显示出来。<details> <summary>W3Cschool</summary> <p> - by W3Cschool Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company W3Cschool Data.</p> </details>
<datalist>
:定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。<menu>
:主要用于交互菜单。注:所有主流浏览器均不
支持 menu 元素。<command>
:用来处理命令按钮。注:只有
Internet Explorer 9 (更早或更晚的版本都不支持)支持<command>
标签。只有当 command 元素位于 menu 元素内时,该元素才是可见的。
<audio>,<video>
- 格式:mp3,wav,ogg。mp4,webm,ogg。
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> <video width="320" height="240" controls autoplay loop> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>
<source>
:标签用来定义多种媒体资源。controls
:属性提供播放、暂停、音量和下载控件。<audio>
元素允许使用多个<source>
元素。<source>
元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。- 可以在
<audio>
和</audio>
之间放置文本内容,这些文本信息将会被显示在那些不支持<audio>
标签的浏览器中。
<progress>
- 作用:定义运行中的任务进程,进度条。
- max:进度条满值。
- value:进度条的当前值。
- 其他:不设置任何属性时,会有一个小块一直循环往复的晃动。
<select>,<datalist>
- 下拉选项框与自动完成列表。
<select> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </select> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
- 下拉选项框:会默认展示一个值,标签间的字符为展示字符,value的属性值是获取的真正值。
- 自动完成选项框:没有默认展示值,列表数据为动态匹配输入内容的自动完成选项。
<input>的输入类型:type
search
:搜索输入框,放在form表单中,点击回车
相当于直接点击了提交按钮,有×
可以清除输入内容。email
:简单的自动验证邮箱格式。tel
:简单的自动验证电话号格式。url
:简单的自动验证网址格式。date
:输入框变为日期选择期。time
:输入框变为时间输入框。
SVG
什么是SVG?
- 可伸缩矢量图形(Scalable Vector Graphics)。
- 定义用于网络的基于矢量的图形。
- 使用xml格式定义图形。
- 图像在放大或改变尺寸的情况下其图形的质量不会有损失。
- 是万维网联盟的标准。
SVG画图
<svg width="1000" height="1000">
<circle cx="100" cy="40" r="40" fill="blue" />
<rect width="200" height="200" x="150" y="25" fill="red" />
<line x1="20" y1="30" x2="200" y2="300" style="stroke:#002233;stroke-linecap:round;stroke-width:20;" />
<polyline style="stroke-linejoin:miter;stroke:black;stroke-width:2;fill:none;" points="100 100,150 150,200 100"/>
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green;" />
<polygon points="300 50,400 150, 450 100" style="fill:grey;stroke:black;"/>
<path d="M150 0 L75 200 L225 200 Z" style="fill:white;stroke:red;stroke-width:2"/>
</svg>
- 圆形:cx和cy为圆心,r为半径,fill填充颜色。不写cx和cy默认为(0,0)。
- 矩形:x和y为矩形左上角坐标。坐标原点为svg框定范围的左上角。
- 直线:stroke:线条颜色,stroke-linecap:线条端点样式(butt没有端点默认值,round圆端点,square方端点),stroke-width:线条宽度。
- 曲线:stroke-linejoin:两条线交角的边角形状(bevel斜角,round圆角,miter尖角默认值),fill默认黑色。
- 椭圆:rx和ry分别为椭圆的横、纵周半径。
- 多边形:写不少于三个点的多边形,自动依次连接形成封闭图形。最后一个点连第一个点。
- 路径:上述例子表示它开始于位置(M)150 0,到达位置(L)75 200,然后从那里开始到(L)225 200,最后在150 0关闭路径(Z)。
M
= moveto;L
= lineto;H
= horizontal lineto;V
= vertical lineto;C
= curveto;S
= smooth curveto;Q
= quadratic Bézier curve;T
= smooth quadratic Bézier curveto;A
= elliptical Arc;Z
= closepath;以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
SVG动画
- SVG动画使用
<animate>
元素创建。<svg width="1000" height="250"> <rect width="150" height="150" fill="orange"> <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> </rect> </svg>
- attributeNmae:图形的哪个属性产生动画效果。
- from:指定属性起始值。
- to:指定属性结束值。
- dur:指定动画运行的时间。
- fill:指定动画结束后图形所处的位置。freeze动画结束的终点,remove动画的初始位置。
- repeatCount:动画重复播放的次数。无限重复使用
indefinite
。
<canvas>
<canvas>
元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。画布API详解getContext()
方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。- 画线:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); //定义线条开始坐标。 ctx.lineTo(200,100); //定义线条结束坐标。 ctx.stroke();
- 画圆:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); //arc(x,y,r,start,stop) ctx.stroke(); ctx.scale(2,2);//所有之后的绘图都会被缩放。定位也会被缩放。如设置 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。 ctx.stroke();
- 画文本:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.textAlign="start"; //start、end、left、right、center ctx.fillText("w3cschool",10,50); //在画布上绘制“被填充的”文本 ctx.strokeText("w3cschool",10,100); //在画布上绘制文本(无填充) ctx.translate(100, 150); //重新映射画布上的 (0,0) 位置 ctx.fillText("after translate", 20, 40); ctx.rotate( (Math.PI / 180) * 25); //旋转当前绘图 rotate 25 degrees. ctx.fillText("after rotate", 20, 40);
- 画渐变:渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
var c1=document.getElementById("myCanvas1"); var ctx1=c1.getContext("2d"); var c2=document.getElementById("myCanvas2"); var ctx2=c2.getContext("2d"); // 创建渐变,渐变必须两种或两种以上的停止颜色。 var grd1=ctx1.createLinearGradient(0,0,200,0); grd1.addColorStop(0,"red"); //指定颜色停止,参数使用坐标来描述,可以是 0 至 1。 grd1.addColorStop(1,"white"); // 创建渐变 var grd2=ctx2.createRadialGradient(75,50,5,90,60,100); grd2.addColorStop(0,"red"); grd2.addColorStop(1,"white"); // 填充渐变 ctx1.fillStyle=grd1; ctx1.fillRect(10,10,150,80); // 填充渐变 ctx2.fillStyle=grd2; ctx2.fillRect(10,10,150,80);
- 画图像:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("myimg"); ctx.drawImage(img,10,10);
SVG 与 Canvas 的区别
- SVG
- SVG 是一种使用
XML
描述 2D 图形的语言。 - SVG 基于
XML
,这意味着SVG DOM
中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。 - 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
- 特点:
- 不依赖分辨率。
- 支持事件处理器。
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)。
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)。
- 不适合游戏应用。
- SVG 是一种使用
- Canvas
- Canvas 通过
JavaScript
来绘制 2D 图形。 - Canvas 是逐像素进行渲染的。
- 在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
- 特点:
- 依赖分辨率。
- 不支持事件处理器。
- 弱的文本渲染能力。
- 能够以 .png 或 .jpg 格式保存结果图像。
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘。
- Canvas 通过
HTML安全色
- 数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。在线WEB安全色查询
API
Web存储
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 清除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
- sessionStorage使用的API与localStorage的相同。
- localStorage 与 sessionStorage 的区别
localStorage
对象存储的数据没有时间限制。sessionStorage
方法针对一个session
进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
Geolocation API
Geolocation
(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。- Geolocation API 的主要方法是
getCurrentPosition()
,它用来获得用户的位置。<body> <input type="button" name="demo" id="demo" onclick="getLocation()" value="获取" /> <p id="position">地理位置:</p> <script type="text/javascript" charset="utf-8"> var x = document.getElementById("position"); function getLocation() { if (navigator.geolocation) { //getCurrentPosition(successCallback, errorCallback,PositionOptions) navigator.geolocation.getCurrentPosition(function (res) { showPosition(res) }); } else { x.innerHTML = "该浏览器不支持获取地理位置。"; } } function showPosition(position) { // position包含coords和timestamp。 // coords属性包含七个值,accuracy:精确度,latitude:纬度,longitude:经度,altitude:海拔,altitudeAcuracy:海拔高度的精确度,heading:朝向,speed:速度。 x.innerHTML = "纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </script> </body>
拖动
-
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev){ ev.preventDefault(); //阻止默认事件 } // 规定了被拖动的数据。 function drag(ev){ //数据类型是 "Text",值是可拖动元素的 id ("drag1") ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖动 w3cschool.cn 图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="/statics/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
- 首先,为了使元素可拖动,需要把
draggable
属性设置为 true 。所有元素都可设置draggable
属性,img
和a
自带可拖动。 - 拖动什么
ondragstart
和setData()
。ondragstart
属性调用了一个函数,drag(event)
,它规定了被拖动的数据。dataTransfer.setData()
方法设置被拖数据的数据类型和值。 - 放到何处
ondragover
事件规定在何处放置被拖动的数据。默认无法将数据/元素放置到其他元素中。如果需要设置允许放置,必须阻止对元素的默认处理方式。 - 进行放置
ondrop
。当放置被拖数据时,会发生 drop 事件。