Day_01_Web前端学习Day_01_Web前端学习 HTML 与 CSS基础知识，主要的标签、作用，属性以及使用时

Day_01_Web前端学习

HTML基础知识

HTML概念

HTML（HyperText Markup Language）：超文本标记语言 | 负责定义网页的结构（网页结构布局）

HTML界面结构

HTML文档的基本结构

<!DOCTYPE html>：声明文档类型，告诉浏览器该文档是按照HTML标准编写的

<html>根元素：HTML文档的根元素，所有其他元素都包含在这个标签内部

<head>头部信息：用于提供关于HTML文档的元信息，如字符编码、页面描述等

<body>标签包含网页的主要内容，如标题、段落、图像、链接、表单等。用户在浏览器中看到的所有可见内容都位于这个标签内

<title>标签定义HTML文档的标题，这个标题通常显示在浏览器的标题栏或标签页上

常用标签

文本类标签

<h1> 至 <h6>：用于创建不同级别的标题，<h1>是最高级别的标题，而<h6>是最低级别的标题

<p>：用于定义文本段落

媒体类标签

<audio>：用于嵌入音频内容，可以指定多个音频源，浏览器将使用它支持的第一个进行播放

<video>：用于嵌入视频内容，同样可以指定多个视频源以确保兼容性，这些标签支持一系列属性，如controls（显示播放控制界面）

链接与强调标签

超链接标签：在HTML中，链接是通过<a>标签创建的，用于从一个页面导航到另一个页面或在当前页面的不同部分之间跳转。<a>标签的href属性用于指定链接的目标URL（路径）

格式 : <a href="..." target="...">央视网</a>

属性 : href：指定资源访问的url；target：指定在何处打开资源链接；_self：默认值，在当前页面打开；_blank：在空白页面打开（新页面）

<strong> 和 <b>：用于设置文本为粗体

<em> 和 <i>：用于设置文本为斜体

其他标签

<s> 和 <del>：用于给文本添加删除线

<u> 和 <ins>：定义下划线文本

img标签：<img> 标签是一个独立的、空的 HTML 元素，用于在网页中嵌入图像。它不需要结束标签，因为它是自闭合的。<img> 标签属于行内元素，通常用于在文本流中插入图像，并且可以设置多种属性来控制图像的显示

重要属性

src属性：该属性用于指定图像的来源，它可以是图像文件的绝对路径或相对路径。如果省略了src属性，图像将不会显示在网页上。相对路径是相对于当前页面的路径，而绝对路径则是完整的URL，包括协议和域名。在编写HTML代码时，通常推荐使用相对路径，因为这样更灵活，即使页面迁移到不同的域名或子目录下，图像路径仍然有效

alt属性：当图像无法显示时（例如，图像文件丢失、网络故障或者用户使用的辅助技术，如屏幕阅读器），alt属性中的文本会被显示出来。这对于可访问性非常重要

width和height属性：可以用来指定图像的宽度和高度。这有助于浏览器在图像加载之前为图像预留空间，从而避免页面布局在图像加载时发生跳跃，一般只要设置其中一种即可，使得图片不容易变形

实体字符

一些特殊字符已经被html文档使用了，具体特点含义，例如 <标签> 其中 < ， > 已经被使用了，如果想输出类似这样的字符就必须使用转义实体字符

小于号（ < ) < 大于号（ > ) > 双引号（ " ) "（双引号）单引号（ ' ) '（单引号）和号（ & ）& 版权符号（ © ）© 注册商标符号（ ® ）® 非断行空格（）   人民币符号( ¥ ) ¥

<span>：用于对文本的一部分进行样式设置，它本身不带任何默认的视觉样式 | 是一个行内元素（inline element），它不会导致换行，通常用于包裹一小段文本或行内内容

<div>：（division）是一个块级元素（block-level element），它会在页面上独占一行，并且可以包含其他块级元素和行内元素

无语义标签：是一个在开发网页时大量会用到的没有语义的布局标签，特点是一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

分隔符标签

<br>：用于插入一个换行符

<hr>：用于创建一个水平线

盒子模型

组成

内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

概念

盒子模型：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

标准盒子

怪异盒子

版心居中

首先用一个div标签包裹住想要居中内容部分，然后给这个div设置宽高（无宽高无法设置margin属性），最后使用margin属性使得div标签居中（margin属性第一个属性值必须为0，居中才能生效）

表格

<table>标签：代表整个表格
border="1px"属性：设置每个单元格的边框线和整个表格边框线
style="border-collapse：collapse;"设置表格和单元格边框线合并
tr:table row代表表格的每一行
th：table header，列标题单元格，特点：加粗，居中
td：table data，数据单元格

表单

表单：<form>作用，有能力采集用户输入的数据给到服务器，通过点击<form>标签里面的提交按钮才会提交给服务器
      action="www.baidu.com" 设置服务器端地址
      method="get或post"设置提交数据方式
   get:明文提交，提交数据效果："www.baidu.com/?username=a… ，特点：key=value，多个请求数据使用&符号隔开，表单项name作为key，用户输入的数据作为value，缺点：不安全，路径传递数据有大小限制，不适合传输较大和敏感数据，不同浏览器限制传输数据的大小不同
   post：非明文提交，但是可以通过抓包看到，特点：是通过请求体key=value格式传递给服务器端，没有数据大小限制，适合传输较大和敏感数据表单项：<input type="text" name="username"> 。type="text"单行文本框， name="username"给当前输入数据的输入框定义名称，用于提交给服务器端数据的名称，如果不设置无法提交数据给服务器。type="password"密码框，输入数据的时候是加密的，只能看到* type="submit"提交按钮，操作表单数据提交给服务器。placeholder="请输入密码"当没有输入数据的时候的提示语