一、什么是前端？

前端官方的定义是前端就是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页
前端工程师是使用Web技术栈解决多端图形、用户界面交互问题的工程师

二、前端技术栈

HTML负责页面结构、内容
CSS设置界面样式
JavaScript设置页面的行为
网络协议

浏览器的内容和服务端通过http协议交互

三、前端应该关注哪些方面？

美观、功能、无障碍、安全、性能、兼容性、用户体验

四、开发环境

浏览器：IE/Edge、Chrome、Firefox、Safari

编辑器：VSCode、Vim、WebStorm

五、HTML是什么？

HyperText Markup Language超文本标记语言

超文本包括：图片、标题、链接、表格

标签：<h1>文章标题</h1> <img src="photo.jpg"/> p标签等

<!DOCTYPE html> //渲染方式
<html lang="zh"> 
<!-- lang的作用是向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english，<html lang="zh">为中文 -->
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>

<body background="../img/background.png">
<div class="add_student">
    <div class="add_studentmain">
    <h1>增加学生信息</h1>
    <form action=" " method="post">
        <ul>
        <li>
	        ID: <input type="number" name="id" placeholder="请输入ID" required/><br />
        </li> 
        </ul>
    </form>
    </div>
</div>
</body>
</html>

浏览器会将代码解析成DOM树

六、HTML语法

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

七、HTML中的标签

标题大小：h1~h6

<h1>有序列表</h1>
<ol>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
</ol>
<h2>无序列表</h2>
<ul>
    <li>苹果</li>
    <li>葡萄</li>
</ul>
<h3>表格标签</3>
<dl>
    <dt>2023-7-28</dt>
        <dd>女</dd>
    <dt>城市：</dt>
        <dd>北京</dd>
        <dd>上海</dd>
</dl>
<h4>链接<h4>
  <a href="https://www.bytedance.com/">
  字节跳动官网
  </a>
  <a href=" " target="_blank">  </a>

html中的target共有四种选择：_blank、_parent、_self、_top，区别如下

1、“_blank”的意思：浏览器总在一个新打开、未命名的窗口中载入目标文档。它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(就是实现你的每次跳转都在同一个窗口的核心点)

2、“_parent”的意思：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。target="_blank" ,浏览器总在一个新打开、未命名的窗口中载入目标文档

3、“_self”的意思：这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。target="_parent" ，属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

4、“_top”的意思：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

链接

<img src="位置" alt="图片加载失败..." />

<audio src="位置" controls> 音频和暂停键 </audio> <video src="位置" controls> 多媒体和暂停键</video>

输入

checkbox复选框

多个radio，如果name值相同，可以实现单选（性别）

list可以提示用户输入内容，datalist中的可以快捷选择

引用

长引用 <blockquote cite="引用的网址"> <p>内容</p></blockquote>

短引用<cite>作品名</cite>

q引用<q>内容</q>

引用一个代码<code> const </code>

引用多个代码<pre><code>const add = a+b </code></pre>

强调

<strong>加粗</strong>

<em>斜体</em>

八、内容划分

九、语义化是什么？

HTML中的元素、属性及属性值都有某些含义开发者应该遵循语义来编写HTML，例如有序ol，无序ul

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

十、谁在使用我们写的HTML？

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

个人总结：

此次课程收获很大，主要是回忆起以前学过的很多标签、属性以及一些用法的细节，通过阅读MDN文档也学到了很多知识。

《前端与HTML》| 青训营