标签：flex 盒子 HTML ... 标签 HTML3 添加 CSS 属性

1. 前言

学习路线：

HTML4(排版标签)
CSS2(盒子模型)
HTML4(HTML5优势)
CSS3(弹性盒子)

marquee标签滚动条效果（废弃，不再使用）

标签=元素

<marquee bgcolor="red" loop="1"></marquee> loop属性：循环次数；bgcolor属性：背景色

当标签中出现多个重复的属性，只显示一个属性

2. IDE（VS code）

2.1 调整字体

设置 -> 控制字体大小（建议22像素）

2.2 设置主题

主题 -> 颜色主题/文件图标主题/产品图标主题

2.3 插件

颜色主题：monokai Pro

文件图标主题：vscode-icons

快速打开文件：Live Server（使用Ctrl + Shift + P打开命令面板选择Open with Live Server）（必须使用文件夹打开vscode）

2.4 打开文件

双击 -> 未修改不被替换

单击 -> 未修改被替换

2.5 快捷键（持续补充）

Ctrl + Shift + K 快速删除光标所在的行

! 生成默认的html内容

Ctrl + Enter 移动到下一行（不将光标后面的内容换行）

Alt + Shift + ↑/↓ 将当前的代码向上/向下复制一行

Alt + Mouse1 多个光标

输入lorem 随机键入一些内容

Ctrl + D 选中当前的单词

2.6 关闭单文件夹折叠

设置 -> 搜索compact -> 取消勾选第一个选项

3. HTML头标识

3.1 文档声明

h5标准

<!DOCTYPE html>

3.2 字符编码

UTF-8

<meta charset="UTF-8">

3.3 设置语言

设置英文

<html lang="en">
</html>

设置中文

<html lang="zh-CN">
</html>

在VScode中修改默认生成的html内容中的语言

设置 -> 扩展 -> emmet -> Variables -> 添加项 -> lang后面添加zh-CN

3.4 添加页面标志

方法一、将一张.ico文件命名为favicon.ico放置在VScode打开的文件夹下面

4.HTML标签

4.1 语义化标签

标签的语义 > 标签默认的效果

对于一个标签来说，最重要的是其语义，例如h1就是页面最重要的标签，这样做的好处：

增强代码可读性

有利于SEO（搜索引擎优化）

方便设备解析

4.2 文本标签

文本标签一般是行内元素，适用于词汇/短语

em 着重阅读内容

strong 十分重要的内容

span 没有语义，包裹短语的通用标签

4.3 不常用标签名

标签	标签语义	单/双标签
cite	作品标题	双
dfn	特殊术语	双
del/ins	删除的文本/插入的文本	双
sub/sup	下标/上标	双
code	一段代码	双
samp	从上下文中提取内容	双
kbd	键盘文本	双
abbr	缩写，配合title	双
bdo	更改文本方向，配合dir（属性值：ltr左到右、rtl右到左）	双
var	标记变量	双
small	附属细则	双
b	关键字	双
i	字体图标	双
u	反差文本	双
q	短引用	双
blockquote	长引用（块元素）	双
address	地址信息（块元素）	双

4.4 图片标签

src：配置图片路径

alt：配置图片描述

<img src="" alt="">

img是一个block-inline元素

4.4.1 相对路径

./ 当前位置

/ 下一级文件

../ 上一级文件夹

4.4.2 绝对路径

本地绝对路径

C:/Program/img1.jpg
网络绝对路径

https://xxx.com/img.png

4.5 超链接

<a href="" target="_blank"></a><!--在新页面打开-->
<a href="" target="_self"></a><!--在当前页面打开-->

a标签可以包裹除了自己以外的任何标签

4.5.1 下载文件

<a href="文件地址" download="下载的文件名">下载链接</a>

4.5.2 跳转锚点

当页面中有较多的内容，通过跳转锚点可以快速跳转到本页的内容

<!-- 点击此链接跳转 -->
<a href="#htl"></a>

<!-- 跳转到的位置 -->
<a name="htl">灰太狼</a>
<div>
	...
</div>

不写额外的a标签标记跳转的位置，也可以在正常标签中添加name
```

<div id="htl">
	...
</div>
```
特殊的，通过<a href="#"></a>可以快速回到顶部，无需添加跳转的位置
```
<a href="#">回到顶部</a>
```
如果没有#本质上是刷新了当前页面
```
<a href="">刷新</a>
```

可以通过javascript: 脚本来快速添加脚本

<a href="javascript:alert('some str ...');">点击弹窗</a>

4.5.3 唤起指定应用

<a href="tel:10010">电话联系</a>
<a href="mailto:[email protected]">邮件联系联系</a>
<a href="sms:10086">短信联系</a>

4.6 列表标签

4.6.1 有序列表

<ol>
	<li></li>
    <li></li>
</ol>

4.6.2 无序列表

<ul>
    <li></li>
    <li></li>
</ul>

4.6.3 自定义列表

<dl>
    <dt>术语名称1</dt>
    <dd>术语描述1</dd>、
    <dt>术语名称2</dt>
    <dd>术语描述2</dd>
</dl>

4.6.4 注意事项

列表嵌套

<ul>
    <li></li>
    <li>
    	<span>abc:</span>
        <ul>
            <li>q</li>
            <li>w</li>
            <li>e</li>
        </ul>
    </li>
</ul>

4.7 表格

4.7表格

<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        	<td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
        	<td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td></td>
            <td></td>
            <td>共计：xx</td>
        </tr>
    </tfoot>
</table>

4.7.1 表格基本属性

