HTML
1.HTML简介
- HTML 指的是超文本标记语言: HyperText Markup Language。
- HTML 是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)。
- HTML 使用标记标签来描述网页。
2.标签
HTML通过一系列的标签（也称为元素）来定义文本，图像，链接等等。HTML是由尖括号 ‘< >’
包围的关键字。
标签通常成对出现，包括开始标签和结束标签（也称为双标签），内容位于这两个标签之间，
例如:
其中：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <a> 定义超文本链接
- <p> 元素定义一个段落
除了双标签，也存在单标签，例如：
常用文本标签
1.<!--....--> 定义注释
2.<a> 标签定义超链接
用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
提示：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
target属性：
- _blank：新窗口打开。
- _parent：在父窗口中打开链接。
- _self：默认，当前页面跳转。
- _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
例如：
3.<h1>——<h6>
<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
4.换行和水平线标签
<br> 换行 （单标签）
<hr> 水平线（单标签）
5.文本格式化标签
6.<img>图像标签
<img> 标签定义 HTML 页面中的图像。
<img> 标签有两个必需的属性：src 和 alt。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
其中属性：
1.alt 规定图像的代替文本。
2.height width 规定图像高度和宽度。
3.src 规定显示图像的 URL。
4.loading :eager：立即加载 lazy：延迟加载
指定浏览器是应立即加载图像还是延迟加载图像。
当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
7.多媒体标签
<audio> 标签定义声音，比如音乐或其他音频流。
目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
其中属性：
1.autoplay 规定音频将在准备就绪后立即开始播放。
2.controls 规定应显示音频控件（例如播放/暂停按钮等）。
3.loop 规定音频将在每次结束后重新开始。
4.src 规定音频文件的 URL。
<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
其中属性：
1.autoplay 规定视频准备就绪后立即开始播放。
2.controls 规定应显示的视频控件（例如播放/暂停按钮等）。
3.height width 设置视频播放器的高度和宽度。
4.loop 规定视频将在每次结束时重新开始。
5.muted 规定应将视频的音频输出静音。
8.列表标签
<ol> 标签定义了一个有序列表. 列表排序以数字来显示。
使用<li>标签来定义列表选项。
其中属性：
1.reserve 指定列表倒序(9,8,7...)
2.start 一个整数值属性，指定了列表编号的起始值。
<ul> 标签定义无序（带项目符号）列表。
使用<li>标签来定义列表选项。
<dl> 标签定义了描述列表（又称定义列表，definition list）。
<dl> 标签与 <dt>标题（定义术语/名称）和 <dd>（描述每个术语/名称）一起使用。
9.表格标签
<table> 标签定义 HTML 表格
一个 HTML 表格包括 <table> 元素，一个或多个<tr> <th> 以及 <td>元素。
<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。
其中属性：
1.align：left center right 规定表格相对周围元素的对齐方式。
2.bgcolor 规定表格的背景颜色。
3.border 规定表格单元是否拥有边框。
4.height width 规定表格的高度和宽度
合并单元格
保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量,
跨行合并，保留最上单元格，添加属性rowspan
跨列合并，保留最左单元格，添加属性 colspan
10.表单标签
<intput>
<input> 标签规定了用户可以在其中输入数据的输入字段。
<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。
输入字段可通过多种方式改变，取决于 type 属性。
其中属性：
1.accept 规定通过文件上传来提交的文件的类型。
2.align: left right top middle bottom 规定图像输入的对齐方式。 (只针对type="image")
3.alt 定义图像输入的替代文本。 (只针对type="image")
4.checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
5.height width 属性规定 <input> 元素的高度，宽度。 (只针对type="image")
6.name 属性规定 <input> 元素的名称。
7.palceholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
8.multiple 属性规定允许用户输入到 <input> 元素的多个值。
（默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能）
下拉菜单
<select> 元素用来创建下拉列表。
<select> 元素中的 <option>标签定义了列表中的可用选项。
其中属性：
1.autofocus 规定在页面加载时下拉列表自动获得焦点。
2.disabled 当该属性为 true 时，会禁用下拉列表。
3.multiple 当该属性为 true 时，可选择多个选项。
4.required 规定用户在提交表单前必须选择一个下拉列表中的选项。
5.number 规定下拉列表中可见选项的数目。
文本域
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
其中属性：
1.cols rows 规定文本区域内可见的宽度和行数。
2.placeholder 规定一个简短的提示，描述文本区域期望的输入值。
3.readonly 规定文本区域为只读。
4.required 规定文本区域是必需的/必填的。
lable标签
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
写法一：
label 标签只包裹内容，不包裹表单控件
设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
（点击男女文字也会选上）
写法二：
使用 label 标签包裹文字和表单控件，不需要属性。
按钮
<button> 标签定义一个按钮。
在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
11.div和span标签
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
<span> 用于对文档中的行内元素进行组合。
div独占一行 span都在一行
CSS入门
1.CSS简介
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 我们可以大大提升网页开发的工作效率！
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
eg:
2.字体
在CSS中，有两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
- 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
Serif 字体中字符在行的末端拥有额外的装饰.
Sans-serif "Sans"是指无 - 这些字体在末端没有额外的装饰.
Monospace 所有的等宽字符具有相同的宽度.
字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本.
- 斜体 - 以斜体字显示的文字.
- 倾斜的文字 - 文字向一边倾斜.
字体大小
font-size 属性设置文本的大小。
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em.
3.CSS 引入方式
内部样式表:学习使用CSS 代码写在 style 标签里面
外部样式表:开发使用CSS 代码写在单独的 CSS 文件中(.css)
在 HTML 使用 link 标签引入<link rel="stylesheet" href="./my.css">
行内样式:配合 JavaScript 使用
外部样式表：
新建css文件
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：
行内样式：
CSS 写在标签的 style 属性值里。
4.选择器
标签和类：
标签选择器:使用标签名作为选择器 >选中同名标签设置相同的样式
例如：p h1, div, a, img..
CSS 类选择器：
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
步骤： 定义类选择器 .类名
使用类选择器 →标签添加 class="类名
注意:
一个类选择器可以供多个标签使用。
一个标签可以使用多个类名，类名之间用空格隔开。
id:
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
场景:id 选择器一般配合JavaScript 使用，很少用来设置CSS 样式
步骤：
定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id="id名
通配符选择器：
作用:查找页面所有标签，设置相同样式。
通配符选择器 : * ，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。
简单样式：
1.文本及字体
前面已有简略介绍，这里不再重复。
2.鼠标样式：
图片内容来源:CSS常用样式_css样式-CSDN博客
3.背景样式:
图片内容来源:CSS常用样式_css样式-CSDN博客
最后总结
HTML相关内容介绍并不全面，对于新手入门个人认为刚刚好。
CSS本次介绍较少，具体内容等下期再进一步介绍。
“路漫漫其修远兮，吾将上下而求索。”
愿你我不忘初心！
