目录
需要了解HTML三件套的基本使用，实操使用前端给后端发送Ajax请求
前端概述
前端能做的事情
app:uniapp、RN、Flutter
两步完成一个网页程序
第一步：使用记事本，编写代码
创建一个文本文档，拓展名改为html
<html> <head> <title>我的网页</title> </head> <body> Hello,我的第一个网页 </body> </html>记得保存ctrl+s
<>用英文
第二步，以浏览器方式打开即可
双击
前端工具的选择与安装
浏览器
谷歌
简洁大方，打开响应速度快
开发者调试工具
开发者工具
VSCode
可以直接将code的文件夹拉入vscode里面，再在vscode里面添加文件，很方便
生成浏览器文件.html的快捷方式
!+回车
VsCode常用快捷键列表
代码格式化:Shift+Alt+F 向上或向下移动一行:Alt+Up或Alt+Down 快速复制一行代码:Shift+Alt+Up 或 Shift+Alt+Down 快速保存: ctl+s 快速查找:Ctrl + F 快速替换:Ctrl + H
快速打开浏览器扩展：open in brower
右键
HTML
HTML5介绍
2014年
超文本标记语言：用来描述网页的一种语言（布局语言）
后缀以.html结尾
HTML是一种标记语言（一套标记标签）
双标签<html></html>
单标签<img>
打开一个网页，右键空白部分-检查，会出现前端代码
点第一个图标，当你鼠标指向页面的一个元素时，代码会跟随
HTML5的DOCTYPE声明
DOCTYPE是document type(文档类型)的缩写。
-
<!DOCTYPE html>
是H5的声明，位于文档的最前面：网页必备的组成部分，避免浏览器的怪异模式
HTML基本骨架
html标签
定义HTML文档。标签限定了文档的开始点和结束点
<html></html>
head标签
定义文档的头部。
描述了文档的各种属性和信息：文档的标题、在Web中的位置和其他文档的关系等
绝大多数文档头部包含的数据不会真正作为内容显示给读者（不是给用户看的）
<head></head>
body标签
定义文档的主体。
包含文档的所有内容（文本、超链接、图像、表格和列表等）
会直接在页面中显示出来（给用户看的）
<body></body>
title标签
定义文档的标题
显示在浏览器窗口的标题栏或状态栏上
是head标签中唯一必须要求包含的东西
有利于SEO优化
SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求
<titile></title>
meta标签(单标签)
描述一个HTML网页文档的属性，关键词等
charset="UTF-8"说明当前使用的是utf-8编码格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>itbaizhan</title> </head> <body> </body> </htm1>
文字标签
<font></font> <!--color face字体 size--> <font color="bule">蔬菜</font>
标题之标签
标题通过<h1>-<h6>标签进行定义（直接输入h1）
之后会配合样式表CSS定义
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
生成h1-h6快捷键：h$*6
正确使用标题
不要仅仅为了生成粗体或大号字体使用（CSS可以帮助完成）
有利于SEO
标题标签位置摆放
在标签中<>添加属性，默认居左：
<h1 align="center|left|right">报红不是报错，只是不推荐使用（CSS会改进）
标签之段落、换行、水平线
-
段落：<p></p>
<body> <p>我是一个段落标签</p> 我是一个段落标签 <!--虽然两个都是一样的输出，但是在html中不推荐直接把文本放在最外层，一定要通过标签承载--> </body>
-
换行：<br>
-
水平线：<hr>
可设置属性
<hr color="" width="" size="" align=""/>
width：长度（px像素）
size：高度（px像素）
align：默认居中
标签之图片
<img>定义HTML页面中的图像
必须将图片放在html文档统一目录下
属性
src:路径(图片地址与名字)
alt:规定图像的替代文本（可提示是什么图像）
width:规定图像的宽度（单位：px）
height:规定图像的高度（单位：px）
一般不设置，可能会失真
title:鼠标悬停在图片上给予提示（使用率较低）
图片路径详解
绝对路径
电脑的盘符存储与访问的具体地址
相对路径
两者相对关系，在同一路径下可以直接访问
(照片相对于html文档)子级关系：/
父级关系：../
同级关系：./
网络路径
图片是网络服务器的图片
标签之超文本链接
超链接：想跳哪里跳哪里
-
<a href="url">链接文本</a>
在标签<a>中使用href属性来描述链接的地址（完整地址）
未访问的链接：蓝色字体+下划线
访问过的链接：紫色+下划线
点击链接：红色+下划线
后期会用CSS样式修改掉这些效果
<body> <a href="https://www.jd.com/">京东</a> </body>
点击哪吒（鼠标会变成小手）会跳转百度页面
标签之文本
常用文本标签
标签 描述 <em> 定义着重文字 <b> 定义粗体文本 <i> 定义斜体字italic <strong> 定义加重语气 <del> 定义删除字 <span> 元素没有特定的含义 <u> 下划线underline <sup> 上标 <sub> 下标 常用文本标签和段落不同，段落代表一段文本，文本标签表示文本词汇
列表标签之有序列表
是一列项目，列表项目使用数字进行标记
有序列表始于<ol>标签
每个列表项始于<li>标签
type属性
-
<ol>的属性type拥有的选项
1表示列表项目用数字标号(1,2,3...)
a表示列表项目用小写字母标号(a,b,....)
A 表示列表项目用大写字母标号(A,B,C...)
i表示列表项目用小写罗马数字标号(i,ii,ii...)
I表示列表项目用大写罗马数字标号(1,,...)
<ol type="A"> <li>苹果</li> <li>香蕉</li> <li>梨子</li> </ol>嵌套
<ol> <li>水果</li> <li>蔬菜 <ol> <li>白菜</li> <li>油菜</li> <li>辣椒</li> </ol> </li> <li>肉类</li> </ol>
-
列表标签之无序列表
是一个项目的列表，用粗体圆点（小黑圆圈）进行标记
无序列表始于<ul>
每个列表项始于<li>
type属性
-
<ul>的属性type拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
-
嵌套
常见应用场景
无序的列表效果
导航效果
快速生成ul+li的布局：ul>li*3(数字根据自己的需要的li数量修改)
标签之表格
优点：展示数据简单，优秀
表格标签：
表格：<table>
行：<tr>
单元格（列）：<td>
快速生成表格结构：table>tr*n>td{单元格}
表格属性（在table里面）
border:表格边框
width:表格宽度
height:表格高度
表格单元格合并
给表格更多可能性
属性
水平合并：colspan(保留左边，删除右边)
垂直合并：rowspan(保留上边，删除下边)
Form表单（用户输入）
在Web网页中用来给用户填写信息，使网页具有交互功能
由容器、控件组成
一个表单（容器：能够容纳各种各样的控件）一般应该包含用户填写信息的输入框、提交按钮（控件）等
<form action="url" method="get|post" name="myform"></form>属性
action:服务器地址
name:表单名称
method中Get和Post区别
数据提交方式，get把提交的数据url可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据
元素
表单标签
表单域
表单按钮
<form> <input> <input type="submit"> <button>按钮</button> </form>
文本框
文本域通过<input type="text">标签设定
输入字母、数字等内容
<form> First name:<input type="text" name="firstname"> <br> Last name:<input type="text" name="lastname"> </form>
密码框
通过<input type="password">来定义
密码字段字符不会明文显示，而是以星号或圆点代替
<form> Password:<input type="password" name="pwd"> </form>
提交按钮
<input type="submit" value="登录"> <!--value是替换submit-->
块元素和行内元素（内联元素）
对比
块级元素 内联元素 块元素会在页面中独占一行(自上向下垂直排列) 行内元素不会独占页面中的一行，只占自身的大小 可以设置width，height属性 行内元素设置width，height属性无效 一般块级元素可以包含行内元素和其他块级元素 一般内联元素包含内联元素不包含块级元素 常见块级元素
div、form、h1~h6、hr、p、table、ul、等
常见内联元素
a、b、em、i、span、strong等
行内块级元素(特点:不换行、能够识别宽高)
button、img、input等
HTML5新增标签
新增布局标签：有利于SEO
div:容器元素，也是页面中见到的最多的元素
增加文章清晰度，将区域分隔
H5新标签
