HTML基础总结｜青训营笔记HTML&常见标签简单回顾总结，简述了青训营课堂讲解的内容，对讲述的常见标签进行总结和归

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

一、重点内容：

HyperText Markup Language（超文本标记语言）

开发者应该遵循语义来编写HTML（比如说有序列表用ol，无序列表用ul）

二、详细知识点：

html基本格式

<!DOCTYPE html>  
<html>
    <head>
        <title>标题</title>
        <meta charset="utf-8">
    </head>
    <body>
    
    </body>
</html>

<!DOCTYPE html> 用来告知 Web 浏览器页面使用了哪种 HTML 版本，去决定游览器使用哪一种渲染模式
<html> 文档的的根标签，其他所有的标签都在这个根标签内部
<head> 标签里的内容不会出现在网页内部，它是给搜索引擎看的，帮助游览器和搜索引擎来解析网页，比如标题、编码等
<body> 网页中的所有的可见内容都应写在body中

常见标签及语义

常见标签很多，并且属性也比较多，这里只做简单总结，详细直接引用MDN网。

MDN大部分标签都有实践用例，建议在上面多实践理解

<meta> 表示网页元数据信息。详细了解
<ul></ul> 无序列表，列表排序以项目符号显示。详细了解
<ol></ol> 有序列表，列表排序以数字来显示。详细了解
<dl> <dt> <dd> 自定义描述列表。详细了解
<form action=""></form> 表单提交。详细了解
<input type=""> 输入框，常与form标签一起使用。详细了解
<label for=""></label> 常与input绑定聚焦。详细了解
<textarea cols="30" rows="10"></textarea 文本框标签。详细了解
<select></select> 下拉菜单。详细了解
<blockquote> <q> <cite> 块级引用和短引用。详细了解
<code>，<pre> 点击即可查看，常组合使用来显示代码
<a href=""></a> 超链接。详细了解
<img src="" alt=""> 插入图片。详细了解
<audio src=""></audio> 插入音频。详细了解
<video src=""></video> 插入视频。详细了解
<iframe> 内联框架。详细了解

<h1>h1~h6</h1>      标题
<br>                表示换行
<hr>                表示分割线
<p></p>             表示段落，独占一行所以p是一个块元素
<strong></strong>   表示强调，加粗格式
<em></em>           语气强调格式

HTML中有时候，我们不能写一些特殊的符号
    比如多个空格，大于号和小于号
    如果我们要在网页中写这些符号，就需要用到html中的实体语句(转义字符)
实体语法：
    空格：&nbsp;
    大于号：&gt;
    小于号：&lt;
    版权符号：&copy;
 
图片格式了解
1、jpg图像格式：JPEG（JPG）对色彩的信息保留较好，高漬，颜色铋多，产品类的图片经常用jpg格式

2、gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，
   但是可以保存透明背景和动画效果实际经常用于一些图片小动画效果

3、png图像格式是一种新兴的网络图形格式，结合了GIF和PEG的优点，具有存储形式丰富的特点，
   能够保持透明背景如果想要切成背景透明的图片，请选择png格式

4、PSD图像格式PSD格式是 Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿
   对前端来说最大的优点是可以直接从上面复制文字获得图片还可以测量大小和距离

三、引用参考：

MDN

W3school

菜鸟教程

HTML基础总结 ｜ 青训营笔记

HTML基础总结｜青训营笔记