微信小游戏---HTML学习笔记（1）
最近想做微信小游戏的开发，准备从html+css+js三种语言开始，会做一个学习的系列博客，加油加油！！
快捷键：
ctrl+j---类似于ctrl+d
官方文档：http://www.w3.org
1.编码格式
a.gb2312 简体中文（格式保存ANSI）
b.gbk 国标码
c.utf-8 多国语言
2.编辑工具：editPlus
3.书写规范：
a.不区分大小写，最好小写
b.属性值：用“”括起来
4.标签
a.<b></b> 加粗-----内容
b.<strong></strong> 加粗------标题（加强语气）
c.<i></i> 倾斜
d.<em></em>倾斜-------加强语气
e.<u></u> 下划线
f.<ins></ins> 插入的文本
g.<sup></sup> 上标------用于公式
h.<sub></sub> 下标------用于公式
i.<p></p> 一段
段落的属性（标题的属性）： Align-----取值:left/center/right
j.<h1></h1> 标题1
k.<h2></h2> 标题2 。。。。。<h6></h6> 标题6
l.<pre></pre> 预定义书写的文本格式（保留原有的空格个换行）
m.<div></div> 自己独占一行----可以划分网页结构（与CSS一起使用））---块标签
n.<span></span> 与CSS一起使用----行内标签
注：一段内容多个标签应该顺序嵌套，不能交叉
5.块标签：自己独占一行
<h1></h1>....<h6></h6> <p></p> <div></div>
行内标签：不能独占一行
<u> <em> <span> <i>......
注：通常是块标签里面包括行内标签
6.列表
a.无序列表：若干个相似内容进行排列，没有先后顺序
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
......
</ul>
ul属性：type---设置列表前面符号的样式 circle:空心圆 disc:默认（实心圆） square：实心方形
b.有序列表：若干个相似内容进行排列，有先后顺序
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
......
</ol>
ol属性：type---设置列表前面符号的样式 circle:空心圆 disc:默认（实心圆） square：实心方形
c.自定义列表
<dl>
<dt>自定义列表标题</dt>
<dd>对该标题进行描述</dd>
</dl>
7.特殊字符
a. :一个空格，代表一个字符，一个汉字占两个字符
b.©:版权
c.<；---左括号(<) >---右括号(>)
d.¥---人民币符号( ¥ )
8.字符集
a.ASCII码
b.ANSI:在中文---gb2312(2个字节：16位2进制) 繁体-----big5
c.GBK:收录2.1万个
d.Unicode:4个字节（32位二进制）
e.utf-8：不同字符，选择不同编码
9.META标签：网页文档的属性
a.http-equiv---模拟http文件头信息，内容从服务器发到客户端，告诉浏览器如何正确的显示
字符集：
<meta http-equiv="content-type"content="text/html;charset=xxx"/>
网页自动刷新:
<meta http-equiv="refresh" content="time"/> 间隔time时间刷新一次网页
<meta http-equiv="refresh" content="time;xxxx网址"/> 间隔time时间跳转到另一个网页（xxxx网址--为绝对地址）
b.name-----可以设置网页关键字，描述信息等
<meta name="Keywords" content="key"/>
<meta name="description" content="网站的描述信息"/>
<meta name="author" content="作者"/>
10.表格
（1）语法：
<table>--------表格标签
<tr>-------------行
<td>xxx</td>----------单元格
<td>xxx</td>
<td>xxx</td>
.....
</tr>
....
</table>
xxx：可以放图片 空用 
（2）table属性：
a.边框：border="value" 默认是0
b.宽度 width="value"
c.高度 height="value" -----不建议写死高度 内容是动态填入的
d. align left/center/right (左/中/右)
e.内容和单元格之间(与单元格边框)的距离 cellpadding="value" value默认为2
f.单元格和单元格之间的距离 cellspacing="value" value默认为2
g.背景颜色 bgcolor="value"
h.背景图片 background="path" --图片路径不能为中文
注：背景图片的优先级高于背景颜色
（3）tr属性
a. height="value" 行的高度
b.bgcolor="value" 行背景颜色
c.background="path" 背景图片
d.align="left/center/right" 水平对齐方式
e.valign="top/middle/bottom" 垂直对齐方式
（4）td属性
a. width="value" 行的宽度
b. height="value" 行的高度
c.bgcolor="value" 行背景颜色
d.background="path" 背景图片
e.align="left/center/right" 水平对齐方式
f.valign="top/middle/bottom" 垂直对齐方式
（5）表格的合并边框线 rules="all" (后期用css实现)
表格的边框线颜色 bordercolor="value" (后期用css实现)
（6）表格的扩从
a.合并单元格
A.横向合并（行单元格合并）
colspan="value" 合并value个单元格
B.纵向合并（列单元格合并）
rowspam="value" 合并value个单元格
11.图片--------单标签，行内标签
<img 属性名="属性值"/>
(1)属性：
a.宽度 width="value" 单位为:px
b.高度 height="value"
c.图片描述 alt="value"
d.路径 src="path" (图片要放在同一个站点下/同一个文件夹下)
e.边框 border="value" 默认为0
f.图片和内容左右之间的距离 hspace="value"
g.图片和内容上下之间的距离 vspace="value" （以后用css实现）
h.图片等比例缩放：只设置宽度或高度
12.链接
（1）语法
<a 属性=“value”>内容</a>
（2）属性
a.链接的地址 href="连接的地址 url"
url绝对地址:网络地址-----http://wwww.baidu.com
本地地址-----file:///C:/Users/admin/Pictures/%E5%95%A6%E5%95%A6%E5%95%A6.html
相对地址：同一个站点下/同一个文件夹下的地址、
A.目标文件和当前文件再同一目录---直接写目标文件名字.
B.目标文件和当前文件的下一级---XX/文件名.
B.目标文件和当前文件的上一级---../文件名.
b.Target 打开目标文件的窗口
A._blank 在新的窗口中打开目标文件
B._self 在原来的窗口中打开目标文件(默认)
c.name 定义锚点的名称
同一个页面的不同区域之间跳转
定义锚点：<a name="xxx"></a> 标签之间没有内容，给链接中的target用
跳转锚点：<a href="#锚点名称">xxx</a>
（3）特殊链接
a.下载链接
不用下载直接做链接 .html .jpg .gif .......
下载做链接 .zip .exe .........
b.邮件链接
<a href="mailto:邮件地址">内容</a>
c.空链接
<a href="#">xxx</a>
d.js链接
<a href="javascript:window.close()">关闭</a>
13.颜色的代码
<color="value"></color>
14.表单
<form action="xx.php">
</form>
a.输入框：
<input type="text" name="xxx" size="value" maxlengh="value" value="xxx"/>
name---写入php脚本中数据的标识名称
size---该输入框可以输入的字符长度
maxlengh----该输入框可以输入的最大字符长度
value----输入框初始显示值
b.密码：
<input type="password" name="xxx" size="value" maxlengh="value" value="xxx" readonly="readonly" disable="disable"/>
name---写入php脚本中数据的标识名称
size---该输入框可以输入的字符长度
maxlengh----该输入框可以输入的最大字符长度
value----输入框初始显示值
readonly---只读（能选中）
disable---不能选中不能更改
c.单选按钮：
<input type="radio" name="xxx" value="xxx"/>
name:一组类型的名称标识，一组类别名称一样
value：初始值，代表每一项的值
d.复选框：
<input type="checkbox" name="xxxx" value="xxx" checked="checked"/>
name:一组类型的名称标识，一组类别名称一样
value：初始值，代表每一项的值
checked:默认选中项
e.多行文本框：
<textarea row="value" cols="value" name="xxx">value</textarea>
row---行数
cols---每行显示的字符数
name---多行文本的识别名称
value----默认初始值，写在两个标签之间，而不是跟属性写在一起
f.下拉列表：
<select name="xxx">
<option value="xxx">显示内容</option>
<option value="xxx">显示内容</option>
<option value="xxx">显示内容</option>
....
</select>
name---下拉列表的识别名称
value--每个option写入脚本的值
g.隐藏域：值针对程序用
<input type="hidden" name="id1"/>
h.文件域：
<input typr="file" name="xxx"/>
name ---文件域识别名称
value---不写value，通过客户选折，只读
i.按钮
A.提交按钮 <input type="submit" value="xxx"/>
图片按钮(属于提交按钮)
<input type="image" src="path"/>
B.重置按钮 <input type="reset" value="xxx"/>
C.普通按钮 <input type="button" value="xxx" οnclick="xx"/>--必须结合程序构成功能
15.Xhtml---可扩展的超文本标记语言
a.输入的属性和标签必须是小写
b.单标签必须加'/',<br/>
c.属性必须用""
d.必须有dtd(document type definition) 文档类型定义---检验输入的xhtml是否符合规范
dtd：过渡性 xhtml-transitional：允许使用的标签和属性：<b> <i> <font color="xx">
严格型 xhtml-strict：不允许使用标签和属性，必须使用css的样式
框架型 xhtml-frameset：给框架用（基本不用，不兼容）
微信小游戏---HTML学习笔记（1）相关推荐
- 微信小游戏开发学习记录2
接上一篇:微信小游戏开发学习记录_寂静流年韶华舞的博客-CSDN博客_微信小游戏开发学习 目录 一.UI系统 1.基础渲染组件-精灵组件 (1)操作: (2)Sprite 属性 (3)渲染模式 2.L ...
- wechat_微信小程序的学习笔记
微信小程序的学习 目标 一.初识小程序 1.小程序简介 二.安装并创建小程序项目 1.注册小程序开发账号(目的:获取AppID) 2.安装小程序开发者工具 3.创建和配置小程序项目 三.学习小程序项目 ...
- 微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目 文件目录设置 JS文件 环境使用及创建项目 环境使用:微信开发者工具 一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
- 微信小程序Day2学习笔记
学习目标 此笔记参考b站 黑马程序员微信小程序开发视频 D盘有文件写入权限问题,,今天换成了C盘,希望要撑住.. 1.WXML 模板语法 1.数据绑定 的基本原则 在 data 中定义数据 在 WXM ...
- 微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面由几部分组成 能够知道小程序中常见的组件如何使用 能够知道小程序如何进行 ...
- 微信小程序Day4学习笔记
学习目标 基础强化 目录 1. 自定义组件 - 创建 新建组件 1. 引用组件 2. 局部引用组件 在 json 中 引用, 在页面 wxml 中 可以用标签 - 添加使用 3. 全局引用组件 全局配 ...
- 微信小程序进阶学习笔记Day05
学习目标:微信小程序基础Day05 今日目标: 能够知道如何安装和配置 vant-weapp 组件库 能够知道如何使用 MobX 实现全局数据共享 能够知道如何对小程序的 API 进行Promise ...
- 微信小程序，学习笔记（三）微信小计算器
新年快乐,开工咯~~!! 2017年,新年上班第一天,大家都忙着串领导办公室领红包,我这人比较懒,就工位旁边领导领了个,闲着无聊,来写这新年第一遍博客,程序其实是去年回家前搞定的,今天算是给补上这篇记 ...
- 微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构 能够使用 WXSS 样式美化页面结构 能够使用 app.json 对小程序进行全局性配置 能够使用 page. ...
最新文章
- 百万数据修改索引，百万数据修改主键
- 双向非循环递增链表——插入，删除，清空
- opencl 实例源码
- 《.NET应用架构设计：原则、模式与实践》新书博客--试读-持续更新
- Linux 中断处理浅析
- 【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作
- 使用Qt设计师文件的3种方式
- centos8 ssh配置_JumpServer 堡垒机CentOS 8 安装部署（四）
- 4. jQuery 事件
- 计算机专业学不学画法几何,高数难呀,学不懂不只从哪下手,还有画法几何
- mybaitis-plus 持久层高效开发, 懒人神器
- drop python_用Python做自己的AirDrop 1 - 环境搭建
- 如何与新同事共同成长？
- JavaScript的富文本编辑
- 怎么恢复删除的文件?试试这几个方法
- 南大科院大数据Hadoop工程实训
- springboot安全之整合spring security
- 普通人如何做到“我命由我不由天”
- Kinect开发（二）——注意项点，影像显示
- usb驱动开发18——设备生命线