记录一下学习前端的过程

一、HTML

1、网页的基本组成

1.1 什么是网页?

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

1.2 什么是HTML?

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

1.3 网页的形成

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

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

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

浏览器内核备注
IETridentIE、猎豹、360、百度等也是Trident内核
SafariWebkit
Chrome/OperaBlinkBlink其实是Webkit的分支
FirefoxGecko

        目前国内一般浏览器都会采用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中的注释和特殊字符

注释:<!-- 注释内容 -->

特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
人民币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方&sup2;
³立方&sup3;

二、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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值