整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一文了解前端三剑客(HTML5+CSS+JS)

他们是由W3C推荐的前端三件套,并且互相之间可以很好地配合

  • HTML:Hyper Text Markup Language超文本标记语言,|框架
  • CSS:Cascading Style Sheets层叠样式表,Cascading Style Sheets显示样式
  • JS:JavaScript脚本|监听时间,执行函数

学习

  • W3C
  • 菜鸟教程

常用软件,语言文件相关格式 .html文件/文件夹

HBuilder X

.html文件 格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 关于网页的一些属性 -->
		<!-- css样式 -->
	</head>
	<body>
		<!-- 主体内容 -->
	</body>
</html>

文件夹

刚学半年web,只是写个作业可以这么用吧(●’◡’●)
前为名字,后为文件格式

项目名 文件夹
	images 文件夹
	css 文件夹
    	网站名1.css
    	...
    html 文件夹 也可以直接把每个网站卸载更外面一层
    	网站名1.thml
    	...

标签

html的内容由一个个标签 嵌套或并列 组成
标签用 <标签名>内容</标签名> 或者 <标签名/>

文字可以直接输入,标签只不过是用来控制他们的 位置和显示效果 的

通用的标签主要
前者较为普遍;后者教为特殊

结构相关

主要用来定一个区域来 划分更小的区域或者直接写入内容。
使用时用前者。

  1. 通用的结构标签有div和span
  2. div更普遍一些
  3. span一般用在刚开始不需要显示的内容上,但可以被div替代

有许多特殊的标签,他们没有特别之处,只是特别拎出来以方便理解文件的整个结构

英文

通常的内容

header

页眉

nav

导航栏

main

主要内容

article

与上下文无关的独立内容

section

其中一个区域

aside

侧栏或边栏

footer

页脚

detail

某个细节的描述

summary

detail的标题

最后两个detail和summary通常是相互配合的。

上面这些都是有着特殊用处的标题,可以用下面的这些替代,但使用时相对复杂一些

内容相关

主要用来直接写入内容。
使用时前后使用方法的皆有
空行之前的表示重要
用前者的有

英文

含义

h1

标题,字体最大的标题

中间部分

字体依次减小的标题

h6

标题,字体最小的标题

p

段落

br

换行

-

-

hr

水平线

sub

下标文本

sup

上标文本

ins

插入文本

del

删除文本

wbr

此处适合换行

pre

预格式文本

address

表示地址

bdo

文字方向

blockauote

长的引用语

q

短的引用语

mark

定义有记号的文本

table te td th是相互配合组成一个表格的,table>tr>td

表格


table

表格

tr

行标签

td

列标签

th

标题列

li必须在ol或ul内。通常用ul li

列表


ol

有序列表

ul

无序列表

li

列表项

表单可以用作问卷等
input属性typr value

表单


form

表单

label

点击时自动定位到里面的input

input

输入



select

多选

option

多选的一个选项

用后者的有

英文

含义

br

换行

img

引入图片

video

引入视频

audio

引入



abbr

此处适合换行

img video audio使用时需要更多的属性,比如URL路径等
以video为例:
<video src="路径" autoplay="autoplay" controls="controls"/>
依次表示 URL路径 自动播放 显示播放器控件
他们有各自的属性
都必须有src属性以表示路径,img只需要src即可显示
各自可以在属性里选择width和height以显示宽度和高度(这两个在css 属性里介绍)
video和audio(他们有一样的可选属性)的其他可选属性在下面显示,一般一个只有一个可选择的值,那个值就是名字自己(言下之意就是,只写自己需要的属性)

英文

作用

autoplay

自动播放

controls

显示控件

loop

循环播放

poster

定义视频下载时需要的图像,值用路径表示

preload

autoplay时无效,定义文件预加载的时机,有3个值,具体在下面介绍

muted

静音

preload的值
auto:默认值,直接加载 音频/视频
metadata:仅加载 音频/视频 元数据
none:不加载 音频/视频

class/id

用于标签的定义
class表示类,可以用于很多类似的标签,以方便使用一样的css样式
id是唯一的,可以为独特的标签单独使用样式

