前端第1-6天

Metamorphosis_.

已于 2022-01-20 14:54:16 修改

阅读量503

点赞数

文章标签：前端 html javascript css css3

于 2022-01-20 14:54:00 首次发布

本文链接：https://blog.csdn.net/m0_49967486/article/details/122588670

版权

学习内容

Udemy—Modern HTML & CSS From The Beginning (Including Sass)

前言

之前想学后端，但觉得java的学习太枯燥无聊，想着之前web课程做个人网页过程中，做前端很有及时反馈的成就感，故而转向前端。前端基础必然是html css jss 三件套，所以我买了Udemy—Modern HTML & CSS From The Beginning (Including Sass) 课程，并写此学习笔记来巩固知识。

一、html 基础

1. 准备工作

安装vscode，在扩展里安装Bracket Pair Colorizer，Javascript(ES6) code snippets，live server来提升写代码效率。

其次在.html文件里输入！并回车可以返回一个声明为html5的文档，右键打开live server查看html的实时改变。

2. meta_tag

meta是html的元数据,可以定义一些html的细节，如：

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

title定义了页面的标签名

<title>Meta tags</title>

3. typography

这里介绍了一些最最基础的排版.和markdown很像，h1-h6为不同字号的标题(heading)

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

p标签包括的是段落，其中lorem后接数字可以直接生成一段字数为该数字的文字。其中strong使加粗，em使斜体

 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.  <strong> reprehenderit repellat,
  architecto maiores ratione sequi vitae inventore. </strong> 
 <em> perferendis nostrum. Accusamus quasi 
  atque eius ut.

Lorem ipsum dolor sit amet consectetur adipisicing elit. reprehenderit repellat, architecto maiores ratione sequi vitae inventore. perferendis nostrum. Accusamus quasi atque eius ut.

br为换行

<br>

hr为生成分割线

<hr>

4. link

a标签对应链接，href为链接地址，target无内容则原地重定向，"_blank"则打开新标签页并进入链接。

<a href="https://bing.com" target="_blank">
Click for bing</a>

Click for bing

img标签载入图片，可选本地和某个页面的图片

<!-- Local image -->
  <img src="/images/sample.jpg" alt="My Image" width="200">
  <!-- Remote image -->
  <img src="https://up.36992.com/pic/9b/55/28/9b55289650cbc404d43c6e9bcc508588.jpg" alt="My Image 2">

5. html自带表格

ul 为unordered list，ol为ordered list，可以让内容前有无顺序标识。

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
    <!-- Order Lists -->
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

table标签生成自带表格，thead为表头，tr(table row)为一行 tbody为表体，可以放td(table data)

<table style="width: 600px">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>jdoe@qq.com</td>
      </tr>
      <tr>
        <td>Kate</td>
        <td>Soe</td>
        <td>ksoe@qq.com</td>
      </tr>
      <tr>
        <td>Bit</td>
        <td>sat</td>
        <td>but@qq.com</td>
      </tr>
    </tbody>
  </table>

First Name	Last Name	Email
John	Doe	jdoe@qq.com
Kate	Soe	ksoe@qq.com
Bit	sat	but@qq.com

6. forms_input

标签为form, action为点了以后干啥，input为输入框，不同的type表示不同的输入内容，name和id为input的属性，placeholder是输入前淡淡的提示

<form action="process.php">
    <div>
      <label for="name">Name</label><br>
      <input type="text" id="name" name="name" value="John Doe">
      <div>
        <label for="email">Email</label><br>
        <input type="email" name="email" id="email" placeholder="Enter an email">
      </div>
    </div>
    <input type="submit" value="submit">
      <!-- using button tag -->
    </div>

  </form>

7. blocked_inline

在不借助css的前提下，可以直接对html做一些装饰（不推荐），加入style属性，border代表边框，可继续添加边框颜色和样式（dotted solid等）

<p style="border: 2px green solid;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
<strong>Alias deleniti, inventore</strong> mollitia neque magnam nesciunt eius animi doloribus libero!</p>

8. id 和class

id为单独表示该段内容的主键，class则是一类内容，两者均可以在css定义起样式，class可以复用
常见id可以设为header（标题）, navbar（导航栏）, footer（脚注）等

9. entites

