HTML
一:基础认知
认识网页
1:什么是网页
文字,图片,音频,视频和超链接
2:网页后面的本质是什么
前端代码
3:代码通过什么转化为界面
浏览器的解析和渲染
五大浏览器
1:浏览器
是网页显示运行的平台
2:常见浏览器(五大)
IE,火狐,谷歌,safar,欧朋浏览器
谷歌浏览器用户群体最为广泛
3:渲染引擎(内核)
浏览器中专门对代码进行解析渲染的部分
注意点
渲染引擎不同,解析相同代码的速度,性能和效果是不同的
谷歌浏览器效果好,推荐使用。
web标准
让不同的浏览器按照相同的标准显示效果,让展示的效果统一
web标准的三个构成
web标准要求页面实现:结构,表现,行为三层分离
结构:HTML(决定了身体)
表现 :CSS(决定了样式美观)
行为:JavaScript(决定了交互的动态效果)
HTML 初体验
HTML的概念
HTML:超文本标记语言
专门用户网页开发的语言,主要通过HTML标签对网页的文本,图片,音频视频等进行描述
案例:文字变粗
<strong>我要变粗</strong>
HTML页面的固定结构
网页也和文章一样有固定的结构,例如整体,头部,标题,主体
网页的固定结构是通过特定的HTML标签进行描述的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
VS Code基本认识
VS Code快捷标签
1:快速生成标签:英文+tab
2:快速保存:Ctrl+s
3:打开网页:Alt+b
安装了open in browser插件
4:自动生成骨架: !+tab
<!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>
5:注释:Ctrl+/
语法规范
结构说明
1:标签由<,>,/英文单词和字母组成,并且把标签<>包裹起来的英文单词或者字母叫做标签名
2:常见标签二部分组成,我们称之为:双标签,前部分为开始标签,后部分为结束标签,二部分之间包裹内容
3:少数标签由一部分组成,称之为单标签,自成一体 ,无法包裹内容
例如:hr,hb标签
标签属性
1:标签的属性写在开始标签内部
2:标签上同时存在多个属性
3:属性之间以空格隔开
4:标签名与属性之间必须以空格隔开
5:属性之间没有顺序之分
HTML标签间的关系
父子关系(嵌套关系)
<head>
<title></title>
</head>
<body>
<p>
</p>
</body>
兄弟关系(并列关系)
<head>
</head>
<body>
</body>
二:HTML标签学习
一:排版标签
1:标题标签h标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
普通文字
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
</body>
</html>
快捷键;ctrl+d,重复按即选中相同内容,可批量进行修改
特点:文字加粗,字体依次递减,独占一行
注意:h1标签对于网页尤为重要,开发有特定的使用场景,如新闻的标题,网页的logo
2:段落标签p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=h1, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>前端开发</h1>
<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。</p>
<p>前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。</p>
<p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5,Node.js的广泛应用,各类UI框架,JS类库层出不穷,开发难度也在逐步提升。 [1]</p>
</body>
</html>
特点:段落间存在间隙,独占一行
3:换行标签br标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=h1, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>前端开发</h1>
<br>
<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。</p>
<p>前端开发从网页制作演变而来,名称上有很明显的时代特征。<br>在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。</p>
<p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br>HTML5,Node.js的广泛应用,各类UI框架,JS类库层出不穷,开发难度也在逐步提升。 [1]</p>
</body>
</html>
特点:单标签,让文字强制转换。
4:水平线标签hr标签
特点:单标签,在页面上显示一条水平线
2:文本格式化标签
场景:让文字加粗,下划线,倾斜,删除等下效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<hr>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
</body>
</html>
语义:突出重要性的强调语境
推荐使用第二组
因为strong,ins,em,del,表示的强调语义更加强烈!
3:图片标签
特点:单标签,展现的效果需要对标签的属性进行设置
<img src="" alt="" title="">
src:目标图片的路径(当网页和目标文件在同一个文件夹中,直接写名字加后缀名)
alt:替换文本,当图片加载失败后展现的文本信息
title:提示文本,当鼠标悬停在图片中,会显示的信息、
注意点:title属性不但可以用于图片标签,还可以用于其他标签,例如标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美女子</title>
</head>
<body>
<img src="../img01.jpg" alt="和服美女" title="好好看的女生哇">
<h1 title="这是一个h1标签">标题1</h1>
</body>
</html>
图片标签中的width和height属性
属性值:宽度和高度
注意点:如果只设置了width和height中的一个,图片会自动等比例缩放
实际开发中,可以设置一个,避免设置不当造成图片变形、
4:路径介绍
绝对路径:
目录下的绝对位置,可直接达到目标位置,通常以盘符开始的路径,也有以网址开始的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="E:\Java\File\QQLogin\tankLogin.jpg" alt="坦克大战">
<img src="http://stu.ityxb.com/img/avatar.c5dbec73.png" alt="">
</body>
</html>
相对路径
从当前文件开始出发找到目标文件的过程
相对路径的分类
同级目录:当前文件和目标文件在同一个目录下,直接写目标文件的名字即可,或者./+图片名字
下级目录:目标文件夹/目标文件名或者./目标文件夹/目标文件名
上级目录:…/(回到上级目录)目标文件夹/目标文件名
5:音频标签
场景;在页面中插入音频
<audio src="" controls autoplay></audio>
src:音频的路径
controls:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放
注意点:音频标签只支持三种格式:MP3,Wav,Ogg
6:视频标签
场景:在页面中插入视频
<video src="../resources/video/怦然心动.mp4" contrals></video>
src:视频的路径
controls:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放
muted:静音
建议使用MP4文件格式
7:链接标签
场景:点击之后,从一个页面跳转到另外一个页面
称呼:a标签,超链接,锚链接
<a href="https://www.baidu.com/">点击之后进入百度网页</a>
<br>
<a href="14音频标签.html">点击进入音频标签</a>
属性名:herf
属性值:点击之后跳转的网页,外部链接和内部链接
显示特点:
-
默认的文字下划线
-
a标签从为点击过,默认文字颜色为蓝色
-
a标签点击过后,文字颜色为紫色(清空浏览器记录恢复蓝色)
target属性
属性值:目标网页的打开格式
取值:
_self:默认值,覆盖原网页
_blank:在新窗口跳转
空链接
<a href="#">空链接</a>
功能
-
点击之后回到顶部
-
开发中不确定链接最后跳转位置,用空链接占了这个位置
案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>今日热词搜索</h1>
<hr>
<h2>1、好听的音乐</h2>
<br>
<p>好听的音乐各有各的精彩,而这首欧美流行歌曲,以欢快的内容,动感的节奏 <br>深得人心,接下来就让我们一起来听一听吧</p>
<audio src="../resources/audio/music1.mp3" controls autoplay loop>music</audio>
<br>
<h2>2、好看的视频</h2>
<p>好看的视频也可以让人心情愉悦哦,而下面这个视频就是以青春,校园,美女为元素,上演了一部精彩的mv <br>点击链接即可欣赏哦</p>
<video src="../resources/video/怦然心动.mp4" controls autoplay >怦然心动</video>
</body>
</html>
二:列表标签
无序列表
场景:在网页中表示一组无顺序之分的列表,如:新闻列表
显示特点:列表的每一项前默认显示圆点标识
标签组成:
-
ul:表示无序列表的整体,用于包裹li标签
-
li:表示无序列表的每一项,用于包含每一行的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>水果列表</h1> <ul> <li>榴莲</li> <li>香蕉</li> <li>橘子</li> <li>苹果</li> </ul> </body> </html>
注意点:
-
ul标签中只允许包含li标签
-
li标签可以包含任意内容
<li><p>我是一个p标签</p></li>
有序列表
场景:在网页中表示一组有顺序之分的列表,例如排行榜
标签组成
- ol表示有序列表的整体,用于包裹li标签
- li表示有序列表的每一项,用于包含每一行的内容
显示特点
列表的每一项前默认显示序号标识
注意点
同无序标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>成绩排行表</h1>
<ol>
<li>小姐姐:100分</li>
<li>小帅哥:80分</li>
<li>小可爱:60分</li>
</ol>
</body>
</html>
自定义列表
场景:在网页的底部导航中通常会使用自定义列表实现
标签组成
dl:表示自定义列表的整体,用于包裹dt/dd标签
dt:表示自定义列表的主题
dd:表示自定义列表的针对的每一项内容
显示特点
dd会默认显示缩进效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>帮组中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
</html>
注意点
dl标签中只允许显示缩进效果
dt/dd标签可以包含任意内容
总结
无序列表最为常用,有序列表偶尔用,自定义列表底部导航用
三:表格标签
表格的基本标签
场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
基本标签
table:表格整体,用于包含多个tr
tr:表格每行,用于包裹td
td:表格单元格,用于包含内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>佳成</td>
</tr>
</table>
</body>
</html>
表格的嵌套规则
- table>tr>td
表格的相关属性
场景:设置表格相关展示效果
常见相关属性
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
<table border="1" width="300" height="200">
注意点:实际开发时针对于样式效果推荐使用CSS设置
表格标题和表头单元格标签
场景:在表格中表示整体大标题和一列小标题
caption:表格大标题,表示表格整体大标题,默认在表格整体顶部局中位置显示
th:表头单元格,表示一列小标题,通常用于表格第一行,默认内部文字加粗并局中显示
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
注意点:
- caption标签书写在table标签内部
- th标签书写在tr标签内部(用于替换td标签)
表格的结构标签
场景:让表格的内容结构分组,突出表格的不同部分(头部,主体,底部)使语义更加清晰
结构标签:
thead:表格头部
tbody:表格主体
tfoot:表格底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300" height="200" >
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>佳成</td>
</tr>
</tfoot>
</table>
</body>
</html>
注意点:
- 表格结构标签用于包裹tr标签
- 表格的结果标签课省略
合并单元格
场景:将水平或者垂直多个单元格
- 合并步骤:明确合并那几个单元格
- 通过左上原则,确定保留谁和删除谁
- 上下合并一只保留最上的,删除其他
- 左右合并一只保留最左的,删除其他
属性名:
rowspan:合并单元格个数,跨行合并,将多行单元格垂直合并
colspan:跨列合并,将多列单元格水平合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300" height="200" >
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2">100</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<!-- <td>100分</td>-->
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
<!-- <td>佳成</td>-->
</tr>
</tfoot>
</table>
</body>
</html>
注意点:只有同一个标签中的单元格才能合并,不能跨结构标签合并(thead,tbody,tfoot)
总结
- 表格基本标签:table>tr>td
- 表格标题和表头单元格标签:table>caption/tr>th
3:表格结构标签:table>thead>tr>td
4:标签相关属性:border,width,height
5:合并单元格:rowspan,colspan
四:表单标签
input系列标签基本介绍
场景:在网页中显示收集用户信息的表单效果,如:登录页,注册页
标签名:input
- input标签可以通过type属性值的不同,展现不同效果
type属性值:
text:文本框,用于输入单行文本
password:密码框,用于输入密码
radio:单选框,用于多选一
checkbox:多选框,用于多选一
file:文件选择,用于上传文件
submit:提交按钮,用于提交
reset:重置按钮,用于重置
button:普通按钮,默认无功能,之后配合js添加功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
昵称:<input type="text" name="昵称" ><br><br>
密码:<input type="password" name="密码"><br><br>
性别:<input type="radio">男
<input type="radio">女 <br><br>
爱好:<input type="checkbox">敲代码
<input type="checkbox">打游戏
<input type="checkbox">睡懒觉<br><br>
<input type="file"><br><br>
<input type="submit">
<input type="reset">
</body>
</html>
1:文本框text
场景:在网页中显示输入单行文本的表单控件
常用属性
placeholder:占位符,提示用户输入内容的文本
昵称:<input type="text" name="昵称" placeholder="请输入您的昵称">
value属性:用户输入的内容,提交之后会发送给后端服务器
name属性:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义
后端接受到数据的格式是:name属性值=value的属性值
2:密码框password
常用属性:placeholder
注意点:type属性值不能拼错或者多加空格,否则相当于设置了默认值状态:text文本框
3:单选框radio
常用属性:
name:分组,有相同name属性值的单选框为一组,一组中同时只能有一个被选中。
check:默认选中
性别:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女 <br><br>
注意点
- name属性对于单选框有分组功能
- 有相同name属性的单选框为一组,一组中只能同时有一个被选中
4:复选框checkbox
常用属性:checked,默认选中
爱好:<input type="checkbox" checked>敲代码
<input type="checkbox">打游戏
<input type="checkbox">睡懒觉<br><br>
5:文件选择file
常见属性:
multiple:多文件选择
<input type="file" multiple><br><br>
6:按钮
submit:提交按钮,点击之后提交数据给后端服务器
reset:重置按钮,点击之后恢复表单默认值
button:普通按钮,默认无功能,配合js添加功能
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
注意点:
-
如果需要实现以上按钮功能,需要配合form标签使用
-
form使用方法,用form标签把单标签一起包裹起来即可
总结
-
占位符:placeholder
-
如果需要实现单选效果,需要设置相同的name属性值
-
单选框和多选框的默认选中:checked
-
7:按钮标签button
场景:在网页中显示用户点击的按钮
标签名:button
type属性值:
submit:提交
reset:重置
button:按钮,配合js使用
注意点:
- button标签是双标签,更便于包裹其他内容,如文字,图片等。
8:下拉菜单select
场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:
select标签:下拉菜单的整体
option标签:下拉菜单的每一项
常见属性:
selected:下拉菜单的默认选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
所在城市:<select>
<option >上海</option>
<option >广州</option>
<option >深圳</option>
<option selected>北京</option>
</select>
</body>
</html>
9:文本域标签textarea
场景:在网页中提供可输入多行文本的表单控件
标签名:textarea
常见属性:
cols:规定文本域内的可见宽度
rows:规定文本域内可见行数
注意点:
- 右下角可以拖拽改变大小
- 实际开发时针对样式效果推荐使用CSS设置
10:label标签
场景:常见于绑定内容与表单标签的关系
标签名:label
使用方法:
一:
1:使用label标签把内容如文本包裹起来
2:在表单标签上添加id属性
3:在label标签的for属性中设置对应的id属性
爱好:
<input type="checkbox" id="one"> <label for="one">敲代码</label>
<input type="checkbox" id="tow"> <label for="tow">熬夜</label>
二:
1:直接用label标签把内容如文本和表单标签一起包裹起来
2:需要label标签的for属性删除即可
爱好:
<label>
<input type="checkbox">睡觉
</label>
<label >
<input type="checkbox">干饭
</label>
总结
2:button标签
3:select标签
4:textarea文本域标签
5:label标签
五:语义化标签
1:没有语义的布局标签div标签和span标签
场景:实际开发网页是会大量频繁的使用div和span这二个没有语义的布局标签
div标签:一行只会显示一个
span标签:一行可以显示多个
<div>我是一个div标签</div>
<div>我是一个div标签</div>
<div>我是一个div标签</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
2:没有语义的布局标签
场景html5
标签:
header:网页头部
nav:网页导航
footer:网页底部
aside:网页侧边栏
section:网页区块
article:网页文章
注意点:以上标签显示特点和div一致,但是比div多了不同的语义
六:字符实体
1:HTML的空格合并现象
场景:如果在html代码中同时并列出现多个空格,换行,缩进,最终浏览器中只会解析一个空格
<p>你别靠我这么近
好的呢</p>
2:常见字符实体
场景:在网页中展示特殊符号效果,需要使用字符实体替代
结构:&英文;
常见字符实体:
空格:  ;
小于号:< ;
大于号:> ;
特殊场景
p标签长这个样子:<p></p>
综合案例
1:优秀学生信息表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="400" height="400">
<!-- 局中标题-->
<caption><h3>优秀学生信息表格</h3></caption>
<!-- 头部-->
<thead>
<tr>
<th>年纪</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<!-- 身体-->
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>10</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>12</td>
<td>三年三班</td>
</tr>
</tbody>
<!-- 尾部-->
<tfoot>
<tr>
<td>评语</td>
<td colspan="4">你们都很优秀</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果:
2:会员注册表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>青春不常在,抓紧谈恋爱</h1>
<form action="">
昵称:<input type="text" placeholder="请输入昵称"><br><br>
性别:<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<br><br>
生日:<input type="date"> <br><br>
城市:<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">天津</option>
<option value="">重庆</option>
</select><br><br>
婚姻状况:<input type="radio" checked>未婚
<input type="radio" name="marry">已婚
<input type="radio" name="marry">保密
<br><br>
兴趣爱好:<input type="checkbox" checked>干饭
<input type="checkbox" checked>健身
<input type="checkbox" >读书
<br><br>
个人介绍: <br><br>
<textarea name="" id="" cols="50" rows="12"></textarea>
<h2>我承诺</h2>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚的寻找另一半</li>
</ul>
<br>
<input type="checkbox">我同意所有条款
<br><br>
<input type="submit" value="免费祖册">
<input type="reset">
</form>
</body>
</html>
效果: