目录
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>