HTML和CSS初识| 青训营笔记 这是我参与「第五届青训营 」伴学笔记创作活动的第 1天
一、本堂课重点内容:
- 前端技术栈&HTML是什么
- CSS
- 布局
二、详细知识点介绍:
解决GUI人机交互问题、跨终端、Web技术栈HTML(内容)、CSS(样式)、JS(行为)通过HTTP协议与服务器端建立联系.
要注意的是:功能、性能、安全 、美观、体验、兼容、无障碍方面
HTML:HyperText Markup Language,超文本标记语言,超文本体现在可以是图片可以是视频,标记性则是通过 <head><\head>、<p><\p>等实现不同内容的编写与展示。
重点是语义化:语义化,不同的标签有不同的作用与意义我们熟悉其含义
通过正确的方式实现对语言的编写与使用,这就需要我们选择适宜的标签实现对应的功能。
CSS:主要功能设置字体颜色、位置和大小、添加动画效果。有外链、嵌入、内联三种页面使用方式,是在加载HTML后解析HTML的过程中加载的CSS再对CSS内容进行解析创建DOM树的过程添加样式到DOM结点上最后展示页面。
CSS的重点:选择器、伪类 、标签、继承、
布局:IFC、BFC、Flex Box、Grid
三、实践练习例子:
HTML:标题h1~h6、列表(有序ol无序ul一对多dl)、链接<a href="..."><\a>、
插入图片、音频、视频。
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
alt="Metal movable type"
width="400"
/>
<audio
src="/assets/music.ogg"
controls
></audio>
<video
src="/assets/video.mp4"
controls
></video>
输入相关的:表单<label>、<select>、
四、课后个人总结:
HTML内容介绍的相对简单但也很重要是一个整体的框架性的存在、CSS是对HTML的丰满想要做出好的网页CSS是不可缺少的,尤其是关于CSS的布局方面和样式设置的风格我认为是在之后开发前端的基础,需要加深学习并不断巩固。