2021-04-11

最新推荐文章于 2022-09-05 17:00:46 发布

画个圈圈诅咒你 yebo

最新推荐文章于 2022-09-05 17:00:46 发布

阅读量511

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/qq_53950248/article/details/115609874

版权

前端HTML5-01(精修版)

1、软件的分类

通常情况下，现在的软件一般由两个部分组成：客户端和服务器

客户端：用户通过客户端来使用软件。(文字客户端、图形化界面、网页（B/S架构）)（共3种）

（网页的优点：不需要安装、无需更新、跨平台网页中使用的网页：HTML、CSS、JavaScript）

服务器：服务器负责在远程处理业务逻辑。（例：Java、PHP、C#、python...）

①系统的软件例：Windows、Linus、macOS

②应用的软件例：office、QQ

③游戏的软件例：绝地求生、王者荣耀

2、W3C的建立

W3C的出现为了制订网页开发的标准，以使同一个网页在不同的浏览器中有不同的效果。

我们需要制订我们编写的网页都需要遵循W3C的规范 !

3、网页的结构

共有三种，分别为：结构、表现、行为

结构：HTML用于描述页面的结构

表现：CSS用于控制页面中元素的样式

行为：JavaScript用于响应用户操作

4、HTML

HTML（Hypertext Markup Language）超文本标记语言

★它负责网页的三个要素之中的结构。

★HTML使用标签的形式来标识网页中的不同组成部分。

★所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

5、我的第一个网页

将文件名改为index.html，那么文件就会变成一个简单的网页。

①<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

②<title> 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，

当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

③<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

④标签一般成对出现，但是也存在一些字节数标签

<img>和<input>没有结束标签，或者可以写成<img/><input/>

<html>
<body>
<h1>凤栖梧</h1>                       
<h2>——柳永</h2>		
 
<p>伫倚危楼风细细，望极春愁，黯黯生天际。</p>
<p>草色烟光残照里，无言谁会凭栏意。</p>
 
<p>拟把疏狂图一醉，对酒当歌，强乐还无味。</p>
<p>衣带渐宽终不悔，为伊消得人憔悴。</p>
</body>
</html>

<html>
<head>
<title>这是我的第二个网页</title>
</head>
<h1>这是我的第二个网页</h1>
</body>
</html>

⑤HTML的注释

<html>
<head>
<title>这是我的第二个网页</title>
</head>
<body>
<!--HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，
但是可以在源码中查看注释，注释用来对代码进行解释说明的开发中一定要养
成良好的编写注释的习惯，注释要求简单明了。

注释还可以将一些不希望显示的内容隐藏

注释不能嵌套

标签一般成对出现，但是也存在一些自结束标签
-->
<h1>这是我的第二个网页</h1>
</body>
</html>

⑥<font> 规定文本的字体、字体尺寸、字体颜色

<html>
<head>
<title>标签的属性</title>
</head>
<body>
<!--属性，在标签中(开始标签或自结束标签)还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示

属性和标签名或其他属性应该使用空格隔开

属性不能瞎写，应该根据文档中的规定来编写，
有些属性有属性值，有些没有，如果有属性值，属性值应该用引号括起来
-->
<h1>这是我的<font color="red">第三个</font>网页</h1>
<body>
</html>

<h1>这是我的<font color="red"size=3>第三个</font>网页</h1>

6、文档声明和进制

文档声明（doctype）
-文档声明用来告诉浏览器当前网页的版本
-html5的文档声明

进制：
   十进制（日常使用）
   -特点：满10进1
   -计数：0 1 2 3 4 5 6 7...19 20
   -单位数字：10个(0-9)

   二进制(计算机底层的进制)
   -特点：满2进1
   -计数：0 1 10 11 100 101 110 111
   -单位数字：2个(0-1)
   -扩展：
       -所有数据在计算机底层都会以二进制的形式保存
       -可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
           这一个小格子在内存中被称为1位（bit）

       8bit=1byte(字节)
       1024byte=1kb(千字节)
       1024kb=1mb(兆字节)
       1024mb=1gb(吉字节)
       1024gb=1tb（特字节）
       1024tp=1pb
   八进制（很少用）
   -特点：满8进1
   -计数：0 1 2 3 4 5... 17 20
   -单位数字：8个（0-7）

   十六进制（一般显示一个二进制数字时，都会转换为十六进制）
   -特点：满16进1
   -计数：0 1 2 3 4 5 6 7 8 9 a b c d e f...1a 1b 1c 1d 1e 20
   -单数数字：16个(0-f）

7、字符编码

   李立超 ->110000110110
   110000110110->李立超
   ->所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外，
   所以一段文字在存储到内存中时，都需要转换位二进制编码
   当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

   ->编码
       -将字符转换为二进制的过程称为编码
   ->解码
       -将二进制码转换为字符的过程称为解码
   ->字符集
       -编码和解码所采用的规则称为字符集
   ->密码问题
       ->如果编码和解码所采用的字符集不同就会出现乱码问题
   ->常见的字符集：
       ASCII
       ISO88591
       GB2312
       GBK
       UTF-8：在开发时我们使用的字符集都是UTF-8

8、文档的使用

<!doctype html>
   
<html>
   
<head>
   
<meta charset="utf-8">
   
<title>网页的标题</title>
</head>

<h1>网页的大标题</h1>
</body>
</html>

9、配置live Server

①点击有四个正方形的图标，在输入框中输入live，结果如下图：

②点击install进行下载

③下载完成

④自动保存设置（无需Ctrl+s）

点击左下角设置，得到如下图，再点击settings(设置)

对Files:Auto Save进行修改，如下图

afterDelay:在间隔一段时间内，系统自动保存一次。

网页中也能自动变成这样：

10、meta标签

所有浏览器都支持 <meta> 标签。

在 HTML 中，<meta> 标签没有结束标签。

在 XHTML 中，<meta> 标签必须被正确地关闭。

注释：元数据总是以名称/值的形式被成对传递的。

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
        meta主要用于设置网页中的一些元数据，元数据不是给用户看
        charset 指定网页的字符集
        name 指定的数据的名称
        content指定的数据的内容

        keywords表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
        <meta name="Keywords"content=" ">
        <meta name="Keywords"content=" ">

        description 用于指定网站的描述
        <meta name="description"content=" ">
        网站的描述会显示在搜索引擎的搜索的结果中

        title标签的内容会作为搜索结果的超链接上的文字显示
    -->
    <meta name="keywords"content="HTML5,前端">
    <meta name="description"content="这是一个非常不错的网站">
    <!--
        <meta http-equiv="refresh"content="3;url=https://www.mozilla.org">
        将页面重定向到另一个网站
    -->
    <meta http-equiv="refresh"content="3;url=https://www.baidu.com">
    <title>Document</title>
</head>
<body>
    
</body>
</html>