Mao-Design的博客

外观

基础前端

2283字约8分钟

2024-12-02

HTML

  1. HTML标签是由尖括号包围的关键字，例如 <html>
  2. HTML标签通常成对出现，例如<html></html>，我们称之为双标签，这对标签中 <html> 为开始标签，</html> 为结束标签
  3. 有些特殊的标签必须是单个标签（极少情况），例如 <br /> ，我们称之为单标签

双标签关系可以分为两类：包含关系和并列关系

  1. 包含关系

    <div>
	<p></p>
</div>

  2. 并列关系

    <p></p>
<a></a>

每个网页都会有一个基本的结构标签（也称之为骨架标签），页面内容也是在这些基本标签上书写的

HTML网页也被称为HTML文档

网页的基本结构

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <p>Hello,World!</p>
    </body>
</html>
标签名定义说明
<html></html>HTML标签页面中最大的标签，我们称之为根标签
<head></head>文档的头部在head标签中，我们必须要设置的标签是title标签
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体元素包含文档的所有内容，页面内容基本都是放在body标签中的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello,World!</title>
</head>
<body>
    
</body>
</html>
<!DOCTYPE html> 是文档类型声明，作用就是告诉浏览器应该使用那种版本的HTML版本来显示网页
该代码的意思是当前页面采用的是HTML5来显示的页面
<!DOCTYPE html> 在代码的最前面，处于<html>标签之前
<!DOCTYPE html> 不是标签，它是文本类型声明标签
lang语言
<html lang="en">
    
用来定义当前网页显示的语言,也就是相当于提示的作用，提示该网页用的是那个国家的语言来显示的
1.en表示英文
2.zh-CN表示中文
简单来说en表示的是英文网页，zh-CN表示的是中文网站
其实对于文档来说，en可以显示中文内容，zh-CN也可以显示英文
meta标签
<meta charset="UTF-8">

meta标签中的charset属性是用来告诉浏览器，应该使用那种文字编码来显示这个网页
注意：这行代码是必须写的，否则网页可能会出现乱码的情况，一般情况下，统一使用 UTF-8 编码，经量写成统一的 UTF-8 ，不要写成 utf8 或者 UTF8

行内/块元素（标准流）

行内元素

常见的行内元素：a，strong，b，em，i，del，s，ins，u，span，img

特点：

  1. 一行可以显示多个
  2. 不能设置宽高
  3. 默认宽度就是内容本身的宽度
  4. 行内元素只能容纳文本和其它行内元素

块元素

常见的块元素：div，hr，p，h1~h6，ul，ol，dl，form，table

特点：

  1. 可以设置宽高
  2. 默认宽度是100%，也就是父类有多宽，那么块元素就有多宽，就是单独占一行

行内块元素

  1. 可以设置宽高
  2. 默认宽度是内容的宽度，不会单独占用一行

路径

相对路径分类符号说明
同一级目录图像文件和html文件在相同目录下的，例如：<img src="baidu.jpg" />
下一级目录/图像文件在html文件的下一级目录下的，例如：<img src="images/baidu.jpg" />
上一级目录../图像文件在html文件的上一级目录下的，例如：<img src="../baidu.jpg" />

相对路径：就是从项目文件的根目录开始写，例如 images/baidu.jpg ，推荐使用相对路径，这样方便项目移动，以免项目在别的电脑上无法正常运行

绝对路径：就是从磁盘开始写，例如 E:/Demo/images/baidu.jpg

特殊字符

在HTML页面中，有一些特殊字符很难使用，这时候我们就可以使用特殊字符来解决这个问题

重点记住：空格、大于号和小于号这三个，其它特殊字符很少被用到

<!-- 特殊字符:空格 -->
<p>Hello&nbsp;&nbsp;&nbsp;&nbsp;World</p>
<!-- 特殊字符: < > -->
<p>&lt;Hello,World&gt;</p>

CSS

CSS书写顺序

代码风格：

  1. 紧凑型和展开型（推荐展开型）

  2. 样式选择器、属性名以及属性值的关键字都推荐使用小写字母书写（大写字母也可以运行，但是推荐小写），特殊情况除外

  3. 在冒号和属性值之间留一个空格

  4. 选择器和大括号之间也需要一个空格

  5. 内部样式

    <style>
    p {
        color: pink;
    }