为表格添加边框
```
<table border="1px">
	...    
</table>
```
border会为所有的单元格和表格都添加1px的边框，但是当border大于1的时候，只会应用于表格本体，单元格只会添加1px的边框
控制表格宽度（根据内容分配每一列）和高度（只会修改data的高度，表头和脚注不会修改，且高度为最低值，实际可以超过表格设定的高度）
```
<table width="500px" height="500px">
    ...
</table>
```
可以通过height控制表头和脚注的高度，但是不能控制宽度
```
<thead height="100px">
...
</thead>
...
<tfoot height="100px">
...
</tfoot>
```
可以通过height控制body的高度，但必须高于表格设定的最小高度
```
<tbody height="600px">
...
</tbody>
```

控制单元格之间的间距

<table cellspacing="0">
    ...
</table>

控制对齐方式

水平方向 align

属性值：

左侧：left

居中：center

右侧：right

垂直方向 valign

靠上：top

中间：middle

底部：bottom

左上角对齐
```
<thead align="left" valign="top"></thead>
```
水平垂直居中
```
<thead align="center" valign="middle"></thead>
```
也适用于tr和th，并且可以通过修改th的宽度修改这一列的宽度，修改高度影响这一行的高度

4.7.2 表格跨行跨列

跨列 colspan

跨行 rowspan

4.8 常用标签

换行标签
<br>

分割线
<hr>

按原文显示
<pr>

4.9 表单

4.9.1 基本属性

网页中的交互区域

<form action="https://www.baidu.com/s" method="get" target="_blank">
    <!-- 通过表单联系百度搜索，需要在后面加上s - search -->
    <input type="text" name="wd">
    <button type="sbmit">搜索</button>
</form>

4.9.2 常用控件

value="abc" 控制显示的内容

maxlength="14" 控制text的输入长度

type="password" 修改为密码输入框

type="radio" 修改为单选输入框(要使用name添加名字，也能保证只有一个选中，要添加value)

type="checkbox" 修改为多选输入框(要使用name添加名字，要添加value，默认勾选方式添加属性checked)

4.9.3 隐藏域

添加一个隐藏的框

<input type="hidden" name="from" value="myserver">

4.9.4 确认和重置

<input type="submit" value="确认">

<input type="reset" value="重置 ">

4.9.5 文本域和下拉框

文本域

<textarea name="other" cols="30" rows="10"></textarea>

下拉框

<select name="place">
    <option value="x">xxx</option>
    <option value="y">yyy</option>
    <option value="z" selected>zzz</option>
</select>

4.9.6 禁用表单控件

<input type="text" name="username" disabled>

4.9.7 label标签

使用label的for属性绑定input，当点击label时候，对应的input会获得焦点

<label for="account">账户：</label>
<input id="account" type="text" name="username" maxlength="16">

也可以使用label标签包裹input实现

<label for="account">
    账户：<input id="account" type="text" name="username" maxlength="16">
</label>

使用单选也可以用label包裹显示的内容实现点击选中

<input id="woman" type="radio" name="gender" value="female"><label for="woman">女</label>

4.9.8 fieldset和legend

对表单中的内容进行一个分类，fieldset是分组，legend是分组名称，例如分为主要信息和次要信息

<fieldset>
    <legend>主要信息</legend>
    ...
</fieldset>
<fieldset>
    <legend>次要信息</legend>
    ...
</fieldset>

4.10 框架标签

嵌入一个其他的网页（也可以嵌入图片和视频）

<iframe src="https://www.toutiao.com" width="100" height="300">
    
</iframe>

属性

frameborder 是否显示边框，只有0或者1

使用a标签和iframe点击嵌入网页

<a href="...yyy" target="abc">点我查看yyy</a>
<a href="...zzz" target="abc">点我查看zzz</a>
<iframe name="abc" width="100px" height="100px">
    <!-- 嵌入的位置 -->
</iframe>

使用form将提交信息后返回的页面嵌入网页

<form action="https://so.toutiao.com/search" target="abc">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>

<iframe name="abc" width="100px" height="100px">
    <!-- 嵌入的位置 -->
</iframe>

5.Flex弹性盒子模型（先导）

5.1 布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

5.2 父盒子的常见属性

5.2.1 flex-derection设置主轴方向

默认主轴向右，侧轴向下
属性：

row（向右）

column（向下）

reverse-row/column（反向）

5.2.2 justify-content设置主轴上的子元素排列方式

属性：

flex-start（默认）

flex-end（从尾部开始排列）

center（在主轴居中对齐）

space-around（水平分布）

space-between（两端对齐）

5.2.3 flex-wrap设置子元素是否换行

默认情况下，当元素的个数超出了盒子的宽度，会默认缩小元素的边距，甚至缩小元素的宽度来保持在同一行

如何关闭这一特性，使得超出的盒子自动摆放在下一行？

使用flex-wrap属性：

nowrap（不换行，默认）

wrap（换行）

5.2.4 align-items设置侧轴上的子元素排列方式（单行）

属性：

flex-start（默认）

flex-end（从尾部开始排列）

center（在主轴居中对齐）

stretch（拉伸，但是如果子盒子有高度，此属性会被屏蔽）

5.2.5 align-content设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），而在单行的情况下是不具备效果的

属性：

space-around（水平分布）

space-between（两端对齐）

5.2.6 flex-flow

flex-flow属性是flex-direction和flex-wrap的复合属性

div{
    flex-direction:column;
    flex-wrap:wrap;
}

等价于

div{
    flex-flow:column wrap;
}

5.3 子项常见属性

5.3.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item{
    flex:<number>; /*default 0*/
}

5.3.2 align-self控制子项在自己侧轴上的排列方式

在使用align-items时候，会控制所有的子盒子，如果从单个子盒子的角度进行处理，只修改这一个盒子在侧轴上的排列方式