css样式

css一共有3段:选择器{属性:值;…}
样式有3种添加的方法

  1. 直接在标签后面写,如<div style="具体样式">这时候选择器不需要写了
  2. 写在head的style标签内<style>写如css</style>,可以在style同时写入多个不同的样式
  3. 写在单独的css格式文件中,在head中添加<link href="文件路径" type="text/css" rel="stylesheet"/>引入css外部样式

选择器

常见的伪 选择器/元素

表示方法

通用选择器

*

标签选择器

标签名

类选择器

.类名 前面是一个下点

ID选择器

#ID号

-

以下选择器用于分隔不同的选择器

后代选择器

一个空格,其实这不是个选择器(但很像),可以选择出所有的后代

分组选择器

, 逗号

子元素选择器

>

-

以下选择器均需紧跟在最上面的选择器后

相邻兄弟选择器

+

不相邻兄弟选择器

~

属性选择器

[属性值] 详细介绍

伪类选择器

:单词 详细介绍

伪属性

::单词 详细介绍

后一个选择器不一定是前一个的子元素,也可以通过一些符号进行兄弟之间的变化


子元素选择器

div>p
选中选中div中的p子元素(没有中间层的关系)

相邻兄弟选择器

div+p
选中跟在div后的p

不相邻兄弟选择器

div~p
选中前面有相同父元素的div 的p

属性选择器

| 属性选择器 | 介绍,有红字是因为|竖线在编辑器里是特殊字符,在代码块内才能正常显示 |
|–|–|
| [属性] | 具有该属性的 |
|[属性=某值]|属性=某值的|
|[属性~=某值]|属性=用空格分隔的字词列表,某值是其中一个值
|[属性|=某值]|属性=用|分隔的字词列表,某值是其中一个值
|[属性^=某值]|具有该属性,以 某值 开头
|[属性$=某值]|具有该属性,以 某值 结尾
|[属性*=某值]|具有该属性,包含 某值

伪类选择器

这类选择器全部按前面(一部分)选择器的介绍,紧跟在后面,以":"(冒号)为标识符(即以它开头,可以看成选择器的一部分)
以下均不写冒号

伪类选择器

介绍

-

下面定义的是应用于超链接文本a的4种(鼠标在该元素的)状态,
一起出现(分开使用)时,顺序不可颠倒,否则会使本应在上面的选择器失效
也可以用到其他元素(非a)身上,即当鼠标
移过/在上面/移出时 的活动状态

link

正常状态(未访问)

visited

被访问之后

hover

经过时

active

单机被激活时

伪类选择器也有一些分类,见下


结构伪类选择器

介绍

first-child

第一个子元素

lastchild

最后一个子元素

-

注意以下4个带()的,()内可以是一个算式或数字,选中符合结果的(可以是多个)
若()内是一个确定的数字,数字超出范围,选择器将无效;
算式里可以有一个字母n,n会自增直到超出父类的子类数量。
n=0等最前面的几个值超出范围问题不大
尽量
简单 有效,比如(2n+1)选中所有奇数行
()里面也可以是 odd,选中奇数行;even,选中偶数行

nth-child()

正数 第()个子元素

nth-last-child()

倒数 第()个子元素

nth-of-type()

父元素的 第()个同类子元素

nth-last-of-type()

父元素的 倒数 第()个同类子元素

first-of-type

父元素的 第一个同类子元素

last-of-type

父元素的 倒数 第一个同类子元素

only-child

父元素的唯一的子元素,(当然,)可能有很多子元素是唯一的

only-of-type

父元素的唯一一个相同类型的子元素

empty

没有任何内容的子元素

状态伪类选择器

介绍,UI元素一般指包含在form元素内的表单元素

enabled

范围内的所有可用UI元素

disabled

范围内的所有可用UI元素

checked

范围内的所有可用UI元素

否定伪类选择器


not()

不匹配该元素的选择器,()里是一个选择器的属性,将选取 不符合该选择器 的元素

目标伪类选择器


target

