HTML、CSS、JS 的小小总结 | 青训营笔记

ruhangs
333 阅读8分钟

HTML&CSS&JS的小小总结 ｜ 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第4天，今天是休息日，寻思着把前三天在青训营中学习的前端入门三件套给打个总结，也算是记录一下在青训营中的学习过程吧！！！

一、重点内容：

  • 了解常用的HTML标签
  • 了解常用的css属性及布局
  • 了解JavaScript的编码原则

二、详细知识点介绍&实践

html中常用标签，如标题h1-h6、p、em、strong、image、ul、ol、dl等等；css中的多种选择器及其优先级，伪类元素，布局；在编写JavaScript代码中，应注意哪些问题？如何才能写出更“优雅”的代码。✈

HTML

  1. html的基本骨架：
<!DOCTYPE html>  <!-- 若不写这一行，浏览器在解析的时候会采用怪异模式去解析  -->
<html>  <!-- 页面中最大的标签，称之为根标签 -->
    <head>  <!-- 在head标签中必须要设置的标签是title -->
        <title></title>  <!--添加一个独特网页标题，也有利于SEO -->
    </head>
    <body>  <!-- 该标签包含了文档所有可见的内容 -->
    </body>
</html>
  1. 标题‘党’，从下面的示意图中可以看到不同的h*标签会显示不同的字体大小，其主要程度从上到下，逐个减小。
  <h1>标题1</h1>
  <h2>标题1</h2>
  <h3>标题1</h3>
  <h4>标题1</h4>
  <h5>标题1</h5>
  <h6>标题1</h6>

image.png 3. 一篇文章有多个段落，因此我们采用<p>标签来进行分割；每段文字中也会有作者想要强调的内容，所以我们可以用<em>、<strong>来强调部分内容，一般来说<strong>比<em>强调的语气更重，突出更明显。

  <p>
    2023年电影春节档7部电影扎堆上映，预售火爆，你买到电影票了吗？上游新闻观影团推出最新一期观影福利，邀请100名观众在大年初三（1月24日），到<em>重庆博纳国际影城凤天路店</em>，<strong>免费观看任意</strong>一场由梁朝伟、王一博领衔主演的电影《无名》
  </p>

image.png

  1. 有时候我们为了让文字的内容更容易理解，往往都会对其进行配图和给出相关内容的链接，由此我们就需要用到<img>和<a>标签。
  <p>
    2023年电影春节档7部电影扎堆上映，预售火爆，你买到电影票了吗？ <a href="http://">上游新闻观影团</a> 推出最新一期观影福利，邀请100名观众在大年初三（1月24日），到
    <em>重庆博纳国际影城凤天路店</em>，<strong>免费观看任意</strong>一场由梁朝伟、王一博领衔主演的电影《无名》
    <img src="https://p6.itc.cn/q_70/images03/20230118/faab49327c894072989aed8c8e650b89.jpeg" alt="">
  </p>

image.png 5. 文字有时候还会表现出顺序以及类别的关系，我们可以采用无序表标签<ul>；有序表标签<ol>；定义表标签<dl>。

  <h2>世界电影票房排行榜</h2>
  <ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
  </ol>

  <h2>购物清单</h2>
  <ul>
    <li>🍇</li>
    <li>🍉</li>
    <li>🍎</li>
  </ul>

  <h2>霸王别姬</h2>
  <dl>
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
    <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
    <dt>上映日期：</dt>
    <dd>1993-01-01</dd>
  </dl>

image.png 6. 在web1.0时代，我们只是从网页上获取内容，到web2.0时代，我们逐渐可以与网页进行简单的交互了，便就有了一些信息输入的标签，如<input>。

<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

image.png

CSS

css是什么？用来定义页面元素的样式；css如何使用？外链，嵌入，内联；css是如何工作的？当HTML解析结束时，便开始加载css以及解析，最后添加样式到DOM节点。

  1. 选择器

    • 通配选择器 -> *
    • 标签选择器 -> body
    • id选择器 -> #
    • 类选择器 -> .
    • 属性选择器 -> []

    其优先级：!important > id选择器 > (伪)类选择器 > 标签选择器

    组合方式：

    • 直接组合 AB
    • 后代组合 A B
    • 亲子组合 A>B
    • 兄弟选择器 A~B
    • 相邻选择器 A+B 通过不同的组合方式，我们就可以定位到我们所要寻找的DOM节点的位置。

  2. 伪类元素

    • 结构性伪类: li:first-child
    • 状态性伪类: :visited | :hover | :link | :focus等

    在结构性伪类中，一般是属于寻找DOM树中的某个节点，当利用选择器的组合定位不了的地方，我们可以利用该类型伪类进行定位。而状态型伪类一般用于处理某个动作时，需要更改状态（颜色、大小等）

  3. css中属性的继承性

    在css中，一般来说，文字相关的属性是可以继承的，若有属性不可继承时，我们可采用显示继承，即直接采用关键字inherit，便可将不可继承的属性赋予显示继承。

  4. 字体属性中的white-space

    当我们在html文件中，字与字之间想要留多个空格的空白，却发现打了那么多的空格，都消失不见了（555~）。此时，css中的white-space站了出来告诉浏览器：“我不允许你把人家的辛苦都‘白费’”。效果如下：

