Document

HTML 最详细的课件总结

2024-03-20
dfer
297
html 前端 CSDN

前言：

2016 年 7 月，雅虎核心资产被美国电信巨头 Verizon ，以 48 亿美元收购。雅虎倒台后它里面的互联网人才在一小时之内被抢夺一空。当时的互联网缺口异常大。一直到近几年互联网的快速发展不断涌入了一批批新鲜血液，在由于互联网的不断壮大需要新鲜的血液注入所以这个行业一致都是高薪行业，而且未来互联网只会走得更远。所以大家的选择肯定是没有问题的。

随着互联网技术的发展以及终端设备的不断增多，前后端分离技术已成为移动互联网领域不可或缺的技术。前后端分离技术的不断完善，让前后端的分工与系统边界划分越来越清晰。

前端开发和后端开发都是干什么的？有哪些i区别？通俗地讲，前端干的工作是用户可以直接看得见的，而后端开发的工作主要在服务端，用户不太能直接看到。虽然前端开发和后端开发的工作有巨大的区别，但是他们的工作都是相辅相成的，都是为了更好的用户体验。

▷ 前端开发和后端开发都是干什么的：

1、前端开发：

网站的“前端”是与用户直接交互的部分，包括你在浏览网页时接触的所有视觉内容--从字体到颜色，以及下拉菜单和侧边栏。这些视觉内容，都是由浏览器解析、处理、渲染相关HTML、CSS、Java 文件后呈现而来。前端开发，就是要创造上面提到的网站面向用户的部分背后的代码，并通过建立框架，构建沉浸性的用户体验。为了实现这个目标，开发需要熟练运用下列语言、框架、工具库。

2、后端开发：

为了让服务器、应用、数据库能够彼此交互，后端工程师需要具有用于应用构建的服务器端语言，数据相关工具，PHP框架，版本控制工具，还要熟练使用 Linux 作为开发和部署环境。后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新 Web 应用。但在写代码之前，他们需要与客户沟通，了解其实际需求并转化为技术目标，制定最有效且精简的方案来进行实现。

▷ 前端开发和后端开发的区别：

（1）展示的方式不同

前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。

后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多的多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。

（2）所用的技术不同

前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack，AngularJs，ReactJs，VueJs等技术。

后端开发以java为例主要用到的是包括但不限于Struts spring springmvc Hibernate Http协议 Servlet Tomcat服务器等技术。

比如做一个登陆页面，用户在前端页面上输入了账号密码，然后用鼠标点击了登陆按钮，这时候前端会将账号密码通过请求接口发送给后端做处理，后端收到数据会先检查此账号是否存在，如果不存在，则返回给前端一条类似于这样的信息：“你输入的账号不存在，请重新输入”，用户再次重新输入账号，此时后端查询账户存在，密码也正确，则后端返回登陆成功的信息给前端。现代计算机领域的难题如大规模负载，海量数据处理，实时计算也是后端的，前端集中在表示层。

▷ 网站开发流程

很多人认为网站开发是一件很困难的事情，其实没有想象中那么困难，只要明白了网站的开发流程，就会觉得网站开发非常简单，如果没有一个清晰的开发流程指导开发，就会觉得整个开发过程中难以实行。完整的开发流程如下。

（1）需求分析：当拿到一个项目时，必须进行需求分析，清楚知道网站的类型、具体功能、业务逻辑以及网站的风格，此外还要确定域名、网站空间或者服务器以及网站备案等。

（2）规划静态内容：重新确定需求分析，并根据用户需求规划出网站的内容板块草图。

（3）设计阶段：根据网站草图由美工制作成效果图。就好比建房子一样，首先画出效果图然后才开始建房子，网站开发也是如此。美工设计：Photoshop

（4）程序开发阶段：根据草图划分页面结构和设计，前端和后台可以同时进行。前端根据美工效果负责制作静态页面；后台根据页面结构和设计，设计数据库数据结构和开发网站后台。

（5）测试和上线：在本地搭建服务器，测试网站是否存在Bug。若无问题，则可以将网站打包，使用FTP上传至网站空间或者服务器。

（6）维护推广：在网站上线之后，根据实际情况完善网站的不足，定期修复和升级，保障网站运营顺畅，然后对网站进行推广宣传等。

Web开发=HTML+CSS+JavaScript

一、初识HTML

1. 什么是 HTML ？

html 超文本标记语言

（HyperText Markup Language） /ˈhaɪpətekst/ /ˈmɑːkʌp/

超文本：文本内容+非文本内容（图片、视频、音频）

标记：<单词> 也叫标签

标签，属性,元素之间的关系举个例子说明一下：

比如有一天你在街上看到一个美女，那身材那脸蛋让你碧血直流，然后回来你和你兄弟炫耀，嗨！哥们今天看见一个美女，身材太辣眼了，胸有这么大，屁股有这么大，腰这么细尽管你说的眉飞色舞，但你的兄弟不一定有相同体会，如果你换一种方式表达，那个美女胸有90，臀部88，腰62当你把三位数爆出来，估计你兄弟口水都流出来了。