前面的匹配元素被相关URL指向,样式效果才生效,是动态选择器

伪元素

用法:紧跟在后面,用两个":“作为标识符(也可以只用一个,但两个更好)。css样式里需包含content属性,值为带引号的字符(当然也可以什么都不写)
如:div:after{content=”";}

伪元素

介绍

before

在前面插入一段文字

after

在后面插入一段文字

属性及含义

先讲一些主要的值

长度

用途:广泛
用法:有数字和单位组成:200px

当数字为0时,单位可有可无

使用频率:px最常用,其次em
单位有绝对和相对之分

相对单位

单位长度的含义

px

像素(Pixel)

em

相对于父元素字体大小的倍数

ex

相对于字符x的高度,通常为字体高度的一半

ch

相对于数字0的宽度

rem

相对于根元素(html)字体大小的倍数。若未被设置,则相对于浏览器的默认字体尺寸(一般为16px)

vw

相对于视口的宽度(视口被均分为100vw)

vh

相对于视口的高度(视口被均分为100vw)

xmin

相对于视口的 高度或宽度 中较小的那个(小的被均分为100vmin)

vmax

相对于视口的 高度或宽度 中较大的那个(大的被均分为100vmax)

绝对单位

单位长度的含义

pt

点(point)

pc

派卡(pica),=我国新四号铅字的尺寸

in

英寸(inch)

cm

厘米(centimeter)

mm

mm(millimeter)

时间

用途:属性transition(变化时间)
用法:数字+单位:200ms
使用频率:都常用

单位

含义

s

ms

毫秒

角度

用途
用法:数字+单位:120deg
使用频率:第一个deg最常用

单位


deg

角度(degrees) ,一个圆 360°

grad

梯度(gradians),一个圆 400梯度

rad

弧度(radians),一个圆 PI

turn

转、圈(turns)

颜色

用途:color,background(-color)
用法:值
使用频率:2和-1最为常用,-1代表最后一个

描述

white

白色

具体英文单词↑

代表这个单词指代的颜色

rgb(r,g,b)

RGB值,rgb分别代表红绿蓝,[0,255]

rgba(r,g,b,a)

见上↑.a代表透明度 [0,1]

rgb(r%,g%,b%)

RGB值(255*x%),三个值[0,100] ,最后即为0%-100%

#rrggbb

RGB值,每个值用 两位 16进制数 表示(大小写不敏感),最后值在0-255

hsl(h,s,l)

hsl分别代表 色相(hue,[0,360])/饱和度(saturation,[0%,100%])/亮度(lightness,[0%,100%])

hsla(h,s,l,a)

↑ a代表透明度

字符串

只在属性font-family中用到,定义字体类型

{font-family="微软雅黑"}

也可以不用双引号

{font-family=微软雅黑}

属性概要

长度表示一栏:

1:值完全用长度表示,下面不再具体介绍
其他值的类型:值不能用长度表示,能用其他的较规范的表示表示
0:值不能用长度表示,也无法用其他规范的值表示
>1:有多个值,都用长度表示(同时出现多个值:长度可变)

属性

含义

长度表示

width

宽度

1

height

高度

1

position

定位方式

字符

display

显示方式

字符

float

浮动方式

字符

clear

清除部分浮动

字符

margin

外边距

1-4

border

边框

1-4

padding

内边距

1-4

text-align

字体左右的对齐方式

字符

text-indent

文字之前空多少长

1

background

背景,包括背景图,背景色,是否重复

0

line-heignt

行高

1

font-family

字体

字符

font-size

字的大小

1

font-weight

字的粗细

1

color

字的颜色

颜色

opacity

透明度0-1

0

z-index

离屏幕远近,越大越显示在上面

0

transition

状态变化的时间

时间

animation

动画

0

overflow

溢出

字符

position 定位

含义

absolute

绝对定位,相对于最近的定位过的父元素偏移

relative

相对定位,在文件流中,相对自生原本在的位置偏移

fixed

绝对定位,相对视口偏移

这里提到了偏移,它相对于定位的位置进行偏移


relative在文件流中的意思是,在这个页面中单独占据一块空间,原始位置不会与在文件流中的同级元素重叠


display 显示

block,none,grid较为常用

含义

block

块状元素

none

不显示

flex

flex布局

grid

grid布局

inline

行内元素

inline-block

行内块元素

grid和flex可以去网上找资料学习

grid布局

着重介绍一下grid布局
含义:可以方便地进行网格状的布局,而后可以随意组合,分配给子元素
有许多属性和它配合使用(前提:display:grid,至少与前3个一起使用,前4个可以更美观地表示)

属性

含义

用法与解释

grid-template

融合了下面上半部分的所有项

较为复杂,不讲

grid-template-rows

每行的宽度(单独设置)

多个 长度/auto/xfr 表示,有几行写几个(空格分开)
可以用repeat(s,值)代替s个连续的重复值
fr代表比例,会将剩下的长度按比例分配

grid-template-colums

每列的宽度(单独设置)

↑ 有几列写几个

grid-template-areas

给每个格子命名,名字一样则合并

每行一对双引号,(适当使用回车)
单个双引号内 每列分别有一个代表这个区域的名字。
“aa b” “aa b” “c c”,代表3行2列:
aa占据上面两行的最左边一列;
b占据上面两行的最右边一列;
c占据最后一行的两列

grid-gap

行间距和列间距(统一设置)

行间距 列间距

grid-row-gap

行间距(统一设置)

长度

grid-colum-gap

列间距(统一设置)

长度

place-items

内容的 左右和上下 位置情况

↓ start/end/center/stretch

align-items

内容的 左右 位置情况

↑ 开头/末尾/中间/拉伸以盛满

justify-items

内容的 上下 位置情况

↑ 对align来说,左是开头,右是末尾

place-content

整个表格 左右和上下 位置情况

↑ 对juestify来说,上是开头,下是末尾

align-content

整个表格的 左右 位置情况

↑有两个值的(place),用空格分开

justify-content

整个表格的 上下 位置情况

以下都是子元素获得父元素分配的某个空间的语句

grid-template-area

用指定的名字获取父类给这个名字的空间

字符串

以下用 起始/末尾 的(间隔,即gap) 行/列 获得空间
有多个值的用/分隔
第1个间隔行在整个表格的最上方,列:左
即,有n行内容行,就有n+1行间隔行
默认名为从1开始的数字,行列的下标分开计算
或使用上面areas里定义的名字+start/end
如 aa-start 表示区域a的起始行
上:起始行 左:起始列 下:末尾行 右:末尾列

grid-area

起始/末尾 的 行/列

起始行/起始列/末尾行/末尾列

grid-row

起始/末尾 的行

起始行/末尾行

grid-row-start

起始 行

起始行

grid-row-end

末尾行

末尾列

grid-column

起始/末尾 的列

起始列/末尾列

grid-column-start

起始列

起始列

grid-column-end

末尾列

末尾列

flex布局

着重介绍一下flex布局
含义:可以方便地进行弹性布局,尤其是垂直对齐的问题
有许多属性和它配合使用(前提:display:flex)
| 属性 | 含义
|–|–|–|
|flex-direction| 决定主轴的方向
| justify-content | 子元素在主轴方向上的分布方式
| align-items | 子元素在副轴方向上的分布方式

flex-direction的值

含义

row

从上到下

row-reserve

从下到上

column

从左到右

column-reserve

从右到左

justify-content的值

含义

flex-start

主轴起始除处

flex-end

主轴末尾处

center

主轴中间

space-around

元素两边留空隙,每个元素各占一份,不会像magin一样重合

space-between

元素之间留空隙,这意味着最边上没有空隙

align-items的值

含义

flex-start

副轴起始除处

flex-end

副轴末尾处

center

副轴中间

stretch

全部占满

inline-block布局

overflow 溢出处理

不设置这个属性,它可能会在区域之外显示

含义

auto

超出长度时,可滚动

hidden

隐藏

其他

-

margin/border/padding 外边距/边框/内边距

分别代表 外边距/边框/内边距
他们都可以用4个长度值表示,分别代表 上右下左 的长度

也可以有auto值,即自动,它会使两边相等
如 margin:0 auto;
它的左右两边是相等的

后面的值可以省略,但至少有第一个值

第4个值(左)省略,则=第2个值(右)
第3个值(下)省略,则=第1个值(上)
第2个值(右)省略,则=第1个值(上)

他们的四个值可以单独设置,以margin为例子
margin-top,margin-right,margin-bottom,margin-left

float/text-align 浮动/左右对齐

含义(浮动方向/对齐方向)

left

center

right

clear 清除浮动

先清除上一个区域来的浮动(float),而后可以设置自己的浮动

清除浮动

left

right

both

左右

background 背景

属性自由书写,其中的属性可以缺少一些或调换顺序

下面是两个较频繁使用的格式

  • 背景色: background: background-color
  • 背景图片: background: url(“”) background-repeat background-position;

有多个子属性

子属性

含义

background-image

图片链接

url(“路径”)

background-repeat

是否重复

repeat/no-repeat

background-position

背景图的起始位置


background-position-x

离左边距离

长度/x%

background-position-y

离上边距离

长度/y%

background-color

背景色

颜色

background-size

背景大小

长度 长度

background-attachment

是否随着滚动而滚动

scroll(默认)/fixed(不会)/local(会)

javascript

<script type="text/javascript">
	变量及赋值
	计算语句
	函数
	事件
</script>

一定有事件,因为没有事件,js就没有什么意义

变量

所有类型的变量 都用 var 变量名 = 值; 来定义

数据类型

数据类型

含义

Undefined

定义但未赋值

undefined

Null

未定义,由Undefined衍生而来,值==undef

null

Boolean

布尔类型

true false

Number

数字,正数,浮点数等,
可以用纯数字,科学计数法、进制数等表示

数字

String

字符串,用单引号或双引号都可

字符串

Object

项目,上面有属性,如{name:“myname”,age:18}


Array

数组可以混杂其他类型,如[1,“myname”]


DOM对象

一个具体的标签,如window, document,element


可用数据类型

数据类型相关函数

目的类型

含义与用法

Boolean Number

toString()

String

变换成字符串
str=from.toString()
Number的()可以放十进制表示的进制数

-

下面两个 String转Number 的函数
出现异常则返回前面的正常的值

-

下面的都把源操作数放()里

String

praseInt()

整数(Number)

字符串变整数

String

praseFloat()

浮点数(Number)

字符串变浮点数

-

下面的是三种强制类型转换

-


所有

Boolean()

Boolean

空字符串 0 undefined null 值为false,其他的true

所有

Number()

Number

匹配整个数,fasle null为0,true为1
undefined为NaN(非数,not a number)

所有

String()

String

强制类型转换,变成字符串


isNaN

判断是不是数


赋值及计算语句

运算符

赋值符

含义

=

右边赋给左边

运算符


+

-

*

/

%

++

自增,放在数的 前/后 不一样

? :

三目运算符

( )

提高优先级,左括号,右括号

-

-

判断符


>

大于

>=

大于等于

<

小于

<=

小于等于

==

值相等

!=

值不相等

===

值和类型 都相等

!==

值和类型 都不相等

-

-

运算赋值符

左边的值加上右边的值,再赋值给左边
a+=b相当于a=a+b

+=


-=


*=


\=


%=


基本计算语句

语句

使用

定义及赋值

var i=3;也可以单独定义/赋值,定义统一用var

选择(分支)

if-else或switch–case-default-break

循环

for或while或do-while

跳出

break或continue

返回

return

事件

一个事件只能绑定一个函数,如果一个事件要做多件事情,都放到一个函数里
表达形式:(被触发)对象.事件属性=…

不只是a有事件属性,其他的标签都有事件属性
事件属性有很多,根据可以触发者(比如鼠标,键盘,窗口)的不同分类
只列举常用的
鼠标触发:onclick(点击),onmouseover(鼠标再其上,和选择器hover有点像,但有不同)
窗口触发(被触发对象必须是window):onload(窗口完成后)

动态绑定
写在js样式里,被包含在其他的事件的函数中绑定
对象需要给出
参照函数的三种绑定方式
静态绑定
直接在标签里绑定,这时候对象就是自己这个标签
参照函数的第2种
比如
<p onclick="函数名(参数)">

函数(function)

函数里的组成与js的组成成分一致

  • 变量及赋值
  • 计算语句
  • 函数
  • 事件

函数定义的3种方式

  1. function 函数名(参数){函数体}
  2. var 函数名=function (参数){函数体}
  3. function (){函数体}

参数可以有多个,定义时不需要声明类型,只需要参数名即可

第2种定义方式可以让定义在标签内的事件连结到这个函数

事件绑定

前两种定义方式

  1. 无参:事件=函数名;

不需要 (参数)

  1. 有参:事件=function(){ 函数名(参数); }

需要用到匿名函数
直接用 事件=函数名(参数); 的结果
是 直接触发事件

第3种定义方式一般直接赋给内部的事件,即 事件=function (){函数体}

级元素与内联元素的概念与区别

在HTML中,大多数元素都被定义为块级元素内联元素。

块级元素通常会独立成行,而内联元素会并排显示。

在我们学过的元素中,

块级元素如:<h> <p> <table>这些。

内联元素如<td><a><img>

下面我们通过练习来直观看看他们的区别。

块级元素展示,代码如下:

<body>
  <h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
  <p>块级元素与内联元素</p>
  <p>零基础自学网页制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如图:

内联元素展示如下

示例代码:这段代码被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>

效果如图:

其中,<img>标签中的width属性规定了图片的宽度为200px,也就是200像素。

HTML中,如果只对图片的宽或高进行数值指定,那么未指定的数值会随着指定数值进行等比例缩放!

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

<div>与<span>标签

为了方便开发者对页面内容进行布局和调整,html开发者为html加入了专门的区块元素<div></div>。

<div></div>是一个块级元素,大家可以把它理解为一个容器,它本身是不会显示在页面上的。

比如这个!

笔者第一个漫画作品

如果抛开画面内容,我们看到的是一堆对画面进行分割的方格子。像这样

<div></div>元素的作用就是对页面进行了这样的分割。

实际上我们的页面布局都是基于这样思路进行分割的,只是页面上不会像漫画一样显示外边框而已。例如:

强制为其添加边框分割:

大家看明白了吗?<div></div>就是用来对页面进行分割划区域的。

通过给<div>标签设置不同的id属性,可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是,如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢?

html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作,我们可以这样写:

<p>我有一个<span>梦想</span></p>

通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了,下一次我们建立一个新的页面来简单看看<div>元素的基本用法。

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

ello, world!

本教程的这一部分内容是关于 JavaScript 语言本身的。

但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert),所以如果你打算专注于另一个环境(比如 Node.js),你就不必多花时间来关心这些特定指令了。我们将在本教程的下一部分中专注于浏览器中的 JavaScript。

