一位前端新人学习 HTML 和 CSS 的总结笔记

站长

2023年03月01日 19:12 · 阅读数 80

引言

我对象最近正在学前端的知识，由于我有写博客的习惯，所以她也会抽时间写一写。

虽然她写的不怎么样，内容没什么干货、文笔也不怎么好、样式排版也不怎么美观。

但是我还是想和大家分享一下，这篇由一位前端新人写的 HTML和CSS总结笔记 。当然，我已经对文章内容做了一些美化了，还是尽可能让大家看的舒服一些。等你读完这篇文章，看能不能让你想起自己刚学IT时的样子？

前段时间拍的照片，现在在学前端基础知识🤡

下面是她的总结笔记正文。

1. 介绍

如果要我来介绍一下HTML、CSS和JavaScript的关系，那么我觉得HTML就是一只刚出生的小鸟，没有羽毛，仅有鸟的骨架，CSS就是长出五彩斑斓的羽毛的小鸟，而之后要学习的JavaScript就是可以自由飞翔的小鸟。

用专业点的话来说就是：HTML负责结构标准，主要用于对网页元素进行整理和分类；CSS负责表现标准，用于设置网页的样式，包括颜色，大小等外观属性；JavaScript负责行为标准，主要用于对网页模式的定义及交互的编写。

2. HTML

HTML(Hyper Text Markup Language)，中文翻译是超文本标记语言，HTML语言不区分大小写，一般统一使用小写字母。

2.1 HTML骨架格式

在 VSCode 里面创建一个.html文件，然后敲一个英文感叹号，再回车一下就可以得到一份完整的骨架模板，然后在body里面写HTML语言，实现骨架即可。

<!-- 文档类型声明：告诉浏览器网页的HTML版本 -->
<!DOCTYPE html>
<!-- HTML语言类型："en":英语；"zh-CN":中文 -->
<html lang="en">
    <!-- 网站头部 -->
<head>
    <!-- 字符集：UTF-8表万国码，可现实登记在册的国家语言 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网站描述 -->
    <meta name="description" content="">
    <!-- 网站关键字 -->
    <meta name="keywords" content="">
    <!-- 网站标题 -->
    <title>Document</title>
</head>
<!-- 网站内容 -->
<body>
    
</body>
</html>

HTML的head部分最重要的是SEO三大标签，分别是title，description和keywords，一看这三个部分，就可以知道当前网站主要功能。

2.2 HTML常用标签

标题标签h(h1~h6)
段落标签p，可以把 HTML 文档分割为若干段落
水平线标签hr（单标签）
换行标签br（单标签）
div和span标签，是没有语义的，是我们网页布局最主要的2个盒子。

2.3 文字排版标签

b和strong 文字以粗体显示
i和em 文字以斜体显示
s和del 文字以加删除线显示
u和ins 文字以加下划线显示

2.4 表格

表格可以清晰简约的将繁杂的数据内容表现的很有条理。

<table>
  <caption>我是表格标题</caption>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table用于定义一个表格标签
caption标签用于表格标题
tr标签用于定义表格中的行
td用于定义表格中的单元格

2.5 列表

ul标签中只能嵌套li标签，li标签是双标签，中间可以容纳所有元素。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

2.6 表单

表单即网站的登录、注册等需要提交内容的界面，目的是为了收集用户的信息。

表单控件包含了具体的表单功能项，如单行文本输入框、文本域、密码输入框、单选框、复选框、提交按钮、重置按钮等。

<input type="属性值" value="加油">

属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

3. CSS

CSS（cascading style sheet），中文翻译是层叠样式表，它的功能是美化网页。

为什么要美化网页？~~这不是废话吗？都什么年代了~~

让网页变得漂亮，吸引客户
提高用户体验
凸显页面主题

3.1 CSS的三种导入方式

外部样式：单独为样式表建立CSS文件，通过link标签引用；
内部样式：在HTML的head部分写style标签，在style标签中写样式；
导入式：是CSS2.1特有的。

代码样例如下：

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    
    <!--外部样式-->
    <link rel="stylesheet" href="CSS/style.CSS" />
    <!--导入式-->
    <style>
        @import url("CSS/style.CSS");
    </style>
</head>
<body>
	<h1 style="color: red">这是标签</h1>
</body>
</HTML>

3.2 选择器

基本选择器

标签选择器：选择一类标签 标签{}
类选择器class：选择所有class一直的标签 .类名{}
id选择器：全局唯一 #id名{}

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器样式 */
        h1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 类选择器样式 */
        .class{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        /* id选择器样式 */
        #id{
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>这是一个标签选择器</h1>

    <div class="class">这是一个类选择器</div>

    <div id="id">这是一个id选择器</div>
</body>
</HTML>

层次选择器

后代选择器：包括孙代，选择器中可以任意嵌套选择器
子代选择器：一代选择器，选择器中的第一代选择器
并集选择器：同时选择多组标签，设置相同样式 选择器1，选择器2{CSS}
交集选择器：选择带有最多特点的标签
伪类选择器：选中鼠标悬停在元素上的状态，设置样式 选择器：hover{CSS}
通用选择器：所有选择器都会生效的样式 *{CSS}

3.4 字体样式

一般用p标签和span标签将要突出的字包裹起来

font-size：字体大小
font-family：字体类型
font-weight：字体粗细

3.5 文本样式

颜色：color: rgba(0,0,0,0.8)，三个参数分别是红、绿、蓝和透明度
文本对齐样式：text-align: center
首行缩进：text-indent: 2em
行高：line-height: 300px
下划线：text-decoration: unberline
文本图片水平对齐：vertical-align: middle

span{
    /* display,将元素换一种类型显示 */
    display: block;
    width: 200px;
    height: 200px;
    background-color: pink;
    font-size: 20px;
    font-family: 微软雅黑;
    font-weight: 700;
    text-indent: 2em;
    color: skyblue;
    line-height: 100px;
    text-decoration: underline;
}

3.6 盒子模型

将同一块的内容装到同一样式同一进行样式设置，有div，span标签

属性：

margin：外边距可以实现文本居中
padding：内边距
border：边框

<style>
	span{
        /* display,将元素换一种类型显示 */
        display: block;
        width: 200px;
        height: 200px;
        background-color: pink;
        font-size: 20px;
        font-family: 微软雅黑;
        font-weight: 700;
        text-indent: 2em;
        color: skyblue;
        line-height: 100px;
        text-decoration: underline;
        padding:20px;
        padding: 80px;
        border: 5px solid red;
        /* 圆角样式 */
        border-radius: 20px;
    }
</style>
<body>
    <span>我爱中国</span>
</body>

字体样式、文本样式和盒子样式共同组成的图形：

一位前端新人学习 HTML 和 CSS 的总结笔记

3.7 网页布局

标准流：

块级元素独占一行——垂直布局

行内元素/行内块元素一行显示多个——水平布局
浮动：float：left 可以让原本垂直布局的块级元素变成水平布局（垂直变水平）
定位：（盒子叠盒子）定位显示在最上层

可以让元素自由摆放在网页的任意位置

一般用于盒子之间的层叠情况

4. 总结

本来计划一周学完内容，硬是被自己的懒惰、摆烂花了11天，学完之后，能做一些东西还是很有收获的。

期待下一阶段的学习！

转载自:https://juejin.cn/post/7205144461922533432