前端学习芝士笔记
前置芝士
网站&网页
网站是使用HTML等制作的用于展示特定内容相关的网页的集合.
网页通常是HTML文件, 通过浏览器阅读.
HTML简介
HTML指的是超文本标记语言(Hyper Text Markup Language), 是一种用来描述网页的一种标记语言.
标记语言是一套标记标签.
浏览器&内核
浏览器内核
浏览器内核(渲染引擎):负责读取网页内容, 整理讯息, 计算网页显示方式并显示界面.
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| firefox | Gecko |
| Safari | Webkit |
| chrome/Opera | Blink |
国内浏览器一般采用 Webkit/Blink 内核, 如360, UC, 搜狗...
Web标准
网络标准是由W3C组织和其他标准化组织制定的一系列标准的集合.
W3C(万维网联盟)是国际最著名的标准化组织.
为什么需要Web标准
浏览器不同, 显示界面和排版会有一些差异.
遵循Web标准除了可以让不同开发人员写出的界面更让标准, 更统一外还能更易被搜索引擎搜索, 降低流量费用, 是网站更易于维护, 提升浏览速度.
Web标准的构成
主要包括结构(Structure), 表现(Presentation), 行为(Behavior) 三方面.
| 标准 | 说明 | 工具 |
|---|---|---|
| 结构 | 对网页元素进行整理分类 | HTML |
| 表现 | 设置网页元素的版式, 颜色, 大小等外观样式 | CSS |
| 行为 | 网页模型的定义及交互的编写 | Javascript |
结构可以当作骨架, 表现可以看作修饰, 行为类比交互动作.
HTML学习
HTML语法规范
基本语法概述
- HTML标签是由尖括号包围的关键词, 如
<html> - HTML标签通常成对出现, 例如
<html>和</html>,称之为双标签, 第一个标签是开始标签, 第二个标签是结束标签. - 极少标签必须是单个标签,例如
<br />, 称为单标签.
标签关系
标签有两种关系: 包含关系和并列关系. 又称为父子关系和兄弟关系.
包含关系
<head>
<title></title>
<head>
并列关系
<head></head>
<body></body>
HTML基本结构标签
每个网页都会有一个基本的结构标签(也称为骨架标签), 界面内容也是在这些基本标签上书写.
| 标签名 | 定义 | 说明 |
|---|---|---|
<html><\html> |
HTML标签 | 界面中最大的标签, 被称为跟标签 |
<head><\head> |
文档的头部 | 注意在head标签中必须要设置title |
<title></title> |
文档的标题 | 让界面拥有一个属于自己的网页标题 |
<body></body> |
文档的主体 | 元素包含文档的所有内容, 界面内容都是放到body里面的 |
第一个HTML页面
创建一个.html文件输入以下代码,保存后点开文件就行.
<html>
<head>
<title>
Hello world!
</title>
</head>
<body>
Good good study,day day up!
</body>
</html>
效果如图
开发工具
开发工具选择vscode.
推荐插件下载
下载方法:
-
Chinese(Simplified)
作用将vscode汉化 -
open in browser
插件作用: 在写代码的时候可以通过快捷键快速查看网页.
快捷键 说明 Alt+B 通过默认浏览器打开html文件 Shift+Alt+B 选择浏览器打开html文件 -
颜色主题
在插件商店搜索关键字 theme会有狠多主题,可以自行选择. -
Live Server
作用: 实时预览.(开启时保存文件会使网页显示更新)快捷键 说明 Alt+L+O 打开html文件并实时预览
vscode常用快捷键
| 快捷键 | 说明 |
|---|---|
| !+Enter | 自动生成html骨架 |
| ctrl+G+输入数字 | 快速跳转到哪一行 |
| Shift + Alt + F | 代码自动对齐 |
| ctrl+/ | 快速注释] |
标签
文档类型声明标签
作用: 告诉浏览器用哪种HTML版本显示网页.
<!DOCTYPE html>
代码意思: 用HTML5版本显示网页.
注意: 必须写到代码第一行,该标签不属于HTML标签,叫做文档类型声明标签.
lang 语言种类
作用: 定义当前文档显示的语言
en表示英语,zh-CN表示中文.
简单来说,定义为en为英文网页,定义为zh-CN为中文网页. 但定义不影响你能在网页上写哪种语言.
<html lang="zh-CN">
</html>
字符集
在 <head>标签内,可以通过 <meta>标签的 charset属性规定HTML文档使用哪种字符编码.
<head>
<meta charset="UTF-8">
</head>
标题标签
| 标签 | 说明 |
|---|---|
<h1></h1> |
一级标题(最大) |
<h2></h2> |
二级标题 |
... |
... |
<h6></h6> |
六级标题(最小) |
<h1>我是一级标题</h1>
标签语义: 作为标题使用,并依据重要性递减.
段落和换行标签
<p>标签用于显示段落, 将文字分段显示.
<p>我是一个段落标签<p>
标签语义: 将HTML文档分割为若干段落.
特点:1.段落自动换行. 2.段落和段落之间有空隙.
<br />标签用于强制换行.
特点: 1.是个单标签. 2.只是新起一行,两行之间不像两个段落之间有间距.
文字格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> |
<strong>语义更强 |
| 倾斜 | <em></em>或<i></i> |
<em>语义更强 |
| 删除线 | <del></del>或<s></bs |
<del>语义更强 |
| 下划线 | <ins></ins>或<u></bu |
<ins>语义更强 |
div和span标签
<div>和<span>没有语义,是用来装内容的盒子.
div是division的缩写, 表示分区.
span意为跨度, 跨距.
特点:1.<div>语句单独占一行,一行可以放多个<span>
图像标签
<img>标签用于定义HTML中的图像.
<img src="图像url" />
图像标签的参数:
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本, 如果图片无法正常显示就显示该文本 |
| title | 文本 | 提示文本, 鼠标放到图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
<img src="图像url" alt="文字" title="文字" wiidth="数字" height="数字" border="数字"/>
<!-- 标签名和属性, 属性和属性之间用空格分开 -->
<!-- 属性采取键值对的格式,即 key="value" 属性="属性值"-->
图像的路径
- 相对路径(以引用文件所在位置为参考基础),而建立的目录路径
相对路径分类 符号 说明 栗子 同级路径 图像文件和HTML文件位于同一级 <img src="a.jpg">下一级路径 文件夹名/ 图像文件位于HTML文件下一级 <img src="images/a.jpg">上一级路径 ../ 图像文件位于HTML文件上一级 <img src="../a.jpg"> - 绝对路径(文件在目录下的绝对位置,或者是网络地址)
超链接标签
语法格式
<a href="跳转目标" target="窗口打开方式"> 文本或图像 </a>
| 属性 | 作用 |
|---|---|
| href | 必须属性, 指定目标的url地址 |
| target | 指定链接页面的打开方式, _self为默认值, 在原窗口上打开; __blank为在新窗口打开 |
举个栗子
<!-- 创建一个点击到达百度的超链接 -->
<a href="http://www.baidu.com" target="_self">baidu</a>
连接分类
- 外部链接: 如上面那个例子
- 内部链接: 网站内部界面之间的链接,用类似图像文件路径的方式直接链接到本地文件即可.
<a href="index.html"> text </a> - 空链接: 如果没有确定连接目标时这样写.
<a href="#"> text </a> - 下载链接: 如果
herf里面链接的是一个压缩包或者文件, 点击即下载.<a href="data.zip"> download </a> - 网站元素链接: 将
<a> <\a>中间改成图像视频等等, 都可以点击跳转.<a href="data.zip"> <img src="img.jpg"/> </a> - 锚点链接: 点击后跳转到网页某个确定位置, 比如说点击该博客的目录会跳转到相应的位置.
1.在链接文本的href属性中, 设定属性值为#名字的形式, 如<a href="#2">part 2</a>
2.找到目标位置标签,在里面添加id属性=名字, 如<h3 id="2">第二部分</h3>
注释标签
语法格式
<!--注释文本 快捷键 ctrl+/ -->
注释标签的内容便于阅读和理解代码, 网页并不会显示.
特殊字符
HTML页面里有一些特殊字符不方便直接使用, 可以用以下字符代码替代.
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| = | 等于号 | & |
| ￥ | 人民币 | ¥ |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 二次方(上标2) | ² |
浙公网安备 33010602011771号