标题：「前端与 HTML」第四届字节跳动青训营 - 前端专场
这是我参与「第四届青训营 」笔记创作活动的的第1天
首先老师浅浅讲解了前端技术栈的组成，主要就是HTML（内容）、CSS（样式）和JavaScript（行为）。下面也将以这些顺序来记录学习内容。
HTML
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。我们可以在里面加入图片、声音、动画、多媒体等内容（超越了文本限制），还可以从一个文件跳转至另一个文件，与世界各地主机的文件连接（超级链接文本）
第一个HTML网页
<html>---->html页面的根标签
<head>---->头标签
<title>窗口标题标签</title>
<meta charset="utf-8"---->指定当前html页面的编码格式
</head>
<body> ----->html页面主体部分最终在浏览器中展示的内容
</body>
</html>
每一个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写，标签的作用如上所述。
HTML常用标签
1、<h1>-<h6> 标题标签
依据重要性递减，加了标题的文字会加粗，字号也会变大，一个标题独占一行。
<h1>1</h1>
<h2>1</h2>
<h3>1</h3>
<h4>1</h4>
<h5>1</h5>
<h6>1</h6>
2、段落和换行标签
<p>标签用于定义段落，可以将整个网页分为若干个段落，段落与段落之间保有空隙。
如果希望某段文本强制换行显示，就使用换行标签<br/>，该标签是单标签，段落之间会插入一些垂直的间距。
3、文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，就用文本格式化标签，使其以特殊方式显示。
加粗 <strong></strong> 或者<b></b>
倾斜 <em></em> 或者<i></i>
删除线 <del></del> 或者<s></s>
下划线 <ins></ins> 或者<u></u>
4、<div>和<span>标签
这两个标签是没有语义的，它们就是一个盒子，用来装内容。
<div>标签用来布局，一行上一般只能放一个。
<span>用来布局，一行上可以放置多个。
5、图像标签<img>
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src = "图像地址"/>这是一个单标签。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
alt是替换文本，用于图像不能显示时显示的文字信息。
title是提示文本，将鼠标放到图像上，显示的文字信息。
width 能够设置图像的宽度。height能够设置图像的高度。border设置图像的边框粗细。
6、超链接标签<a>
<a>用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式：
<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>
href 用于指定链接目标的URL地址，（必须属性）
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开的方式。
7、表格标签
<table>---是用于定义表格的标签
<tr>---用于定于表格的行，必须嵌套在table标签中
<td>单元格内的文字</td>---用于定义表格中的单元格，必须嵌套在tr标签中
</tr>
</table>
8、列表标签
（1）无序列表
<ul>表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项而列表项用<li>标签定义。<ul>标签中只能嵌套<li>
（2）有序列表
在HTML标签中，<ol>用于定义有序列表，列表排序以数字来显示，并使用<li>标签来定义列表项。
（3）自定义列表
在HTML标签中，<dl>标签用于定义描述列表，该标签会与<dt>和<dd>一起使用。
（1）无序列表
<ul>
<li>列表项</li>
</ul>
（2）有序列表
<ol>
<li>...</li>
</ol>
（3）自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1的解释</dd>
</dl>
9、表单标签<input>
<input type = "属性值" />
type属性不同，对应的实现功能也不同。
| type属性值 | 所对应的功能 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| radio | 定义单选按钮 |
| submit | 定义提交按钮，把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本 |