那么美女就是一个文本，是你要描述的事物，元素。而美女的三维是他的属性，如果用代码描述应该如下：

标签是元素的载体，通过标签，来感知元素的存在。

HTML5的新特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar /ˈkælɪndə(r)/ 日历、date、time、email、url、search

2. HTML初始化代码

显示框 LOGO

· 方法一：在ps软件上把其他格式（如png/jpg）的图片裁剪为圆形->文件->存储->bmp格式，最后手动修改.bmp格式为ico;

· 方法二：百度搜索ico在线生成器；

http://www.zuohaotu.com/image-to-ico.aspx

图片转ICO图标——免费在线图片转ICO图标 (zuohaotu.com)

【乱码解决】

1、用记事本打开，另存为-》文档类型（.）-》更改编码

2、<meta charset="UTF-8"/>

【注意】

1、标签不能交叉

2、html不区分大小写，建议使用小写

3、html拓展名：.html、.htm、.php、.jsp、.asp

二、HTML 标签

1.基础标签

加粗：

倾斜：

删除线:<del></del>

下划线:<ins></ins>

上标:

下标：

缩写：<abbr title=""></abbr>

标记：

文本：

标题：<h*>标题标签</h*> h1-h6:从大到小的标题标签

换行:

字体标签：

属性：color、size、face

段落标签：

详情请看： http://www.html5star.com/manual/html5label-meaning/

2.常用标签

1）路径

相对路径：相对于某一个文件进行引入的，那么就相当于是兄弟关系，如果是在文件的内部引入中那么就是子文件

绝对路径：就是从盘符开始，是文件的真正的一个所在位置

Window对斜线进行了处理，所以/和\都能够引入成功，但是网络地址只能写斜线。

2）图片标签

<img> 属性：src 引入图片地址、alt 替换文本、 title 提示信息、width 宽 height 高

图片格式：美工需要掌握，前端去做了解即可。

3）链接标签

属性：href 地址： target 目标位置 target属性值：_blank:新窗口打开、 new：新窗口打开、 _top:顶级窗口打开、

<a> 标签：

1）打开外部文件

2）打开内部文件

3）打开一张图片

<a href="images/tulips.jpg">打开一张图片</a>

4）书写简单的javascript

5）锚点 ①创建锚点

②引用锚点

4）滚动标签

属性：direction：方向（left、right）

behavior：滚动方式（scroll、slide、 alternate）

scrollamount：速度，值是正整数，默认为6

scrolldelay：表示停顿时间，值是正整数，默认为0，单位是毫秒。οnmοuseοver="stop()" ：鼠标悬浮停止移动

οnmοuseοut="start()"：鼠标离开开始移动

marquee direction="right" behavior="scroll" scrollamount="10" scrolldelay="200"

移动速度为每 200 毫秒 10 像素。

5）水平线

<hr />属性：width:长度（px|%）、align：水平位置(left 左|center 中|right 右）、 color：线的颜色、 size：粗细（px）

6) div块标签

div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局通过一个简单的实例了解div布局是如何实现的

三、转义字符

空格：  

< 大于号： <

> 小于号: >

四、HTML媒体

我们可以使用 <video> 和 <audio> 标签来显示视频和音频

多媒体格式

格式多媒体元素（比如视频和音频）存储于媒体文件中。

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

音频：audio

标签来描述 MP3 文件 (Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:

视频：Videos

五、元素的分类

元素的分类：

块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。

已经学过的块元素有： h1~h6;hr;ul;ol;p;table，div......... 内联元素:不会产生换行效果，会和其他元素并联排列；font，b,i,mark,q,abbr,del,ins,sup,sub......... 已经学过的内联元素有：b;i;br;img;.........

六、表

1.有序列表：

//属性：type:序号类型、start：起始序号、reversed：倒序

2.无序列表：

//属性：type:序号样式（disc 实心圆|circle 心圆|square 实心方框）

3.自定义列表：

4.表格:

属性：border：表格边框、

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

rowspan:合并行

colspan:合并列

align:左右对齐方式

valign:上下对齐方式

关于table布局

table布局是传统的网页布局方式：早期网页由于内容较少，布局简单，都是使用table布局
优点:比较简单，容易理解
缺点：对于复杂的布局，表格嵌套太多，比较繁琐；后期维护和修改很不方便.......
table布局思路：用表格把屏幕分成几块--不同的单元格存放不同的内容

5.表单

七、框架

整合框架

内联框架

八、HTML5新语义化标签

HTML5 添加了很多语义元素如下所示：

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
	规定在文本中的何处适合添加换行符。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

· <acronym>

· <applet>

· <basefont>

· <big>

· <center>

· <dir>

·

· <frame>

· <frameset>

· <noframes>

上一篇： Adobe Brac

下一篇：【前端】三种方法实现