<p style="white-space: pre;">前端           小白    努力中</p>

image.png

  1. 布局

  • 行级排版规则

    盒子在一行内水平摆放

    text-align 水平居中

    vertical-align 垂直居中

  • 块级排版规则

    从上到下摆放

    垂直方向两个块级之间的margin会合并，一般以margin值较大的为准

  • Flex布局

    justify-content：控制水平方向的摆放

    align-items：控制垂直方向的摆放

    弹性属性：flex-grow | flex-basis | flex-shrink

  • Grid布局

    • 网格利用grid-template-columns 和 grid-template-rows两个属性进行设置。

      grid-template-columns 用于定义每一列的宽度； grid-template-rows 用于定义每一行的高度。

    • 对齐方式 justify-items 、 align-items 、 place-items

      justify-items 属性设置单元格内容的水平位置， align-items 属性设置单元格内容的垂直位置。

      place-items 是两者的复合属性，接收两个参数，第一个是align-items，第二个是justify-items，如果只写一个参数则表示两个属性相同。

  • Float布局（一般处理图片文字的排版）

<section>
    <img src="./111.png" alt="">
    <p>练习浮动布局练习浮动布局练习浮动布局练习浮动布局练习浮动布局练习浮动布局练习浮动布局练习浮动布局练习浮动布局练习浮动布局练习浮动布局</p>
</section>

    * {
      margin: 0;
    }

    section {
      width: 300px;
      height: 200px;
      border: 2px solid red;
    }

    img {
      float: left;
      width: 100px;
      height: 100px;
    }

image.png

  • 定位

    相对定位：relative，不会脱离文档流

    绝对定位：absolute，会脱离文档流

    采用子绝父相的原则

JavaScript设计原则

1.各司其职

const btn = document.getElementById(' modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if (e.target.innerHTML === '☀') {
    body.style.backgroundColor = 'black ';
    body.style.color = 'white ';
    e.target.innerHTML = '🌙';
  } else {
    body.style.backgroundColor = 'white ';
    body.style.color = 'black ';
    e.target.innerHTML = '☀';
  }
});

该段代码的缺点是js替代css的功能，这样是不够灵活的，代码的可读性也非常地差，后期的维护成本也很高。

const btn = document.getElementById(' modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if (body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

修改之后，整个代码相比之前要简洁很多，可读性也比之前好，并且将责任留给了css。但此代码可直接采用css，不必要js的加入，如以下代码：

<body>
  <input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
        </p>
      </div>
    </main>
  </div>
</body>

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

结论：

  • HTML/CSS/JS各司其责
  • 应当避免不必要的由JS直接操作样式
  • 可以用class来表示状态
  • 纯展示类交互寻求零JS方案

2.组件封装以及优化

组件一般是指Web页面上抽出来一个个包含模版（HTML)、功能（JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。

第一步优化，组件化后，可以思考代码是否可以插件化，比组件化的更优。插件化的好处就是：

  • 结构清晰、易于理解、相互独立

  • 易修改、可维护性强，如插卡游戏机一样

  • 可移植性强、重用力度大

第二步优化，模板化 ，当代码模板化以后，可将功能类似的代码用同一套模板进行编程，大大地提高了开发效率。

对一个功能或者一个模块的代码实现都可以采用上面的流程去思考，去优化。

3.过程抽象

过程抽象即是将某个操作的细节包裹起来，只暴露一个接口在外面提供使用。函数式编程就是一个很好的应用。典型的实例就是高阶函数，用函数作为另外一个函数的入参和返回值，更好的隐藏实现过程。高内聚，低耦合

三、课后个人总结：

  • css中的flex布局相比grid布局没有那么灵活，很难实现异型的布局。因此，我觉得在对于有异型布局的页面中可采用grid布局，若存在更加弹性的布局，用flex布局会更好。
  • JavaScript中的这些设计原则虽然理论上较为简单，但是还需要不断地实践才能出真知，因为在不同的业务场景会有不同的要求，如何去权衡就显得非常重要了。不过函数式编程是真的香hhh~

tips：笔记中若有不当之处，欢迎各位佬纠正！！！

四、引用参考：

avatar
文章
阅读
粉丝