Web-h5入门学习笔记

web-h5入门学习笔记

• HTML——超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言（Markup Language）。标记语言是一套标记标签（Markup tag）。
• 常用浏览器——IE浏览器、火狐（Firefox）、谷歌（chrome）、Safari、Opera。
• Wed标准——Web标准是由W3曾组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
• Wed标准的构成

1. 结构（身体）：用于对网页元素进行整理和分类，现阶段主要学的是HTML。
2. 表现（外观装饰）：用于设置网页元素的版式、颜色、大小、外观样式，主要指的是CSS。
3. 行为（动作）：指网页模型的定义以及交互的编写，现阶段主要学的是javascript。

• HTML语法规范

1. HTML是由尖括号包围的关键词
2. 双标签：HTML标签通常是成对出现的
3. 单标签：有些特殊标签必须是单个标签

• HTML基本结构

1. HTML标签：页面中最大的标签，我们称为根标签。
2. 头标签：注意在head标签中我们必须要设置的标签是title。
3. 标题标签：让页面拥有一个属于自己的网页标题。
4. 主体标签：元素包含文档的所有内容，页面内容基本都是放到body标签里面。

vscode 常用快捷键

1. 快速复制一行——shift+alt+上下箭头
2. 选定多个相同的单词——ctrl+d
3. 添加多个光标——ctrl+alt+上下箭头
4. 全局替换某个单词——ctrl+h
5. 快速定位到某一行——ctrl+g
6. 选择某个区块——按住shift+alt+鼠标
7. 放大缩小整个编辑器页面——ctrl+ ±
8. 添加注释——ctrl+/
9. 新建文件——ctrl+n
10. 生成页面骨架——！+tab

• < !DOCTYPE html >——当前页面采取的是HTML5版本来显示页面。
• en定义语言为英文，zh-CN定义语言为中文。
• 字符集(character set)是多个字符的集合。< meta charset=“UTF-8” >中使用的就是UTF-8也称为万国码，基本包含了全世界所有国家需要用到的字符，如果不写字符集会产生乱码的情况。

HTML标签

1. 标题标签< h1 > — < h6 >
2. 段落标签：< p >；换行标签：< br />
3. 加粗标签：*< strong > < /strong >*或者< b >< /b >
4. 倾斜标签：* < em> < /em >*或者< i >< /i >
5. 删除线标签： *< del > < / del >*或者< s >< /s >
6. 下划线标签： *< ins> < /ins >*或者< u >< /u >
7. < div >和< span >是没有语义的，它们就是一个盒子，用来装内容的。< div >标签用来布局，但是一行只能放一个< div >，可以理解为前端界面上的一个大的盒子容器。< span >标签也用来布局，但是一行上可以放多个< span >，可以理解为前端界面上的一个小的盒子容器。
8. 图像标签：< img >标签用于定义HTML页面中的图像——< img src=“图像URL”/>

• 目录文件夹：就是普通的文件夹，里面存放了我们做页面所需要的相关素材、比如HTML文件、CSS文件、图片等等。

  根目录：打开目录文件夹的第一层就是根目录。

• 相对路径（重点）：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，就是图片相对于HTML页面的位置。

1. 文件位于HTML文件同一级：<img src=“baidu.gif” />
2. 文件位于HTML文件下一级：<img src=“images/baidu.gif” />
3. 文件位于HTML文件上一级：<img src=“…/baidu.gif” />(上两级就是…/)

• 绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者是完整的网络地址
• **< a >**标签用于定义超链接，作用是从一个页面链接到另一个页面——< a href=“跳转目标” target=“目标窗口弹出方式”>文本或图像< /a >
• 外部链接：例如< a href=“http;//www.baidu.com” >百度< a/ >。
• 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。
• 空链接：<a href=“#”>首页</a>
• 描点链接：快速定位到页面某个位置，<a href=“#名字”>1</a>——（跳转）——<h3 id=“名字”>2</h3>
• 注释标签：<!–“#####”–>,快捷键ctrl+/
• 特殊字符：