学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
一、安装编译器
HBuilder X
链接：HBuilderX-高效极客技巧 (dcloud.io)
二、基础操作
1.
2. 常用标签
| 标签 | 描述 |
|---|---|
| <!--...--> | 定义注释 |
| <!DOCTYPE> | 定义文档类型 |
| <a> | 定义超文本链接 （target="blank"? 在一个新的标签页打开） |
| <br> | 定义换行 |
| <div> | 定义文档中的节 |
| <font> | 定义文字的字体、尺寸和颜色 |
| <h1>to<h6> | 定义标题 |
| <hr> | 定义水平线 |
| <img> | 定义图片 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <b> | 定义文本粗体 |
?
列表：
? ? ? ? 3. 有序列表：<ol><li></li></ol>
? ? ? ? ? ? ? ? ? ? ? ??
<ol type="A">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>? ? ? ? 4. 无序列表：<ul><li></li></ul>
<ul type="circle">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>5. form标签：
? ? ? ? 表单标签，块级元素，会自动换行。将数据传输给服务器。
? ? ? ? 常用属性：
? ? ? ? ? ? ? ? action? 表单提交的地址URL
? ? ? ? ? ? ? ? id? 唯一标识
? ? ? ? ? ? ? ? name? 名称
? ? ? ? ? ? ? ? target? 表单提交打开方式（当前窗口）
? ? ? ? ? ? ? ? method? 提交方式
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? get请求（默认）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 参数会直接跟在url后面，用问号拼接。
????????????????????????????????????????安全性差，传递的数据量小，效率高（是post的两倍），有缓存
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? post请求
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 参数不会跟在url地址栏后面，会放在请求体中
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 安全性高，传输数据量大，速度相对来说慢，无缓存。
表单元素需要设置name属性值，否则数据无法传递！！！
6. input元素
? ? ? ? type? 表单元素的类型
? ? ? ? ? ? ? ? text? 文本框
? ? ? ? ? ? ? ? password? 密码框
? ? ? ? ? ? ? ? radio? 单选框（需要设置一组相同的name属性值）
? ? ? ? ? ? ? ? checkbox? 复选框（需要设置一组相同的name属性值）
? ? ? ? ? ? ? ? button? 普通按钮
? ? ? ? ? ? ? ? hidden? 隐藏域（用来存放需要传递给服务器，但不需要显示的数据）
? ? ? ? ? ? ? ? file? 文件域（上传文件）
? ? ? ? ? ? ? ? date? 日期框
? ? ? ? ? ? ? ? submit? 提交按钮
? ? ? ? ? ? ? ? reset? 重置按钮
? ? ? ? ? ? ? ? image? 图片按钮（提交按钮）
? ? ? ? value? 表单元素的值
? ? ? ? checked? 是否选中（单选框/复选框）
? ? ? ? disabled? 是否禁用
? ? ? ? maxlength? 允许输入的最大字符
三、HTML基本框架
1.?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是一个HTML界面</title>
</head>
<body>
<hr color="red" size="3" width="10%" align="left"/>
<ul type="circle">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<ol type="A">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
<a href="https://www.baidu.com">这是一个链接</a>
<form action="#" method="get" id="myform" name="myform">
First Name：<input type="text" value="12" name="userName" /><br />
Last Name：<input type="text" name="userName" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>郑州轻工业大学官网</title>
</head>
<body>
<p align="right">教工 学生 考生 校友 English</p>
<img src="img/logo.png" /> <p></p>
<p align="center">网站首页 学校概况 机构设置
师资队伍 人才培养 学术研究 招生与就业 交流合作
</p>
<img src="img/主页.jpg" />
<p align="right">进入新闻网>></p>
</body>
</html>