首先,让我们看看如何将脚本添加到网页上。对于服务器端环境(如 Node.js),你只需要使用诸如 "node my.js" 的命令行来执行它。

“script” 标签

JavaScript 程序可以在 <script> 标签的帮助下插入到 HTML 文档的任何地方。

比如:

<!DOCTYPE HTML>
<html>
<body>
 <p>script 标签之前...</p>
 <script>
 alert('Hello, world!');
 </script>
 <p>...script 标签之后</p>
</body>
</html>

<script> 标签中包裹了 JavaScript 代码,当浏览器遇到 <script> 标签,代码会自动运行。

现代的标记

<script> 标签有一些现在很少用到的属性,但是我们可以在老代码中找到它们:

type 属性:<script type=...>

  • 在老的 HTML4 标准中,要求 <script> 标签有 type 属性。通常是 type="text/javascript"。这样的属性声明现在已经不再需要。而且,现代 HTML 标准 —— HTML5 已经完全改变了此属性的实际含义。现在,该属性可以被用于 JavaScript 模块。但那是一个高级一点的话题,我们将会在此教程的其他章节中探讨 JavaScript 模块。

language 属性:<script language=...>

  • 这个属性是为了显示脚本使用的语言。这个属性现在已经没有任何意义,因为语言默认就是 JavaScript。不再需要使用它了。

