Web前端学习总结第一周

前言

大家好！我是rAAAAAAAAy，您也可以叫我小雷。我以前从未接触过前端开发这个领域，后经朋友介绍，突然发现对web前端产生了兴趣，我决定学习它。
到今天为止已学习了一周时间，对前端这个领域有了初步了了解，兴趣也渐渐高涨了起来。听说优快云是中国软件开发者的聚集地，我打算将我的学习过程和理解写在这里，与各位前辈分享交流，如有错误，请您指正。
下面我们开始吧！
XX
XX
XX
XX
XX
XX

一、HTML和CSS概述

1.W3C

全称World Wide Web Consortium万维网联盟
它是发布Web技术标准及实施指南的最权威、最具影响力的国际机构

2.HTML

超文本标记语言：定义文档的内容结构
（ 结构：标题 图片 正文段落等）

3.CSS

层叠样式表：调整html文档的样式外观
（外观：位置 大小 色彩等）

CSS的作用

页面表现的基础（默认设置）
可以控制布局（位置）
控制元素的渲染

二、HTML术语

1.HTML注释

书写格式：

html注释主要用于描述代码功能
为开发者、维护者、浏览器、搜索引擎（蜘蛛人）所看
浏览器解析html代码时会忽略注释内容

2.HTML元素

⑴元素的组成部分

一个html文档靠大量元素组成
标记名、属性和元素内容共同决定了一个元素的显示内容和行为。
例：h元素

一级标题权重大于二级标题

⑵属性

例：

a：标签名，超链接
href=“http://www.baidu.com” 属性：表示元素的额外信息
href：属性名
3.空元素：没有“元素内容”和“结束标记”
例：

3.层次关系

⑴嵌套

元素内容中可包含其他元素，形成嵌套。
两个元素之间不能相互嵌套

⑵若A直接包含B,C

A和B或C为父子关系
A为B的父元素，B为A的子元素，B、C互为兄弟关系

⑶若A直接或间接包含B

祖先和后代关系：A是B的祖先，B是A的后代

4.文档结构

⑴文档声明

用于通知浏览器，目前的文档正使用哪一个HTML版本
它出现在第一行

⑵文档头head

描述页面的附加信息（不会显示到页面）
meta标识页面的其他元数据（页面相关的附加信息 ）
herf属性名
charset=“UTF-8”指示浏览器用字符编码集UFT-8解析页面
title标识文档标题

⑶文档体body

放置网页中所有可见内容
例：块

div块，划分区域，没有任何的语义，用于页面布局

5.语义化标签

1.header顶部/头部
2.nav导航
3.article用于表示文章或其他可独立页面存在的内容
4.section：用于表示一个整体的一部分主题
5.aside：用于表示跟周围主题相关的附加信息
6.footer：底部/尾部

6.路径

⑴绝对路径

网站部署到服务器，网站中的所有资源通过一个地址(路径)访问
书写格式： 协议://域名/目录
使用场景：访问站外资源时，只能使用绝对路径
访问站内资源时，两种皆可
例：
绝对路径：http://www.baidu.com/zhidao
站内访问（省略协议域名）： /zhidao

⑵相对路径

相对路径是相对于当前资源的位置，只能用于访问站内资源
书写格式：./路径
一个点表示当前目录，两个点表示上一级目录，…/…/上上级目录

7.超链接

⑴作用

跳转（跳转页面）、锚点（当前页面跳转）、功能链接

⑵书写格式

①跳转

②锚点

步骤：
第一步，添加a；
第二步，添加跳转标签；
第三步，跳转标签添加属性值（id）；
第四步，a添加href的值，前面+#。
跳转当前页面左上角且保证上下内容足够
③功能链接

发送邮件or拨打电话

三、文本

1.段落

注意事项：
p不能套段落、区域标签、标题
a标签不能相互嵌套

快捷键

例：

2.引用

小段引用

适用场景：引用名人名言（自带引号）

大段引用

适用场景：引用文章段落（左缩进2字符）

参考文献引用

（标签自带斜体）

缩写词引用

3.加粗

strong（阅读浏览器加重读音）
b(像素问题，不推荐）

4.强调

em（阅读浏览器加重读音）
i

四、无语义元素

1.div一块区域
2.span小段文本
3.br换行（换行距离问题，不推荐！）
4.pre直接展示源代码格式内容(适用于公式)
5.hr分割线（有尺寸问题，不推荐！）

五、实体字符

1.空白折叠：多个空格或多个回车只会显示一个空格
2.空格

3.大于

4.小于

5.版权

6.&符号