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 | 静态变量 |