一、HTML简介

<!DOCTYPE html> 声明为 HTML5 文档
<html>元素是 HTML 页面的根元素
<head>元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容
<h1>元素定义一个大标题
<p>元素定义一个段落

HTML标签的准则

标签是由尖括号包围的关键词，标签成对存在，第一个开始第二个结束

HTML元素的语法

开始标签起始，结束标签终止；
某些HTML元素具有空内容；
大多数元素可以拥有属性；

HTML属性

属性可以在元素中添加附加信息；
属性总是以名称/值对的形式出现；
属性值始终被包括在引号内；
class:为元素定义一个或者多个类名；
Id：定义元素唯一的id;
style:规定元素的行内样式；
title:描述了元素的额外信息；
<hr>下划线<br>段落中换行

HTML链接

文本链接：<a href="http:">访问网站</a>
图像链接:<a href="http">
         <img decoding="async" src="example.jpg" alt="示例图片">
         </a>

HTML区块

大多数元素定义为块级元素和内联元素
内联元素在显示时候不会以新的行开始<b>、<td>、<img>;
<div>元素是块级元素，用于组合其他的HTML元素的容器；
<span>元素是内联元素，可作文本的容器

HTML表格

表格由< table > 标签来定义；是用来展示结构化数据的标记语言元素

tr:表示表格的一行；
td：表示表格的数据单元格
th:表示表格的表头单元格

示例代码：

<table border="1">
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>

结果如下：

HTML框架

通过使用框架，可以在同一个浏览器窗口显示不止一个页面：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

结果如下：

可根据情况调节高度宽度等。

语义化标签

就是让标签有含义，好比让人知道这块是什么部分，而不用再去用其他标签拼凑，用上合适的标签，能使页面有良好的结构，更容易看懂内容是什么，且有利于搜索引擎收录。

address:地址
cite：引用
div：分隔
span：范围
var：变量

二、CSS简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！

简单示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">    
<style>
    body {
        background-color:#d0e4fe;
    }
    h1 {
        color:orange;
        text-align:center;
    }
    p {
        font-family:"Times New Roman";
        font-size:20px;
    }
    </style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>

运行结果

CSS的创建

分为三类：

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link> 标签链接到样式表。 < link > 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

在多重样式优先级中，排序结果如下：内联样式>内部样式>外部样式>浏览器默认样式

CSS选择器

元素选择器（Element Selector）： 通过元素名称选择 HTML 元素。如下代码，p 选择器将选择所有 < p>元素:

p {
  color: blue;
}

类选择器（Class Selector）： 通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头，后面跟着类别名称。

如下代码，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

.highlight {
  background-color: yellow;
}

ID 选择器（ID Selector）： 通过元素的唯一标识符（ID）选择 HTML 元素。 ID 选择器以 # 开头，后面跟着 ID 名称。如下代码，#runoob 选择器将选择具有 ID 为 "runoob" 的元素。

 #runoob {
  width: 200px;
}

属性选择器（Attribute Selector）： 通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 < input> 元素。

input[type="text"] {
  border: 1px solid gray;
}

后代选择器（Descendant Selector）： 通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。

如下代码，div p 选择器将选择所有在 < div> 元素内的 < p> 元素。

div p {
  font-weight: bold;
}

列表属性

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

表格属性

border:简写属性，在一条声明中设置所有边框属性
border-collapse:规定是否应折叠表格边框
border-spacing:规定相邻单元格之间的边框的距离
border-side:规定表格标题的位置
empty-cells:规定是否在表格中的空白单元格上显示边框和背景
table-layout:设置用于表格的布局算法

CSS伪类

以冒号开头，用于选择处于待定状态的元素：

button: hover {
    background: greenye1low;
    color: white;
}

CSS伪元素

以双冒号开头，用于在文档中插入虚构的元素，如：

button::first-letter{
    color:red;
}

伪元素和伪类的区别

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中.
伪类：存在DOM文档中，(无标签,找不到, 只有符合触发条件时才能看到 ), 逻辑上存在但在文档树中却无须标识的“幽灵”分类。

前端基础HTML+CSS