HTML和CSS极简入门指南
HTML
在 visual studio code 中新建 html
文件,输入 html
,在代码提示列表中选择 html:5
并回车后,会生成下面的代码:
<!--声明文档类型,这是HTML5的固定写法-->
<!DOCTYPE html>
<!--HTML文档的根元素,lang属性表示文档的语言,中文为zh-Hans或者zh-CN-->
<html lang="en">
<!--head里面的内容不会显示出来,用来定义一些元信息-->
<head>
<!--网页编码-->
<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>Document</title>
</head>
<!--网页的内容-->
<body>
网页内容放这里
</body>
</html>
HTML 容错率较高,即使有错误,浏览器也尽量渲染出内容。上面的代码可以精简为
<html>
<head>
<title>标题</title>
</head>
<body>网页内容放这里</body>
</html>
<html>
、<body>
这些叫做标签
,lang="zh-CN"
叫做属性
,其中 lang
是属性名
,zh-CN
是属性值
。属性值用双引号
括起来。
你可能听说过 reset.css
或者类似的东西,这些是为了重置一些标签的样式。为什么要重置呢?因为 HTML 标签会带有一些默认的样式,比如 li
标签前面会有小圆点,这些默认样式我们可能不需要,所以需要重置,也就是修改为我们需要的样式。
如果工作内容主要是开发后台管理系统,那么常用的标签就两个:span
、div
。这两个标签都没有任何含义,区别是,span
标签是一个行内元素,div
标签是块级元素。行内元素的大小由内容决定,块级元素总是会在横向占满可用的空间。至于其他标签,前端 ui 框架都已经封装好了常用组件,大多数情况下没有必要使用原生的 HTML 标签。但是,了解 HTML 标签及其特性,肯定会对开发和调试有好处。
CSS
CSS 相对 HTML 来说比较复杂。但由于前端 UI 框架的存在,需要掌握的 CSS 也不是很多了,同样的,全面掌握 CSS 是你相对其他前端开发者的很大的优势,在别人面对问题束手无策的时候,你可以脱离前端 UI 框架,从底层的 CSS 知识层面解决问题。
一段 CSS 代码是这样的:
/* '{'之前的一串叫做选择器,是为了选择特定的HTML标签 */
div.my-div > p:first-child {
/* 下面4行是定位 */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 下面3行是排版和文本样式 */
font-size: 20px;
font-weight: bold;
line-height: 1.6;
/* 下面2行是flex布局 */
display: flex;
align-items: center;
}
必须熟练掌握的是 CSS 选择器
,这是应用 CSS 样式的前提。
CSS 各种单位需要掌握,比如绝对单位 px
,相对单位 %
、em
、rem
,颜色表示方法 rgb()
、rgba()
、十六进制(#ff0000)
、hsl()
等。
要注意属性的继承性,例如,父元素设置 color: red
,所有子元素的文字颜色都会继承父元素的样式,除非子元素设置了自己的 color
。又比如,父元素设置 border: 1px solid red
,子元素不会继承这个样式。
然后是盒模型
,这是 CSS 基础,与 HTML 的行内元素、块级元素有关联。
flex 布局
用处特别多。没有 flex 布局的时候,你就需要掌握 浮动float
、各种垂直居中的方法……等很多东西,现在有了 flex,就可以少学很多其他属性了,比如 float
,以前也是一个难点,现在基本用不到了。
资料
初学者使用 W3School 比较好,非常简单易懂,也可以作为速查手册。建议先通读一遍 W3School 中的 HTML、CSS 部分。MDN 上的内容专业全面,但不太好理解,适合有一定的基础时再阅读。
End
评论已关闭