萌新学HTML和CSS|青训营笔记

Aaron450
297 阅读4分钟

萌新学HTML和CSS|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天。 记录这两天我在青训营学到的知识干货，分为HTML和CSS两部分。

第一部分：HTML

1.什么是HTML

HyperText Markup Language

HyperText:

  • 图片
  • 标题
  • 链接
  • 表格

Markup Language:

<h1>文章标题<h1>

2.DOM树

graph TD
document --> html
html --> head
html --> body
head --> meta
head --> title
body --> h1
body --> p

3.HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如required，readonly

4.标签和属性

在此部分，韩老师讲了部分常用的标签：

  • <h1>~<h6>:标题标签
  • <ol>:有序列表
  • <ul>:无序列表
  • <dl>:一个或多个<dt>分别对应一个或多个<dd>的列表
  • <pre>:定义预格式化的文本，保留空格和换行符
  • <a href=""> :通过href插入url链接
  • <img src="" alt="" width="":图片标签，通过src定位图片位置，当图片因为某种原因无法显示时，显示alt中的内容，width则属性定义图片的宽度
  • <audio src="" controls>:音频标签，通过sec定位音频位置，controls启动运行
  • <video src="" controls>:视频标签，属性功能同音频标签一致
  • <input type="">:输入标签，type决定输入形式
  • <textarea>:文件框标签
  • <select>:下拉选择框标签
  • <code>:代码标签
  • <city>:引用前文 这些仅仅只是很少一部分常用的标签和属性，还有许多内容需要课外去查询文档，不断地去实践以熟悉这些不同标签或属性的功能。

5.内容划分

image.png

6.语义化

HTML中的元素、属性以及属性值都拥有某些含义，开发者应该遵循语义来编写HTML。 语义化不仅仅只是为了规范，也是为了方便后期的修改或维护，同时也让搜索引擎搜索的效率能更高。 为了实现语义化，我们需要了解每个标签和属性的含义，思考什么标签最适合这个内容，且不使用可视化工具生成代码。

第二部分：CSS

1.CSS是什么

Cascading Style Sheels，用来定义页面元素的样式，例如：

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

2.在页面中使用CSS

外链： 写在外部文件中，通过link导入

<link rel="stylesheet" href="/assets/style.css">

嵌入： 通过style包裹样式

<style>
  li{ margin: 0; list-style: none:}
  p{ margin: lem 0;}
 </style>

内联： 直接在标签中更改样式

<p style="margin:lem 0">Example Cotent</p>

3.CSS是如何工作的

graph TD
加载HTML --> 解析HTML
解析HTML --> 加载CSS
解析HTML --> 创建DOM树
加载CSS --> 解析CSS
解析CSS --> 创建DOM树
创建DOM树 --> 展示页面

4.常见的样式

颜色-RGB

通过红黄蓝三原色合成： #XXXXXX用六位16进制码来描述颜色，rgb(x,x,x)则用三位256以内的十进制数表示

颜色-HSL

  • Hue 色相(0~360)
  • Saturation 饱和度(0~100%)
  • Lightness 亮度(0~100%)

通过以上三种元素合成: hsl(x,X%,X%)用三种元素的值来描述颜色

alpha透明度

通常在#xxxxxx描述颜色的六位基础上加两位，或者rgba(x,x,x,x)与hsla(x,x%,x%,x)中最后一位且最大值为1

字体 font-family

通用字体族：

  • Serif衬线体：Georgia、宋体
  • Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑
  • Cursive手写体：Caflisch Script、楷体
  • Fantasy：Comic Sans MS、Papyrus、Zapfino
  • Monospace等宽体：Consolas、Courier、中文字体

建议在字体列表最后写上通用字体族，并且把因为字体放在中文字体前面，以最大程度保证美观

字体大小 font-size

  • 关键字：small、medium、large
  • 长度：px、em
  • 百分数：相对于父元素字体的大小

位置

  • line-height：调整行间距
  • text-align：调整宽度格式（靠左、靠右或居中等）
  • spacing：通过letter-spacing和word-spacing来调整字符间距和单词间距
  • text-indent：调整首行缩进距离
  • text-decoration：文字修饰，如underline、line-through、overline

5.调试CSS

  • 右键点击页面，选择【检查】
  • 使用快捷键，Ctrl+Shift+I（windows）或Cmd+Opt+I（Mac）

6.布局(Layout)

布局是什么

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

graph TD
常规流 --> 行级
常规流 --> 块级
常规流 --> 表格布局
常规流 --> FlexBox
常规流 --> Grid布局
浮动
绝对定位

image.png

在平常开发中，最常用的是FlewBox和Grid布局

FlexBox是什么

  1. 一种新的排版上下文
  2. 它可以控制子集盒子的：
  • 摆放的流向：flex-direction
  • 摆放顺序：order
  • 盒子宽度和高度
  • 水平和垂直方向的对齐：justify-content、align-items
  • 是否允许拆行

image.png

Grid布局是什么

Grid布局即网格布局，是一种新的CSS模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种CSS二维布局

image.png

7.学习CSS的几点建议

  • 充分利用MDN和M3C CSS规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习，CSS新特性还在不断出现

个人总结

在参加字节跳动的青训营之前，我曾在网上看过小程序的设计教程，但因为没有HTML、CSS以及JavaScript的基础，学习起来非常难受，学一点忘一点，结果学习未半而中道崩殂。 在这两天的课程学习中，我初步了解和掌握了HTML和CSS的基础知识，语义化的语言上手难度并不高，但是其中细节的东西非常之多，还需继续努力，扩展更多的课外阅读

avatar
文章
阅读
粉丝