前端与html

什么是前端

使用web技术栈解决多端图形用户界面交互问题的工程师

技术栈

基础：

html：负责页面内容
css：负责设置页面样式
JavaScript：定义网页的行为

浏览器可以通过http协议与服务器通信，浏览器通过http协议拿到服务器端的前端，渲染页面，服务器端通过协议拿到用户添加的数据。

关注的方面

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

前端的边界

nodejs开发服务端
electron或者react native开发客户端应用
webGL开发流畅游戏
webRTC实现多人会议
webASSEMBLY可以把c++，其他语言编写的代码在浏览器运行

所以前端范畴较广，在近几年快速发展，与用户展示交流必定有前端的身影

开发环境

编辑器：vscode,vim，webstorm

浏览器

html是什么

全称：hyperText Markup Language （超文本标记性语言）

<img src="photo.jpg" />

src属性名，photo.jpg属性值

<!doctype html>

告诉浏览器以那种渲染模式渲染页面

浏览器会将HTML解析为一个dom树

里面每一个节点称为dom节点，document为根节点

HTML语法

标签和属性不区分大小写，推荐小写空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

三种列表

ol：有序列表
ul：无序列表
dl：展示键值对

dl:像key-value一些信息可以，dl表示定义列表，dt表示定义标题，具体的值放在dd

<dl>
<dt>导演:</dt>
    <dd>陈凯歌</dd>
<dt>主演:</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
<dt>上映日期:</dt>
    <dd>1993-01-01</dd>
</dl>

常用标签

链接

<a href="链接" target="_blank">点击跳转</a>

href表示跳转到那个链接

target：跳转的方式，_blank表示在新窗口打开

图片

<img src="链接" alt="这是图片"/>

src：图片地址

alt:图片加载不出来，会显示

audio

<audio src="音频链接" controls/>

src地址，controls展示操作组件

表单元素

input
- type：placeholder，range,number,date，checkbox,radio(name,互斥)
textarea:文本框
select：下拉 option

引用标签

blockquote：块级引用
cite:作品名字，章节
q:作品内容
code：引用代码
strong：重要
em:语气上需要重读的词

<blockquote cite="http:/ /t.cn/RfjKOOF"><p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有这种民众，就没有天才。</p>
</blockquote>
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<p><code>const</code>声明创建一个只读的常量。</p>
<pre><code>
const add = (a, b)=>a + b;
const multiply = (a, b) =>a* b;

内容划分

header 页眉

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。

nav 导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

main 主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

aside 侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

footer 页脚

语义化

HTML中的元素、属性及属性值都拥有某些含义开发者应该遵循语义来编写HTML 有序列表用ol;无序列表用ul- lang 属性表示内容所使用的语言

谁在使用我们写的HTML

开发者-修改、维护页面浏览器–展示页面搜索引擎–提取关键词、排序屏幕阅读器–-给盲人读页面内容，阳光下页面对比度是否可读

结语

前端中的html是最为基础的，决定了网页的元主要架构，板块，所以要对html里面的一些标签和属性要做好更深入的理解。

day02前端与html课程知识点 | 青训营