୯Aliza୬

博客园 首页 新随笔 联系 订阅 管理
  3 随笔 :: 0 文章 :: 0 评论 :: 103 阅读
前端学习：html篇+CSS（连载中）

本笔记根据B站up主“黑马前端”的视频（BV14J4114768）配套食用

HTML简介（p3）

了解网页的基本组成
什么是HTML
说出常用的浏览器
能够说出Web标准的三大组成部分

网页的基本概念（p4）

HTML 超文本标记语言（Hyper Text Markup Languague）用来描述网页的一种语言，是标记语。（却别与编程语言）。
超文本 = 超链接+多元素

每一个网页就是一个html文件，每个网站都拥有多个网页。

常用浏览器+其内核（p5）

常用浏览器 Firefox,Chrome,Safari,Opera,IE,Edge

浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式兵器显示界面

Web标准（p6）

Web 标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

为什么需要Web标准

浏览器不同，页面或者排版有差异，WEB标准可以便利读者使用。

标准构成

结构：网页元素进行整理分类 html
表现： 排版梅花，外观样式 CSS
行为： 交互 javascript

html 标签（上） （p7）

学习主要内容

书写规范
HTML 骨架标签
开发工具
常用标签
注释+特殊字符

<html>
    <head></head>
</html>
//并列关系，一般来说标签都是双标签，但也有单标签
<br />
//单标签

一些基本标签的意义以及html骨架（p8）（p9）

<html> 
    <head>
        <title>页面标签名
        </title>
    </head>
    <body>页面内容</body>
</html>

VSCode工具创建页面（p10）

主用VSCode,一些快捷键：
创建文件为html文件后，可以在头位置写一个!符来快速构建html文件框架（即上图的html编码）
Ctrl + +/-可以放大缩小视图
可以通过左导航栏的对应文件右键->从文件夹中打开

vscode插件的安装和使用（p11）

新增标签（在使用vscode时自动生成框架（！）出现的几个tag）（p11）

采用最新的html版本来显示网页 当前文档的显示语言，en为英文网页。zh-CN定义语言为中文，和en对立，但无论如何定义，中英文都可以同步输入，对某些浏览器有作用，可以让浏览器判断需不需要翻译。 UTF-8称为万国码，有这一句话就可以显示大部分的字符，如果不写有可能出现字符的乱码。

HTML常用标签（p12）

根据标签的语义，在核实的地方给一个最为合理的标签，可以使得页面结构更清晰，是标题可以给标题标签，需要段落就给与一个段落标签。

标题标签：（p13）

-

双标签，相当于word的多级标题，标题标签逐级递减。 > 特点：每个标题都独占一行且字体增大加粗

段落标签:（p14）（p15）（p16）

**双标签** 使用段落标签才能在浏览器中把文字分段
**单标签** 强制换行：页面本身只会在写满一行文字才会换行，但这个单标签可以强制换行

基础标签

为文字设置粗体，斜体，下划线，与md文件相似，但通过标签来确立

标签名 意义 是否双标签(T:YES)
"strong/b" 字体加粗 T
"em/i" 字体倾斜 T
"del/s" 删除线 T
"ins/u" 下划线 T

表格中所有的前一个标签的强调性更强。

<div>和<span>标签

两个标签没有语义，更多属于一个器皿（视频成为盒子），用于装内容。

<div>

可以看作一个大盒子，这个盒子单独占一行，但对列没有要求

<span>

看作小盒子，也是单独占一行

图像标签和路径（⭐）

<img>

用于定义html页面中的图像。

补充：在vscode使用叹号+tab无法唤出模板

(解决方式)[https://blog.csdn.net/qq_52276628/article/details/125688809] 引用该文章。这个问题应该是大部分新版本的通病，而且大多数都是文中第三个问题。

html 常用案例：体育新闻案例（略）（p16）

文本格式化标签（p17）

基础标签

为文字设置粗体，斜体，下划线，与md文件相似，但通过标签来确立

标签名 意义 是否双标签(T:YES)
"strong/b" 字体加粗 T
"em/i" 字体倾斜 T
"del/s" 删除线 T
"ins/u" 下划线 T

表格中所有的前一个标签的强调性更强。

<div>和<span>标签

两个标签没有语义，更多属于一个器皿（视频成为盒子），用于装内容。

<div>

可以看作一个大盒子，这个盒子单独占一行，但对列没有要求

<span>

看作小盒子，也是单独占一行

图像标签和路径（⭐）

<img>

用于定义html页面中的图像。

<img src="URL" alt="character">

当图片无法显示时，alt标签中的字符内容可以替换图片显示

<img src="URL" title="character">

鼠标经过图象时，会在鼠标旁边标注title标签中的字符

<img src="URL" alt="character" width="500" highth="500" border="100">

对于图片的高度宽度进行修改。但一般来说只改高或宽一个属性，再用等比例缩放修改图像。(highth,width)
图片的边框border的粗细。用数据修改（这三个属性单位都为像素）

总结

以上给予的附加标签，alt,title,highth,width,border,都必须在标签img之后，但这几个属性本身没有优先。src必须存在，且放在img之后，属性之前

路径

目录文件夹和根目录

图片等文件放在同一个文件夹中才能便于管理，所以出现的目录文件夹和根目录的讲究
目录文件夹就是普通文件夹，只是所有的素材都按一定顺序保存在此，根目录就是打开目录文件夹的第一层

路径

相对路径：以图片相对于html页面的位置为参考

名称 符号 说明
同一级路径 空
上一级路径 ../ 上一级路径指的是：包裹这个html文件的上一个文件中有图片并使用他
下一级路径 / 与上一级相反

和电脑命操作方式相似

绝对路径
与相对路径区分，用\，以盘符为开头。或者以http在网上拿取网站

超链接标签（p28）

语法格式

<a href="跳转目标" target="c=窗口的弹出方式">文本或图像</a>

a = archor 锚

属性（target="——"） 作用
href 指定连接目标的url地址，使该标签有超链接的功能通过使用不同的内(使用herf="#名字"，在要被转到的位置的标签给与一个id="名字")外部标签来选择搜索外连接还是调到当前页面的指定位置
target="_" 页面的打开方式，其中 _self 为默认值，_blank 为在新窗口打开方式

示例：

<p>
    <a herf="#live">
        点击这个按钮：
    </a>
</p>

<h1 id="live">
    会直达这个标签所在的位置
</h2>

注释标签！！！

格式

<!-- 注释 -->

快捷键 crtl + /
注释有多重要不用多说了

特殊字符

特殊字符 字符代码
(空格) &nbsp;
< &lt;
> &gt;
& &amp;
（人民币符） &yen;
（版权符） &copy;
（注册商标） &reg;
（摄氏度符） &deg;
正负号 &plusmn;
* &times;
/ &divide;
平方 &sup2;
立方 &sup3;

用法，在文段中需要特殊字符时直接输入以上字符代码

html标签下（p31-35）

表格标签

    <table>
        <tr>
            <th>第一号数据</th>
            <th>第二号数据</th>
            <th>第三号数据</th>
        </tr>
        <tr>
            <td>第四号数据</td>
            <td>第五号数据</td>
            <td>第五号数据</td>
        </tr>
    </table>
</body>
</html>
<!-- 表格的基本框架，每个tr占1行，这个行全是td/th，且th是表头标签，这个标签内的文字居中加粗显示 -->

表格属性：一般通过css设置，但单词作为关键字，html和css都会使用(p36)

属性 选择 用法
aligh left,center,right 表格对于页面对齐方式，写在table标签内
border 1或（void） 是否给表格写入边框
cellpadding 像素值 规定边框与文字间的距离
cellspacing 像素值 边框间空隙大小
width/highth 像素值 同图片

表格结构标签(p37)

<thead>
    <!-- 表格头部区域 -->
<tbody>
    <!-- 表格身体区域 -->

合并单元格

  1. 合并单元格方式
    跨行合并： rowspan=“合并单元格数”
    跨列合并：colspan=“合并单元格数”
  2. 找到目标单元格，写上合并方式 = 合并的单元格数量。

列表标签

列表：整齐，整洁

无序列表（重点）

<body>
<ul>
    <li>榴莲</li>
    <li>榴莲</li>
    <li>罐头</li>

</ul>
</body>

注：ul的下一级标签只能有li标签，但li标签的下一级标签没有特殊要求

有序列表

<ol> 和ul相似;要求也相似，li。

自定义列表

<dl>父类</dl>
<dd>子1</dd>
<dd>子2</dd>
<dd>子3</dd>

表单标签

目的：收集用户信息
用户填写的内容：表单控件

表单域

在HTML标签中,

标签用于定于表单域，以实现用户信息的收集与传递

action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get或者post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域

表单元素（p49）

input

<input type="属性值">

<!-- 示例 -->
<form>
用户名:<input type="text" value="输入用户名">
密码:<input type="password" maxlength="数字">
<!-- password框密码不可见 -->
性别:男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex"
value="女"> 
<!-- radio 单选按钮（圆形），实现多选 需要单选时，属性name="名字"，锁定一个-->
爱好：吃饭<input type="checkbox">
<!-- checkbox 复选（矩形） 可以实现多选 -->
睡觉<input type="checkbox" 
checked="checked">
<!-- value属性：上交文本框中的内容 -->
<!-- checked属性：进入后默认勾选 -->
<!-- maxlength=“正整数”规定输入字段中的字符的最大长度 -->
</form>

label标签

<label for="text">用户名<label>
<input type="text" id="text">

CSS学习

选择器+多条声明。

<head>
     <style>
     /*<!--只能再style里面写CSS--> */
        p {/* 要对什么标签进行修改 */
            color:red;
            font-size:13px;
        }
    </style>
</head>
<!-- 这样设置会使得p标签内的字体变成红色 -->

CSS一般都在里设置

CSS 代码风格

选择器(p)要和括号有一个空格
属性每个写完加英文分号+每个属性独占一行

选择器的作用（p65）

根据不同需求把不同的标签选出来

类选择器（最常用选择器）

可以选择某几个标签进行改变,选择的标签要附加一个class="类名"的属性来改变属性

<style>
.red {
    /* 类名red */
    color: red;
}
</style>
<!-- 样式点定义，结构类调用 -->

注意：

  • 不要使用一些已经存在的系统标签名作为类名
  • 长名字可以用中横线来作为命名字符
  • 不要使用纯数字 中文等命名

CSS基础选择器案例

练习目标：

类选择器的使用
div的使用

<head>
<style>
    .red {
        width:100px;
        height:100px;
        background-color:black;
        color:red;
    }
    .font35{
        font-size:35px;
    }
</style>
</head>

<body>
<div class="red font35">114514</div>
<!-- 多类名的知识:类名都写再class内，名字间有空格 -->
</body>

类选择器-多类名

我们可以给一个标签指定多个类名

多类名使用方式
好处

注意

  • class里面类与类之间要分开一个空格的位置

类选择器 id选择器

id选择器可以为标有特定id选择器HTML元素的指定特定的样式
样式#定义，调用id
id选择器只能调用一次，一旦调用了首次，下面就无法再调用

#id{
    属性1：属性值;
}

id选择器一般用再页面的唯一性元素中，常与JavaScript共同使用

通配符选择器

使用*定义，他表示选取页面中的所有元素，名字只有 *，因为如果写出这个选择器的话，所有的网页都会带有这种属性

CSS字体属性

字体风格

P{font-family:'微软雅黑',Times,serif};

即利用font-family属性改变字体，可以写多个字体跟在font-family后面，系统就会检查字体第一个字体是否存在，不存在检查第二个字体。以此类推

字体大小（已学，就是font-size）

字体粗细（font-weight）（p75）

normal:正常的字体
bold:粗体
bolder:特粗体
lighter:细体
number（0-∞）:400->normal;700->bold;

一般来说使用number来提供文字粗细，而且数字后面不要单位。

posted on   ୯Aliza୬  阅读(39)  评论(0)  编辑  收藏  举报
相关博文：
· JAVA SE 以及学前准备笔记（连载中）
· HTML+CSS
· 前端基础学习1 | Web、Html、CSS
· Web之html、css
· HTML & CSS 学习总结
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae