HTML-CSS学习笔记(一)

学习乐
233 阅读11分钟

什么是HTML?

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

  • 什么是标记语言（markup language ）？

    • 由无数个标记（标签、tag)组成；
    • 是对某些内容进行特殊的标记，以供其他解释器识别处理；
    • 比如使用

      标记的文本会被识别为 “标题”进行加粗、文字放大显示；
    • 由标签和内容组成的称为元素（element）

  • 什么是超文本（ HyperText ）呢？

    • p 表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
    • 还可以表示超链接（HyperLink），从一个网页跳转到另一个网页;

  • HTML文件的拓展名是.htm.htm

    • 因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm
    • 现在统一使用 .html

HTML文件的特点 – 结构

<!doctype html> <!--文档声明-->
<html>
    <head></head>
    <body>
        
    </body>
</html>

开发工具推荐

  • WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
  • 智能提示、高亮识别、语法检测、集成环境、开发效率高

特别推荐:

  • Webstorm

    • 优点：集成开发工具，包罗万象
    • 缺点：重（占用系统资源多），收费

  • VSCode

    • 优点：轻（相当于一个编辑器），免费
    • 缺点：需要安装一些插件来辅助开发

VSCode工具安装

  • VSCode编辑器下载-安装：code.visualstudio.com/

  • 安装插件（增加功能)：右侧图标最后一项，Extensions,查找需要的插件（联网)

    • 中文插件：Chinese
    • 颜色主题：atom one dark
    • 文件夹图标：VSCode Great Icons
    • 在浏览器中打开网页：open in browser、Live Sever
    • 自动重命名标签：auto rename tag

  • VSCode的配置：

    • Auto Save自动保存
    • Font Size修改代码字体大小
    • Word Wrap代码自动换行
    • Render Whitespace空格的渲染方式（个人推荐）
    • Tab Size代码缩进

    推荐2个空格（公司开发项目基本都是2个空格）

  • 那么HTML有哪些元素呢？

  • 我们会发现元素非常非常的多，这么多能记得住吗？

    • 常用的，用的多自然就记住了；
    • 不常用的，知道在哪里查找即可；

元素的组成

  • 剖析一个HTML元素的组成：

image-20220412223413093

  • 这个元素的主要部分有：
  1. 开始标签(Opening tag) :包含元素的名称（本例为p),被左、右尖括号所包围。表示元素从这里开始或者开始起作用一一在本例中即段落由此开始。
  2. 结束标签(Closing tag) :与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾一一在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  3. 内容(Content) :元素的内容，本例中就是所输入的文本本身。
  4. 元素(Element): 开始标签、结束标签与内容相结合，便是一个完整的元素。

元素的属性

  • 元素也可以拥有属性（Attribute）：

image-20220412223659948

  • 属性包含元素的额外信息，这些信息不会出现在实际的内容中。

  • 一个属性必须包含如下内容：

    • 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。
    • 属性名称，后面跟着一个等于号。
    • 一个属性值，由一对引号“ ”引起来。

属性的分类

  • 有些属性是公共的，每一个元素都可以设置

    • 比如class、id、title属性

  • 有些属性是元素特有的，不是每一个元素都可以设置

    • 比如meta元素的charset)属性、img元素的alt属性等

单标签元素 – 双标签元素

  • 双标签元素：我们会发现前面大部分看到的元素都是双标签的；

    • html、body、head、h2、p、a元素；

  • 单标签元素：也有一些元素是只有一个标签；

    • br、img、hr、meta、input

  • 注意事项：

    • HTML元素不区分大小写，但是推荐小写

元素之间的嵌套关系

image-20220412224008986

HTML的注释

  • 什么是注释？

    • 简单来说，注释就是一段代码说明
    • <--注释内容-->
    • 注释是只给开发者看的，浏览器并不会把注释显示给用户看

  • 注释的意义：

    • 帮助我们自己理清代码的思路，方便以后进行查阅
    • 与别人合作开发时，添加注释，可以减少沟通成本（同事之间分模块开发）
    • 开发自己的框架时，加入适当的注释，方便别人使用和学习.（开源精神）
    • 可以临时注释掉一段代码，方便调试

  • 注释快捷键：ctrl+/

完整的HTML结构

  • 一个完整的HTML结构包括哪几部分呢？

    • 文档声明

    • html元素

      • head元素
      • body元素

image-20220413074502634

  • HTML最上方的一段文本我们称之为 文档类型声明，用于声明文档类型
<!DOCTYPE html>

  • !DOCTYPE html

    • HTML文档声明，告诉浏览器当前页面是HTML5页面；
    • 让浏览器用HTML5的标准去解析识别内容；
    • 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；

  • HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多

image-20220413074652286

html元素

  • 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。

    • 所有其他元素必须是此元素的后代。

image-20220413074732265

  • W3C标准建议为html元素增加一个lang属性，作用是

    • 帮助语音合成工具确定要使用的发音;
    • 帮助翻译工具确定要使用的翻译规则;

  • 比如常见的规则:

    • lang=“en”表示这个HTML文档的语言是英文；
    • lang=“zh-CN”表示这个HTML文档的语言是中文；

