# html5

**Repository Path**: thinkaboutai_admin/html5

## Basic Information

- **Project Name**: html5
- **Description**: 超文本标记语言 HTML 课件资源
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-09
- **Last Updated**: 2022-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML 5

## 1. VSCode
创建项目有如下两种常见的方式：
- 直接新建一个空白的文件夹，然后使用vscode打开即可
- `ctrl + shift + p`，在搜索栏中输入`git clone`，点击选择，然后粘贴具体的clone地址
- 使用脚手架（vue、react）搭建一个完整的工程

## 2. HTML 简介
Hyper Text Markup Language，超文本标记语言
为什么前面要使用`Hyper`来修饰，我们平时使用其它语言记录信息的时候，大部分都是平铺直叙的，而HTML在文字内容之间，会讲求一定的格式，是一个相对立体，有层次的概念。

## 3. 内容

### 3.0 插件
- Ayu 语法高亮(Ayu Mirage)
- Live Server 轻量级服务器
- Material Icon Theme 图标相关的主题
- Simple React Snipets
- Vetur
### 3.1 网页结构
 ```html
html
    head 元数据
    body 网页主题内容
```

整体来说，网页都是由各种标签组成的，标签与标签之间的关系(并列、嵌套)，最终构成了一个类似于树状的结构。

### 3.2 常用的标签
- h1~h6 展示标题内容，数字越小，字体越大
- p 段落标签
- a 超级链接
- br 换行标签
- hr 水平分割线
- table 用来绘制表格，用来布局（去掉分割线）
- div、span 都是虚拟标签，没有特定效果的，主要是用来划分出一个区域，然后应用特定的形状、颜色等效果的，前者是行级标签，后者非也
### 3.3 表单及常用表单组件
表单标签，也是用来圈出一块区域，没有指定范围（可以无限大），也没有特定视觉效果，主要用来提交在form中的各种数据，是一个虚拟的、逻辑上的概念，在其中主要用来盛放数据的组件有如下：
- input
    - text 文本输入框
    - radio 单选框 对于同一组单选，必须要使用相同的name来区分这是一个组别
    - checkbox 多选框 对于同一组单选，必须要使用相同的name来区分这是一个组别
    - button 很少用
    - submit 用来提交到action属性指定的地址
    - reset 重置、情况用户的输入项
- select 用option表示各个选项
> 当表单提交的时候，form标签中间所有的输入组件的内容，都会以键值对的方式提交到后台去(name1=value1&name2=value2...)

# CSS 3

## 1. 简介
Cascading Style Sheet，又称为层叠样式表。是一个关乎视觉效果的技术。在公司中，后端（Java、.Net、Python、Scala）、前端（Vue + ElementUI + Uni-App）、UI（美工）

一个网页可以通过以下3种方式来使用样式：
- 写在当前标签的`style`属性上
- 写在`head`标签的`style`的里面
- 通过外部文件引入（最常用的）

## 2. 选择器
- class选择器，".样式变量名称"，具体在使用的时候，是通过某标签的class属性指定（去掉点）
- 标签选择器，命名方式就是以某一个标签命名的，而且会作用在当前页面所有同名的标签上，较少使用
- id选择器，作用在同id值的标签上


## 3. 盒子模型
每一个容器标签（标签里面可以放内容的），它们都会具有一个盒子模型的特征，主要可以设置两个属性
- margin 外边距，当前标签距离外部元素的距离
- padding 内边距，当前标签距离内部填充元素的距离

# Bootstrap
## 1. 简介
是一个由`twitter`研发出来的基于CSS3的样式库，整个库的风格是偏向于简约，颜色比较单纯、有限

## 2. 快速上手
留意如下关键字：
- Quick Start
- Getting Started
- Docs
- Guide

引入bootstrap方式
- 通过静态文件引入
```html
 <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

```
- 通过`npm`以工程化的方式安装到项目中

## 3. 布局
### 3.1 容器化组件
把所有的页面元素都是用bootstrap指定的容器标签盛放起来
- .container-fluid 横向填满整个屏幕宽度
- .container 两边留有适当的空白，可以用来方放其它组件（广告等宣传信息）

### 3.2 网格布局
整个`bootstrap`将容器(div.container div.container-fluid)的宽度，限定为12个基本单位，每一个组件可以自己来申请具体的宽度

首先需要创建一个行，在行内同单元格col-数字来申请具体的宽度单位