web前端开发基础班课堂笔记第一天

1、认识网页

介绍网页产生过程，在程序员眼中不应该再是美丽的前端页面而是此页面显示效果和布局的技术手段如何实现，如庖丁解牛。

2、浏览器

认识五大浏览器，Chrome浏览器市场占用最多，前端开发使用必备。浏览器内核（理解）——面试用分为渲染引擎和JS引擎。

1. Trident（IE内核）国产浏览器用
2. Gecko（firefox）火狐浏览器，代码开源插件多，走向没落
3. webkit（Safari）
4. Chromium/Bink（Chrome）
5. Presto（Opera）

3、Web标准

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。

4、HTML初识

HyperText Markup Language 超文本标记语言
用代码的形式展现

4.1、HTML骨架格式

头部 题目 页面主体

1. html标签：作用所有html中标签的根节点
2. head标签：作用用于存放title页面题目 meta base基础路径 style样式标签 script link 注意在head标签中我们必须要设置的标签是title
3. title标签：作用让页面拥有一个属于自己的标题
4. body标签：作用页面的主体部分，用于存放所有的html标签如p h a b u is em del ins strong img

4.2、HTML标签分类

1. <标签名>双标签例如 成对出现
2. <标签名/>单标签 例如

   ---

   水平线
   换行

4.3、HTML标签关系

1. 嵌套关系 （父子）
2. 并列关系

5、开发工具

1. DreamWeaver
2. Sublime
3. WebStorm
4. HBuilder
5. Visual Studio Code
   个人建议用Sublime加上插件可以实现各种功能和需求
   有机会各种都接触一些，毕竟目前无法定论将来工作时用哪个工具

6、文档类型

html:xt 按下Tab键快速生成标准结构（快捷键）
DTD 文档类型定义Document Type Definition
我们学的是HTML的下一个版本XHTML

6.1、XHTML是什么？

可扩展超文本标记语言 Extensible HyperText Markup Language

1. 后面的第一个标签必须是必须是最后一个标签
2. 所有的标签都必须要有一个相应的结束标签 例如：
   
3. 标准的xtml标签都要小写 HEAD
4. 所有属性值非空，必须用双引号 例如：属性=“值”

7、字符集

utf-8 目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
gb2312简单中文包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK 包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8 则包含全世界所有国家需要用到的字符
以后在meta标签内设置charset=UTF-8

8、学习HTML常用标签

1. 标题标签6个h1至h6 h1不能乱用会影响SEO
2. Ctrl+U查看网页源代码 Ctrl+F 快速查找 Ctrl+R 快速刷新
3. p段落标签/p块级标签响应式自动换行
4. 水平线标签

   ---

   单标签

8.1、文本格式化标签

加粗strong语义化利于SEO
倾斜em语义化利于SEO
删除推荐使用del
下划线推荐使用ins

8.2、标签属性

<标签名 属性1="值" 属性1="值">
标签属性用键值对形式展现，之间用空格隔开，顺序不影响结果
例如

---

8.3、图像标签

1. alt 图像不能显示时的替换文本
2. title 鼠标悬停时显示的内容（显示在鼠标右下角）
3. width 设置图像的宽度 height 设置图像的高度
4. border 设置图像边框的宽度 （加数字显示边框）

8.4、链接标签

文本或图像

空链接 _self在本窗口打开_blank在新窗口打开（利于SEO）

8.5、锚点定位快速定位到目标内容（用id属性联系）

需要定位处在标签内写入id属性id="mao" 利用mao联系两者

8.6、base标签和nofollow

所有链接在新的窗口中打开(基础路径)
nofollow 作用不让爬虫抓取链接内容

8.7、特殊字符和注释标签

空格 <小于号< >大于号>
&和号&￥人民币¥ 版权©
注释标签 写给程序员或自己看的

8.8、相对和绝对路径

1. 图像文件和html文件位于同一文件夹
   只需输入图像文件的名称即可，如
2. 图像文件位于html文件的下一级文件夹
   输入文件夹名和文件名，之间用/隔开，如
3. 图像文件位于html文件的上一级文件夹
   在文件夹名之前加入../ 如果是上两级需要使用../../以此类推
   
   4.绝对路径 带盘符的路径或者完整的网络路径