Web标准：
HTML + CSS + JavaScript
HTML: 标记语言
CSS： 美化页面
JavaScript： 用户和浏览器交互
参考：
https://developer.mozilla.org/zh-CN/
模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="_blank" />
<title>网页标题</title>
</head>
<body>
</body>
</html>
HTML 元素整理：
| <a> | 链接标签 <a href="url" target="">文本或图像</a> | |||||||||||||
| <abbr> | 缩写 | |||||||||||||
| <address> | 地址 | |||||||||||||
| <area> | 带有可点击区域的图像映射 | |||||||||||||
| <article> | ||||||||||||||
| <aside> | ||||||||||||||
| <audio> | 音频 | |||||||||||||
| <b> | 加粗 | <b></b>，<strong><strong/> | ||||||||||||
| <base> | 设置整体链接的打开状态， _blank 单标签 | |||||||||||||
| <bdi> | ||||||||||||||
| <bdo> | ||||||||||||||
| <blockquote> | ||||||||||||||
| <body> | HTML文档的内容 | |||||||||||||
| <br> | 换行 <br /> | |||||||||||||
| <button> | 按钮 | |||||||||||||
| <canvas> | Use the <canvas> with either the canvas scripting API or the WebGL API to draw graphics and animations. | |||||||||||||
| <caption> | 表格标题 | |||||||||||||
| <cite> | 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题 | |||||||||||||
| <code> | ||||||||||||||
| <col> | 表格列 | |||||||||||||
| <colgroup> | ||||||||||||||
| <data> | 嵌入自定义数据 | |||||||||||||
| <datalist> | 类似组合框 | |||||||||||||
| <dd> |
<dl> <dt>名词1</dt> <dd>名词1 解释1</dd> <dd>名词1 解释2</dd> <dt>名词2</dt> <dd>名词2 解释1</dd> <dd>名词2 解释1</dd> </dl> | |||||||||||||
| <del> | 加删除线 | <s></s>, <del></del> | ||||||||||||
| <details> | . | |||||||||||||
| <dfn> | ||||||||||||||
| <dialog> | 对话框 | |||||||||||||
| <div> | 可定义文档中的分区或节 没有语义 是网页布局的一个盒子 | div span是网页布局的主要两个盒子 在页面效果上，使用 <div> 会自动换行，使用 <span> 就会保持同行 | ||||||||||||
| <dl> | 自定义列表 | <dl> <dt>名词1</dt> <dd>名词1 解释1</dd> <dd>名词1 解释2</dd> <dt>名词2</dt> <dd>名词2 解释1</dd> <dd>名词2 解释1</dd> </dl> | ||||||||||||
| <dt> | 自定义列表 （范例 小米官网底部。） | <dl> <dt>名词1</dt> <dd>名词1 解释1</dd> <dd>名词1 解释2</dd> <dt>名词2</dt> <dd>名词2 解释1</dd> <dd>名词2 解释1</dd> </dl> | ||||||||||||
| <em> | 斜体文本效果 | <i></i>,<em></em> | ||||||||||||
| <embed> | The <embed> embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in. | |||||||||||||
| <fieldset> | 组框 | |||||||||||||
| <figcaption> | ||||||||||||||
| <figure> | 标题 | |||||||||||||
| <footer> | A footer typically contains information about the author of the section, copyright data or links to related documents. | |||||||||||||
| <form> | 表单标签 | <form action="" method="post">
action method name
| ||||||||||||
| <h1><h2><h3><h4><h5><h6> | 标题标签 | 表单控件，表单域，提示信息 | ||||||||||||
| <head> | 网页头部标签 | |||||||||||||
| <header> | ||||||||||||||
| <hr> | 水平线。 （单标签 <hr />） | |||||||||||||
| <html> | ||||||||||||||
| <i> | 斜体文本效果 | <i></i>,<em></em> | ||||||||||||
| <iframe> | 可以嵌入视频 | |||||||||||||
| <img> | 图像 （单标签） <img src="URL" /> |
| ||||||||||||
| <input> | 属性有 type, name, value, size, checked, maxlenth | |||||||||||||
| <input type="button"> | 按钮 | |||||||||||||
| <input type="checkbox"> | ||||||||||||||
| <input type="color"> | ||||||||||||||
| <input type="date"> | 日期 | |||||||||||||
| <input type="datetime"-local> | ||||||||||||||
| <input type="email"> | ||||||||||||||
| <input type="file"> | 选择文件 | |||||||||||||
| <input type="hidden"> | ||||||||||||||
| <input type="image"> | 图像形式的提交按钮 | |||||||||||||
| <input type="month"> | 选择月 | |||||||||||||
| <input type="number"> | 编辑框，仅仅输入数字 | |||||||||||||
| <input type="password"> | 密码框 | |||||||||||||
| <input type="radio"> | 单选框 | |||||||||||||
| <input type="range"> | 滑块 | |||||||||||||
| <input type="reset"> | 重置按钮 | |||||||||||||
| <input type="search"> | ||||||||||||||
| <input type="submit"> | 提交按钮，submit the form to the server. | |||||||||||||
| <input type="tel"> | 编辑框：电话号码 | |||||||||||||
| <input type="text"> | 单行编辑框 | |||||||||||||
| <input type="time"> | ||||||||||||||
| <input type="url"> | 编辑框，输入URL | |||||||||||||
| <input type="week"> | 编辑框：周 | |||||||||||||
| <ins> | 加下划线 | <u></u><ins></ins> | ||||||||||||
| <kbd> | 键盘按键标识 | |||||||||||||
| <label> | 静态文本（为input服务） | 属性for | ||||||||||||
| <legend> | represents a caption for the content of its parent <fieldset>. | |||||||||||||
| <li> | 列表项。（有序列表，无序列表） | <ol> <ul> | ||||||||||||
| <link> | The <link> specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets. | |||||||||||||
| <main> | ||||||||||||||
| <map> | ||||||||||||||
| <mark> | 马克笔 | |||||||||||||
| <menu> | ||||||||||||||
| <meta> | 元素可提供有关页面的元信息（meta-information） | |||||||||||||
| <meter> | ||||||||||||||
| <nav> | ||||||||||||||
| <noscript> | ||||||||||||||
| <object> | 代表一个外部的资源, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. | |||||||||||||
| <ol> | 有序列表 | <ol> <li>中</li> <li>苏</li> <li>美</li> </ol> | ||||||||||||
| <optgroup> | 组合框+ | |||||||||||||
| <option> | 组合框 | |||||||||||||
| <output> | 输出结果 | |||||||||||||
| <p> | 段落 | |||||||||||||
| <param> | ||||||||||||||
| <picture> | ||||||||||||||
| <pre> | ||||||||||||||
| <progress> | 进度条 | |||||||||||||
| <q> | ||||||||||||||
| <rb> | ||||||||||||||
| <rp> | ||||||||||||||
| <rt> | ||||||||||||||
| <rtc> | ||||||||||||||
| <ruby> | ||||||||||||||
| <s> | 加删除线 | <s></s>, <del></del> | ||||||||||||
| <samp> | ||||||||||||||
| <script> | The <script> is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language. | |||||||||||||
| <section> |
| The 文档中的区段 | ||||||||||||
| <select> | 下拉菜单 | <select> <option></option> <option></option> <option></option> </select> | ||||||||||||
| <slot> | ||||||||||||||
| <small> | The <small> element makes the text font size one size smaller | |||||||||||||
| <source> |
| The <source> specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is an empty element. It is commonly used to serve the same media content in multiple formats supported by different browsers. | ||||||||||||
| <span> | 没有语义。 是网页布局的一个盒子。
| div span是网页布局的主要两个盒子 在页面效果上，使用 <div> 会自动换行，使用 <span> 就会保持同行 | ||||||||||||
| <strong> | 加粗 | <b></b>，<strong><strong/> | ||||||||||||
| <style> | The <style> contains style information for a document, | |||||||||||||
| <sub> | ||||||||||||||
| <sup> | ||||||||||||||
| <table> | 表格 | <table> <caption>表格标题</caption>
PS：<th> 属性 colspan rowspan | ||||||||||||
| <tbody> | ||||||||||||||
| <td> | a cell of a table | |||||||||||||
| <template> | ||||||||||||||
| <textarea> | 多行文本编辑框 | |||||||||||||
| <tfoot> | ||||||||||||||
| <th> | 表头标签 | The <th> defines a cell as header of a group of table cells. | ||||||||||||
| <thead> | ||||||||||||||
| <time> | ||||||||||||||
| <title> | 网页文档标题 | |||||||||||||
| <tr> | The <tr> defines a row of cells in a table | |||||||||||||
| <track> | The <track> is used as a child of the media elements <audio> and <video>. | |||||||||||||
| <u> | 加下划线 | <u></u><ins></ins> | ||||||||||||
| <ul> | 无序列表 | <!-- --> <ul> | ||||||||||||
| <var> | 变量类型 | |||||||||||||
| <video> | 视频 | |||||||||||||
| <wbr> | ||||||||||||||
|
空格，< > & 等 | 特殊字符标签 |   | ||||||||||||
| <!-- 注释文本 --> | 注释标签 |
HTML常用
| id | The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). |
CSS
| 1.内部样式表 | <head> <style> color: pink; } </head> |
| 2.行内样式表: | <h4 style="color: pink;">Hello World</h4> |
| 3.外部样式表 | 实际工作中，以此为主 <link rel="stylesheet" href="css/style.css" /> |
CSS选择器：
| 标签选择器 | div{ color:red; } |
| 类选择器 | .okButton{ color:red; } class="" class="red font20" 可以有多个类 |
| id选择器 | #last{ color:pink; } id是唯一的 |
| 通赔符选择器 | *{ color: pink; } 用的很少。 |
| 后代选择器 | div p{ color: pink; } |
| 交集选择器 | |
| 伪类选择器 | 用户向某些选择器添加特殊效果 :link 未访问的链接 :visited 已访问的链接 :hover 鼠标移动到链接上 :active 选定的链接 该伪状态不能更换顺序 |
CSS常用属性
| font-size | 字号大小 em px等 推荐px |
| font-family | 字体； 宋体，微软雅黑, microsoft yehei
|
| font-weight | |
| font-style | 字体风格 |
| color | #FF0000 |
| text-align | 文本对齐 |
| text-indent | 首行缩进 |
| text-decoration | 用于给链接修改装饰效果 none underline overline line-through |
| display | block、inline-block、inline |
| line-height | 行高 |
| background-color | |
| background-image | |
| background-repeat | |
| background-position | |
| border | |
| border-collapse | border-collapse: collapse ; 细线边框 |
| float | 浮动，left,right 让多个div一行内显示 |
| margin 0 auto |
JavaScript
| ECMAScript标准 | js的基本语 |
| DOM---Document Object Model | 文档对象模型 |
| BOM---Browser Object Model | 浏览器对象模型 |
是一门脚本语言。
功能
| 网页特效 | |
| 服务端开发 | node.js |
| 命令行工具 | Node.js |
| 桌面程序 | Electron |
| App | Cordova |
| 控制硬件-物联网 | Ruff |
| 游戏开发 | cocos2d-js |
script 标签在页面可以出现多对。
script 标签最好是放在body的标签的最后。（加载顺序的考虑）
JS提示：
| 原始数据类型 | number： 整数或小数 string： "Hello" 'world' boolean： true false null： 空类型 undefined： object： 对象 |
| 变量初始化 | js的变量都用var： js的大小写是有区分的； js的字符串可以是单引号，也可以双引号 var number = 10; var name = "小黑"; var flag = true; var nll = null; var obj = new object(); alert(name); console.log(name); //浏览器的控制台 console.log(name， flag)； console.log(typeof name); console.log(parseInt("10")); //转整数 console.log(parseFloat("10")); //转小数 console.log(Number("10.98")); //转数字 console.log(num.toString());//转字符串 console.log(String(num1)); //转字符串 console.log(Boolean(1));//转布尔类型 |
| 数组 | var 变量名 = new Array(); var 变量名 = new Array(5); var arr = []; var arr = [10,20,30]; var arr = [10,"hello",true,null]; console.log(arr.lenth); 数组的长度可以变化。
|
| 分支 循环语句 | 和C语言很像 |
| 函数 | functioin cook(){ console.log("Hello world"); } function consoleSum(x,y){ var sum = x+y; console.log(sum); } function consoleSum(x,y){ return x+y; } |
| 对象 | js有三种对象： 1.内置对象 2.自定义对象 3.浏览器对象
var obj = new object(); obj.name = "小小"; obj,age = 38; obj.sex = "女"; obj.eat = function(){ console.log("i eat"); }
判断变量的类型： 变量 instanceof 类型的名字--->布尔
如何一次性的创建多个对象？把创建对象的代码封装在一个函数中。
//自定义构造函数创建对象 function Person(){ this.name = "xiaoxiao"; this.age = 10; } var obj = new Person();
var obj = {};//空对象
//使用字面量创建对象 var obj = { name:"xiaoxiao", age:20 }
obj["name"] = "dada"; |
| JSON格式 | json也是对象
var json={ "name":"xiaoxiao", "age":"10", "sex":"男", };
for(var key in json){ console.log(key); console.log(json[key]); }
|
| 基本包装对象类型 | |
| DOM | |
| prototype | 静态变量 |
扫一扫
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
