认识HTML和CSS

82 阅读2分钟

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的布局方面和样式设置的风格我认为是在之后开发前端的基础,需要加深学习并不断巩固。