记录一下学习前端的过程

晒晒很shy

已于 2022-08-02 16:11:39 修改

阅读量202

点赞数

文章标签：前端

于 2022-08-01 10:50:09 首次发布

本文链接：https://blog.csdn.net/m0_72134726/article/details/126038218

版权

一、HTML

1、网页的基本组成

1.1 什么是网页？

网页通常是HTML格式的文件，需要通过浏览器来渲染解析最终展示在页面上，而网站就是相关网页的集合。

1.2 什么是HTML？

HTML（Hyper Text Markup Language）超文本标记语言（不等于编程语言），是用来描述网页的一种语言。

1.3 网页的形成

网页通常由一些链接、文字、图片、声音、视频等元素组成，这些元素利用html标签描述出来，然后交由浏览器解析来显示给用户。

2、常用的浏览器以及内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式饼显示页面。常用浏览器及其对应的内核如下表所示：

浏览器	内核	备注
IE	Trident	IE、猎豹、360、百度等也是Trident内核
Safari	Webkit
Chrome/Opera	Blink	Blink其实是Webkit的分支
Firefox	Gecko

目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等。

3、Web标准

Web标准由有W3C(万维网联盟)和其他标准化组织制定的一系列标准的集合，我们所写的代码都需要遵守这个标准规范。

3.1 为什么需要Web标准？

因为网页是由浏览器展示给用户的，市面上有非常多浏览器，这些浏览器又是由不同厂商开发的，这样的话不同的浏览器显示的页面或者排版就会有差异。比如同样的一段文字，有的浏览器文字默认大小为14px，而有的游览器文字默认大小为16px，这就导致了不同浏览器的显示差异。

3.2 Web标准的构成

主要包括：结构(structure)、表现(presentation)、行为(behavior)。

结构(HTML)：用于对网页元素进行整理和分类；

表现 (CSS)：用于设置网页元素的版式、颜色、大小等外观样式；

行为(Javascript): 指网页模型的定义及交互的编写。

Web标准提出的最佳体验方案：结构、表现、行为相分离，简单来说就是结构写到html文件中、表现写到css文件中，行为写到javascript中。

4、HTML语法规范

4.1 标签形式

所有的标签都需要被包含在<>中，标签一般成对出现，书写形式：<标签名> <标签名/>，也有一些自结束标签（比较少），书写形式：<标签名 />

4.2 标签关系

包含关系（也可称作父子关系、嵌套关系）：

<head>
    <title> </title>
</head>

并列关系（也可称作兄弟关系）：

<head> </head>
<body> </body>

5、HTML基本结构标签

页面内容都是在基本标签的基础上进行扩展书写的。

<html>  //根标签

    <head>    //头部标签
        <title>   </title>  //网页名称标签
    </head>

    <body>  //网页的主体部分，网页内的所有内容都放在其中
        
    </body>

</html>

6、开发工具

Visual Studio Code

7、HTML常用标签

名称	功能
<!DOCTYPE>	文档类型声明，用于告诉浏览器使用那种HTML版本来显示网页
<h1~h6>
<p>	用于定义段落，它可以将整个网页分为若干个段落
<br />	用于强制文本换行显示
<strong>或<b>	用于文本加粗
<em>或<i>	用于文本倾斜
<del>或<s>	用于给文本添加删除线
<ins>或<u>	用于个文本添加下划线
<div>	没有语义，就是一个容器，用来装内容。默认情况下一行只能放一个div
<span>	没有语义，就是一个容器，用来装内容。默认情况下一行能放多个span
<img />	用于定义页面中的图像，该标签有个必写属性src，用于指定图像的路径和文件名。可选属性： alt：替换文本，当图片不能显示时就显示alt中的文本 title：提示文本，当鼠标放到图片上时就会显示title中的文本 width：设置图像的宽度 height：设置图像的高度 border：设置图像的边框粗细
<a>	用于定义超链接，作用是从一个页面链接到另一个页面 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 必选属性：href，用于指定链接目标的url地址可选属性：target，_self为默认值，_blank为在新窗口中打开

9、相对路径

相对路径分类	符号
同一级路径
下一级路径	/
上一级路径	../

10、绝对路径

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例："D:\test\img\logo.png"或完整的网络地址"http://www.mytest.cn/images/logo.png"

11、超链接分类

外部链接：例如<a href="http://www.baidu.com">百度</baidu>
内部链接: 网站内部页面之间的相互跳转，直接链接内部页面名称即可，例如<a href="index.html">首页</a>
空连接：如果暂时没有确定链接目标时，<a href="#">首页</a>
下载链接：如果href里面的地址是一个文件或压缩包，会直接下载这个文件
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：点击链接时可以快速定位到页面中的某个位置，例如：<a href="#目标标签id属性值">第二页</a>

12、html中的注释和特殊字符

注释：

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方	²
³	立方	³

二、CSS

1、定位（position）用于设定元素在文档中的位置，会将元素转换为块级。

定位分类：

static：静态定位，默认值，没有定位，不能设置偏移值(left、top、right、bottom)，占用文档流。
relative：相对定位，占用文档流，它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置，它相对于自身所占的位置做偏移。
absolute：绝对定位，脱离文档流，相对于body做偏移。一般与相对定位结合使用，此时它相对于父级是relative定义的元素做偏移(relative元素是absolute元素的父级)
fixed：固定定位，脱离文档流，相对于浏览器窗口左上角做偏移。一般在开发中用来固定导航栏。

2、z-index

当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次

注意：用在static和relative上将无效

元素可以拥有负的z-index值

一般元素为文档流，文档流的z-index默认为0，脱离了文档流，在文档流之上(定位、浮动) z-index为0-1之间。如果将z-index值设置为大于或者等于1，元素将会在定位或者浮动流之上。

3、网站开发策略：先整体再局部，自顶向下，逐步细化。

4、常用布局方式

双飞翼布局：有三列组成，两端固定，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        .container{
            padding: 0 200px;
            min-width: 200px;
        }
        .left{
            position: relative;
            left: -200px;
            float: left;
            width: 200px;
            min-height: 200px;
            background-color: antiquewhite;
            margin-left: -100%;
        }
        .center{
            float: left;
            width: 100%;
            background-color: aqua;
            min-height: 200px;
        }
        .right{
            position: relative;
            right: -200px;
            float: left;
            width: 200px;
            background-color: blueviolet;
            margin-left: -200px;
            min-height: 200px;
           
        }
    </style>
</head>
<body>
    <!-- 双飞翼布局：一共三列，两边固定，中间自适应 -->
    <div class="container">
        <div class="column center">center</div>
        <div class="column left">left</div>
        <div class="column right">right</div>
    </div>        
</body>
</html>