- 学习前端基础知识，初步掌握前端代码架构
文章目录
- 今日学习目标
- 学习内容
- 一、前端简介
- 什么是前端
- 前端开发最核心的3个技术
- 二、HTTP协议
- 什么是HTTP?
- 四大特性
- 数据格式
- 响应状态码
- 三、HTML简介
- 什么是HTML？
- HTML标签的分类
- HTML注释语法
- HTML基本结构
- head内常见标签
- body内标签
- 标签的两大重要参数
- 总结补充
学习内容
- 前端简介
- HTTP协议
- HTML简介
一、前端简介 什么是前端
前端开发最核心的3个技术任何与用户直接打交道的界面都可以称之为前端
- HTML
HTML，全称超文本标记语言，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。 - CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。 - JavaScript
JavaScript是一门脚本语言。 - HTML、CSS和JavaScript的区别
HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。
我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。
四大特性超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
- 基于请求、响应
服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应 - 基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP HTTPS FTP … - 无状态
服务端不保存客户端状态(纵使见她千百遍 我都当她如初见) - 短连接
不保持客户端与服务端之间的链接导通
-
请求格式:客户端给服务端发送消息应该遵循的数据格式
1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号…) 不是一直都有 -
响应格式:服务端给客户端发送消息应该遵循的数据格式
1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)
- 用数字来表示一串中文意思(简化理解)
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误 与客户端无关(代码bug、机房炸了…)
在工作中还会自定义状态码(因为默认的不够)，自定义状态码一般都是从10000开始
三、HTML简介 什么是HTML？HTML 指的是超文本标记语言
- HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签，HTML 使用标记标签来描述网页
1.双标签:有头有尾 eg：内容 内容 2.自闭合标签:单标签 一般有特殊功能HTML注释语法
(1) < !-- 单行注释--> (2) < !-- 多行注释 -->HTML基本结构
一个HTML文件是有自己固定的结构，如下所示：
...< /head> ...
代码讲解：
-
< html>< /html>称为根标签，所有的网页标签都在< html>< /html>中。
-
< head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有< title>、< script>、 < style>、< link>、 < meta>等标签，头部标签在之后会详细介绍。
-
在< body>和< /body>标签之间的内容是网页的主要内容，如< h1>、< p>、< a>、< img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
- title标签
控制网页小标题 - style标签
内部支持编写css代码 - link标签
引入外部css文件 - script标签
内部支持编写js代码 也可以通过src属性引入外部js文件 - meta标签
功能非常多
在head中设置网页标题和字符集编码
body内标签这里是标题
-
HTML 段落标签
如果想在网页上显示文章，这时就需要< p>标签了，把文章的段落放到< p>标签中。段落
标签的默认样式，段前段后都会有空白。
-
HTML 换行标签
如果希望在不产生一个新段落的情况下进行换行（新行），请使用 < br /> 标签：This is< br/>a para< br/>graph with line breaks
-
HTML标题
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。< h1>是最高的等级。
< hx>标题文本< /hx> (x为1-6)题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。
-
HTML 水平线
< hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。This is a paragraph
This is a paragraph
This is a paragraph
-
HTML < span>标签
< span>它的作用就是为了结合CSS设置单独的样式用的，本身没有任何效果。 -
HTML 列表标签
1）无序列表在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法：
- ...
- ... ......
2）有序列表
如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用< ol>标签来制作有序列表来展示。
语法：
- 信息
- 信息 ......
-
HTML超链接
使用< a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。语法：
链接显示的文本
例如：
click here!
上面例子作用是单击click here!文字，网页链接到http://www.baidu.com这个网页。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
< a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
如下代码：
click here!
-
HTML 图片
在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。语法：
举例：
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
-
HTML表格
有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：
创建表格的四个元素：
table、tr、th、td
1、< table>…< /table>：整个表格以< table>标记开始、< /table>标记结束。2、< tr>…< /tr>：表格的一行，所以有几对tr 表格就有几行。
3、< td>…< /td>：表格的一个单元格，一行中包含几对< td>…< /td>，说明一行中就有几列。
4、< th>…< /th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
表格标题
< caption> 指定表格标题，它显示在表格上方。
语法：
标题文本 … … … -
HTML特殊标签
字体系列斜体 加粗 下划线
删除线特殊符号
空格 > 大于号 < 小于号 & &符号 ¥ 羊角符 © 版权 ® 商标
- id
类似于身份证号 同一个html页面上标签的id值不允许重复
用于精确查找某个标签(因为一个html页面上相同标签名的标签太多) - class
类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)
-
标签的类别
1.块儿级标签:h1~h6 p div
默认独占浏览器一行内
2.行内标签:s i u b span
自身内部文本多大就占多大 -
标签之间支持嵌套(最好是布局类相关标签参与)
1.块儿级标签可以嵌套任意标签
2.不属于布局标签的块儿级标签不建议嵌套块儿级标签
3.行内标签只能嵌套行内标签 -
html标签其实没有缩进的概念
之所以缩进是因为我们习惯了 更加美观
