HTML概述

第一个HTML页面

创建

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

结构

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

html基本结构

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

HTML标签

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

注意：

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

开始标签与结束标签

元素的属性

属性名（attribute name）：其数量和作用都是 HTML 给定的。
属性值（attribute value）：属性对应的值，建议使用一对双引号进行包裹。

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

HTML头部

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样式，一般称为内嵌样式表
  1
  2
  3
  4
  5
  <style type="text/css">
  body {
  color:red;
  }
  </style>
- 定义元数据信息
  1
  <meta charset="UTF-8">
- 可执行脚本
  1
  2
  3
  <script type="text/javascript">
  console.log('打印一个测试信息.');
  </script>

CSS概述

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

如何使用

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

内联样式

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

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

内嵌样式表

<style type="text/css">
    p {
        color: lightcoral;
        font-size: 24px;
    }
</style>

优点	缺点
使网页的内容和样式有效的分离	如果存在大量样式，导致HTML文件很大
为不同元素设置相同样式，只需要定义一次代码