HTML概述

第一个HTML页面

创建

vscode中输入html选择html:5即可

结构

  1. !doctype 声明

    <!DOCTYPE html>告诉浏览器当前html页面的版本

  2. html基本结构

    <html lang="en"> <!-- 根元素,包含其他所有HTML元素 -->
        <head></head> <!-- 定义头部基本信息:标题,关键字,作者等 -->
        <body></body><!-- 表示当前HTML的主体,定义最终在浏览器窗口显示的内容 -->
    </html>

HTML标签

  • 元素(Element):是用来包含文字、图片或者音视频的内容,一般是由标签和内容组成。
  • 标签(Tag):是元素的组成部分,一般分为开始标签和结束标签。

注意:

  1. html标签对大小写不敏感,但W3C组织强制元素名使用小写

开始标签与结束标签

8e5d91d2-5cf7-4431-8f6a-b919360f1ec5.png

d99a21c9-54be-417a-b6d9-87f1b8fc67c8.png

元素的属性

57d37c30-1019-42e6-b4c0-2991487fd559.png

  • 属性名(attribute name):其数量和作用都是 HTML 给定的。
  • 属性值(attribute value):属性对应的值,建议使用一对双引号进行包裹。

同一元素允许多个不同属性。

HTML头部

  1. head元素

    • 定义页面标题

      <title>Document</title>

    • 定义所有相对URL的根URL

      一个HTML页面只能定义一个base元素,如果定义一个,则只有第一个生效

      <base target="_blank" href="http://www.example.com/">

    • 定义HTML页面引入外部资源

      <link href="link-element-example.css" rel="stylesheet">

      引入外部图标文件

      <link rel="icon" href="favicon.ico">

    • css样式,一般称为内嵌样式表

      <style type="text/css">
          body {
            color:red;
          }
      </style> 
    • 定义元数据信息

      <meta charset="UTF-8">
    • 可执行脚本

      <script type="text/javascript">
          console.log('打印一个测试信息.');
      </script>
  2. meta

    • 为搜索引擎定义关键词:

      <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    • 为网页定义描述内容:

      <meta name="description" content="Free Web tutorials on HTML and CSS">
    • 定义网页作者:

      <meta name="author" content="KingJ">
    • 每30秒中刷新当前页:

      <meta http-equiv="refresh" content="30">
    • HTML5 版本定义编码格式:

      <meta charset="UTF-8">
    • 定义 HTML 页面的视口:

      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3. 注释

    <!-- -->

CSS概述

CSS 是个缩写形式,其全称为 Cascading Style Sheets,翻译成中文的含义为层叠样式表

如何使用

  • 内联样式
  • 内嵌样式表
  • 外联样式表

内联样式

<div style="color: lightcoral;">这是测试内容.</div>

c25f627c-5ec7-49f2-8a82-d441ef2c6fbd.png

优点缺点
简单、直接强耦合,不能实现网页的内容和样式的有效分离
不同元素设置相同css,导致冗余代码

内嵌样式表

<style type="text/css">
    p {
        color: lightcoral;
        font-size: 24px;
    }
</style>
优点缺点
使网页的内容和样式有效的分离如果存在大量样式,导致HTML文件很大
为不同元素设置相同样式,只需要定义一次代码

外联样式表

引入外部css文件

<link rel="stylesheet" href="style/demo.css">

  • rel 属性:用来定义引入文件与当前 HTML 页面的关系,该属性值必须是链接类型值
  • href 属性:用来定义引入文件的 URL。

一个 HTML 页面允许引入多个 CSS 文件,多个 CSS 文件的加载顺序按照 HTML 页面引入的顺序进行加载。

加载过程

  1. 加载HTML并解析
  2. 析到 <link> 元素引入的 CSS 文件,并通过 href 属性读取到 CSS 文件的路径。
  3. 根据读取的路径,开始加载 CSS 文件并进行解析。

语法

e0a990bd-459e-47d5-814a-2c9abf15cb26.png

注释

859610c3-fffb-4560-a0e3-2a690a05e701.png