目录
11、HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的?
11.1、如果需要实现点击之后,从一个页面跳转到另一个页面, 需要使用什么标签?
11.3、通过什么属性可以设置a标签的跳转方式?取值有哪些?
13.1、完成一个简单的表格, 需要由几个标签组成? 分别表示什么?
13.5、表示表格整体大标题, 使用什么标签完成? 书写在什么位置?
13.6、在表格第一行设置一列的小标题, 使用什么标签完成? 书写在什么位置?
一、基础认知
1、网页由哪些部分组成?
答:文字、图片、音频、视频、超链接
2、网页背后本质是什么?
答:前端程序员写的代码
3、前端的代码是通过什么软件转换成用户眼中的页面的?
答:浏览器
4、常见的五大浏览器:
答:IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、 Safari浏览器、欧朋浏览器(Opera)
5、什么是浏览器?
答:是网页显示、运行的平台, 是前端开发必备利器
6、相同的网页在不同浏览器中显示效果会完全一致吗?
答:因为不同浏览器渲染引擎不同, 解析的效果会存在差异
7、前端工程师日常推荐使用哪一个浏览器?
答:谷歌浏览器(Chrome)
8、什么是Wed标准?
答:让不同的浏览器按照相同的标准显示结果, 让展示的效果统一!
9、Web标准的构成有哪些?分别通过什么语言表示?
- 结构: HTML → 页面元素
- 表现: CSS → 页面样式
- 行为: JvaaScript → 页面交互的动态效果
10、HTML的中文译名叫做?
答:超文本标记语言
11、HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的?
答:HTML标签
12、HTML骨架结构由哪些标签组成
- html标签:网页的整体
- head标签:网页的头部
- body标签:网页的身体
- title标签:网页的标题
13、注释的快捷键是?
答:Ctrl+/
14、浏览器会执行注释吗?
答:不会,浏览器执行代码时会忽略所有的注释
15、常见标签由几部分组成?称之为?
答:两部分,双标签
16、少数标签由几部分组成?称之为?
答:一部分,单标签
17、双标签的属性需要写在开始标签还是结束标签中?
答:开始标签
18、标签上可以同时存在几个属性?
答: 多个
19、标签名与属性之间,属性与属性之间以什么隔开?
答:空格
20、标签之间的关系可分为哪几种?
答:父子关系(嵌套关系)
• 兄弟关系(并列关系)
二、HTML标签
1、HTML模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2、标题标签
2.1、标题标签一共有几个?分别表示什么含义?
- h1标签:一级标题
- h2标签:二级标题
- h3标签:三级标题
- h4标签:四级标题
- h5标签:五级标题
- h6标签:六级标题
2.2、标题标签有哪些特点?
- 文字都有加粗
- 文字都有变大,但是从h1→ h6文字逐渐减小
- 独占一行
2.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lambda-小张</title>
</head>
<body>
<h1>一级标题文字</h1>
<h2>二级标题文字</h2>
<h3>三级标题文字</h3>
<h4>四级标题文字</h4>
<h5>五级标题文字</h5>
<h6>六级标题文字</h6>
</body>
</html>
2.4、运行结果:
3、段落标签
3.1、段落标签的标签名是?
答:p标签
3.2、段落标签有哪些特点?
- 段落之间存在间隙
- 独占一行
3.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 align="center">这是文章标题</h1>
<!-- 标题 -->
<hr>
<!-- 水平线 -->
<p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。<br>其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》</p>
<!-- 段落 -->
<p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家带来不一样的风格。视频示例: 有一种悲伤(翻唱)-《A Kind of Sorrow》</p>
</body>
</html>
3.4运行结果:
4、换行标签
4.1、换行标签的标签名是?
答:br标签
4.2、换行标签的特点?
- 单标签
- 让文字强制换行
4.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 align="center">这是文章标题</h1>
<!-- 标题 -->
<hr>
<!-- 水平线 -->
<p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。<br>其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: 阿卡贝拉《千与千寻》</p>
<!-- 段落 -->
<p>“翻唱”是指将已经发表并由他人演<br>
<!-- 换行 -->
唱的歌曲根据自己的风格重新演唱,包括重<br>
新填词,编曲。现在已有不少明星,都在翻唱他人的歌,<br> 不断在翻唱中突破自己,给大家带来不一样的风格。视频示例: 有一种悲伤(翻唱)-《A Kind of Sorrow》</p>
</body>
</html>
4.4、运行结果:
5、水平线标签
5.1、水平标签的标签名是?
答:hr标签
5.2代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 align="center">这是文章标题</h1>
<!-- 标题 -->
<hr>
<!-- 水平线 -->
<p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。
</body>
</html>
5.3、运行结果:
6、文本格式化标签
6.1、文字加粗用什么标签?
答:strong标签和b标签
6.2、文字下划线用什么标签?
答:ins标签和u标签
6.3、文字倾斜用的什么标签?
答:em标签和i标签
6.4、文字删除线用什么标签?
答:del和s标签
6.5、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<del>删除线</del>
<s>删除线</s>
<i>斜体</i>
<em>斜体</em>
</body>
</html>
6.6运行结果:
7、图片标签
7.1、在页面中展示一张图片,需要使用什么标签?
答:img标签
7.2、图片的常见属性有哪些?
- src 路径
- alt 替代文本
- title 提示文本
- width 图片的宽度
- height 图片的高度
7.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- alt的文本提示是图片显示不出来才会出现的 -->
<img src="cat.gif" alt="我是一只猫" title="我是一只小猫" width="500" height="500"><br>
<!-- 没有设置宽度高度时,等比例大小 -->
<img src="./dog.gif">
</body>
</html>
7.4、运行结果:
8、路径
8.1、绝对路径?
答:指目录下的绝对位置,可直接到达目标位置, 通常从盘符开始的路径
8.2、相对路径有哪三种情况:
- 同级目录:直接写:目标文件名字!
- 下级目录:直接写:文件夹名/目标文件名字!
- 上级目录:直接下: ../目标文件名字!
8.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 上级目录 -->
<img src="../2/dog.gif" alt="">
<!-- 下级目录 -->
<img src="./11/cat.gif" alt="">
<!-- 同级目录 -->
<img src="1.png" alt="">
</body>
</html>
9、音频标签
9.1、要在网页中插入音频使用什么标签?
答:audio标签
9.2、音频标签有哪些常见属性?
- src:音频路径
- controls:音频控件
- autoplay:自动播放
- loop:循环播放
9.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="./music.mp3" controls autoplay loop></audio>
</body>
</html>
9.4、运行结果:
10、视频标签
10.1、要在网页中插入视频使用什么标签?
答:video标签
10.2、视频标签有哪些常见属性?
src:视频路径
controls:视频控件
autoplay:自动播放→ 谷歌浏览器中可以配合muted属性实现自动静音播放
loop:循环播放
10.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="./video.mp4" controls autoplay loop></video><br>
</body>
</html>
10.4、运行结果:
11、链接标签
11.1、如果需要实现点击之后,从一个页面跳转到另一个页面, 需要使用什么标签?
答:a标签
11.2、通过什么属性可以设置a标签的到底跳转去哪里?
答:href标签
11.3、通过什么属性可以设置a标签的跳转方式?取值有哪些?
- target属性
- 取值1: _self:在当前窗口中跳转
- 取值2: _blank:在新窗口中跳转
11.4、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 外链接 -->
<a href="https://www.baidu.com/"target="_self">跳转到百度</a> <br>
<a href="https://www.baidu.com/"target="_blank">跳转到百度一下</a> <br>
<!-- 内链接 -->
<a href="./file2.html">点我跳转</a><br>
<a href="#">空连接</a>
</body>
</html>
11.5、运行结果:
12、列表标签
12.1、有哪些列表标签?
答:无序列表、有序列表、自定义列表
12.2、无序列表由几个标签组成? 分别表示什么?
答:ul标签: 表示无序列表的整体
• li标签: 表示无序列表的每一项
12.3、无序列表标签的嵌套规范是什么?
答:ul标签中只允许嵌套li标签
• li标签中可以嵌套任意内容
12.4、有序列表由几个标签组成? 分别表示什么?
答:ol标签: 表示无序列表的整体
• li标签: 表示无序列表的每一项
12.5、有序列表标签的嵌套规范是什么?
答:ol标签: 表示无序列表的整体
• li标签: 表示无序列表的每一项
12.6、自定义列表由几个标签组成? 分别表示什么?
答:dl标签: 表示自定义列表的整体
• dt标签: 表示自定义列表的主题
• dd标签: 表示对于主题的每一项内容
12.7、自定义列表标签的嵌套规范是什么?
答:dl标签中只允许嵌套dt/dd标签
• dt/dd标签中可以嵌套任意内容
12.8、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>水果列表</h1>
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>火龙果</li>
<li>西瓜</li>
</ul>
<hr>
<h1>成绩排行榜</h1>
<!-- 有序列表 -->
<!-- 从1开始 -->
<ol>
<li>小姐姐:100分</li>
<li>小哥哥:80分</li>
<li>小可爱:60分</li>
</ol><hr>
<!-- 有序列表倒序从3开始 -->
<ol start="3" reversed>
<li>小姐姐:100分</li>
<li>小哥哥:80分</li>
<li>小可爱:60分</li>
</ol><hr>
<!-- 自定义列表 -->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单列表</dd>
</dl>
</body>
</html>
12.9、运行结果:
13、表格标签
13.1、完成一个简单的表格, 需要由几个标签组成? 分别表示什么?
- table标签: 表格整体
- tr标签: 表格每行
- td标签: 对于主题的每一项内容
13.2、表格基本标签的嵌套规范是什么?
答: table > tr > td
13.3、给表格添加边框, 可以使用什么属性完成?
答:border属性
13.4、设置表格整体的宽高, 可以使用什么属性完成?
- width属性: 表格整体的宽度
- height属性: 表格整体的高度
13.5、表示表格整体大标题, 使用什么标签完成? 书写在什么位置?
- 表格整体大标题: caption标签
- 书写在table标签内部
13.6、在表格第一行设置一列的小标题, 使用什么标签完成? 书写在什么位置?
- 表头单元格: th标签
- 书写在tr标签内部 (用于替换td标签)
13.7、表格的结构标签分别有哪些? 表示什么含义?
- thead: 表格头部
- tbody: 表格主体
- tfoot: 表格底部
13.8、表格结构标签书写在什么位置?
- 表格结构标签写在table标签内部
- 表格标签内部用于包裹tr标签
13.9、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- border边框宽度1 -->
<table border="1" width="600" height="400">
<!-- caption表格大标题 -->
<caption><h3>学生成绩表</h3></caption>
<thead>
<tr>
<!-- th表头单元格 -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<!-- 跨2行合并 -->
<td rowspan="2">100分</td>
<td>小哥哥真好看</td>
</tr>
<tr>
<td>小姐姐</td>
<!-- <td>100分</td> -->
<td>小姐姐真好看</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<!-- 跨2列合并 -->
<td colspan="2">一言难尽</td>
<!-- <td>一言难尽</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
13.10、运行结果:
14、input标签
14.1、input系列标签基本介绍
注意点:
- 占位符: placeholder
- 如果需要实现单选效果, 需要设置相同的name属性值
- 单选框和多选框的默认选中: checked
14.2、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
姓名:
<input type="text" placeholder="请输入姓名"><br>
密码:
<input type="posswrod" placeholder="请输入密码"><br>
<!-- 单选题 -->
性别:
<input type="radio" name="1">男
<!-- checked默认 -->
<input type="radio" name="2" checked>女<br>
<!-- 多选题 -->
标签:
<input type="checkbox" checked>可爱
<input type="checkbox">帅气
<input type="checkbox">漂亮<br>
文件:
<!-- multiple多个文件 -->
<input type="file" multiple><br>
<!-- 提交 -->
<input type="submit"><br>
<!-- 重置 -->
<input type="reset"><br>
<!-- 普通按钮 -->
<input type="button">
</body>
</html>
14.3:运行结果:
15、button标签
15.1、button按钮标签
15.2、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button">普通按钮</button> <br>
<button type="submit">提交按钮</button> <br>
<button type="reset">重置按钮</button> <br>
</body>
</html>
15.3、运行结果:
16、select标签
16.1、标签组成:
• select标签: 下拉菜单的整体
• option标签: 下拉菜单的每一项
16.2、常见属性:
selected: 下拉菜单的默认选中
16.3、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
所在地区:
<select>
<option>请选择省</option>
<option>广西省</option>
<!-- selected默认 -->
<option selected>广东省</option>
<option>江西省</option>
<option>云南省</option>
</select>
<select>
<option>请选择市</option>
<option>广州市</option>
<option>深圳市</option>
<option>汕尾市</option>
<option>清远市</option>
</select>
<select>
<option>请选择区</option>
<option>罗湖区</option>
<option>龙华区</option>
<option>南山区</option>
</select>
</body>
</html>
16.4、运行结果:
17、textarea标签
17.1、常见属性:
• cols: 规定了文本域内可见宽度
• rows: 规定了文本域内可见行数
17.2、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea cols="30" rows="10">请输入文本</textarea>
</body>
</html>
17.3、运行代码:
18、label标签
18.1、label标签就是他所关联的表单控件的延伸
即鼠标点击了他,就会出现和点击他所关联的表单控件一样的效果。而这前提是label的for属性的属性值与想要关联的表单控件的id一样。
18.2、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
性别:
<label><img src="2.png" ><input type="radio" name="123">男 </label>
<label><img src="1.png" ><input type="radio" name="123">女 </label>
</body>
</html>
18.3、运行结果:
点头像时,圆框也会点中,这就是lable标签的作用。
19、语义化标签
19.1、常见有语义的布局标签有哪些?
- header: 网页头部
- nav: 网页导航
- footer: 网页底部
- aside: 网页侧边栏
- section: 网页区块
- article: 网页文章
20、字符实体
20.1、常见字符实体:
20.2、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<
>
&
"
'
¢
£
¥
€
§
©
</body>
</html>
20.3、运行结果:
蓝色的空格部分