脚本前后的注释:

  • 在非常古老的书籍和指南中,你可能会在 <script> 标签里面找到注释,就像这样:
<script type="text/javascript"><!--
 ...
//--></script>
  • 现代 JavaScript 中已经不这样使用了。这些注释是用于不支持 <script> 标签的古老的浏览器隐藏 JavaScript 代码的。由于最近 15 年内发布的浏览器都没有这样的问题,因此这种注释能帮你辨认出一些老掉牙的代码。

外部脚本

如果你有大量的 JavaScript 代码,我们可以将它放入一个单独的文件。

脚本文件可以通过 src 属性添加到 HTML 文件中。

<script src="/path/to/script.js"></script>

这里,/path/to/script.js 是脚本文件从站点根目录开始的绝对路径。当然也可以提供当前页面的相对路径。例如,src =“script.js” 表示当前文件夹中的 “script.js” 文件。

我们也可以提供一个完整的 URL 地址,例如:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

要附加多个脚本,请使用多个标签:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

请注意:

一般来说,只有最简单的脚本才嵌入到 HTML 中。更复杂的脚本存放在单独的文件中。

使用独立文件的好处是浏览器会下载它,然后将它保存到浏览器的缓存[1]中。

之后,其他页面想要相同的脚本就会从缓存中获取,而不是下载它。所以文件实际上只会下载一次。

