Posted on
| Words count in article: 776
  • 李爵士发明了HTML
  • 赖先生发明了CSS
  • 布兰登发明了JS

JS简介

  • JavaScript是一种解释性脚本语言（代码不进行预编译），主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
  • 由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。

    JS用途

    JavaScript常用来完成以下任务：
  1. 嵌入动态文本于HTML页面
  2. 对浏览器事件作出响应
  3. 读写HTML元素
  4. 在数据被提交到服务器之前验证数据
  5. 检测访客的浏览器信息
  6. 控制cookie，包括创建和修改等

    JS诞生

  • 1994年，互联网刚兴起，网景公司（Netscape）发布了Navigator浏览器0.9版，但这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。因此网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。
  • 1995年，Sun公司将Oak语言更名为Java并推向市场，并宣称“Write Once, Run Anywhere”。网景公司深受Java的影响，网景公司高层都非常信赖Java，所以网景公司决定要蹭Java的流量，新开发一门语言，用于浏览器的交互。
  • 1995年4月，BrendanEich（布兰登·艾奇） 加入网景公司，被指定成了“新语言”的设计师，并且要求这个“新语言”要和Java足够的相似（面向对象思想），但是要比Java能够更加简单地上手。Brenden花了10天时间便把这门“新语言”的最初版本设计了出来，命名为JavaScript，对外宣称JavaScript是Java的补充。
  • 设计思路
1
2
3
4
（1）借鉴C语言的基本语法；
（2）借鉴Java语言的数据类型和内存管理；
（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

JS命名

  • 最初为了紧跟Java（有一种咖啡叫Java），这门“新语言”被命名为Mocha（有一种咖啡叫Mocha）
  • 但由于商标的问题，以及网景公司很多产品已经使用了“Live”作为产品名前缀，Mocha更名为LiveScript。
  • 由于网景公司与Sun公司有一些合作，Sun把Java这个商标授权给了网景公司，于是LiveScript更名为JavaScript。
  • Mocha摩卡 => LiveScript => JavaScript

JavaScript与Java的关系

  • JavaScript的基础语法和对象体系，是模仿Java而设计的。
  • JavaScript语言的函数是一种独立的数据类型以及基于原型对象的继承链，是与java语法最大的两点区别。
  • JavaScript不需要编译，由解释器直接执行。

JS与ECMAScript的关系

  • ECMAScript是纸上的标准，JS是浏览器的实现
  • 纸上标准往往落后于浏览器，先实现，再写进标准

Posted on
| Words count in article: 315

URL

含义：统一资源定位符(Uniform Resource Locator)，URL=协议+域名或IP+端口号（默认的不显示）+路径+查询参数+锚点
4158026B-FDAA-400D-B35A-C568BEA9F806.png

  • 通过改变路径可以请求不同的页面

https://developer.mozilla.org/zh-CN/docs/Web/HTML

https://developer.mozilla.org/zh-CN/docs/Web/CSS

  • 通过改变查询参数可以访问同一个页面不同内容

https://www.baidu.com/s?wd=hello

https://www.baidu.com/s?wd=parent

  • 通过改变锚点可以看到同一页面同一内容的不同位置

https://developer.mozilla.org/zh-CN/docs/Web/CSS#%E6%95%99%E7%A8%8B#教程

https://developer.mozilla.org/zh-CN/docs/Web/CSS#%E5%8F%82%E8%80%83%E4%B9%A6#参考书

注意：

锚点不支持中文，所以会把中文变成#%E6%95%99%E7%A8%8B

锚点不会发送给服务器，所以在开发者工具的Network面板看不到

IP网际协议（Internet Protocol）也叫域名，是一串字符串，用来定位一台设备

端口（80、443等）用来定位一个设备的服务，IP和端口缺一不可

使用ping命令获取IP地址
6A8E48A0-D484-47E6-A982-A91EE7CA601D.png

使用nslookup命令解析域名

E08CB706-EBF4-4C29-AEE1-E7283D5E4D30.png

DNS域名系统（Domain Name System），将域名（baidu.com）和它的IP地址（220.181.38.148）对应起来

用curl命令发HTTP请求
B6748EB5-3697-43BD-8D77-19A693C08EF9.png

Posted on
| Words count in article: 520

浏览器渲染原理

  1. 解析html文档并构建DOM树
  2. 解析CSS标签并构建CSSOM树
  3. 结合DOM树和CSSOM树成一颗渲染树（render tree）
  4. 布局渲染树（layout），将所有渲染树的所有节点进行平面合成
  5. 绘制渲染树（painting），将布局绘制在屏幕上

1480597-08e6f204c42595ae.png

第4、5步合称为渲染，网页生成的时候至少会渲染一次，用户访问过程中还会不断重新渲染

