什么是WEB前端？
简单来说就是网页，只是这个网页它是由多种技术参与制作的，用来向用户展示的页面。
HTML(hyperText mark-up language):它决定了网页的结构。
CSS：网页的装饰器。
JavaScript：JavaScrip最初是因为校验而产生的。（数据交互、网页特效）
第一章 HTML·
1.1 HTML的简介
第一款浏览器MOSIAC
第一款商用的浏览器是netscape（网景）的navigator（导航者）
W3C制定了web的相关规范
1.2运行环境和开发环境
开发环境只需要一个记事本即可
运行环境只需要有浏览器即可
1.3 标签的语法结构
<标签 属性=“属性值”> 内容部分或称区域 </标签结束>
1.标签大多成对出现又开始<>和结束</>。（自结束标签除外）
2.标签内可以有属性，有属性必有值。（布尔型属性除外如muted）
3.开始和结束标签之间包含的内容被称为区域。
4.标签不区分大小写。
1.4页面的分类
静态页面：是指不修改网页源码的前提下，无论何时何地去访问都会得到同样的结果。
动态页面：网站会根据信息做出的实时反馈。例如注册，论坛等等。
第二章 常用标签
2.1 head中常用标签
meta标签：它的charset属性用来设置页面的编码方式（常见编码有GBK,UTF-8,BIG,bg2312）；它的name属性可以有keyword，description，这两个属性可以影响到网页的排名。
title标签：他用来定义页面的主体，影响选项卡显示的内容。
2.2body中的常用标签
<!DOCTYPE html>
<htmllang="zh">
<head>
<!-- meta是一个自结束标签 -->
<!-- charset是meta的一个属性 他决定了网页的编码 utf-8 gbk gb2312 asc-->
<metacharset="UTF-8"/>
<metaname="keyword"content="学习；交友；游戏"/>
<metaname="description"content="这是同学互相学习交友的前台程序">
<title>只因你太美</title>
<styletype="text/css">
span {
/* 将标签设置为行内标签的大小默认是内容部分的宽高，无法通过其他属性设置 */
/* display:inline */
/* 将标签设置为块标签，它独占一行内容 */
/* display:block; */
/* 将标签设置为行内块标签，默认还是内容部分的宽高，但是可以同时width，height属性设置标签的大小 */
/* display:inline-block */
}
</style>
</head>
<BoDy>
<!-- 标签的内容也被称为区域 -->
<header>
<b>这一段又黑又粗的文字</b>
<strong>这一段又黑又粗的文字,too</strong>
<i>这是一段斜体文字</i>
<em>这是一段斜体文字.too</em>
<u>这是下划线标签</u>
<del>中划线标签</del>
</header>
<section>
<!-- div默认是块标签 -->
<divstyle="border:1px solid black">这是div块标签
<p>1111111111111</p>
<div>这一个子div</div>
</div>
<!-- span默认是行内标签 -->
<spanstyle="border:1px solid green">这是span行内标签</span>
<!-- p标签是块标签 -->
<pstyle="border:1px solid red">这是段落标签</p>
<!-- 格式化标签 -->
<pre>
锄禾日当午，汗滴禾下土
谁知盘中餐，粒粒皆辛苦
</pre>
O<sub>2</sub>
9<sup>2</sup>=81
</section>
<hr>
<!-- webstorm -->
<h1style="display:inline">这是h1</h1>
<h2>这是 h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
</body>
</html>
2.3特殊符号
2.4语义化标签
标签名称 | 作用 |
header | 定义页面的顶部（页眉）内容 |
article | 主要是用来表示文章内容的 |
section | 于对网站或者应用程序页面上的内容进行分块 |
nav | 用作页面导航的链接组 |
aside | 当前页面或文章的附属信息部分 |
footer | 上层父级内容区块或是一个根区块的脚注 |
hgroup | hgroup元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组 |
address | address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮件、真实地址、电话号码等 |
figure | 网页上的一块独立元，素在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题 |
figcaption | figure元素块中的标题 |
details | details元素主要用来列表一些关键的的元素，在它中，我们使用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息”。 |
summary | 作为details元素的标题 |
mark | 标注或者高亮一些我们需要的关键字词 |
progress | 表示当前的完成进度情况 |
meter | meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值 |
cite | 表示作品或文章中的标题 |
small | HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等 |
canvas | 画布标签，用来在页面上画图案 |
2.5 多媒体标签（图片、音视频）
图片标签<img>
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<!-- 图片的格式都有哪些
jpg：现在多为无损格式，并且它是不支持透明通道。1760万色
png：无损格式，并且它支持透明通道。
bmp：无损，支持透明，体积大，
gif：动图，只支持256色
-->
<!-- src填写资源路径 它是单词source的缩写 -->
<!-- 第一种填写路径的方式：使用绝对路径 -->
<!-- <img src="/Users/musicbear/欧朋/20230306广州前端/jige.webp" alt=""> -->
<!-- 第二种填写路径的方式：相对路径 -->
<!-- alt属性的作用是当图片无法正常显示的时候，会显示alt中错误提示 -->
<!-- title本身是这张图片的名称，悬停鼠标于图像之上，稍作停留可以看到title显示，如果没有alt属性，name描述文字会显示title内容 -->
<!-- width是大多数标签都具有的属性，他用来控制标签的宽度，可以是具体的数值，也可以比例值 控制高度的属性叫做height跟width类似 -->
<imgsrc="./jige.webp"alt="该图片无法正常显示"title="鸡你太美"
width="100%"height="">
<!-- 第三种填写路径的方式：网络路径 -->
<!-- <img src="https://i0.hdslb.com/bfs/archive/ec0c61ce04123a49f5f740566a48bd0c74dbf2ec.jpg" alt=""> -->
</body>
</html>
音视频标签
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<!-- video的第一个属性controls 显示控制界面-->
<!-- autoplay自动播放 但是必须在静音muted开启的情况下再能自动播放 -->
<!-- loop是用来控制循环播放的属性 -->
<videosrc="day1.mp4"controls="controls"autoplay="autoplay"muted
width="800"height="450"></video>
<audiosrc="./歌.mp3"autoplay="autoplay"controls="controls"muted="muted"
loop></audio>
</body>
</html>
2.6 表格标签
表格标签：是由table、tr、td三个标签构成，同时可以使用语义化标签thead、tbody、tfoot进行规划。
表格语义化标签及属性
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<!-- cellspacing是控制单元格的间距 -->
<!-- cellpadding是单元格的内边距 -->
<!-- 颜色构成按照RGB书序写在一个16进制的数字 0xFF00FF-->
<tableborder="1"cellspacing=0cellpadding=0width=300background="./jige.webp"bgcolor="#ccc">
<!-- thead tbody tfoot 无论怎么颠倒 页面中首先会显示的是thead其次tbody再次tfoot -->
<tbody>
<tr>
<td>蔡徐坤</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>坤坤</td>
<td>男</td>
<td>18</td>
</tr>
</tfoot>
<thead>
<!-- tr表示定义一个表格行时table row的缩写 -->
<tr>
<!-- td表示定义一个单元格，是table data的是缩写 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
</table>
</body>
</html>
表格的嵌套
表格的嵌套一半多用于进行布局，将网页进行表格化处理，通常结合表格的合并，每一格显示不同的模块
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<tableborder="1"width=300cellpadding=0>
<tr>
<tdwidth=150></td>
<td>
<tableborder="1"width=100>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
表格的合并
行合并：rowspan属性用于进行表格的行合并
列合并：colspan属性用于进行表格的列合并
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<tableborder="1"width=500align="right">
<tralign="right">
<!-- td表示定义一个单元格，是table data的是缩写 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tralign="right">
<tdrowspan="2">蔡徐坤</td>
<tdcolspan="2">男</td>
<!-- <td>20</td> -->
</tr>
<tralign="right">
<!-- <td>坤坤</td> -->
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
</html>
2.7超链接标签
a标签超连接
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<!-- href是所需要跳转的网页链接 -->
<!-- target属性为_blank的时候 跳转的网页会新建选项卡 -->
<ahref="超连接2.html"target="_blank">跳转2</a>
</body>
</html>
锚链接
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<aid="top"href="#bottom">跳到底部</a>
<divstyle="background-color: aqua;width: 1000px;height: 5000px;"></div>
<aid="bottom"href="#top">回到顶部</a>
</body>
</html>
图片链接
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<imgsrc="jige.webp"alt="">
</a>
</body>
</html>
热区超连接
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/>
<title>超链接</title>
</head>
<body>
<imgsrc="images/china.jpg"usemap="#Map">
<mapname="Map">
<areashape="rect"coords="456,251,485,319"href="shaanxi.html">
<areashape="circle"coords="402,299,23"href="shanxi.html">
<areashape="poly"coords="400,365,446,268,446,381"href="ningxia.html">
</map>
</body>
</html>
练习：
编写内容
网页效果
编写内容
网页效果
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
