这是我参与⌈第四届青训营⌋笔记创作活动的第1天

一，什么是前端？

在学习HTML之前，我们首先来简单了解一下什么是前端。

什么是前端？三个特点：

解决GUI人机交互问题
跨终端
Web技术栈

前端技术栈：

JavaScript(行为)
CSS(样式)
HTML(内容)
HTTP协议

.前后端交互技术（ajax socket）

服务器通过HTTP（协议）与浏览器通信，实现数据交换，浏览器可以通过服务器获得前端的代码，然后通过自己的浏览器引擎来渲染生成页面。浏览器可以把用户在浏览器上填写的内容（例如用户名，密码等）通过HTTP协议传到服务器端进行存储。

前端开发常用开发工具：

一般推荐,浏览器使用Chrome,编辑器使用VScode

二，HTML

HTML是“HyperText Markup Language”首字母的缩写。也称超文本标记语言。其中超文本不只包括文字，还可以是图片，标题，链接，表格等；标记语言是指用标签来描述网页，但又不属于真正意义上的编程语言的标签语言。

三，HTML结构和语法

基本结构：主要是head和body两部分。

<！doctype html>
<html>
  <head>
    <meta charset="UFT-8">
    <title>页面标签</title>
   
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

HTML语法

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

标题

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

列表标签

有序表:ol
无序表:ul
自定义表:dl,dt,dd


<ol><li></li></ol>

<ul><li></li></ul>

<dl><dt><dd></dd></dt></dl>

超链接

<a href="https://www.taobao.com/" target="_blank">淘宝</a>

href属性：即跳转页面的地址。

target属性值有两个：

_blank:即打开一个新页面跳转。
_self:即在当前页面跳转，并且覆盖当前页面。

input标签

<input type="text"></input>

type属性值有很多，常用的有button,checkbox,color,date,image,text,password,submit等。

下拉标签

<select><option>1</option></select>
<select><option>2</option></select>
<select><option>3</option></select>
<select><option>4</option></select>

四，语义化

什么是语义化？

HTML中元素，属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序表用ol，无序表用ul
- lang属性表示内容所使用的语言

2.语义化好处：

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

个人总结：

在参加字节跳动第四届青训营前，我对于前端认识很浅，自己在b站上自学了一点点前端三件套，对于前端知识有一点点基础和认识，但是并没有实践项目和深入的学习，，通过本节课我对于HTML有了更深一层的理解和学习，补充了很多我自学时遇到的问题和不懂到知识点，有意外的收获。

前端与HTML|青训营笔记