前端基础Day1|青训营笔记

2022-07-24 87 阅读2分钟

前端与html--笔记

什么是前端和前端工程师？

前端：解决图形界面下的人机交互问题
前端工程师：使用web技术栈解决多端图形界面下的人机交互问题的工程师

前端技术栈有哪几层？

html：负责页面内容和结构
CSS：设置页面样式
JS:定义页面行为
HTML,CSS,JS代码都运行在浏览器中，浏览器通过http协议和服务器进行通信，将前端代码从服务器端拉取，渲染成页面。

前端开发环境

开发环境：浏览器+编辑器

前端关注哪些方面？

功能，美观，安全，体验，性能，无障碍

标签

空标签可以不闭合，例如meta,input
<img src（*属性名*）="*属性值*" />
<!doctype html>:决定渲染模式，比较重要，如果没有，浏览器会以老旧方式渲染，达不到预期效果

根目录`<html></html>`包含那些标签

<head>显示页面源数据，不需要展示给用户
<body>文字，图片等
有些属性值可以省略：required,readonly

DOM树

点击右键，检查元素

列表

有序列表：<ol></ol>
无序列表：<ul></ul>
列表中每一项都可以用<li></li>来表示

链接

<a href="#"></a>

音视频

输入control，使按钮能够显示

文本框输入

选择文本框

<blockquote></blockquote>：表引用
<cite></cite>：短引用，引用标题等
<q></q>:表示引用前文的一段话
<pre></pre>:表示预格式化的文字，想要在展示时保留
<strong></strong>：表强调文字，加粗
<em></em>：表示一句话中突出表示的词

内容划分

header
aside：侧边栏
main
footer

语义化

开发者应遵循语义来表写html

谁在使用我们写的html

开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词、排序
屏幕阅读器-给盲人读页面内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码