前端HTML（第一篇+入门级）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>老高教程(https://blog.csdn.net/m0_64192735?spm=1000.2115.3001.5343)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

1.4 编辑器

常见的前端使用的编辑器

1.4.1 编辑器的几个插件

Chinese (Simplified) Language Pack for
Auto Rename Tag（自动重命名标签）
AutoFileName（自动补全文件名）
open in browser（浏览器打开）
vscode-icons（文件图标）
live server(服务器路径打开)

1.4.2 编辑器的使用

使用vscode打开练习文件夹的方式
- 在菜单栏中，文件--》打开文件夹
- 打开vscode编辑器后，用鼠标按住想要打开的文件夹，直接拖拽到vscode窗口
- 鼠标选中想要打开的文件夹，点击鼠标右键，选中通code打开
快速生成HTML基本结构
1. 新建一个html后缀的文件
2. !+tab(按下键盘的tab键) 确认输入的是英文状态下的!
快速补充完整标签：
1. 标签名+tab

1.5 标签写法分类

☞ 双标签: 有开始和结束的标签.

  总结:
      1. 如果页面中出现嵌套关系,父元素一定是双标签,子元素可以是双标签或者单标签

☞ 单标签: 只有开始没有结束
  总结:
      1. 单独标签一定不能作为父元素.

单标签

<hr />
<meta />
<img />

双标签

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<h2></h2>
<h3></h3>
<p></p>
<pre></pre>
<div></div>
<span></span>
<a></a>
<ul></ul>
<ol></ol>
<dt></dt>
<dd></dd>
<code></code>
<mark></mark>
<iframe></iframe>

1.6 常用标签

文本标签

<h1> 到 <h6>: 标题标签，用于定义页面中的标题，级别从最高到最低。
- <h1> 是最高级别的标题，一般用于页面的主标题。
- <h6> 是最低级别的标题，用于较小的副标题或次要信息。
<p>: 段落标签，用于定义段落或文本块，每个 <p> 元素独占一行。
<br>: 换行标签，用于在文本中强制换行，是一个空标签，没有闭合标签。
<strong>: 强调标签，用于强调文本，通常显示为粗体。
<em>: 强调标签，用于强调文本，通常显示为斜体。
<span>: 用于对文本进行组合，不会对文本进行语义化，主要用于设置样式或者脚本操作。

链接与图像

<a>: 锚点标签，用于创建超链接，将用户导航到其他页面或同一页面的其他位置。
<img>: 图像标签，用于在网页中插入图像。需要指定图像的来源（src）和替代文本（alt）。

列表

<ul>: 无序列表标签，用于创建项目符号列表。
<ol>: 有序列表标签，用于创建编号列表。
<li>: 列表项标签，用于定义列表中的每一项。

表格

<table>: 表格标签，用于创建表格。
<tr>: 表格行标签，用于定义表格中的行。
<th>: 表头单元格标签，定义表格中的表头单元格。
<td>: 表格数据单元格标签，定义表格中的数据单元格。

表单

<form>: 表单标签，用于创建表单，包含用户输入字段和提交按钮。
<input>: 输入标签，用于在表单中创建输入字段，如文本框、复选框、单选按钮等。
<button>: 按钮标签，用于创建按钮，可以用于提交表单或执行JavaScript函数等。

其他

<div>: 分区或者块标签，用于将文档分割为独立的、不同的部分。
<span>: 行内标签，用于对文本进行行内分组，不会对文档结构产生影响。
<iframe>: 内联框架标签，用于在当前HTML文档中嵌入另一个HTML文档。
<meta>: 元数据标签，用于提供关于HTML文档的元信息，如字符集、作者等。

二、CSS简介

CSS 的主要使用场景就是美化网页,布局页面的.

2.1 css语法规范

<head>
    <style>
        h4 {
             color: blue;
             font-size: 100px;
            }
    </style>
</head>

2.2 选择器介绍

基本选择器

元素选择器
- 格式：element
- 作用：选择指定类型的HTML元素。例如，p选择所有段落元素。
类选择器
- 格式：.class
- 作用：选择具有指定类名的元素。例如，.intro选择所有类名为intro的元素。
ID选择器
- 格式：#id
- 作用：选择具有指定ID的唯一元素。例如，#header选择ID为header的元素。

层级选择器

后代选择器
- 格式：ancestor descendant
- 作用：选择指定祖先元素下的所有后代元素。例如，div p选择所有在div元素内部的p元素。
子元素选择器
- 格式：parent > child
- 作用：选择指定父元素直接子元素。例如，ul > li选择ul下直接的li子元素。
相邻兄弟选择器
- 格式：prev + next
- 作用：选择紧接在指定元素后的同级元素。例如，h1 + p选择紧接在h1元素后的第一个p元素。

属性选择器

属性存在选择器
- 格式：[attr]
- 作用：选择具有指定属性的元素。例如，[target]选择具有target属性的所有元素。
属性值选择器
- 格式：[attr=value]
- 作用：选择具有指定属性和值的元素。例如，[type=text]选择type属性值为text的所有元素。

伪类选择器

链接伪类选择器
- 格式：:link, :visited
- 作用：分别选择未访问过和已访问过的链接。
伪元素选择器
- 格式：::before, ::after
- 作用：向元素的内容前或后插入虚拟元素，可以通过CSS样式进行修饰。

其他选择器

通用选择器
- 格式：*
- 作用：选择文档中的所有元素。
组合选择器
- 通过将多个选择器组合在一起，以逗号分隔，同时应用相同的样式规则。例如，h1, h2, h3选择所有h1、h2和h3元素。

CSS选择器可以根据需要进行组合和嵌套，以实现对不同HTML元素的精确样式控制。选择器的灵活应用是CSS强大功能之一，它使得可以根据结构、属性、状态等多种条件来定制网页的外观和布局。

2.3 字体样式

字体族（Font Family）

font-family
- 用法：font-family: family-name, generic-family;
- 描述：指定文本的字体系列。可以指定一个或多个字体名称，浏览器会按顺序查找并使用第一个可用的字体。如果字体名称包含空格或特殊字符，需使用引号括起来。通常也可以指定通用字体族，如serif（衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）等。

字体样式（Font Style）

font-style
- 用法：font-style: normal | italic | oblique;
- 描述：指定字体的风格。normal为默认值，italic斜体字体，oblique倾斜字体（类似于斜体但是更偏向于倾斜效果）。

字体大小（Font Size）

font-size
- 用法：font-size: length | percentage | smaller | larger;
- 描述：指定文本的字体大小。可以使用像素(px)、百分比(%)、ems(em)等单位。也可以使用相对值smaller和larger来相对于父元素的字体大小进行调整。

字体粗细（Font Weight）

font-weight
- 用法：font-weight: normal | bold | bolder | lighter | 100-900;
- 描述：指定字体的粗细。常用值有normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细）等，也可以使用数值范围从100到900来指定相应的粗细。

文本修饰（Text Decoration）

text-decoration
- 用法：text-decoration: none | underline | overline | line-through | blink;
- 描述：指定文本的修饰线条。常用的值包括none（无修饰）、underline（下划线）、overline（上划线）、line-through（删除线）等。blink用于创建闪烁的效果，不常用且不被所有浏览器支持。

字体变体（Font Variant）

font-variant
- 用法：font-variant: normal | small-caps;
- 描述：指定字体的变体。normal为默认值，small-caps表示使用小型大写字母。

文本转换（Text Transformation）

text-transform
- 用法：text-transform: none | uppercase | lowercase | capitalize;
- 描述：指定文本的大小写转换。none为默认值，uppercase转换为大写，lowercase转换为小写，capitalize每个单词的首字母大写。

字体颜色（Font Color）

color
- 用法：color: color | transparent;
- 描述：指定文本的颜色。可以使用颜色名称、十六进制值、RGB值或HSL值。例如，color: red;或者color: #ff0000;。

字体对齐（Text Alignment）

text-align
- 用法：text-align: left | right | center | justify;
- 描述：指定文本的对齐方式。常用的值包括left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐）。

行高（Line Height）

line-height
- 用法：line-height: normal | number | length | percentage;
- 描述：指定行高，即行与行之间的垂直间距。可以使用数字、长度单位或百分比来定义行高。

2.3 css写法

1. 内联样式（Inline Styles）

内联样式是直接应用于单个 HTML 元素的样式，通过 style 属性指定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Style Example</title>
</head>
<body>
    <div style="color: red; font-size: 16px;">这是一个内联样式的示例。</div>
</body>
</html>

2. 内部样式表（Internal Styles）

内部样式表位于 <style> 标签内部，放置在 HTML 文档的 <head> 部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal Style Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
            margin-bottom: 20px;
        }
        p {
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>内部样式表示例</h1>
    <p>这是一个使用内部样式表的段落。</p>
</body>
</html>

3. 外部样式表（External Styles）

外部样式表是单独的 .css 文件，通过 <link> 元素引用到 HTML 文档中。

styles.css:

/* styles.css */
body {
    font-family: Arial, sans-serif;
}
h1 {
    color: green;
    margin-bottom: 20px;
}
p {
    font-size: 16px;
    line-height: 1.6;
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External Style Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>外部样式表示例</h1>
    <p>这是一个使用外部样式表的段落。</p>
</body>
</html>

这三种方式分别适用于不同的场景和需求，通常推荐优先使用外部样式表，以提高代码的可维护性和可复用性。