一些特殊符号的表示

	<!-- Non breaking space -->
  <p>Hello, my name is &nbsp; &nbsp; &nbsp;John</p>
  <!-- Greater than and less than -->
  <p>5 &gt; 2</p>
  <p>5 &#62; 2</p>
  <p>1 &lt; 2</p>
  <p>1 &#60; 2</p>
  <!-- Copyright -->
  <p>&copy;</p>
  <p>&reg;</p>
  <!-- Currency -->
  <p>&cent;</p>
  <p>&pound;</p>
  <p>&yen;</p>
  <p>&euro;</p>
  <!-- Suits -->
  <p>&spades;</p>
  <p>&hearts;</p>
  <!-- Computer code-->
  <code>
    &ly;?php echo 'Hello' ?&gt;
  </code>
  <p>Save the file by pressing <kbd>Ctrl + S</kbd></p>

Hello, my name is John

5 > 2

1 < 2

€

♠

♥

&ly;?php echo 'Hello' ?>

Save the file by pressing Ctrl + S

10. html5 semantics

语义元素清楚地向浏览器和开发者描述其意义。–w3school

HTML 提供了定义页面不同部分的语义元素：

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

html semantics

二、CSS 基础

1. 三种写法

Inline CSS

<body>
 <!-- Inline CSS -->
 <h1 style="color: red">Heading One</h1>
 <h2>Heading Two</h2>
 <h3>Heading Three</h3>
</body>

Internal CSS

标签h2的就会应用如下样式

<style>
  /* Internal CSS */
  h2{
    color: green;
  }
</style>
</body>

存在.css文件内

2. Selectors

  <style>
    /* Element Selectors */
    body{
      background-color: #333;
    }
    /* . is for classes */
    .primary-heading{
      color: blue;
    }
    /* # is for IDs */
    #welcome{
      background-color: #f4f4f4;
    }
    /* Multiple selectors */
    #welcome, #about{
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 5px;
    }
    /* Nested Selectors */
    #welcome p{
      font-size: 20px;
    }
    #about{
      color: white;
    }
  </style>

3. fonts

<style>
   body{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 18px;
     line-height: 1.6em;
   }

   #welcome p span{
     font-weight: bold;
   }

   #about p span{
     font-style: italic;
   }
  </style>

4. Colors

/* 三种写法 */
<style>
   h1 {
     /* Color Name */
     color: red;
   }

   h2 {
     /* RGB */
     color: rgb(20,100,120);
   }

   h3 {
     /* Hex */
     color: #333;
   }
</style>

5. background and borders

<style>
    #box-1{
      background-color: blanchedalmond;
      /* border-width: 3px;
      border-color: red;
      border-style: solid; */
      border: 3px solid red;
      border-radius: 10px;/*边框的弧度*/
    }

    #box-2{
      background-color: #333;
      color: #fff;
      border-top: blue solid 3px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    #box-3{
      background: url('img/stars.jpg') no-repeat center center/cover;/* No repeat为不重复，cover是覆盖整个部分*/
      color: #fff;
      height: 300px;
      width: 600px;
    }

    #box-4{
      background: url(./img/leaf.png) no-repeat center center;
      background-attachment: fixed;
    }
  </style>

6. Box model

从外往内依次为外边距、边框、内边距以及内容。

Box model

<style>
    /* CSS Reset 建议一开始清空固有外内边距，以方便后续自定义*/
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    .box{
      background-color: #f4f4f4;
      border: 2px solid;
      width: 500px;
	  /*Padding */
      /* Padding on all sides */
      padding: 20px;
      /* Padding per side */
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 20px;
      /* Padding shorthand简写 = top, right, bottom, left */
      padding: 10px 20px 10px 20px;
      /* Padding shorthand = top/bottom left/right */
      padding: 10px 20px;
      /* Margin on all sides */
      margin: 20px;

      /* margin per side */
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 20px;

      /* margin shorthand = top, right, bottom, left */
      margin: 10px 20px 10px 20px;
      /* margin shorthand = top/bottom left/right */
      margin: 10px 20px;
    }
    .box h3{
      padding-bottom: 10px ;
    }
  </style>

7. float align

float
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

上图引自w3schools

align 布局
text-align: center; 字居中
overflow(溢出): auto 解决诸如字体跑到图片下的问题
设position为absolute为另一种对齐方法

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

8. links buttons

