前端与HTML ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第1天，此篇文章主要围绕“前端要解决的基本

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

前端与HTML基础

前端技术栈

HTML - 内容
CSS - 样式
JavaScript - 行为

而此篇文章主要围绕“前端要解决的基本问题”及“什么是 HTML ”来展开

前端是什么

web前端，顾名思义，就是将web页面或者app页面展示给用户的一种技术。随着互联网的不断发展，前端开发也变得逐渐复杂，网页不再是静态的页面，逐渐向动态页面发展，交互效果也在逐渐变强。

前端应该关注哪些方面

功能
- 功能是前端最基础的部分，制作网页的核心目的就是实现某些功能。
美观
- 对于用户来说，简洁、实用的页面更能获得用户的青睐。
无障碍
- 无障碍就是指我们做的网页是否是对所有人都可用的。
- 对于残疾人或者其他特殊人群来说，普通的页面可能无法满足他们的正常需求，所以在前端开发中需要多考虑此类问题。
安全
- 安全无疑是最主要的一项，我们在开发的过程中要保证用户数据、后端数据的安全性，不能够存在漏洞，使数据被轻易窃取。
性能
- 性能也是用户体验的一个重要方面，在开发中常常需要考虑产品是否会有卡顿等情况。

初识HTML

HTML(Hyper Text Markup Language)，也叫超文本标记语言，是用来实现网页结构以及网页内容的一种标记语言，也可以理解为网页的骨架。

DOM树：

让我们来看一段标准的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>页面标题</title> 
    </head> 
    <body> 
        <h1>标题</h1>
        <p>段落</p> 
    </body>
</html>

其中，<!DOCTYPE html> 会放在页面的最前面，用来告诉浏览器要使用什么标准来渲染页面，此处使用了HTML5来进行渲染

<html>是页面的主要内容，页面内容被包裹在<html>和</html>之间

<head>HTML头部，一般会将页面信息、CSS样式、JS代码、外部链接等放在这里，不会渲染到页面中

<body>页面主体，所有需要被渲染的内容会放在这里，比如文字、图片等

HTML标签

头部标签

上面我们说到，head里存放着页面信息、CSS样式、JS代码、外部链接等，那么他们是如何起作用的

meta标签是用来存放页面信息的，在样例中的第一个meta标签里，charset="UTF-8"定义了页面的字符编码格式是UTF-8

<title>标签内存放着页面的标题，通常展示在浏览器的此处：

<link>标签用来链接外部资源，如css文件、js文件等

<style></style>标签内用来存放页面样式，如

<style type="text/css">
    h1 {
        text-align: center;
        /* 文字居中 */
        font-size: 14px;
        /* 设置字体大小14px */
    }
</style>

还有用来存放JavaScript代码的标签<script>

此处我们不过多赘述，之后的文章会详细介绍CSS

身体标签

此类标签是可以让用户在页面中看到的可视化标签

例如<h1></h1><h2></h2>用来展示文章标题，<p></p>用来表示文章的段落

    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <p>12345678段落</p>

还有可以进行输入的<input>标签

姓名：<input type="text" name="name" />
    <div>
      <input type="radio" id="male" name="drone" value="男"
             checked>
      <label for="huey">男</label>
    </div>
    <div>
      <input type="radio" id="female" name="drone" value="女">
      <label for="dewey">女</label>
    </div>
<input type="submit" value="提交" />

type后面的内容是input标签的类型，比如text就是输入文本，radio就是单选，submit是提交按钮

HTML语义化标签

什么是语义化标签

语义化标签可以理解为一个<div>，但是太多的div标签让开发和维护变得困难，而语义化标签很好的解决了这一个问题，使用<header>来表示页面顶部的内容，<nav>表示菜单、索引等，<footer>表示页面底部的内容

<header>和<nav>

header标签一般放在页面顶部位置，可以存放logo、导航栏、搜索框等内容

nav标签可以放在header、footer等标签内，一般用来存放导航栏、菜单等

<header> 
    <h1>标题标题</h1> 
    <p>1234567</p>
    <nav>
        <ol> 
        <li><a href="#"> 首页</a></li> 
        <li><a href="#"> 课程 </a></li> 
        <li><a href="#"> 直播 </a></li> 
        </ol>
    </nav>
</header>

<main>、section和<article>

main标签顾名思义，用来存放主题内容，里面可以是文章、图片等

article标签一般用来存放可以复用的内容，比如一个文章卡片

section 标签主要用于区分主题内容，可以理解为大纲的第一层

<main>
    <section>
        <h1>字节跳动青训营</h1>
        <article>
            <h2>【青训营】前端与HTML</h2> 
            <p>青训营第一天...</p>
        </article>
        <article>
            <h2>【青训营】理解CSS</h2> 
            <p>青训营第二天...</p>
        </article>
    </section>
    <section>
        <div>
            <h1>课程</h1>
        </div>
    </section>
</main>

引用

字节内部课：前端入门 - 基础语言篇
YK菌【青训营】HTML基础 - 语义化标签 - 浏览器渲染过程 - 笔记及拓展
MDN Web Docs
HTML 教程 | 菜鸟教程 (runoob.com)

前端与HTML ｜ 青训营笔记