</style>

  6. 行内样式

    <p style="color: pink; font-size: 20px;">Hello,World!</p>
    • 行内样式可以控制当前的标签样式
    • 双引号里面的代码写法要符合css规范

  7. 外部样式

    <head>
	<line rel="stylesheet" href="css路径">
</head>

CSS三大特性

层叠性

多个相同的选择器设置相同的样式，会导致样式冲突，而层叠式就是为了解决这个问题的

  1. 就近原则：就是那个css代码离html代码近，就执行那个css代码
  2. 样式不冲突：当有两个相同样式的css代码，则先执行下面的css代码，而不会执行上面的css代码
h1 {
     /* 不执行 */
     color: red;
     /* 执行 */
     background-color: black;
}

h1 {
    /* 执行 */
    color: pink;
}
<body>
    <h1>你好世界</h1>
</body>

继承性

子标签可以继承父标签中的某些样式（例如：可以继承text、font、link开头的元素，还有color元素也可以继承）

body {
    /* font: 字体大小/行高 字体 */
    font: 20px/60px '微软雅黑';

    /* 1.5 表示的是当前字体大小的1.5倍行高 */
    /* 所以当前字体的行高为 30px */
    /* font: 20px/1.5 '微软雅黑'; */
}
<body>
    <p>nih</p>
	<p>shijei</p>
</body>

优先级

选择器相同，则执行层叠性，选择器不同，则根据选择器的权重执行

选择器选择器权重
继承、 *0,0,0,0
元素选择器0,0,0,1
类选择器、伪类选择器0,0,1,0
ID选择器0,1,0,0
行内选择器 style=""1,0,0,0
!important （重要的）最大
/* !important的用法 */
h1 {
    color: pink !important;
}

注意点

1. 继承

body {
    color: aqua;
}

p {
    color: orange;
}
<body>
    <!-- 
	无论父标签的权重有多高
	都不会对子标签生效
	因为对于子标签而言，父标签的样式永远属于继承样式
	所以这里的p显示的是元素选择器（p）中的样式
	-->
    <p>nih</p>
</body>

a标签不会受到继承的影响，因为浏览器默认给a标签设置了样式（蓝色+下划线）

所以在没有设置a标签样式的情况下，继承无法修改a标签的样式；但通配符选择器（*）可以（个人理解：通配符选择器是直接设置所有标签的样式，所以当标签没有设置别的选择器时，则直接显示通配符选择器样式）

2. 权重叠加

权重虽然有叠加，但是不会进位

/* 复合选择器的权重为
.nav类选择器 + p元素选择器 = 0,0,1,0 + 0,0,0,1 = 0,0,1,1
所以优先执行复合选择器的样式
*/
.nav p {
    color: yellow;
}

/* 复合选择器的权重为
body元素选择器 + p元素选择器 = 0,0,0,1 + 0,0,0,1 = 0,0,0,2
所以优先执行复合选择器的样式
*/
body p {
    color: orange;
}

/* 
.nav p: 0,0,1,1
body p: 0,0,0,1
从左往右比较，当比到第三位的时候
.nav p比body p大，所以.nav p比body p大
*/

/* 
所以 .nav p复合选择器 的权重比 body p 的权重高
*/
p {
    color: red;
}
<body>
    <!-- 显示黄色 --> 
    <p>nih</p>
</body>

导入css的三种放法

行内样式

只能控制一个标签

嵌入样式的优先级最高

是直接在要修饰的标签中输入css样式

<p sytle="color: red; font-size: 10px;">嵌入样式</p>

内部样式

只能控制一个页面

内部样式是直接在head标签中创建一个 <style> 标签，然后在该标签中输入css样式

<html>
    <head>
        /* 样式直接写在style标签里面 */
        <styel>
        	p {
            	color: pink;
            }
        </styel>
    </head>
    <body>
        <p>
            你好世界
        </p>
    </body>
</html>

外部样式

能控制多个页面

日常开发中一般使用外联样式

单独创建一个css样式文件，然后在引入到html文件中

<html>
    <head>
        <link rel="stylesheet" href="css的路径">
    </head>
    <body>
        
    </body>
</html>

Emmet语法快速生成HTML

VScode自动格式化代码

打开设置 --> 文本编辑器 --> 格式化 --> Format On Save