<style>
	a{
      color: #333;
      text-decoration: none;
    }/*设定正常链接的css*/	
    a:hover{
      color: blue;
      text-decoration: underline;
    }/*设定鼠标悬浮在链接上的css*/
    a:visited{
      color: red;
    } /*设定被点击过的链接的css*/	
    a:active{
      color: red;
    }/*被点完链接的css，同visited，推荐active*/
	
	.btn{
      background: #4c6ca0;
      color: #fff;
      border: nones;
      font-size: 16px;
      padding: 10px 20px;
      border-radius:5px;
      cursor: pointer; /*鼠标放在按钮上变成食指点东西的图标*/
    }
</style>

9. inline & block

display的值：
inline会横着摆放每一块东西
block是这块会占据整行
inline-block会横着摆放每个block
如下图，从上往下依次是inline; block; inline-block
在这里插入图片描述

10. position

position有五个值：

static
relative
fixed
absolute
sticky

static为默认的，relative不会对其余内容进行调整来适应元素留下的任何空间，fixed 的元素即使滚动页面，它也始终位于同一位置，absolute的元素相对于最近的定位祖先元素进行定位，sticky的元素根据用户的滚动位置进行定位，最后粘在某个地方。如下图，继续下滚橙色方块会完整出现并粘住。
position

11. media queries

@media为不同媒体类型定义不同样式
代码如下（示例）：

<style>
    /* Smartphones */
    @media only screen and (max-width: 500px) {
    /*视图宽度小于500px*/
      body{
        background: red;
      }
      #smartphone h1{
        display: block;
      }
    }
    /* Tablet */
    @media(min-width: 501px) and (max-width: 768px) {
    /*视图宽度在501px-768px之间*/
      body{
        background: blue;
      }
      #tablet h1{
        display: block;
      }
    }
    @media(min-width: 1201px) {
    /*视图宽度大于1201px*/
      body{
        background: black;
      }
  </style>

11. em & rem

em：相对于元素的字体大小（2em 表示当前字体大小的 2 倍）
rem：相对于根元素的字体大小（16px）
更推荐rem，因为em会在不同的情况下变化，而rem则是固定的单位。

12. vh & vw

vw 相对于浏览器窗口宽度的 1%
vh 相对于浏览器窗口高度的 1%

13. flex

flex是display下的一个值，也可以将html中class设为"flex-container"，然后其孩子均为flex。flex布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
在这里插入图片描述
flex容器有以下属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction定义flex项目的摆放方向，有column column-reverse和row row-reverse（横、横着倒序、竖、竖着倒序）。

flex-wrap有warp，nowrap和wrap-reverse三个值，分别对应flex项目在必要时进行换行、不换行，和以相反的顺序换行（如下图）

flex-flow用于同时设置 flex-direction 和 flex-wrap 属性的简写属性

justify-content 属性用于对齐 flex 项目，值有center: 中心对齐；flex-start容器开头对齐；flex-end容器末端对齐；space-around：行之前、之间和之后带有空格的 flex 项目；space-between：行之间有空格的 flex 项目

align-items用于垂直对齐 flex 项目，值类似的有center、flex-start和flex-end，此外还有stretch伸展填充整个垂直部分。

align-content 属性用于对齐弹性线

对于每个flex容器内的项目，属性有：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order 属性规定 flex 项目的顺序。

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

order
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>
/*第三个弹性项目的增长速度比其他弹性项目快八倍*/

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  /*第三个就不会收缩*/
</div>

flex-basis 属性规定 flex 项目的初始长度
align-self 属性规定弹性容器内所选项目的对齐方式，类似align-items

之后分别用这些东西搭了两个项目，我就照着写，其实没有什么太多体会，大概了解一下从零写的流程，但是视频多少也在抄写好的代码，所以可以学习的不多。

总结

这就是前六天的学习笔记，之后希望能做到一日一更。

Metamorphosis_.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端第1-6天

学习内容Udemy—Modern HTML & CSS From The Beginning (Including Sass)文章目录学习内容前言一、html 基础1. 准备工作2. meta_tag3. typography4. link5. html自带表格6. forms_input7. blocked_inline8. id 和class9. entites10. html5 semantics二、CSS 基础1. 三种写法2. Selectors3. fonts4. Colors5.
复制链接

扫一扫