他们是由W3C推荐的前端三件套,并且互相之间可以很好地配合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 关于网页的一些属性 -->
<!-- css样式 -->
</head>
<body>
<!-- 主体内容 -->
</body>
</html>
刚学半年web,只是写个作业可以这么用吧(●’◡’●)
前为名字,后为文件格式
项目名 文件夹
images 文件夹
css 文件夹
网站名1.css
...
html 文件夹 也可以直接把每个网站卸载更外面一层
网站名1.thml
...
html的内容由一个个标签 嵌套或并列 组成
标签用 <标签名>内容</标签名> 或者 <标签名/>
文字可以直接输入,标签只不过是用来控制他们的 位置和显示效果 的
通用的标签主要
前者较为普遍;后者教为特殊
主要用来定一个区域来 划分更小的区域或者直接写入内容。
使用时用前者。
有许多特殊的标签,他们没有特别之处,只是特别拎出来以方便理解文件的整个结构
如
英文 | 通常的内容 |
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表示类,可以用于很多类似的标签,以方便使用一样的css样式
id是唯一的,可以为独特的标签单独使用样式
css一共有3段:选择器{属性:值;…}
样式有3种添加的方法
常见的伪 选择器/元素 | 表示方法 |
通用选择器 | * |
标签选择器 | 标签名 |
类选择器 | .类名 前面是一个下点 |
ID选择器 | #ID号 |
- | 以下选择器用于分隔不同的选择器 |
后代选择器 | 一个空格,其实这不是个选择器(但很像),可以选择出所有的后代 |
分组选择器 | , 逗号 |
子元素选择器 | > |
- | 以下选择器均需紧跟在最上面的选择器后 |
相邻兄弟选择器 | + |
不相邻兄弟选择器 | ~ |
属性选择器 | [属性值] 详细介绍 |
伪类选择器 | :单词 详细介绍 |
伪属性 | ::单词 详细介绍 |
后一个选择器不一定是前一个的子元素,也可以通过一些符号进行兄弟之间的变化 |
div>p
选中选中div中的p子元素(没有中间层的关系)
div+p
选中跟在div后的p
div~p
选中前面有相同父元素的div 的p
| 属性选择器 | 介绍,有红字是因为|竖线在编辑器里是特殊字符,在代码块内才能正常显示 |
|–|–|
| [属性] | 具有该属性的 |
|[属性=某值]|属性=某值的|
|[属性~=某值]|属性=用空格分隔的字词列表,某值是其中一个值
|[属性|=某值]|属性=用|分隔的字词列表,某值是其中一个值
|[属性^=某值]|具有该属性,以 某值 开头
|[属性$=某值]|具有该属性,以 某值 结尾
|[属性*=某值]|具有该属性,包含 某值
这类选择器全部按前面(一部分)选择器的介绍,紧跟在后面,以":"(冒号)为标识符(即以它开头,可以看成选择器的一部分)
以下均不写冒号
伪类选择器 | 介绍 |
- | 下面定义的是应用于超链接文本a的4种(鼠标在该元素的)状态, |
link | 正常状态(未访问) |
visited | 被访问之后 |
hover | 经过时 |
active | 单机被激活时 |
伪类选择器也有一些分类,见下 | |
结构伪类选择器 | 介绍 |
– | – |
first-child | 第一个子元素 |
lastchild | 最后一个子元素 |
- | 注意以下4个带()的,()内可以是一个算式或数字,选中符合结果的(可以是多个) |
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 | 溢出 | 字符 |
值 | 含义 |
absolute | 绝对定位,相对于最近的定位过的父元素偏移 |
relative | 相对定位,在文件流中,相对自生原本在的位置偏移 |
fixed | 绝对定位,相对视口偏移 |
这里提到了偏移,它相对于定位的位置进行偏移 | |
relative在文件流中的意思是,在这个页面中单独占据一块空间,原始位置不会与在文件流中的同级元素重叠 |
block,none,grid较为常用
值 | 含义 |
block | 块状元素 |
none | 不显示 |
flex | flex布局 |
grid | grid布局 |
inline | 行内元素 |
inline-block | 行内块元素 |
grid和flex可以去网上找资料学习
着重介绍一下grid布局
含义:可以方便地进行网格状的布局,而后可以随意组合,分配给子元素
有许多属性和它配合使用(前提:display:grid,至少与前3个一起使用,前4个可以更美观地表示)
属性 | 含义 | 用法与解释 |
grid-template | 融合了下面上半部分的所有项 | 较为复杂,不讲 |
grid-template-rows | 每行的宽度(单独设置) | 多个 长度/auto/xfr 表示,有几行写几个(空格分开) |
grid-template-colums | 每列的宽度(单独设置) | ↑ 有几列写几个 |
grid-template-areas | 给每个格子命名,名字一样则合并 | 每行一对双引号,(适当使用回车) |
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) 行/列 获得空间 |
grid-area | 起始/末尾 的 行/列 | 起始行/起始列/末尾行/末尾列 |
grid-row | 起始/末尾 的行 | 起始行/末尾行 |
grid-row-start | 起始 行 | 起始行 |
grid-row-end | 末尾行 | 末尾列 |
grid-column | 起始/末尾 的列 | 起始列/末尾列 |
grid-column-start | 起始列 | 起始列 |
grid-column-end | 末尾列 | 末尾列 |
着重介绍一下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 | 全部占满 |
不设置这个属性,它可能会在区域之外显示
值 | 含义 |
auto | 超出长度时,可滚动 |
hidden | 隐藏 |
其他 | - |
分别代表 外边距/边框/内边距
他们都可以用4个长度值表示,分别代表 上右下左 的长度
也可以有auto值,即自动,它会使两边相等
如 margin:0 auto;
它的左右两边是相等的
后面的值可以省略,但至少有第一个值
第4个值(左)省略,则=第2个值(右)
第3个值(下)省略,则=第1个值(上)
第2个值(右)省略,则=第1个值(上)
他们的四个值可以单独设置,以margin为例子
margin-top,margin-right,margin-bottom,margin-left
值 | 含义(浮动方向/对齐方向) |
left | 左 |
center | 中 |
right | 右 |
先清除上一个区域来的浮动(float),而后可以设置自己的浮动
值 | 清除浮动 |
left | 左 |
right | 右 |
both | 左右 |
属性自由书写,其中的属性可以缺少一些或调换顺序
下面是两个较频繁使用的格式
有多个子属性
子属性 | 含义 | 值 |
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(会) |
<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 | 变换成字符串 |
- | 下面两个 String转Number 的函数 | - | 下面的都把源操作数放()里 |
String | praseInt() | 整数(Number) | 字符串变整数 |
String | praseFloat() | 浮点数(Number) | 字符串变浮点数 |
- | 下面的是三种强制类型转换 | - | |
所有 | Boolean() | Boolean | 空字符串 0 undefined null 值为false,其他的true |
所有 | Number() | Number | 匹配整个数,fasle null为0,true为1 |
所有 | String() | String | 强制类型转换,变成字符串 |
isNaN | 判断是不是数 |
赋值符 | 含义 |
= | 右边赋给左边 |
– | – |
运算符 | |
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 余 |
++ | 自增,放在数的 前/后 不一样 |
? : | 三目运算符 |
( ) | 提高优先级,左括号,右括号 |
- | - |
判断符 | |
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 值相等 |
!= | 值不相等 |
=== | 值和类型 都相等 |
!== | 值和类型 都不相等 |
- | - |
运算赋值符 | 左边的值加上右边的值,再赋值给左边 |
+= | |
-= | |
*= | |
\= | |
%= |
语句 | 使用 |
定义及赋值 | 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="函数名(参数)">
函数里的组成与js的组成成分一致
函数定义的3种方式
参数可以有多个,定义时不需要声明类型,只需要参数名即可
第2种定义方式可以让定义在标签内的事件连结到这个函数
事件绑定
前两种定义方式
不需要 (参数)
需要用到匿名函数
直接用 事件=函数名(参数); 的结果
是 直接触发事件
第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页面中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>标签实现文本内链接——零基础自学网页制作
本教程的这一部分内容是关于 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=...>
language 属性:<script language=...>
脚本前后的注释:
<script type="text/javascript"><!-- ... //--></script>
外部脚本
如果你有大量的 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>
总结
有关浏览器脚本以及它们和网页的关系,还有很多可学的。但是请记住,教程的这部分主要是针对 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
关注微信公众号「技术漫谈」,订阅更多精彩内容。
*请认真填写需求信息,我们会在24小时内与您取得联系。