Wed前端开发 ---- HTML超文本标记语言

最新推荐文章于 2023-12-25 21:31:03 发布

biggirler

最新推荐文章于 2023-12-25 21:31:03 发布

阅读量1.8k

点赞数 6

本文链接：https://blog.csdn.net/weixin_44568633/article/details/104268709

版权

文章目录

Wed前端开发 HTML超文本标记语言
一、Wed前端开发介绍
二、HTML网页结构
三、HTML标签

Wed前端开发 HTML超文本标记语言

一、Wed前端开发介绍

1、Web概述

在这里插入图片描述
前端开发三剑客:
HTML：超文本标记语言
**CSS：**层叠样式表,用来装饰HTML框架
**JavaScript：**前端编程语言，用来使页面进行交互，动态展示
三者可以理解为：人（HTML） ---- 给人化妆（CSS）---- 使人动起来（JavaScript）

在使用JavaScript时候，它很底层，开发的时候太慢，为了使开发页面更快，其实是封装了JS的一些框架，类似于python中的模块，比如jQuery,viewe.js等

2、Web起源

1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站
在这里插入图片描述

3、Web的特点

C/S框架：Client / Server（客户端 / 服务端）
我们通常打游戏，下载的包呀就很大，需要一系列环境，对于客户端配置要求很高，而且不同的平台还要开发不同的软件
B/S框架：Browser / Server（浏览器 / 服务端）
网游，客户端不需要太多配置，有一个浏览器就好，可以访问到服务端共享的内容，现在大多用这个

Web特点：
易导航和图形化界面
与平台无关：交互的是浏览器，不是系统（windows、Linux、max）进行交互
分布式结构
动态性
交互性

4、Web工作原理

面试经常问的一个问题：

在浏览器中输入 https://www.baidu.com ,页面返回一些内容，这个过程中浏览器与服务器经历过程是怎样的
在这里插入图片描述
当我们在浏览器中输入一个网址，比如www.google.cn，浏览器就会加载出百度的主页。那么浏览器背后完成的具体是怎么样的呢？
（1）浏览器本身是一个客户端，当你输入URL的时候，首先浏览器会去请求DNS服务器，通过DNS获取相应的域名对应的IP
（2）然后通过IP地址找到IP对应的服务器后，要求建立TCP连接，用TCP/IP协议，三次握手
（3）浏览器发送完HTTP Request（请求）包，告诉服务器要访问什么信息，一般就是访问主页，GET，服务器接收到请求包之后才开始处理请求包
（4）在服务器收到请求之后，服务器调用自身服务，返回HTTP Response（响应）包
（5）客户端收到来自服务器的响应后开始渲染这个Response包里的主体（body），等收到全部的内容随后断开与该服务器之间的TCP连接，TCP四次挥手。

5、URL介绍

URL(uniform resource locator)统一资源定位器，也就是网址，用来访问页面内容

构成形式：
协议类型：// 服务器地址（写IP或者主机名都可以）（端口号）/ 路径 / 文件名
不写端口号的话是协议默认的端口号
例如：
http:// www.westos.org/bbs/index.html

再来回顾下常见的端口：
http：80
https：443
ssh：22
mysql：3306
redis：6379
ftp:21

二、HTML网页结构

1、HTML介绍

HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。
超文本指的是：超链接
标记指的是：标签

HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑.
HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页
常见的编辑器和浏览器:
在这里插入图片描述

2、HTML基本结构

我们可以看一下百度页面的源代码，一般就是由这些构成
在这里插入图片描述

第一个HTML代码，创建.html文件

<!--注释在这里写，写完直接按ctrl+/ -->
<!--声明html-->
<!DOCTYPE html>

<!--html文档-->
<html lang="en">

<!--html的头部，在页面中不会显示-->
<head>
<!--    声明html文档的编码格式-->
    <meta charset="UTF-8">
<!--    页面标题-->
    <title>大刘的第一个html代码</title>