head元素

  • HTML head 元素 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

    • 什么是元数据（meta data），是描述数据的数据；
    • 这里我们可以理解成对整个页面的配置：

  • 常见的设置有哪些呢？一般会至少包含如下2个设置。

    • 网页的标题：title元素

image-20220413074902033

  • 网页的编码：meta元素

    • 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
    • 一般都使用utf-8编码，涵盖了世界上几乎所有的文字；

image-20220413074926344

body元素

  • body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。

    • 之后学习的大部分HTML元素都是在body中编写呈现的；

image-20220413074959029

HTML元素

  • HTML元素本身很多，但是常用的元素就是那么几个。

developer.mozilla.orq/zh-CN/docs/…

我们只需要记住常用的，不常用的学会查看文档即可；

  • 常用的元素

    • p元素、h元素；
    • img元素、a元素、iframe元素；
    • div元素、span元素；
    • ul、ol、i元素；
    • button元素、input元素；
    • table、.thead、tbody、thead、th、tr、td;

常见元素 – h元素

  • 在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。

  • <h1>-<h6>标题题 (Heading) 元素呈现了六个不同的级别的标题

    • Heading是头部的意思，通常会用来做标题
    • `<h1>级别最高，而<h6>级别最低。

image-20220413075326576

  • 注意：h元素通常和SEO优化有关系

常见元素 – p元素

  • 如果我们想表示一个段落，这个时候可以使用p元素。

  • HTML 元素（或者说 HTML 段落元素）表示文本的一个段落。

    • p元素是paragraph单词的缩写，是段落、分段的意思；
    • p元素多个段落之间会有一定的间距；

image-20220413075420441

常见元素 - img元素

  • 我们应该如何告诉浏览器来显示一张图片呢？使用img元素。

  • HTML <img> 元素将一份图像嵌入文档。

    • img是image单词的所以，是图像、图像的意思；
    • 事实上img是一个可替换元素（ replaced element ）；

  • img有两个常见的属性：

    • src属性：source单词的缩写，表示源

      • 是必须的，它包含了你想嵌入的图片的文件路径。

    • alt属性：不是强制性的，有两个作用

      • 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
      • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

  • 某些其他属性目前已经不再使用

    • 比如width、height、border
img元素 - 图片的路径

  • 设置img的src时，需要给图片设置路径：

    • 网络图片：一个URL地址

      • ✓ 网络图片的设置非常简单，给一个地址即可；

    • 本地图片：本地电脑上的图片，后续会和html一起部署到服务；

  • 本地图片的路径有两种方式：

    • 方式一：绝对路径（几乎不用）；

      • 从电脑的根目录开始一直找到资源的路径；

      image-20220413075742839

    • 方式二：相对路径（常用）；

      • 相当于当前文件的一个路径；
      • . 代表当前文件夹（1个.），可以省略
      • .. 代表上级文件夹（2个.）

      image-20220413075834312

  • 对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \

img元素 - 图片的格式

image-20220413075859557

常见元素 – a元素

a元素 - 锚点链接

  • 锚点链接可以实现：跳转到网页中的具体位置

  • 锚点链接有两个重要步骤：

    • 在要跳到的元素上定义一个id属性；
    • 定义a元素，并且a元素的href指向对应的id；

image-20220413080129962

a元素 - 图片链接

  • 在很多网站我们会发现图片也是可以点击进行跳转的

    • img元素跟a元素一起使用，可以实现图片链接；

image-20220413080217676

  • 实现思路：

    • a元素中不存放文字，而是存放一个img元素；
    • 也就是img元素是a元素的内容；

image-20220413080240322

  • a元素还可以跳转到其他网页

iframe元素

  • 利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

  • frameborder属性

    • 用于规定是否显示边框

      • 1：显示
      • 0：不显示

    • a元素target的其他值:

      • _parent：在父窗口中打开
      • _top：在顶层窗口中打开URL

div元素、Span元素的历史

  • 在HTML中有两个特殊的元素div元素、span元素：

    • div元素：division,分开、分配的意思；
    • span元素：跨域、涵盖的意思；

  • 这两个元素有什么作用呢？无所用、无所不用。

  • 产生的历史：

    • 网页的发展早期是没有css,这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
    • 后来出现了css,结构和样式需要分离，这个时候htl只需要负责结构即可；
    • 比如h1元素可以是一段普通的文本+CSS修饰样式：
    • 这个时候就出现了div、Span来编写HTML结构所有的结构，样式都交给css来处理；
    • 我们的页面可以没有div、span；
    • 我们的页面可以没有div、span；

    div元素、span元素的区别

  • 这个时候有一个问题：我出现一个不就可以了吗？

  • div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；

    • div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；

      • div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
      • 用于把网页分割为多个独立的部分

    • span元素：多个span元素包裹的内容会在同一行显示；

      • 默认情况下，跟普通文本几乎没差别
      • 用于区分特殊文本和普通文本，比如用来显示一些关键字

      不常用元素

  • strong元素：内容加粗、强调；

    • 通常加粗会使用css样式来完成
    • 开发中很偶尔会使用一下；

  • i元素：内容倾斜；

    • 通常斜体会使用css样式来完成；
    • 开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；

  • code元素：用于显示代码

    • 偶尔会使用用来显示等宽字体；
    • br元素：换行元素

    HTML全局属性

    image-20220413081239456

    \

avatar
文章
阅读
粉丝