前端与 HTML&CSS 基础| 青训营笔记这是我参与「第五届青训营」笔记创作活动的第一天课堂重点知识 1.前端技术

这是我参与「第五届青训营」笔记创作活动的第一天

课堂重点知识

1.前端技术栈的划分

2.html常见标签和html语义化标签

3.CSS介绍及样式选择器及页面显示规则

4.CSS的布局介绍

知识总结及实例

1. 前端技术栈：

服务器端与前端进行交互的http协议

HTML：结构

CSS：表现

JavaScript：行为

2. 进行前端设计时应关注方面：

功能、美观、无障碍（例如：设计时要考虑红绿色盲的问题）、安全、性能、兼容、体验（考虑用户体验）

3. 明确HTML定义和HTML相关标签(重点理解语义化标签）

什么是HTML？

HTML是超文本标记语言
HTML基本结构讲解：

1.doctype：用于声明使用那个版本的html对页面进行解析

2.head：头部标签；一般包括title标签用于表明网页的主要内容

3.body：主体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML结构</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
</html>

HTML语法：

标签属性可以不区分大小写，但推荐小写

空标签可以不闭合，如input

属性值推荐用双引号

某些属性值可以省略，如：required、readonly
html常用标签：

1.h1-h6

2.a标签：相关属性

3.img标签

4.input标签
html语义化标签及好处

使用语义化标签：

可维护性

可理解性

搜索引擎优化

提升无障碍性

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>语义化</title>
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>
 
</body>`
</html>

4.CSS

什么是CSS

CSS是层叠样式表，用于定义页面样式
页面中使用CSS的三种方式：

CSS工作方式

CSS选择器及优先级

！important
id选择器
类或伪类选择器
标签选择器
通配符（*）

CSS中可继承的属性：一般文字属性都是可以继承的，与盒子属性相关的都是不可继承的
CSS的盒模型：

1.标准盒模型：设置宽高时设置的是文本的宽高使用box-sizing:content-box设置

2.怪异盒模型：设置宽高时设置的是文本的宽高+padding+border 使用box-sizing：border-box设置

CSS布局方式

1.行内布局

2.块级（通过div）

3.flex布局

4.grid布局

浮动（一般不推荐，使用浮动一般用于设计图片嵌套于段落中）

实例

HTML代码：

<ul>
 <li>音乐</li>
 <li>影视</li>
 <li>旅游</li>
</ul>

CSS代码：

ul{
  display: flex;         
}
li{
  flex: 1;
  text-align: center;
  line-height: 100px;
}

效果如图所示：

个人总结

熟练使用flex布局

前端与 HTML&CSS 基础| 青训营笔记