前端学习笔记1

前端笔记

2023.3

1. `<meta>`标记

链接常用meta整理 | 菜鸟教程 (runoob.com)

主要用于提供HTML文档的元数据，用于不同移动设备页面调整（全屏、识别邮箱电话号码、添加广告）、SEO优化（搜索引擎优化）、页面相关（编码、站点适配）……

2. url href src 解释

（1）URL : 统一资源定位符（Uniform Resource Locator）,标准资源的地址，分为绝对路径和相对路径。

互联网的每个文件都有一个唯一的URL

包括模式（协议）、服务器名称（IP地址）、路径、文件名

（2） HREF：（Hypertext Reference）指定网络资源位置，定义当前元素/文档和属性所需锚点/资源的关系/链接。

浏览器的页面解析不会暂停。

（建议使用link标签导入样式表）

（3） SRC：（Source）只嵌入当前资源/文档元素定义的位置

浏览器下载，编译，执行文件前页面的加载和处理会被暂停。

（建议把JS文件放到底部加载）

3. margin padding图示

padding : 填充

border : 边缘

margin ：页边空白

4. span div 标签

是一个行内元素，

是一个块元素。

2023.5 2023.6

1. SVG（可缩放矢量图形）

它包含一个 path 属性，该属性允许在不影响图像分辨率的情况下缩放图像。

2. 列表

（1）有序列表

五种排序方式：数字、字母、小写字母、罗马字母、小写罗马字母（样式）

<ol type = “A”>
<!-- A:字母 a:小写字母 I:罗马字母 i:小写罗马字母 默认数字 -->
    <li>第一句</li>
    <li>第二句</li>
    <li>第三句</li>
</ol>

（2）无序列表（带一个圆点）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id = "aa">
            <li>第一句</li>
            <li>第二句</li>
            <li>第三句</li>
            <li>第四句</li>
        </ul>
    </body>
</html>

（3）CSS样式整理

#aa { /* # 散列符号 为ID选择器 */
    list-style: none; /* 无序列表去掉点*/

    display:block; /*块级元素（列显示）*/
    display:inline;  /*行内元素（行显示）*/
    display:flex; /*用flexbox均匀间隔子元素*/
}

3. 选择器 CSS

多元素选择器用英文逗号

（1）后代选择器

又称为包含选择器，可以选择作为某元素后代的元素。

nav > ul 比 nav ul 限定更严格，必须后面的元素只比前面的低一个级别。

h1 em {
    color: red;
}

（2）子元素选择器

只能选择作为某元素子元素的元素。

nav ul选择nav内包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。

h1 > em {
    color: red;
}

（3）#id 选择器

id 选择器为带有指定 id 的元素设置样式。

4. 表单

<form action="……" method="……">
<!-- action属性为表单提交地址url 忽略则为当前界面-->
<!-- method属性规定提交表单所用的HTTP方法 -->
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

（1）method 属性

① GET（默认方法）：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的。

PS ：GET 最适合少量数据的提交。浏览器会设定容量限制。

② POST ：如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

（2）
组合表单数据

元素组合表单中的相关数据

元素为

元素定义标题。

<fieldset class="question" name="2">
              <legend>2</legend>
              <ul class="answers-list">
                <li></li>
                <li></li>
              </ul>
</fieldset>

（3）元素与 type属性

元素是最重要的表单元素。

关于：输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)

type属性：（还有很多……见链接）

通过更改value属性来更改其中的值

① text : 定义常规文本输入

② radio : 定义单选按钮输入

③ submit ：定义提交按钮

5. section 元素和 div 元素的区别

section和div的唯一区别是应用于其内部内容的语义。

（1）
元素

Section 是一个HTML5元素，对其内部的内容具有语义。这些元素可以用来对html中的内容或元素进行分组，可以提高可读性和SEO（按照搜索引擎算法，提高文章在搜索引擎中的自然排名）。

（2）
元素

Div 是一个没有语义的html标签。它用于创建其他元素的逻辑和布局，也包含其他内容元素。

6. 字体与分隔线

（1）字体

① 字体样式一览参考font-family - CSS：层叠样式表 | MDN (mozilla.org)

h1,h2 {
  font-family: Verdana Tahoma;
/* 有些字体比其他字体更容易阅读，在低分辨率屏幕上尤其如此。 
   tohoma 是 sans-serif 系列中的另一种网络安全字体*/
  color: inherit;
  text-decoration: none; /* 去掉字体下划线 */
}

