当前位置：首页 > news >正文

【黑马JavaWeb+AI知识梳理】前端Web基础01 - HTML+CSS

news 来源：原创 2025/4/27 14:10:39

Web标准

网页标准，由一系列标准组成，大部分由W3C（World Wide Web Consortium）负责指定
- HTML：结构（页面元素和内容）
- CSS：表现（页面元素的外观、位置等页面样式）
- JavaScript：行为（交互效果）

Web前端基础

HTML（结构）

HTML（HyperText Markup Language）：超文本标记语言，[官方文档](HTML（超文本标记语言） | MDN)
- 超文本：超越文本限制，比文本强大，可以定义图片、音频视频等
- 标记语言：由标签"<标签名>"构成的语言
  - HTML标签都是预定义好的。例如：使用
    展示标题，使用展示图片，使用展示视频。
  - HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

基本骨架

<html><head></head><body></body>
</html>

标签特点：不分大小写，但建议小写。属性值单引号双引号都可以，建议双引号

常见标签：

标题标签：
-
<br>、<p>
<strong>、<em>、<ins>、<del>

超链接标签：

<!-- a 超链接标签：1. href: 超链接的地址，即点击超链接后跳转到的网页地址。2. target: 超链接的打开方式_blank 表示在新窗口中打开链接。_self 表示在当前窗口中打开链接（默认）。 -->

颜色表示形式，属性：color
- 关键字：颜色英文单词
- rgb表示法：rgb(r, g, b)
- rgba表示法：rgba(r, g, b, a)
- 十六进制表示法：#rrggbb

图片、音视频：img、audio、video + 路径
<div>、<span>
表格标签：
- <table>、<thead>、<tbody>
- <tr> / <th>、<td>

表单标签：

<!-- form表单 ：action: 表单提交的目标地址，即提交数据的处理程序。method: 表单提交的方式，常用的有GET和POST两种方式。GET: 将数据附加在URL后面，适用于获取数据，大小有限制。POST: 将数据放在请求体中，适用于提交数据，大小没有限制。注意：表单项必须有name属性才可以提交
-->

表单项：
- <input>
- <select>
- <textarea>

CSS（样式）

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面样式（表现）。
CSS引入方式：
- 行内样式：写在标签的style属性中（配合JavaScripts使用）
```
<span style="color: gray;">2024年05月15日 20:07</span>
```
- 内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
  
  仅考虑当前页面
```
span {color: gray;
}
```
- 外部样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
  
  考虑复用
```
span {color: gray;
}
<link rel="stylesheet" href="css/news.css">
```
CSS选择器是用来选取需要设置样式的元素（标签）的。

选择器写法实例
元素选择器元素名称{…} h1{…}
类选择器 .class属性值{…} .cls{…}
id选择器 #id属性值{…} #hid{…}
优先级：id > 类 > 元素

分组选择器、属性选择器、后代选择器
盒子模型：控制元素尺寸、内边距、边框、外边框等，控制页面的布局展示
flex布局：一维布局模型