目录
0、Web前端介绍
0.1 什么是网页
网页是基于浏览器的应用程序，是数据展示的载体.
0.2 网页的组成
- 浏览器
- 代替用户向服务器发请求
- 接收并解析数据展示给用户
- 服务器
- 存储数据
- 处理并响应请求
- 协议
- 规范数据在传输过程中的打包方式
0.3 开发前的准备
- 运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
- 调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
ctrl + - 缩小字体 ctrl + + 放大字体 - 开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、PyCharm等）
open in browser
一、HTML
1.1 HTML概念
1.1.1 HTML是什么
Html(Hyper Text Mark-up Language)就是超文本标记语言的简写，是最基础的网页语言。
实验：查看网页的源代码
1.1.2 HTML基本结构
-
Html是通过标签来定义的语言，代码都是由标签所组成。
-
Html代码不用区分大小写。
-
<!DOCTYPE html>文档类型生命，便于浏览器正确解析标签及样式 -
<html lang="en">文档开始标志 -
里面由头部分
<head></head>和体部分<body></body>两部分组成。
头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
包含title标签、meta标签、style标签、script标签- meta 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
- meta 标签元素通常用于指定网页的描述，关键词，文件的修改时间，作者，和其他元数据。
- 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
体部分是真正存放页面数据的地方。
文档类型生命，便于浏览器正确解析标签及样式
<!DOCTYPE html>
HTML 文档开始标志
<html lang="en">
头部文件，可在 head 中设置网页标题,网页选项卡图标，及引入外部资源文件，设置网页相关信息等
<head>
设置网页标题，显示在网页选项卡上方
<title>前端开发</title>
定义网页作者
<meta name="author" content="star">
为网页定义描述内容
<meta name="description" content="前端必备的基础技能">
设置网页字符编码
<meta charset="UTF-8">
为搜索引擎定义关键词
<meta name="keywords" content="HTML超文本标记语言">
每5秒钟刷新当前页面
<meta http-equiv="refresh" content="5">
移动端配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http-equiv:网页兼容性配置 content:表示使用ie的edge来渲染页面
<meta http-equiv="X-UA-Compatible" content="ie=edge">
样式引入
<style type=”text/css”>
p {
color:#FF0000;}
@import url(div.css); url括号后面必须要用分号结束。
如果导入进来的样式与本页面定义的样式重复，
以本页定义样式为准
div {
color:#FF0000;}
/* 字体样式 顺序1:font : style weight size family font : size/line-height family */
</style>
css文件引入
<link rel="stylesheet"type="text/css" href="css_3.css" media="screen" />
js文件引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
</html>
练习：第一个HTML页面
练习：修改页面标题
1.1.3 HTML语法细节
- 多数标签都是有开始标签和结束标签，也有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
- 标签通常可以具有属性，通过对属性值的改变，控制标签具体功能效果。
- 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。
- 格式：
<标签名 属性名='属性值'> 数据内容 </标签名>
<标签名 属性名='属性值' />
练习：修改第一个HTML页面，加入一些文字，控制大小及颜色
练习：html页面中的空格和回车
1.1.4 HTML标签分类
- 可通过display属性设置盒子的隐藏（不占位置），visibility（默认占位置）
- html语义化好处：增加代码可读性；让搜索引擎更容易读懂
1.1.4.1 行级标签
- 行级标签包括
- 超链接标签a(锚点链接)、文本标签span(行分区标签，用于对特殊文本特殊处理)、图片标签img(figure>imgfig、caption)、内联标签iframe，
- 按钮标签button、输入标签input（除文件类型外都是行级标签）、label标签(常与表单控件结合实现文本与控件的绑定)、下拉菜单select标签等
以上标签（除input标签的radio和checkbox类型外）外边距margin全为0，
前面4个标签边框border和内边距padding为0
此外，还包括sup(上标标签)/sub(下标标签)；i(斜体标签)/strong/b(加粗标签);u(下划线标签)/s(中划线标签)
- 超链接标签a；标签属性href、name、target:" 百度一下，你就知道（锚点链接）
- 百度一下，你就知道（正常链接）
- href不写值， 会重新加载页面
- 锚点链接:
- href="#", 回到顶部
- href="#bot", 跳转底部，配合属性name/id一起使用
锚点链接 跳转底部
- 功能链接：发邮件（功能链接）
- 图片标签img；标签属性src、width、height、alt
- 内联标签iframe；标签属性src、width、height
- 上标标签sup和下标标签sub：上标;下标
- 斜体标签i：i
- 加粗标签strong;b：strong；b
- 下划线标签u/ins和中划线标签s/del：下划线；
中划线 -
1.1.4.2 块级标签
- 块级标签包括
- 容器标签（如div/nav等）、表格标签table、表单标签form（文本域标签textarea/input标签file类型），
- 标题标签h1~h6、段落标签p、列表标签ul/ol等，
前面3个标签默认外边距margin为0，
前面5个标签边框border和内边距padding为0，最后的列表标签只有左内边距padding-left:40px -
列表标签：ul;ol;li dl(定义列表);dt(定义标题);dd(定义描述)
属性:type 设置列表标识,如"circle";start 修改有序列表的顺序,如从5开始;reversed 作用：倒叙 -
表格标签table包括： 标题标签caption;fieldset>legend
行分组标签thead;tbody;tfoot;行标签tr;表头标签th(加粗和居中);列标签td;table属性:border="1"(添加1像素的边框);cellspacing="0"(设置单元格之间的距离为0);
th/td属性：colspan(跨列合并单元格,横向合并单元格);rowspan(跨行合并单元格,纵向合并单元格) -
表单标签form包括：输入标签input(根据属性type值不同可分为文本(text)、密码(password)、单选(radio)、复选(checkbox)、上传文件(file)、点击(button)、提交(submit)、重置(reset); 下拉菜单select、文本域textarea;
1.1.4.2 其他标签
音频标签audio：
<audio src=""></audio>
视频标签video：<video src="4.1.10.TCP+IP模型.mp4" controls width="400" height="200" style="border-top:0"></video>
1.2 字体标签
1.2.1 Font标签
例：
<font size=5 color=red>字体标签示例</font>
注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取，如图-1所示：
Size，默认1-7，默认是3，也可以-2~+41.2.2 标题标签
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
<h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3>
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