这可以节省流量,并使得页面(加载)更快。

提醒:如果设置了 src 属性,script 标签内容将会被忽略。

一个单独的 <script> 标签不能同时有 src 属性和内部包裹的代码。

这将不会工作:

<script src="file.js">
 alert(1); // 此内容会被忽略,因为设定了 src
</script>

我们必须进行选择,要么使用外部的 <script src="…">,要么使用正常包裹代码的 <script>。

为了让上面的例子工作,我们可以将它分成两个 <script> 标签。

<script src="file.js"></script>
<script>
 alert(1);
</script>

总结

  • 我们可以使用一个 <script> 标签将 JavaScript 代码添加到页面中。
  • type 和 language 属性不是必需的。
  • 外部的脚本可以通过 <script src="path/to/script.js"></script> 的方式插入。

有关浏览器脚本以及它们和网页的关系,还有很多可学的。但是请记住,教程的这部分主要是针对 JavaScript 语言本身的,所以我们不该被浏览器特定的实现分散自己的注意力。我们将使用浏览器作为运行 JavaScript 的一种方式,这种方式非常便于我们在线阅读,但这只是很多种方式中的一种。

作业题

1. 显示一个提示语

重要程度:⭐️⭐️⭐️⭐️⭐️

创建一个页面,然后显示一个消息 “I'm JavaScript!”。

在沙箱中或者在你的硬盘上做这件事都无所谓,只要确保它能运行起来。

你可以先看一下 新窗口的演示结果[2]

在微信公众号「技术漫谈」后台回复 1-2-1 获取本题答案。

2. 使用外部的脚本显示一个提示语

重要程度:⭐️⭐️⭐️⭐️⭐️

打开题目 1 的答案。将答案中脚本的内容提取到一个外部的 alert.js 文件中,放置在相同的文件夹中。

打开页面,确保它能够工作。

你可以先看一下 新窗口的演示结果[3]

在微信公众号「技术漫谈」后台回复 1-2-1 获取本题答案。


现代 JavaScript 教程:开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程[4]

在线免费阅读:https://zh.javascript.info/


参考资料

[1] 缓存: https://en.wikipedia.org/wiki/Web_cache

[2] 新窗口的演示结果: https://zh.js.cx/task/hello-alert/solution/

[3] 新窗口的演示结果: https://zh.js.cx/task/hello-alert/solution/

[4] React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources




关注微信公众号「技术漫谈」,订阅更多精彩内容。