HTML——前端基础1

前端概述

前端能做的事情编辑

两步完成一个网页程序

前端工具的选择与安装

需要了解HTML三件套的基本使用，实操使用前端给后端发送Ajax请求

前端概述

前端能做的事情

app:uniapp、RN、Flutter

两步完成一个网页程序

第一步：使用记事本，编写代码

创建一个文本文档，拓展名改为html

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编码格式

html 复制代码

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>itbaizhan</title>
     </head>
     <body>
     </body>
 </htm1>

文字标签

html 复制代码

 <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
标题标签位置摆放
- 在标签中<>添加属性，默认居左：
  html 复制代码
```
 <h1 align="center|left|right">
```
- 报红不是报错，只是不推荐使用（CSS会改进）

标签之段落、换行、水平线

段落：<p></p>

html 复制代码

 <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:鼠标悬停在图片上给予提示（使用率较低）
图片路径详解
1. 绝对路径
  - 电脑的盘符存储与访问的具体地址
2. 相对路径
  - 两者相对关系，在同一路径下可以直接访问
  - (照片相对于html文档)子级关系：/
  - 父级关系：../
  - 同级关系：./
3. 网络路径
  - 图片是网络服务器的图片

标签之超文本链接

超链接：想跳哪里跳哪里
复制代码
```
 <a href="url">链接文本</a>
```
- 在标签<a>中使用href属性来描述链接的地址（完整地址）
- 未访问的链接：蓝色字体+下划线
- 访问过的链接：紫色+下划线
- 点击链接：红色+下划线
- 后期会用CSS样式修改掉这些效果
  html 复制代码
```
<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,,...)

html 复制代码

 <ol type="A">
         <li>苹果</li>
         <li>香蕉</li>
         <li>梨子</li>
</ol>

嵌套

html 复制代码

 <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网页中用来给用户填写信息，使网页具有交互功能
由容器、控件组成
一个表单（容器：能够容纳各种各样的控件）一般应该包含用户填写信息的输入框、提交按钮（控件）等

html 复制代码

 <form action="url" method="get|post" name="myform"></form>

属性
- action:服务器地址
- name:表单名称
- method中Get和Post区别
  - 数据提交方式，get把提交的数据url可以看到，post看不到
  - get一般用于提交少量数据，post用来提交大量数据

元素

表单标签
表单域

表单按钮

html 复制代码

 <form>
         <input>
         <input type="submit">
         <button>按钮</button>
 </form>

文本框

文本域通过<input type="text">标签设定

输入字母、数字等内容

html 复制代码

 <form>
         First name:<input type="text" name="firstname">
         <br>
         Last name:<input type="text" name="lastname">
 </form>

密码框
- 通过<input type="password">来定义
- 密码字段字符不会明文显示，而是以星号或圆点代替
  html 复制代码
```
 <form>
         Password:<input type="password" name="pwd">
 </form>
```

提交按钮

html 复制代码

 <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新标签