前端与HTML | 青训营笔记

hunkydory
136 阅读2分钟

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

前端与HTML

前端

  • 解决GUI人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR

  • Web技术栈

技术栈

JavaScript负责行为、CSS负责样式、HTML负责内容-----各司其责

前端根据网络协议与服务器端进行交互

前端需要关注的方面

通常是兼容、美观、功能、性能、无障碍、安全、体验等方面

前端的边界

  • Nodejs
  • Electron
  • React
  • WebRtc
  • WebGL
  • WebASSEMBLY

开发环境

浏览器

IE/Edge、Chrome、Firefox、Safari

编辑器

VSCode、Vim、WebStorm

HTML

Hyper Text Markup Language 超文本标记语言

Hyper Text 对应 图片、标题、链接、表格

Markup Language 例如 <h1>title</h1>

<img src= "url"/> src为属性名 url为属性值

一端最基本的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

DOM树

DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。

dom.png

HTML语法

一级标题

​

<h1>一级标题</h1>

​

二级标题

​

<h2>二级标题</h2>

​

三级标题

​

<h3>三级标题</h3>

超链接

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

输入

根据改变input的type属性 实现多种不同输入

<input placeholder="请输入用户名">
​
<input type="range">
​
<input type="number" min="1" max="10">
​
<input type="date" min="2018-02-10">
​
<textarea>Hey</textarea>

内容划分

常用布局

微信图片_20220727180545.png

语义化

  • HTML中的元素、属性、及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • ol（ordered）有序列表 ul（unordered）无序列表
    • lang属性表示内容所使用的语言 例如：en（英文） zh-CN（中文）

  • 语义化的好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性

  • 怎么做到语义化？

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

HTML被谁使用？

  • 开发者——修改、维护页面
  • 浏览器——展示页面
  • 搜索引擎——提取关键词、排序（title标签等）
  • 屏幕阅读器——给盲人读页面内容（朗读功能）

HTML负责传递内容

HTML负责传递内容，不负责样式和行为——各司其责

<p style="font-size:32px">错误示范</p> 

<h1>正确示范</h1>

\

avatar
文章
阅读
粉丝