目录
vue-cli
是vue的脚手架，用来构建工程，官方文档讲解了vue.js，但对脚手架的讲解较少。且如需使用，要掌握es6的基础知识
官方vue讲解：vue讲解
W3C ES6讲解：ES6
vue-cli的一个笔记：vue-cli
HTML CSS JS
由于以前学前端学的不系统，很多都没有记笔记，所以打算快速重学一遍前端基础，然后学习vue.js以及脚手架
学习网站：菜鸟教程
之前学习看的视频，所以重学的话直接看文字教程更快
HTML
简介
HTML固定语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个教程</title>
</head>
<body>
<h1>HTML标题</h1>
<p>HTML段落。</p>
</body>
</html>
HTML编辑器
使用VS Code
安装教程
一些常见标签简介
HTML标题
// 从<h1>到<h6>大小依次递减
<h1>这是一个一级标题</h1>
段落
<p>这是一个段落</p>
链接
<a href="https://www.baidu.com">百度</a>
链接拥有target属性，使用后可以定义链接的文档是在该窗口打开还是在新窗口打开。设置 target="_blank"即可
<a href="https://www.baidu.com/" target="_blank">百度</a>
链接的另一个属性：id属性，通常是成对出现，第一个作为定位点，第二个链接点击后访问第一个所在位置。也可以在另一个页面创建一个链接到第一个定位点。
<a id="tips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a>
图像
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
<img src="/images/logo.png" width="258" height="39" />
图像的名称和尺寸以属性的方式提供，即CSS
alt属性：当浏览器无法加载图像时，用来为图像定义一串预备的可替换的文本。
宽度、高度：width, height
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
| 标签 | 描述 |
|---|---|
| map | 定义图像地图，点击图像某些地区可跳转 |
| area | 定义图像地图中的可点击区域 |
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
注意
对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
一些简单标签整理
| 标签 | 描述 |
|---|---|
| <hr> | 定义水平线 |
| <!–注释内容–> | 定义注释 |
| <br /> | 换行符 |
文本标签
| 标签 | 描述 |
|---|---|
| <b> | 字体加粗 |
| <i> | 斜体 |
| <em> | 强调文本 |
| <strong> | 加粗文本 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
头部标签
| 标签 | 描述 |
|---|---|
| title | 文档标题 |
| base | 该标签作为HTML文档中所有的链接标签的默认链接 |
| link | 定义了文档与外部资源之间的关系，通常用于链接到样式表 |
| style | 定义了HTML文档的样式文件引用地址 |
| meta | 提供了元数据.元数据也不显示在页面上，但会被浏览器解析.通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据 |
| script | 加载脚本文件 |
表格与列表
表格
| 标签 | 描述 |
|---|---|
| table | 定义表格（如果不定义边框属性border，则表格不显示边框） |
| tr | 表格的行 |
| td | 表格的列 |
| th | 表头，大多数浏览器会把表头设置为粗体居中文本 |
// 1.有边框属性
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
// 2.无边框属性，边框不显示
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
// 3.表头的设置，在td的前面
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
列表
| 有序列表 |  |
|---|---|
| 无序列表 |  |
| 自定义列表 | 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 |
区块与布局
大多数 HTML 元素被定义为块级元素或内联元素
| 块级元素 | 内联元素 |
|---|---|
| 块级元素在浏览器显示时，通常会以新行来开始（和结束） | 内联元素在显示时通常不会以新行开始 |
| <h1> | <b> |
| <p> | <td> |
| <ul> | <a> |
| <table> | <img> |
| <div> | <span> |
HTML布局标签：
| <div> | <span> |
|---|---|
| 常见的用途是文档布局（取代了<table>），用作组合其他 HTML 元素的容器 | 可用作文本的容器 |
| 没有特定的含义 | 没有特定的含义 |
| 块级 (block-level) | 内联元素(inline) |
| 当与 CSS 一同使用，
元素可用于对大的内容块设置样式属性
| 当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性 |
布局
| 使用<div>元素布局 | 使用<table>元素布局 |
|---|---|
| <div>元素是用于分组 HTML 元素的块级元素 | 使用 HTML 标签是创建布局的一种简单的方式。大多数站点可以使用<div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
|
效果：
使用div布局代码：
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © Vicky.com
</div>
</div>
使用table布局代码：
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © Vicky.com
</td>
</tr>
</table>
表单和输入
HTML 表单用于收集不同类型的用户输入，即输入框。包括：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
使用<form>标签
\<form>
.
input 元素
.
\</form>
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。
| 表单输入类型 | 类型属性 |
|---|---|
| 文本域（Text Fields） | <input type=“text”> |
| 密码字段 | <input type=“password”> |
| 单选按钮（Radio Buttons） | <input type=“radio”> |
| 复选框（Checkboxes） | <input type=“checkbox”> |
| 提交按钮(Submit Button) | <input type=“submit”> |
- 文本域
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
- 密码字段
<form>
Password: <input type="password" name="pwd">
</form>
- 单选按钮
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
- 复选框
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
- 提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