（2）分隔线

h2 {
  border-bottom: 4px solid #dfdfe2
               /* 宽度 样式  颜色*/
}

7. 伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

（1）常见类型

① ::after : 已选中元素的最后一个子元素。

② ::before : 匹配选中的元素的第一个子元素。

③ ::selection ：应用于文档中被用户高亮的部分

（比如使用鼠标或其他选择设备选中的部分）。

④ ::first-line ：在某块级元素的第一行应用样式。

8. 页面设计相关

（1） 关于视觉可访问性的主题，元素之间的对比是一个关键因素。例如，标题的文本和背景之间的对比度应至少为 4.5:1。

9.CSS @media 规则

@media 规则允许在相同样式表为不同媒体设置不同的样式。

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

(1) 基本用法

使用Media Queries必须要使用 “@media” 开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

(2) @media 和 @media screen 区别

@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的。

如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。

不过这只是笼统的做法，其实如果把“screen”换为“print”，写为 @media print ，那么该css就可用到打印设备上了，但要注意，@media print 声明的css只能在打印设备上有效

10. viewport meta 标记

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

语义：用于控制视图的大小和形状

width: 特殊值 device-width 即100vw，100%的视口宽度

initia-scale: 控制页面首次加载时显示的缩放倍数。默认值是1，负值会被忽略。

2023.7

1. table 元素（表格）

<p>含有表头的表格</p>
<table>
<caption>this is a form</caption>
    <thead>
        <tr> <!-- tr表示行 td表示列-->
            <th>The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

:*HTML 表格标题元素*，展示一个表格的标题，它常常作为 `的第一个子元素出现，同时显示在表格内容的最前面。（也可被css样式化出现在任意位置）

2.CSS选择器（属性）

CSS 选择器 - CSS：层叠样式表 | MDN (mozilla.org)

属性选择器：

/* :nth-of-type() 伪选择器用于根据它们在相同类型的同级中的顺序来定位特定元素。*/
tr.total td:nth-of-type(3) {
  padding-right: 0.5rem;
}

/* span[class~="sr-only"] 选择器将选择任何 span 元素，其 class包括sr-only。*/
span[class~="sr-only"] {
  border: 0 !important;
}

/* span:not(.sr-only)选择器定位没有 sr-only类的任何 span 元素。 :not()也被称为反选伪类 */
#years span:not(.sr-only) {
  font-weight: bold;
}

/*  [autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。*/

3.`clip-path` 元素

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

clip-path - CSS：层叠样式表 | MDN (mozilla.org)

4. CSS： `calc` 函数

calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

.demo {
 width: calc(50vmax + 3rem);
 padding: calc(1vw + 1em);
 transform: rotate( calc(1turn + 28deg) );
 background: hsl(100, calc(3 * 20%), 40%);
 font-size: calc(50vw / 3);
}

5. CSS : `z-index` 属性

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

/* 字符值 */
z-index: auto;

/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 */

/* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;

6.`border-collapse`CSS属性

语义：用来决定表格的边框是分开的还是合并。

在分隔模式下，相邻的单元格都拥有独立的边框。

在合并模式下，相邻单元格共享边框。

table {
    /*合并模式*/
    border-collapse: collapse;
    /*分隔模式*/
    border-collapse: separate;
}

7. Meta 标签中的`http-equiv`属性

（1）X-UA-Compatible

HTML下head中的http-equiv="X-UA-Compatible"详解：

X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与 content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。

目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：

这样我们才能使得页面在IE8里面表现正常！

2023.9

1.HTML思维导图

HTML入门速成

2.盒子模型

（1）内容

盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容），可以把每一个容器，比如div，都看做是一个盒子模型

（2）`box-sizing` 属性

①：没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高

②：加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整

3.弹性布局 Flex

（1）参考网址 [菜鸟教程](Flex 布局语法教程 | 菜鸟教程 (runoob.com))

4. CSS变量

（1）定义变量及插入

* {	--blue: #1e90ff; }
body { background-color: var(--blue); }

（2）变量

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

变量通常在 :root 选择器中声明。这是 CSS 中最高级别的选择器；放在里面的变量将在任何地方都可用。

posted on 2023-11-30 11:50 rrobber 阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

rrobber

导航

公告