重新渲染就是要重新生成布局和重新绘制，分别称为“重排”和“重绘”。重绘不一定重排，但重排必然导致重绘。

参考文章：
https://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work

CSS动画–transform

  1. 位移translate
    1
    translateX(2em); translateY(-50px); translate(12px, 50%);

用translate(-50%, -50%)做元素绝对居中
http://js.jirengu.com/sisefaxuzo/2/edit?html,css,output

  1. 缩放scale

    1
    scaleX(2); scaleY(0.5); scale(2, 0.5);

  2. 旋转rotate

    1
    rotateX(10deg); rotateY(10deg); rotate(45deg);

  3. 倾斜skew

    1
    skewX(30deg); skewY(1.07rad); skew(30deg, 20deg);

一般配合transition使用

1
2
3
4
transition: 属性名 | 时长 | 过渡方式 | 延迟 
eg：transition：left 200ms ease

过渡方式：linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end

tips：

  • 可用逗号分隔两个属性
    transition：left 200ms,top 400ms;
  • 可用all代表所有属性
    transition：all 2s;

举个栗子🌰
http://js.jirengu.com/veceporavo/1/edit?html,css,output

CSS动画–animation

第一步：声明关键帧@keyframes xxx，有两种语法from…to…和百分数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@keyframes xxx {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes yyy {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

第二步：添加动画animation

1
2
3
4
5
6
7
8
animation: 动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停

时长：1s或1000ms
过渡方式：linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end 
次数：1 | 10 | infinite
方向：reverse | alternate | alternate-reverse
填充模式：none | forwards | backwards | both 
是否暂停：paused | running

举个栗子🌰
http://js.jirengu.com/bivavexere/1/edit?html,css,output

Posted on
| Words count in article: 1,023

打开html文件的方法

1
2
http-server -c-1 或简写为 hs -c-1
parcel index.html

a标签

href属性

  1. 网址

    1
    2
    3
    4
    三种写法（推荐第三种）
    http://baidu.com
    https://baidu.com
    //baidu.com  可自动选择用http或https协议

  2. 路径

    1
    2
    /a/b/c 或 a/b/c
    index.html 或 ./index.html

  3. 其他用法

    1
    2
    3
    4
    5
    6
    7
    <a href="javascript:;">点击后什么也不发生</a>

    <a href="#ddd">找到id为ddd的标签</a>

    <a href="mailto:jayce_ma.xa@foxmail.com">给某人发邮件</a>

    <a href="tel="18912345678">打电话给某人</a>

target属性

  1. 内置名称

    1
    2
    3
    4
    _blank 在新窗口打开
    _top 在最顶层打开
    _parent 在当前页面的上一层打开
    _self 在当前页面加载

  2. 给窗口命名（作用是可重复利用窗口）

    1
    2
    3
    4
    <a href="//baidu.com" target="sss">baidu</a>
    <a href="//bilibili.com" target="sss">b站</a>

    若有window.name=sss的窗口，就用它打开，若没有就创建一个

与iframe一起的用法(在网页中内嵌窗口)

1
2
3
4
5
6
<a href="//bing.com" target="xxx">必应</a>
<a href="//bilibili.com" target="xxx">b站</a>

<hr/>

<iframe style="border:none; width:100%; height:500px;" name="xxx"></iframe>

table标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
    <thead>
        <th>英文</th>
        <th>中文</th>
    </thead>
    <tbody>
        <tr>
            <td>target</td>
            <td>目标</td>
        </tr>
        <tr>
            <td>document</td>
            <td>文件</td>
        </tr>
        <tr>
            <td>device</td>
            <td>设备</td>
        </tr>
    </tbody>
    <tfoot>
        <td>空</td>
        <td>空</td>
    </tfoot>
</table>

WechatIMG2311.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<table>
    <thead>
        <th></th>
        <th>Petter</th>
        <th>Tom</th>
        <th>Micky</th>
    </thead>
    <tbody>
        <tr>
            <th>语文</th>
            <td>44</td>
            <td>44</td>
            <td>44</td>
        </tr>
        <tr>
            <th>数学</th>
            <td>55</td>
            <td>55</td>
            <td>55</td>
        </tr>
        <tr>
            <th>英语</th>
            <td>66</td>
            <td>66</td>
            <td>66</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总分</th>
            <td>166</td>
            <td>166</td>
            <td>166</td>
        </tr>
        <tr>
            <th>排名</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </tfoot>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
<style>
    table { 
        width:500px;
        height:100px;
        table-layout:auto;  //自动调整表格布局，表头信息多就宽一些
        border-collapse: collapse;  
        border-spacing: 0;  //修改border默认样式，即合并border并使border间距为0
    }
    tr,td,th {
        border:2px solid pink;
    }
</style>

WX20220303-211724@2x.png

img标签

作用：发出get请求，展示一张图片

1
2
3
4
5
6
7
8
9
10
11
12
<img id="ccc" src="/brown-cat.jpeg" alt="棕色小猫" width="800">  //width和height是img标签的属性，！！切记只需设置一项，另外一个会自适应

<script>
    ccc.onload = function(){
        console.log("恭喜加载成功啦~")
    }   //监听图片是否加载成功

    ccc.onerror = function(){
        console.log("抱歉图片不见啦~");
        ccc.src= "/404.png";
    }  //监听图片是否加载失败
</script>

1
2
3
4
5
6
7
8
9
10
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;  //重置默认样式
    }
    img {
        max-width: 100%;  //自适应宽度
    }
</style>

form标签

作用：发出一个get或post请求，然后刷新页面

1
2
3
4
5
6
<form action="/yyy" method="POST" autocomplete>  
    //action用于控制请求哪个页面，method控制是POST还是GET
    //autocomplete的用法：在form标签上加autocomplete，在input标签上加name=""
    <input name="username" type="text" />
    <input type="submit" value="" />  //默认是提交，给value赋值改变默认
</form>  //form标签里必须含有一个type=submit的标签，这样表单才能提交

input标签

  • input与button标签的区别

    1
    2
    <input type="submit" value="搞起" />  //input标签里只能是纯文本
    <button type="submit"><strong>搞起</strong></button>  //button标签里还可以有其他标签

  • input标签里type属性的取值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <input type="text" required />  //required意为必须填写，否则不能提交

    <input type="radio" name="gender" />男  //单选
    <input type="radio" name="gender" />女

    <input type="checkbox" name="hobby" />养猫  //多选
    <input type="checkbox" name="hobby" />听歌
    <input type="checkbox" name="hobby" />写代码

    <input type="file" />  //选择单个文件
    <input type="file" multiple />  //选择多个文件

其他输入标签

1
2
3
4
5
6
7
<textarea style="resize:none; width:50%; height:300px;"></textarea>

<select>
    <option value="">- 请选择 -</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
</select>

Posted on
| Words count in article: 598

HTML简介

  • 全称：超文本标记语言（HyperText Markup Language）
  • 发明者：由物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明
  • 特点：支持超链接，点击链接就可以跳转到其他网页，构成整个互联网

HTML起手写什么

!+tab键生成HTML模板

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">  <!-- 禁止缩放 -->
    <title>Document</title>
</head>
<body>

</body>
</html>

全局属性

概念：

全局属性是所有 HTML 元素共有的属性，它们可以用于所有元素，即使属性可能对某些元素不起作用。

常见的全局属性：

  1. class：以空格分隔元素的类名，CSS 和 Javascript 通过类选择器 (class selectors) 或 DOM 方法 ( document.getElementsByClassName) 来选择和访问特定的元素。
    1
    2
    3
    <div class="mainMessage middle">
        这里是页面中间的信息
    </div>
  • 通过.mainMessage 或 .middle都可以为这个div添加样式
  1. id：定义唯一标识符，该标识符在整个文档中必须是唯一的。但不推荐使用，因为id不能命名为window上已有的全局变量，限制太多，不方便新手起名
  2. style：规定元素的行内样式（inline style），它是Html的属性，而非CSS。样式展示的优先级行内样式>CSS
    HTML-style.png
  3. tabindex：设置元素的 Tab 键控制次序，参数包括正数（按数字顺序访问）、0（最最最后一个访问）、负数（别来访问我）

章节标签🏷

HTML-章节标签.png

常用内容标签🏷

  1. 加入强调

    1
    2
    斜体强调<em>强调内容</em>
    加粗强调<strong>强调内容</strong>

  2. 加入代码

    1
    2
    加入一行代码<code> </code>
    加入多行代码<pre> </pre>

  3. 水平横线与回车（无结束标签）

    1
    2
    回车</br>
    水平横线</hr>

  4. 无序列表&有序列表&自定义标签

新闻信息

1
2
3
4
<ul>
    <li>新闻1</li>
    <li>新闻2</li>
</ul>

豆瓣电影排行

1
2
3
4
<ol>
    <li>肖申克的救赎</li>
    <li>教父</li>
</ol>

自定义标签（只能有一个dt，但可以有多个dd）

1
2
3
4
<dl>
    <dt>自定义列表title</dt>
    <dd>自定义列表信息</dd>
</dl>

  1. a标签

创建一个可点击的图片

1
2
3
<a href="http://www.imooc.com" target="_blank">
    <img src="https://s2.loli.net/2022/03/02/8xgcYprTRe1ZnEk.png" >
</a>

0%