前端学习第一天笔记 HTML5 CSS初学以及VSCODE中的常用快捷键

前端学习笔记

VsCode常用快捷键列表

代码格式化：Shift+Alt+F
向上或者向下移动一行：Alt+up 或者 Alt+down
快速复制一行代码：shift+alt+up 或者 shift+alt+down
快速保存：ctrl+s
快速查找：ctrl+f
快速替换：ctrl+h

HTML5

H5的基本骨架：html head title meta body

标题标签

生成h1~h6快捷键：h$*6
标题标签位置摆放
- 在标签中添加属性：align="left|center|right"
- 默认居左

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

段落标签：

这是一个段落
换行：希望在不产生一个新段落的情况下进行换行（新行）

这个
段落
演示了分行的效果
水平线：在HTML页面中创建一个水平线

标签之图片

图片路径详解

绝对路径：绝对路径是电脑的盘符存储与访问的具体地址

E:\图片所在文件夹\1.jpg
相对路径：两者相对关系，两者在同一路径下可以直接访问
- 父级关系：/
- 子级关系：../
- 同级关系：./
网络路径

标签之超文本链接

HTML使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
复制代码
```
<a href="url">链接文本</a>
```

标签之文本

列表标签之有序列表

有序列表：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签，每个列表始于<li>标签。

列表标签之无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于<ul>,每个列表项始于<li>

标签之表格

表格标签：
- 表格<table>
- 行<tr>
- 单元格（列）<td>

表格之合并单元格

水平合并：colspan
垂直合并：rowspan

水平合并保留左边删除右边
垂直合并保留上边删除下边

Form表单

表单在web网页中用来给用户填写信息，从而能采用户信息，使用户具有交互的功能
所有的用户输入内容的地方都用表单写，如登录注册、搜索框
表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件

html 复制代码

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

表单元素：
- 表单标签
- 表单域
- 表达按钮

表单元素

文本框

文本框通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

html 复制代码

<form>
	用户名：<input type="text" name="username">
</form>

密码框

html 复制代码

<form>
	密码：<input type="password" name="key">
</form>

块元素与行内元素（内联元素）

HTML5新增标签

旧版容器标签：

html 复制代码

<div id="header"></div>

<div id="nav"></div>

<div id="article">

<div id="section"></div>

</div>

<div id="silder"></div>

<div id="footer"></div>

新版容器标签

html 复制代码

<header></header>

<nav></nav>

<article>

<section></section>

</article>

<aside></aside>

<footer></footer>

注：存在浏览器兼容性问题

CSS

网页的变美指南，使用CSS的目的就是让网页具有美观一致的页面

概念：
- CSS：层叠样式表，又叫级联样式表，简称样式表
- CSS文件后缀为.css
- CSS用于HTML文档中元素样式的定义

CSS的引入方式

内联样式（行内样式）
- 要使用内联样式，需要在相关的标签内使用样式(style)属性，style属性可以包含任何CSS属性
- 缺乏整体性和规划性，不利于维护，维护成本高

html 复制代码

<p style="background: orange;font-size: 24px;">CSS<p>

内部样式
- 当单个文档需要特殊的样式时，就应该使用内部样式表，你可以使用

html 复制代码

<head>
	<style>
		h1{
			color: red;
		}
	</style>
</head>

外部样式（推荐！！！）
- 当样式需要应用于很多页面时，外部样式将是理想的选择，在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观，每个页面使用<link>标签链接到样式表，<link>标签在文档的头部(header)