<
前端开发学习路线-WEB基础
>

没有上一篇咯 下一篇

yarn 安装与使用

WEB基础

web基础

常见浏览器

  1. IE浏览器
  2. Edge浏览器
  3. 火狐浏览器（Firefox）
  4. 谷歌浏览器（google Chrome）
  5. Safari浏览器
  6. Opera浏览器

浏览器内核

浏览器内核有可以分成两部分：渲染引擎（layout engineer 或者 Rendering Engine）和JS引擎。

(1). Trident（IE内核） (2). Gecko（Firefox） (3). webkit(Safari) (4). Chromium/Blink(chrome) (5). Presto(Opera) blink

web标准

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

HTML入门

HTML初识

HTML(Hyper Text Markup Language的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML骨架

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

标签

在HTML页面中，带有<>符号的元素被称为HTML标签，如<html> 、<head> 、<body>等。

  1. 双标签 <标签名>内容

    <body></body>

  2. 单标签 <标签名 />

    <br />

HTML标签：作用所有HTML中标签的一个根节点。 head标签：用于存放title，meta，base，style，script，link 注意在head标签中我们必须要设置的标签是title body标签：页面的主体部分。 title标签：让页面拥有一个属于自己的标题.

排版标签

  1. 标题标签： <h1><h2><h3><h4><h5><h6>

  2. 段落标签 <p>段落标签</p>

  3. 水平线标签 <hr />

  4. 换行标签 <br />

  5. div span 布局标签 没有语义 <div></div> <span></span>

文本格式化标签

标签 显示效果
<b></b><strong></strong> 文字以粗体方式显示（XHTML推荐使用strong）
<i></i>和<em></em> 文字以斜体方式显示（XHTML推荐使用em）
<s></s>和<del></del> 文字以加删除线方式显示（XHTML推荐使用del）
<u></u>和<ins></ins> 文字以加下划线方式显示（XHTML不赞成使用u）

图片标签

<img src="图像URL" />

属性： src：图像URL alt：图像不能显示时的替换文本 title：鼠标悬停时显示的内容 width：设置图像的宽度 height：设置图像的高度 border：设置图像边框的宽度

链接标签

<a href="跳转目标" target="目标窗口的弹出方式"></a>

href：用于指定链接目标的URL地址 target: 用于打开指定链接页面的打开方式，其值有self和black两种 self为默认值，black为在新窗口中打开。

base标签

<base target="_black_" /> base 可以设置整体链接的打开状态

特殊字符标签

特殊字符|描述|字符代码 —|:–:|—: ` |空格符 |  <|小于号 |< >|大于号 |> &|和号 | & ￥|人民币|¥ ©|版权|© ®|商标 |® ℃|摄氏度 |° ±|正负号 |&plusmn ×|乘号 |&times ` ÷|除号 |&divide ²|平方（上标2） |&sup2 ³|立方（上标3）|&sup3

注释标签

<!--注释标签-->

文档类型

<!DOCTYPE html>

这句话告诉我们使用的是html5的版本。

字符集

<meta charset="UTF-8">

utf-8是目前最常用的字符集编码方式。包含去世界所有国家需要用到的字符。 GB231 简单中文 ，包含6763个汉字。 BIG5 繁体中文 GBK 包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312。

属性

使用HTML制作网页时，可以使用HTML标签属性加以设置，语法格式： <标签名 属性1="属性值" 属性2="属性值2" ...> 内容</标签>

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。 2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 3.任何标签的属性都有默认值，省略该属性则取默认值。 采取 键值对 的格式 key=”value“ 的格式。 比如：<hr width="400px">

锚定定位

1.使用<a href="#id名"></a>创建链接文本。 2.使用相应的id名标注跳转目标的位置。id="live"

相对路径

1.图像文件和HTML文件位于同一文件夹，只需输入图像文件名称即可，如<img src="logo.gif" /> 2.图像文件位于Html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" /> 3.图像文件位于HTML文件的上一级文件夹；在文件名之前加入“../”,如果是上两级，则需要使用“../../” 以此类推，如<img src="../logo.gif" />

无序列表ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
    <li> 列表项</li>
    <li> 列表项</li>
    <li> 列表项</li>
    ......
</ul>

注意：

  1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
  3. 无序列表会有自己样式属性，放下那个样式，让css来！

有序列表ol

<ol>
    <li> 中国</li>
    <li> 中国</li>
</ol>
Top
Foot