</head>

<!--html的主体，在页面中真正显示的内容-->
<body>
<!--    <h1></h1>：是一级标题，里面还可以进行设置格式颜色等-->
    <h1 style="color: blueviolet">标题一</h1>

</body>
</html>

用本机安装的浏览器打开：
在这里插入图片描述

3、文档类型

目前常用的两种文档类型是 : html5 和 xhtml 1.0（）
在这里插入图片描述

4、文档规范与注释

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

所有的标签必须小写
所有的属性必须用双引号括起来
所有标签必须闭合
img必须要加alt属性(对图片的描述)

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

< !-- 这是一段注释 --> （ctrl+/）

三、HTML标签

这里说一个网站：
W3CSchool是一个专业的编程入门学习及技术文档查询网站，提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册，可以在该网站查询一些使用方法

在这里插入图片描述

1、文本标签

在这里插入图片描述

2、换行标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>daliu的html</title>
</head>
<>
<body>

<h1 style="color: blueviolet">标题一</h1>
<h2 style="color: red">标题二</h2>
<h3 style="color: yellow">标题三</h3>
<h4 style="color: green">标题四</h4>
<h5 style="color: black">标题五</h5>
<h6 style="color: blue">标题六</h6>
<br>
<i>斜体</i>
<em>斜体</em>
<b>加粗字体</b>
<strong>加粗字体</strong>
<cite>引用</cite>
<sub>下标</sub>
<sup>上标</sup>
<tt>居中显示</tt>
<u>字体加下划线</u>
<s>字体加删除线</s>
<strike>字体加删除线</strike>
s<sub>1</sub> = pi * r<sup>2</sup>
原价：<del>$100</del>
现价:<b style="color:red">$50</b>


<i>斜体</i>
<br/>
<em>斜体</em>
<br/><hr>
<br>

<p>
很久以前，白雪公主的后母—王后美貌盖世，但魔镜却告诉她世上唯有白雪公主最漂亮，王后怒火中烧派武士把她押送到森林准备谋害，武士同情白雪公主让她逃往森林深处。
小动物们用善良的心抚慰她，鸟兽们还把她领到一间小屋中。收拾完房间后她进入了梦乡。房子的主人是在外边开矿的七个小矮人。他们听了白雪公主的诉说后把她留在家中。
王后得知白雪公主未死，便用魔镜把自己变成一个老太婆，来到密林深处，哄骗白雪公主吃下一只有毒的苹果，使公主昏死过去。鸟儿识破了王后的伪装，飞到矿山报道白雪公主的不幸。七个小矮人火速赶回，王后仓惶逃跑，在狂风暴雨中跌下山崖摔死。
七个小矮人悲痛万分，把白雪公主安放在一只水晶棺里日日夜夜守护着她。
</p>
<p>
邻国的王子闻讯，骑着白马赶来，爱情之吻使白雪公主死而复生。
然后王子带着白雪公主骑上白马，告别了七个小矮人和森林中的动物，到王子的宫殿中开始了幸福的生活
</p>

</body>
</html>

浏览器打开页面展示：
在这里插入图片描述

3、列表标签

在这里插入图片描述
ul（无序）的标记类型有：
（不建议使用类型）

类型	-
disc	圆点（默认）
square	正方形
circle	空心圆

ol（有序）的标记类型有：

类型
1（默认）
A
a
I
i

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>无序列表：四大名著</h1>
<ul>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ul>

 <!--ul的标记类型有：
    disc  圆点（默认）;square 方形; circle 空心圆
    建议不使用
  -->
<ul type="square">
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ul>


<h1>有序列表：四大名著</h1>
<ol>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ol>
<!-- ol的标记类型有：
        1; A; a; I; i
-->

<ol type="A">
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ol>

<h1>自定义列表：四大名著</h1>
<dl>
    <dt>四大名著</dt>
        <dd>西游记