day01 - 前端与HTML |青训营笔记

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

前端的简介

什么是前端

解决GUI人机交互问题

跨终端

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

Web技术栈

前端技术栈

前端的边界与开发环境

边界 node.js electron react native
浏览器 Edge Chrome Firefox Safari
编辑器 Vscode Vim WebStorm

HTML语法

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

一个完整的HTML实例(Hello World)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <h1>day01</h1>
    <p>青训营的开始：hello,world</p>
</body>
</html>

< !DOCTYPE html > 声明为 HTML5 文档

< html > 元素是 HTML 页面的根元素

< head > 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。

< title > 元素描述了文档的标题

< body > 元素包含了可见的页面内容

< h1 > 元素定义一个大标题

< p > 元素定义一个段落

通过浏览器进行预览和调试

在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

几种常见的标签

    <p>标题 h1 ~ h6</p>
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>

    <p>这是一个a链接标签</p>
    <a href="https://www.bytedance.com" target="_blank">字节跳动官网</a>
    
    <p>这是一个image标签</p>
    <img src="../image/net.png">

    <p>这是一个input标签</p>
    <input type="text">

    <p>这是一个select标签</p>
    <select>
        <option>西瓜</option>
        <option>苹果</option>
        <option>香蕉</option>
        <option>桃子</option>
    </select>

语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

有序列表用ol;无序列表用ul
lang属性表示内容所使用的语言

1. HTML的使用者

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

2. 语义化的好处

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

3. how to 语义化

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