下载和使用开发工具
工具：HBuilderX 下载官网地址：https://dcloud.io/hbuilderx.html
进入官网按照提示下载系统版本对应的文件包，解压安装包，将解压文件放到合适的位置便于今后查找、管理，打开解压后的文件夹，找到“HBuilder.exe”的可执行文件，将该可执行文件创建快捷方式方便下次访问，双击快捷方式或HBuilder.exe打开使用。
关于HTML
1、HTML语言：超文本【标记】语言，作用：搭建所有应用（application）的界面架构
app : 移动端应用程序
pc: B/S (网站、网页等) 、C/S （qq应用等）
标签、标记：tags
2、语法结构：
双标记： <标签名></标签名>
单标签： <标签名> | <标签名 />
3、文件类型：网页文件 、html文档
.html(扩展名)
.htm
4、新建项目：文件->新建->项目 或 使用快捷键 Ctrl+N 快速新建
5、新建HTML文件：文件->新建->html文件 或 自定义文件新建扩展名为.html/.htm
6、新建HTML默认文档：按下!（英文状态下），再按下Tab键
网页文件的标准架构
<!--
ctrl + / 快速生成注释
注释： 代码编程中 代码需要调试、批注 ，该被底层编译执行
html文档 类型声明：html5.0版本的文件
-->
<!DOCTYPE html>
<!--
根标签 ：root标签
-->
<html lang="zh">
<!--
头部标签： 放置具备特定功能的标签（不参与页面架构展示的标签或者内容）
-->
<head>
<!-- 设置网页的解析编码 ：
以utf-8编码格式来解析网页
utf-8: 1汉字 3 字节 1Mb->1024kb 1kb-1024b bytes
GBK: 1汉字 2字节
charset="GBK"
-->
<meta charset="GBK">
<!-- 视口（视图窗口）设置： 移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置网页标题 -->
<title>demo1</title>
</head>
<!-- 主体标签 ：应用 架构 布局 （文本 图片 影视频 超链接） -->
<body>
666666
<!-- 注释 -->
你好
</body>
</html>
HTML基本知识
HTML属性：
属性是用来修饰html元素，突出某些标签的功能性。
属性是具备不通用性（兼容性问题）、属性是多元化，必备属性（不是必须的）。
<标签 属性=“” 属性=‘’ … >
常用的html属性：
color ：颜色
size : 字体大小、高度、宽度
face ：font 字体风格
src : img 图片路径的地址
alt : 图片加载失败的时候提示信息
title : 鼠标移入到图片上 提示的信息
width : 宽度
height：高度
文本类：
加粗：<b>text</b>
倾斜：<i>text</i>
下划线：<u>text</u>
删除线：<s>text</s>
角标：上角标<sup></sup> 下角标<sub></sub>
设置字体大小、颜色、风格：<font></font> 其属性size/color/face
其他：
换行：<br />
水平线：<hr>
居中：<center> </center>
Lorem 自动生成文本
图片：<img src=”路径地址”>
相对路径：对应的实体资源
./imgs/11.jpg == img/1.jpg
../../imgs/1.jpg
绝对路径：实体资源可以不存在当前项目结构中
网络路径地址、win 带盘符 （C: D E F）、uninx linux ( /xxx/xxx/1.jpg)
. 当前目录
.. 返回上层
align=”absmiddle” 可以让图片与文字绝对居中
html语言中：
> 标签的定界符
<
实体符号：
> >
< <
space
单位：
百分比：100%
像素单位（绝对单位）：px(文本默认16px—>最小12px)
标题：
<h1></h1>
….
<h6></h6>
段落标签：不支持嵌套
<p></p>
超链接：a
多种表现形式：
1、页面跳转交互
<a href=”路径地址” target=”_blank”></a>
<a href=”demo1.html?id=1″>跳转且传参</a>
target=”_blank” 新开启一个标签页
target=”_self” 默认值
2、发邮件
<a href=”mailto:邮箱地址”></a>
3、执行js代码片段
<a href=”javascript:js代码段;“></a>
4、锚点定位(页面必须出现滚动条)
定义锚点：
<a name=”值 test”></a>
<a id=”值”></a>
特殊锚点：# （页面最顶部）
定位锚点：
<a href=”#test”>找锚点</a> （同页面的锚点定位）
<a href=”demo6.html#test”>找锚点</a> (跨页面的锚点定位)
列表：
无序列表：
<ul type=”none | square | circle”>
<li></li>
</ul>
有序列表：
<ol type=”A | a | I | i ” start=”起始值”>
<li></li>
</ol>
emment 语法流：
> : 子元素
* : 多个元素
{} : 注入内容 $
[] : 属性
+ :兄弟元素
HTML元素：
块级元素：能够自动换行的元素，默认宽度占其【父元素】的100%，支持宽高调整
h1-h6
p
行内元素（内联元素）：不能自动换行的元素，宽度是依据内容来撑开，无法调整宽高
b u s i
行内块（内联块）： 默认横向排列、支持宽高调整。img
属性：
align : 元素的内容的水平对齐方式. left | right | center
border: 边框线 粗细
cellspacing ： 内间距 （单元格与单元格之间距离）
cellpadding: 内边距 （单元格 的 内容与边框之间填充的缝隙）
bgcolor :背景颜色（body）
background : 背景图 存在时会覆盖背景颜色
bordercolor:边框颜色
表格：<table></table>
行：<tr></tr>
列：<td></td>
单元格合并：
普通列合并：一行上的多个单元格合并 colspan=””
跨行列合并：多行的特定列 rowspan=””
表单与表单元素：
表单：承载表单元素的容器（无外观效果）
<form action=”服务器地址” method=”get | post “></form>
默认method=”get” 但基本上用post
作用：收集客户端数据信息发送服务器与之交互
表单提交有哪些方式？
get ：
1、不安全（表单提交的值附着到地址栏）
2、传输文本数据（string）
3、数据传输量 128kb
post ：
1、安全（http请求协议的请求体中）
2、数据传输除了文本还支持 二进制（文件流）
3、数据传输量理论上无限制
表单元素（表单控件）：
单行文本框：
<input type=”text” name=”服务器接受值的标识”>
密码框：
type=”password”
单选框：
type=”radio”
复选框：
type=”checkbox”
浏览框：选择上传文件
type=”file”
在 form 中 增加一个属性 enctype=”multipart/form-data”
type=”number” 数字输入框
下拉框：
<select>
<option></option>
</select>
多行文本输入框（文本域）：
<textarea ></textarea>
时间日期输入框：
type=”datetime-local”
常用属性：
placeholder ： 输入提示
maxlength : 最大输入长度
value: 默认值（非键入类型表单元素必须增加该属性）
checked : 默认选中 td>input
selected : 默认选中 select>option
disabled : 禁用
表格合并：
colspan=”数量”
rowspan=”数量”
form属性：
action:服务器的提交地址
method:提交方式（ get | post ）
enctype: application/x-www-form-urlencoded （默认值）
enctype:multipart/form-data (上传文件)
数据的传输格式
表单控件（表单元素）：
<input type=”text | password | number | file | radio |checkbox | button | submit | reset | image”>
<select></select>
<textarea></textarea>
<button type=”submit | reset | button”></button>
属性：
name:服务器接受值的唯一标识
maxleng: 最大输入长度
disabled:
value: 默认值
placeholder: 输入提示
checked
selected
pattern: 正则验证
正则表达式（验证规范 ： 组装一个验证规范）
原创文章，作者：czhdawn，如若转载，请注明出处：https://www.czhdawn.cn/archives/4627
