html尚硅谷课程阶段总结-----第一阶段（1-12）

最新推荐文章于 2022-10-12 00:03:06 发布

想要梦想的咸鱼

最新推荐文章于 2022-10-12 00:03:06 发布

阅读量685

点赞数

分类专栏：小白自学笔记文章标签： html 前端 html5

本文链接：https://blog.csdn.net/cjf525900/article/details/122481544

版权

小白自学笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要初步认识了客户端的形成有：文字客户端和图形化客户端

其中文字客户端：通过命令行来使用软件

而图形客户端：通过点击拖动来使用软件，window中、macos中android、ios中大部分应用

网页:通过访问网页来使用软件，所有的网站都属于这个范畴（B/S架构）

网页的特点：相较于传统的图形化界面，网页具有不需要安装无需更新跨平台

而网页所要用到的语言为HTML、CSS、JavaScript

其中c/s开发的成本较高，b/s开发成本低，操作比较简单

在代码方面，根据浏览器的不同，对于代码的解决也不相同，在万维网的初期，网页编写并没有统一的标准。所以在趋势下，万维网的创始人蒂姆-伯纳斯-李于1994年建立w3c万维网联盟

我们编写的网页都需要遵循w3c的规范。

在网页的结构方面，W3C的标准根据功能可分为结构、表现、行为。各个功能都有对应相匹配的的语言。

结构对应的是<HTML>，它主要是用于描述页面的结构，简单理解可为网页的构成骨架

表现对应的是<CSS>,它用于控制页面中元素的样式（颜色、大小等），理解可谓构成网页的皮肉，使网页内容更加丰富，样式多样化。

行为对应的是<JAVASCRIPT>，用于响应用户操作。相当于网页的灵魂，使网页更便捷使用，是网页与用户的交互关键。

HTML语言

HTML全称（Hypertext Markup Language）是超文本标记语言，所谓超文本指的是超链接，使用超链接可以让我们从一个页面到另一个页面。它负责的是三要素中的结构。其中HTML使用标签的形式来标识网页中的不同组成部分。

像我们平时用文本记事纯文本打出来的皆是文本，不可插入图片、颜色，纯文本只记载数据，而像word之类的称为复文本。（电脑自带的文本记事便可简单实现初步代码编写，word之类的复文本则不行）。

相对重要的是扩展名，它决定的是文件的格式，例如：xxxx.html xxxx.txt 后缀名不同，文件的格式则不同，若后缀名改错则很有可能无法打开或乱码的情况。

写码命名标签例如第一命名为h1

<h1>欢迎来到网页</h1>

其中“/”代表打断，与开头相区别，表示到此这一部分到此结束打断结尾。段落则是<p>，结尾与上图相同</p>

而在网页编写同样也有根标签，有且只有一个。网页的所有内容都在根标签里面，其中也存在子标签。例如：

<html>
      
       <head>
      
       </head>

       <body>
      
       </body>

</html>

而正常来讲，按子标签而言大小级应为<html>的子标签是<head>和<body>。而<head>的子标签是<title>也是<html>从属。<head>的内容是不显示在网页中的，它是作为给浏览器看的，或者说是给搜索引擎看的，让它们可以解析我们的网页，通过这些信息更快捷的解析网页。

<body>大概理解可为身体，是直接展现在网页之中的内容物。像<h1>标签 <p>内容都在其中。<title>则是网页标签，处于网页顶层命名，也就是滑动标题栏。大概整体示例如下：

<html>-----根标签（所有内容在里，不可超出）  
      <head>-----头部（不显示在网页，方便浏览器识别）
          <title>XXX</title>-----（网页标签）
      </head>
      <body>------（出现在网页的组成部分）
          <h1>XXXX</h1>----（小标题）
          <h2>XXXXXX</h2>
          <p>XXXXXXXXXXXXX</p>-----（内容）
          <P>XXXXXXXXXXXXXXX</P>
      </body>
</heml>-----根标签结尾，其后不可超出

除了以上成对出现标签，还有一些单独出现的标签，第一种是只有开头没有结尾。第二种是在标签之后打“/”结束的叫自结束标签。

例如：<img>xxxx<img/>和<iuput>xxxx<iuput/>它们的打断都是在后面的，而不是在前面

所以标签一般成对出现，但也存在一些自结束标签。

而在我们工作和学习时想要给这段重要代码加个备注或者给自己的标签写注释说明作用又不想它出现在网页时，就要用到注释了。

<!--XXXXXXXXX-->它被称为注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示。

但是我们可以在源码中查看注释，注释用来对代码进行解释说明的。而我们在开发中一定要养成写注释的习惯，但要保持简单明了。除了做注释以外，它还可以将一些不希望显示的内容隐藏。但我们要注意的是注释不能嵌套，注释中不可再用注释

<!--
     <!--
     -->    这种情况在网页进行识别的时候会自动确认里的最近的结尾标签
-->          若该注释出现在<body>中则多出的一个结尾直接出现在网页中

当我们要给网页中的其中几个字带颜色、大小时就要用到属性<font>了。它一般在开始标签或自结束标签还可以设置属性。当要给字体改变尺寸时，可在后加尺寸<size>例如：给很好看三个字带黄色尺寸3号大小

<h1>这个东西<font color=“yellow” size=“3”>很好看</font></h1>

还应该注意，属性和标签名或其他属性都应该使用空格键隔开。同时属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些则为之相反。如有属性值的，属性值则应当使用引号引起来.

除了以上的标签，还有一个是我们要加在根标签之前的文档声明<！doctype html>。文档声明是用来告诉浏览器当前网页的版本。

<！doctype html>

这里说明的就是告诉浏览器我使用的是html语言，按照html语言来进行识别。

除了以上的实际操作，还有我们要了解的基础进制。有十进制、二进制、八进制和十六进制。

十进制为满十进一。单位数字有十个，从0~9

二进制为满二进一。单位数字两个0和1（所有数据在计算机底层会以而二进制形式保存）

十六进制为满十六进一。单位数字有十六个，而它不同的是其并非全是数字

例如：0123456789abcdef它后面的数字被字母所替代

16进制配合2进制，自动将2进制储存，文字也不例外。当我们读取这段文字的时候，计算机会将编码转换为字符，供我们阅读。

而我们可以将内存想象为一个有多个小格子组成的容器，每个小格子中都可以储存一个1或一个0.而这一个小格子在内存中被称为一位（bit），从小到大则为：

8bit=1byte（字节） 1024byte=1kb（千字节） 1024kb=1MB（兆字节） 1024MB=1GB（吉字节）

1024GB=1tb（特字节） 1024tb=1pd 而我们能操控的最下操作字节就是8bit

当我们像上面进制相互转换从内存了解信息时，将字符转为二进制码时的过程为编码。将电脑二进制码转换为字符阅读的过程则为解码。编码和解码所采用的叫做字符集，如果编码和解码所采用的子字符集不同就会出现问题。

常用字符集：AscII（美国）BG2312（国内）UTF-8（国际通用）基本都是使用UTF-8。可以通过meta标签来设置网页字符集，避免乱码问题

<meta charset="UTF-8"
用来设置网页元数据

目前这十二节课简缩所学代码如下：

<! DOCTYPE html>
<html> 
    <head> 
        <title>xxxxx</title>
    </head>
    <!--XXXXXX-->
    <meta charset="utf-8"/>
    <body>
        <h1><font color="yellow" size="4">xxxxxx</font></h1>
        <p><font color="bler">xxxxx</p>
    </body>
</html>