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

一、前端

前端技术栈：HTML内容、css样式、JavaScript行为

前端通过网路协议和服务器交互，以连接后端。

前端应该关注：功能JavaScript、美观css、无障碍、安全（网络）、性能、兼容

前端的边界：nodejs服务器、ele | react 移动端、web多人会议、webgl大型游戏、web编译后端代码

入门门槛低，只需要浏览器和编译器课上手

二、HTML

HyperText Markup Language 超文本标记语言

大致框架：

<!doctype html>文档类型
<html>
	<head>
    <meta charset="UTF-8">
    <title>标题</title>
  </head>
  <body>
    写页面主体内容
    <h1>标题标签</h1>
    <p>段落标签</p>
  </body>
</html>

DOM树：
HTML的代码转成树形结构，在JavaScript中便于获取标签

1、语法写法

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

2、基本标签

标题h1~h6 <h1>标题内容</h1>

列表标签：

<ul>
    <li>有序列表</li>
    <li>有序列表</li>
</ul>
<ol>
    <li>无序列表</li>
    <li>无序列表</li>
</ol>
<dl>
    <dt>自定义列表</dt>
    <dd>自定义列表</dd>
</dl>

链接标签 <a href = "#" target="_blank">链接显示文字</a>

插入图片 <img src="图片地址" alt="替换文字">

插入音频 <audio src="音频地址">显示文字</audio> （H5新增）

插入视频 <video src="视频地址">显示文字</video> （H5新增）

输入标签：

<input type="输入类型">

输入类型可选text文本、checkbox复选框、number数字、date日期、button按钮、radio单选框等

输入时文本提示：

<input list="countries" />
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

下拉选择：

<select>
  <option>🥑</option>
  <option>🥩</option>
  <option>🥓</option>
</select>

文字效果：

整段引用 <blockquote cite="引用链接">内容</blockquote>

文中引用 <cite>文中引用</cite>

代码引用 <code>代码引用</code>

重点引用 <q>重点引用</q>

加粗 <strong>加粗</strong>

倾斜 <em>倾斜</em>

3、基本页面内容划分

三、总结

前端是用户可见的页面，通过网络和服务器交互以用来传达信息。

HTML中的标签正在转向语义化，通过语义来编写的代码可以让浏览器更容易识别，同时也便于用户操作。

因为除了开发者，还有浏览器、搜索引擎，以及浏览器的辅助功能都需要智能获取HTML内容用来提升用户体验。

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

HTML只传达内容，而不是样式

前端和HTML | 青训营笔记