目录
引述
html简介
HTML和HTML5
软件链接
软件的下载
启动软件
创建项目
第一章
1-1文档的基本结构
1-2单标签和双标签
1-3代码的注释
1-4元素,元素内容,元素属性
1-5代码书写规范
学习的技巧和方法
第二章
2-1 文档头部浅解
2-2 标题栏图标
2-3标题栏图标2
2-4 关键字和描述(seo优化 可以忽略不看)
2-5 页面跳转
2-6定义样式和引入样式
第三章
3-1超链接
编辑
3-2 超链接四种状态
3-3 绝对路径
3-4 相对路径1
3-4 相对路径2
3-6 ID属性
3-7 class属性
3-8 title和style
3-9 自定义属性
3-10 文件下载
3-11锚链接和空链接1
3-12锚链接和空链接2
第四章
4-1 图片的引入
4-2 图片的引入
引述
此教程是针对于即将入学的涉及到此专业 html 网页设计 的计算机专业新生。
html简介
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式,被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。
HTML和HTML5
HTML:
超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。
HTML
不是一种编程语言,而是一种标记语言(markup language),是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
HTML5
在从前HTML4. 01的基础上进行了一定的改进,新增了一些标签,又废弃了一些标签,是html最新版本。使用文本文档,新建第一个网页。
开发工具的下载和安装
软件链接
编译器我这里推荐 HBuilderX 我推荐的路由是这个软件使用相对来说比较简单,易操作,适合新手入门
软件的下载
进入了这个网址之后直接点击 Download for Windows 就会自动进入下载状态
下载好后,是一个.zip的压缩包,将这个压缩包解压到C盘以外的盘符
包含程序文件夹的名字 HBuilderX
启动软件
打开HBuilderX.exe
软件打开的界面
如果你不喜欢这个页面的颜色 在 主题切换 切换到自己喜欢的颜色
创建项目
文件——新建——项目
普通项目——基本HTML项目
项目文件存储的路径需要手动调整一下,选择自己指定的目录(文件夹)即可
项目名字自定义即可
创建好后看到了一个名字为 test的目录 这个就是我刚刚创建的一个
他里面包含了 三个字目录
css:这个目录是建议性放 .css文件的(后期会学习这个)
img:这个目录是建议性 存放 图片的目录
js:这个目录是 .js 脚本文件的 存放目录(后期会学习这个)
打开index.html
这是一个创建好的基本框架
按 alt+p 打开内置浏览器
打开内置浏览器后就会发现右侧有一个 名叫web 浏览器的
这个就是在编辑标签(写代码)的时候,右侧的这个内置浏览器会在我们每次保存(ctrl+s)的时候进行一次刷新,这样就能时刻的看到我们运行代码的一个状态
以上就是软件的基本安装,及其使用
第一章
1-1文档的基本结构
<!DOCTYPE html> <!--申明文档类型,告诉浏览器用htm15规范进行解析,这个标签必须在第一行-->
<html lang="zh"> <!-- html 文档开始的地方-->
<head>
<!-- 文档的头部 -->
<!-- 浏览器中不可见 -->
<meta charset="UTF-8"> <!-- 申明网页编码 -->
<title>我是浏览器标题栏的标题</title> <!-- 在浏览器标题栏显示的标题 -->
</head>
<body>
<!-- 文档主体部分,由一对body标签包含 -->
<!-- 浏览器中可以显示的部分 -->
</body>
</html><!-- html文档结束的地方-->
head 标签相当于人的头部
body相当于人的身体
title:是网页的标题
1-2单标签和双标签
标签:也称为标记
由一对尖括号包含单词构成:<body></body>
标签的形态:
1、标签形态:
1.双标签(对标签):
a:成双成对出现,可以包含内容;
b:有开始标签,有结束标签,结束标签在单词前有“/”;
2.单标签:
a:只有开始标签,没有结束标签
b:单标签在开始标签中结束,通常应该在单标签的大于号前加"/"表示结束。 -->
c:单标签的功能需要使用属性来实现 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>YJlio</title>
</head>
<body>
测试
</body>
</html>
如果把单标签的属性去掉,它就不能正常使用
<meta charset="UTF-8"> <!--声明网页的编码-->
<meta >
去掉了属性显示的文字就会乱码
1-3代码的注释
<!DOCTYPE html>
<html lang="zh">
<head>
<meta/>
<title>YJlio</title>
</head>
<body>
</body>
</html>
1-4元素,元素内容,元素属性
注释:
1:不用浏览器解析的内容,可以使用注释
2:对代码进行说明,方便修改查看
3:养成良好的注释习惯,
4:浏览器不会看到,是给人看的
5:注释书写:
<!--注释的内容-->
注释中不能再有注释
<!--注释<!--的内容-->
多条注释的格式
<!-- 注释的 --><!-- 内容 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta/>
<title>YJlio</title>
</head>
<body>
</html>
1-5代码书写规范
代码书写规范:
1.htm15非常宽松的代码规范
2.htm15标签,属性可以大写也可以小写,还可以混合大小写
3.在htm15中,你可以不用关闭标签。
要求:
1.所有代码全部使用小写
2,所有标签都要正常关闭
3,所有代码必须在英文半角状态输入(很重要)
4..<!DOCTYPE html>必须要写在最前
<!DOCTYPE html>
<html lang="zh">
<head>
<meta/>
<title>YJlio</title>
</head>
<body>
</body>
</html>
学习的技巧和方法
html学习技巧:为了学习方便,对标签进行分类
使用频率高的标签和属性,熟练掌握
使用频率低,或有固定功能的标签和属性,仅做了解
基本不用,或已废弃的标签和属性,不用学习
通过标签分类,将需要重点学习的标签,缩减到30个以内
html学习方法
零基础不用怕,只要认真听讲,练习,都学得会
英语不好不用怕, html只是一个个单词,没有语法
没有需要背诵的内容,很多代码都是自动生成练习才是王道
第二章
2-1 文档头部浅解
head:
1.文档头部中的内容看不见(浏览器的窗口看不到)
2.标题,图标,元信息,文档样式,定义脚本...
3.文档头部作用于整篇文档
title:
定义浏览器标题栏里显示的文档标题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YJlioxxx</title>
</head>
<body>
</body>
</html>
2-2 标题栏图标
link:引入外部文件
rel:定义当前文档与被链接文档间的关系
type:定义被链接文档的mime类型
href:定义被链接文档的路径
标题栏图标设置:
1.网站根目录下放一个名称:favicon.ico图片文件。浏览器会自动显示在标中。
2.使用ico图标作为标题栏图标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YJlio</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
</head>
<body>
</body>
</html>
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
我用的方法是将jpg的文件转换成ico ICO图标在线转换工具 (nyaasu.top) ,然后用链入的方式,在本地文件夹下创建文件,引用进去这样就形成了一个标题栏图标
标题栏图标
2-3标题栏图标2
link:引入外部文件
rel:定义当前文档与被链接文档间的关系
type:定义被链接文档的mime类型
href:定义被链接文档的路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YJlio</title>
<!-- <link rel="icon" type="image/x-icon" href="img/favicon.ico"/> -->
<link rel="icon" type="image/jpeg" href="img/test.jpg"/>
</head>
<body>
标题栏图标设置:16x16像素
1.网站根目录下放一个名称:favicon.ico图片文件。浏览器会自动显示在标中。
2.使用ico图标作为标题栏图标
可以使用工具生成ico图标
<!-- <link rel="icon" type="image/x-icon" href="img/favicon.ico"/> -->
3.使用jpg格式的图片作为标题栏图标
<!-- <link rel="icon" type="image/jpeg" href="img/test.jpg"/> -->
4.使用png格式的图片作为标题栏图标
<!-- <link rel="icon" type="image/png" href="img/test.png"/> -->
5.使用gif格式的图片作为标题栏图标
<!-- <link rel="icon" type="image/gif" href="img/test.gif"/> -->
</body>
</html>
2-4 关键字和描述(seo优化 可以忽略不看)
关键字和描述:
1.关键字和描述不是给人看,是用于供搜索引擎使用
2.关键字和描述是网页优化很重要的部分
关键字设置:
meta标签的两个标签
name="Keywords"
content="要设置的关键字,可以使用多个关键字,建议不超过5个。多个关键字用英文状态下的逗号, 分割"
描述设置:
meta标签的两个标签
name="description"
content="要设置的描述内容,字数不要太多"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YJlio</title>
<meta name="keywords" content="关键字1,关键字2,关键字3"/>
<meta name="description" content="关键字1,关键字2,关键字3"/>
</head>
<body>
</body>
</html>
2-5 页面跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面跳转</title>
<meta http-equiv="refresh" content="5;url=https://baidu.com"/>
</head>
<body>
页面跳转语法:
<meta http-equiv="refresh" content="多少秒后执行跳转;url=要跳转的地址"/>
页面自动刷新:
<meta http-equiv="refresh" content="多少秒后执行跳转">;
</body>
</html>
2-6定义样式和引入样式
在学习html 大家只考虑 基本结构就够了 样式 会在 css中学到
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>定义样式和引用样式</title>
<style type="text/css">
body{
font-size: 40px;
}
</style>
<link rel="stylesheet" href="2-6定义样式和引入样式.css">
</head>
<body>
<!-- 样式设置语法 -->
<!-- <style type="text/css">
css样式内容
</style> -->
<!-- 引入样式文件语法(用得最多): -->
<link rel="stylesheet" type="text/css" href="文件路径"/>
</body>
</html>
第三章
3-1超链接
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--超链接:从一个网页链接到另一个网页-->
<!-- 语法:
<a href="要链接的地址">内容</a> -->
<!-- href:要链接的地址
target:指定在哪里打开目标页面
_blank:在新窗口中打开目标页面
_self:在当前窗口打开目标页面(默认)
_parent:把文档载入父窗口或包含了超链接引用的框架的框架集
_top:把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 -->
<!-- <a href="http://www5.baidu.com" target="blank">这是一个链接</a> -->
</body>
</html>
_blank:在新窗口中打开目标页面
3-2 超链接四种状态
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="http://www5.baidu.com" target="blank">这是一个链接</a>
<br>
<a href="https://www5.baidu.com">百度</a>
<!-- 超链接的4种状态 -->
<!-- 未被访问的链接,link状态:默认文字为蓝色,并且有下划线 -->
<!-- 已被访问的链接,visited状态:默认文字为紫色,并且有下划线 -->
<!-- 鼠标移动到链接上的状态,hover状态:有下划线,鼠标变手型 -->
<!-- 正在点击的状态,activer状态:文字变成了红色,有下划线 -->
<!--通常用css对这4种状态进行重置 -->
<!--hover状态用到的是最多的-->
</body>
</html>
3-3 绝对路径
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绝对路径</title>
</head>
<body>
<a href="http://www5.baidu.com" target="blank">这是一个链接</a>
绝对路径:
河北省张家口市宣化区春光乡149号,这就是用绝对的方式来描述一个地址。
带有域名的完整路径,比如:https://www.baidu.com
主要用来链接外部资源
</body>
</html>
3-4 相对路径1
在同一目录下的文件能够被直接链接到 【href="文件路径"】
通俗的来讲 就是 如果你想做一个相对路径 你就需要保证它们在同一个文件夹下,共用一个主目录
比如这个主卧室 次卧室,他们的主目录就是 房间
目录的层级结构:
主体
fj1
fj2
c.html
b.html
fj3
o.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>相对路径</title>
</head>
<body>
<a href="fj1/fj2/c.html">链接到c</a>
</body>
</html>
3-4 相对路径2
还有一种情况就是当你在你自己的房间中,需要去其他房间找东西,这时候你就要先出你的房间,再到指定的房间中去找东西
正常情况下如果你在 fj3中的 o.html中 找到 fj1中 fj2下的 a 或者 c 文件直接用相对路径来访问的话是访问不到的
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="/fj1/fj2/c.html">链接到c</a>
</body>
</html>
如果想在 fj3中的 o.html中 找到 fj1中 fj2下的 a 或者 c 文件 就需要这样来做
在路径前面加上 ../ 一个../ 表示向上级退出一层
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="..//fj1/fj2/c.html">链接到c</a>
</body>
</html>
如果是这种情况下 访问c文件的话
fj3中的 fj4的o.html中 找到 fj1中 fj2下的 a 或者 c 文件
就需要加 两个 ../ 根据需要,对 不同层级的 目录进行引用 可以使用 多个 ../来进行组合
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../..//fj1/fj2/c.html">链接到c</a>
</body>
</html>
3-6 ID属性
ID是唯一的 像身份证一样,不能有重复
特殊属性; 元素特有的属性
标准属性: 几乎所有元素都可以拥有的属性
ID属性:
1.元素的唯一标识(身份证)
2.同一个页面中不能有相同的id
3.同一页面中,不同元素有相同的id也不行 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ID属性</title>
<style>
#test1{
color: red;
}
#test2{
color: green;
}
#test3{
color:blue;
}
#test4{
color:aqua;
}
</style>
</head>
<body>
<!-- 例如: -->
<!-- 正常的链接 -->
<!-- <a href="https://www.baidu.com">百度</a> -->
<!-- 将里面的属性删除,只保留标签 发现用不了-->
<!-- <a>百度</a> -->
<a id="test1">测试1</a>
<p id="test2">测试2</p>
<p id="test3">测试3</p>
<p id="test4">测试4</p>
</body>
</html>
分别对4个不同的id做了css的样式,css的使用后面会说到
3-7 class属性
标准属性:几乎所有标签都可以有的属性
class属性(类):
1.相同的元素,不同的元素可以有相同的类名()class值
2.同一个元素可以有多个类名,用空格隔开
3·主要用来选择一堆元素,定义样式
4.规定类名时,类名不能以数字开头
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ID属性</title>
<style>
.test{ /* 类名为 test */
font-size:30px; /* 字号30像素 */
color:red; /* 颜色:红色 */
}
</style>
</head>
<body>
<p class="test">测试1</p> <!-- 给p标签 设置了一个类名为 test -->
<p class="test">测试2</p> <!-- 给p标签 设置了一个类名为 test -->
<p class="test">测试3</p> <!-- 给p标签 设置了一个类名为 test -->
<p class="test">测试4</p> <!-- 给p标签 设置了一个类名为 test -->
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ID属性</title>
<style>
.test{ /* 类名为 test */
font-size:30px; /* 字号30像素 */
color:red; /* 颜色:红色 */
}
.test2{ /* 类名为 test2*/
font-size: 50px; /* 字号50像素 */
color: blue; /* 颜色 为蓝色 */
}
</style>
</head>
<body>
<p class="test">测试1</p> <!-- 给p标签 设置了一个类名为 test -->
<p class="test">测试2</p> <!-- 给p标签 设置了一个类名为 test -->
<p class="test2">测试3</p> <!-- 给p标签 设置了一个类名为 test2 -->
<p class="test2">测试4</p> <!-- 给p标签 设置了一个类名为 test2 -->
</body>
</html>
3-8 title和style
标准属性:几乎所有标签都可以有的属性-
style属性:
1.规定元素的行内样式
2.style设置的样式会覆盖其它方式设置的样式
3.可以设置多个属性值,用";(英文状态下的分号)"隔开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title和style属性</title>
</head>
<body>
<!-- <a href="https://www.baidu.com" title="当鼠标指向此链接的时候 链接的上方会提示这条信息">测试</a> -->
<a href="https://www.baidu.com" style="color: blue;font-weight: 600;">测试</a>\
</body>
</html>
3-9 自定义属性
自定义属性:几乎所有标签都可以有的属性
1.用于存储页面或应用程序的私有自定义数据
2.data-*属性包括两部分:
a."*"表示自定义的属性名,在data-之后至少有一个字符
b.属性值可以是任何字符串
3.在微信小程序中用的比较多
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义属性</title>
</head>
<body>
<a href="https://www.baidu.com" zdy="zidingyi">1</a> <!-- 自定义属性 -->
<a href="https://www.baidu.com" data-zdy="zidingyi">1</a>
</body>
</html>
3-10 文件下载
文件下载:
href属性:指定文档下载路径
download 属性:指定下载文件名称
不添加download属性时:
浏览器不能识别文件。可以直接下载。如果浏览器能识别文件,会直接显示
添加download属性时:不管浏览器是否可以识别文件,都可以下载
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件下载</title>
</head>
<body>
<a href="下载.7z" download="数据包">文件下载</a>
</body>
</html>
3-11锚链接和空链接1
当网页内容太长需要翻页的时候,则需要创建锚点链接
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚链接</title>
</head>
<body>
<a href="#one">第一章</a>
<a href="#two">第二章</a>
<a href="#three">第三章</a>
<p id="one"> 第一章片段盖闻天地之数,有十二万九千六百岁为一元
。将一元分为十二会,乃子、丑、寅、卯、辰、
巳(sì)、午、未、申、酉、戌、亥之十二支也
。每会该一万八百岁。且就一日而论:子时得阳气
,而丑则鸡鸣;寅不通光,而卯则日出;辰时食后,
而巳则挨排;日午天中,而未则西蹉;申时晡而日落酉
;戌黄昏而人定亥。譬于大数,若到戌会之终,则天地
黑暗,而两间人物俱无矣,故曰混沌。又五千四百岁,
:“冬至子之半,天心无改移。一阳初动处,万物未生时
。”到此,天始有根。再五千四百岁,正当子会,轻清
上腾,有日,有月,有星,有辰。日、月、星、辰,谓之
四象。故曰,天开于子。又经五千四百岁,子会将终,
近丑之会,而逐渐坚实。易曰:“大哉乾元!至哉坤元!
万物资生,乃顺承天。”至此,地始凝结。再五千四百岁,
正当丑会,重浊下凝,有水,有火,有山,有石,有土。
水、火、山、石、土谓之五形。故曰,地辟于丑。又经五千
四百岁,丑会终而寅会之初,发生万物。历曰:“天气下降
,地气上升;天地交合,群物皆生。”至此,天清地爽,阴
阳交合。再五千四百岁,正当寅会,生人,生兽,生禽,正
谓天地人,三才定位。故曰,人生于寅。
</p>
<p id="two">第二章【判断盖闻天地之数,有十二万九千六百岁为一元
。将一元分为十二会,乃子、丑、寅、卯、辰、
巳(sì)、午、未、申、酉、戌、亥之十二支也
。每会该一万八百岁。且就一日而论:子时得阳气
,而丑则鸡鸣;寅不通光,而卯则日出;辰时食后,
而巳则挨排;日午天中,而未则西蹉;申时晡而日落酉
;戌黄昏而人定亥。譬于大数,若到戌会之终,则天地
黑暗,而两间人物俱无矣,故曰混沌。又五千四百岁,
:“冬至子之半,天心无改移。一阳初动处,万物未生时
。”到此,天始有根。再五千四百岁,正当子会,轻清
上腾,有日,有月,有星,有辰。日、月、星、辰,谓之
四象。故曰,天开于子。又经五千四百岁,子会将终,
近丑之会,而逐渐坚实。易曰:“大哉乾元!至哉坤元!
万物资生,乃顺承天。”至此,地始凝结。再五千四百岁,
正当丑会,重浊下凝,有水,有火,有山,有石,有土。
水、火、山、石、土谓之五形。故曰,地辟于丑。又经五千
四百岁,丑会终而寅会之初,发生万物。历曰:“天气下降
,地气上升;天地交合,群物皆生。”至此,天清地爽,阴
阳交合。再五千四百岁,正当寅会,生人,生兽,生禽,正
谓天地人,三才定位。故曰,人生于寅。</p>
<p id="three"> 第三章盖闻天地之数,有十二万九千六百岁为一元
。将一元分为十二会,乃子、丑、寅、卯、辰、
巳(sì)、午、未、申、酉、戌、亥之十二支也
。每会该一万八百岁。且就一日而论:子时得阳气
,而丑则鸡鸣;寅不通光,而卯则日出;辰时食后,
而巳则挨排;日午天中,而未则西蹉;申时晡而日落酉
;戌黄昏而人定亥。譬于大数,若到戌会之终,则天地
黑暗,而两间人物俱无矣,故曰混沌。又五千四百岁,
:“冬至子之半,天心无改移。一阳初动处,万物未生时
。”到此,天始有根。再五千四百岁,正当子会,轻清
上腾,有日,有月,有星,有辰。日、月、星、辰,谓之
四象。故曰,天开于子。又经五千四百岁,子会将终,
近丑之会,而逐渐坚实。易曰:“大哉乾元!至哉坤元!
万物资生,乃顺承天。”至此,地始凝结。再五千四百岁,
正当丑会,重浊下凝,有水,有火,有山,有石,有土。
水、火、山、石、土谓之五形。故曰,地辟于丑。又经五千
四百岁,丑会终而寅会之初,发生万物。历曰:“天气下降
,地气上升;天地交合,群物皆生。”至此,天清地爽,阴
阳交合。再五千四百岁,正当寅会,生人,生兽,生禽,正
谓天地人,三才定位。故曰,人生于寅。</p>
</body>
</html>
3-12锚链接和空链接2
跳转到其他页面具体位的锚链接
1.目标页面具体位置要设置锚点
2.用a标签中的href属性指定目标页面的路径,指定位置的ID
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>此页面3-12</title>
</head>
<body>
<a href="3-11锚链接和空链接1.html/#one">第一章</a> <!-- 跳转到3-11页面的链接处 -->
<a href="3-11锚链接和空链接1.html/#two">第二章</a> <!-- 跳转到3-11页面的链接处 -->
<a href="3-11锚链接和空链接1.html/#three">第三章</a> <!-- 跳转到3-11页面的链接处 -->
</body>
</html>
<a href="#">返回到顶部</a> /*空链接返回页面的顶部*/
第四章
4-1 图片的引入
网页中引入图片:使用img标签,<img src="图片路径"/> -->
src属性:
1·用来指定图片文件所在的路径,必须要有
2.图片路径可以是相对路径,也可以是绝对路径 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="/第四章/img/1.jpg">
<!-- 也可以是直链 -->
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.44bf0568d8dffae8fa98530c270270d8?rik=A8iBVs2RyyanUw&riu=http://pic.baike.soso.com/ugc/baikepic2/39846/20170208215610-1119670616.jpg/0&ehk=m0yzRp+QFVGjNAKnOteASVMgLRNLwZzVE37dB3ub6U8=&risl=&pid=ImgRaw&r=0">
</body>
</html>
4-2 图片的引入
alt属性:
1图片无法正常显示时替换文本,可以使用中文,也可以使用英文
2 路径不对,网速过慢,浏览器版本过低,图片格式不对…
<img src="https://img.zcool.cn/community/01e7b859a141a3a8012028a9bf289f.jpg@2o.jpg" alt="这是一个正确的链接我不会显示">
<img src="k=A8iwZzVE37dB3ub6U8%r=0" alt="这是一个错误的链接我会显示">
width属性和height属性:
1.width属性:设置图片宽度, height属性:设置图片高度
2·不设置,图片会按原始尺寸显示
3.如果只设置1个属性,另一个会根据已设置的属性等比例缩放
4·默认单位为像素,也可以使用百分比
<img src="https://img.zcool.cn/community/01e7b859a141a3a8012028a9bf289f.jpg@2o.jpg"
alt="这是一个正确的链接我不会显示" width="400px" height="200">
<img src="https://img.zcool.cn/community/01e7b859a141a3a8012028a9bf289f.jpg@2o.jpg"
alt="这是一个正确的链接我不会显示" width="30%" >
<!--这是参照父元素的百分比-->