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

前言

什么是前端

解决图形界面下人机(GUI)交互问题
跨终端
- PC/移动端
- 客户端/小程序
Web技术栈

前端技术栈

JS行为
CSS样式
HTML内容

与服务器端通过网络协议进行交流

前端应该关注哪些方面的问题

应用的功能, 界面美观, 无障碍, 安全, 性能, 兼容性, 用户体验

前端的边界

node.js electron ReactNative WebRTC WebGL WebASSEMBLY

开发环境

浏览器代码编辑器

1.HTML

什么是HTML

HyperText Markup Language 超文本标记语言

可以是双标签, 也可以是单标签

<img src="http//:xxx.jpg">

必要的页面组成标签包括:

!doctype html 确保浏览器识别最新且正确的html版本进行解析

<html></html>主体标签, 唯一父标签

<head></head> 写入页面的一些配置, 不配渲染

<meta charset="UTF-8"> 声明解码格式
<title>页面标题</title>声明页面标题,中间的文字显示在浏览器tab当中

<body></body>当中书写内容

整体浏览效果如果:

转换成DOM树--即页面的结构布局

HTML语法

标签和属性不区分大小写, 推荐小写
空标签可以不闭合, 比如input, meta, 也就是不需要标签内添加 / 斜杠
属性值推荐使用双引号包裹即 <img width="200px">
某些属性值可以省略, 比如required, readonly

h1-h6 标题标签效果如下

列表标签效果展示如下

ol标签包裹有序列表
ul包裹一般列表
dl包裹属性名+属性值展示的列表, 其中dt为属性名, dd为属性值

超链接(可点击)标签

href 为其特定属性名, 后面添加属性值, 即超链接要跳转的链接
target 为属性名, 设置_blank 可新窗口打开这个链接页面
src属性, 后面等号双引号内设置"媒体链接"

图片, 音频, 视频 ----标签

alt属性: 一般在标签链接的加载失败的时候, 设置这个alt的值来显示替代描述文字
controls属性: 显示控件, 比如播放,暂停

输入标签

type属性决定输入标签的类型,
placeholder是文本框里面默认显示文本
当type为number时, 可以设置输入数字位数的最少位数与最多位数
当type为date时, 可以设置最早时间限制

输入标签--选项按钮之类的

当type为radio时, 根据name相同的同类型标签, 可以实现多选一的效果
当input设置了list属性, 且有对应的datalist标签中也设置了id与list属性相同的值, 则可以实现 datalist中的数据来提示/建议用户输入的内容

引用标签, 文字特殊样式化

<strong></strong>除样式上加粗之外, 含义是这句话很重要, 要突出强调
<em></em>除样式上斜体之外, 表示词语的重读

页面划分

语义化是什么?

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

谁在使用我们写的HTML

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

语义化的好处

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

html传递内容时, 不要传递手写样式

<p style="font-size:32px">前端工程师的自我修养</p> ❌
<h1>前端工程师的自我修养</h1>✔

如何做到语义化

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

前端与HTML | 青训营笔记

前言