什么是前端

写代码的都是前端吗？显然不是的，那什么才是前端呢？有三个要点：

图形界面下的人机交互的问题（pc浏览器、移动浏览器、APP、VR）
跨终端
Web技术栈（HTML、CSS、JavaScript通过网络协议提交到服务器端来渲染网页）

前端应该关注哪些方面

功能
美观
无障碍（特殊人士能否使用）
性能
安全
兼容性（不同设备能否使用）
体验

HTML的详细介绍

doctype的介绍标记了当前使用的HTML是哪一个版本，最终浏览器会根据这个选择一种渲染模式，如果不写，则会渲染错误，达不到预期结果。

2.标签介绍

（1）标题字标记

标题字标记由h1-h6共计六种标记组成。标记中的h是英文Heading的简称，h1-h6标题字大小依次递减。

    <h1>1号标题字</h1>
    <h2>2号标题字</h2>
    <h3>3号标题字</h3>
    <h4>4号标题字</h4>
    <h5>5号标题字</h5>
    <h6>6号标题字</h6>`

（2）文本修饰标记

<b>定义粗体</b>
<i>定义斜体</i>
<u>定义下划线</u>
<sup>定义上标</sup>
<sub>定义上标</sub>
<strong>定义粗体</strong>
<small>变小字号</small>
<big>变大字号</big>

（3）列表

<ul>无序列表</ul>
<menu>菜单列表</menu>
<dir>目录列表</dir>
<ol>有序列表</ol>
<dl>定义列表</dl>

（4）超链接与浮动框架

<a herf=https://www.bytedance.com title="bytedance>字节跳动官网<a>"

<iframe 属性名称="value" name="iframename"></iframe>
<a herf="target.html" target="ifarmename">链接标题</a>

（5）图像

<img src="URL" alt="替代文本">

（6）滚动文字

<marquee width="" height="" bgcolor="" direction="up|down|left|right" behavior="scroll|slide|alternate" hspace="" vspace="" scrollamount="" scrolldelay="" loop="" onmouseover="this.stop()" onMouseOut="this.start()">滚动内容</marquee>

（7）音频、视频等多媒体文件

<embed src="多媒体文件" width="界面的宽度" height="界面的高度" autostart="true|false" loop="true|false"></embed>

（8）表单信息输入

单行文本输入框<input name="" type="text" maxlength="" size="" value="" readonly/>
密码输入框<input name="" type="password" maxlength="" size=""/>
复选框<input name="" type="checkbox" value="" checked="checked"/>
单选按钮<input name="" type="radio" value="" checked="checked"/>
图像按钮<input name="" type="image" src="" width="" height=""/>
提交按钮<input name="" type="submit" value="提交"/>
重置按钮<input name="" type="reset" value=""/>
普通按钮<input name="" type="button" onclick=""/>
文件选择框<input name="" type="file"/>
隐藏框<input name="" type="hidden" value=""/>
多行文本输入框<textarea name="" row="" cols="" warp=""/>初始信息内容</textarea>
<textarea name="" row="" cols="" warp="soft|hard"/></textarea><!--HTML5定义-->

语义化

应该去遵循语义来写代码，HTML中每个元素与属性值都有自己的意思，我们表达的是语义而不是一个句子的样式（不需要花里胡哨）

做到语义化

仔细想一下前端为什么需要html去渲染一样东西因为HTML在前端工程中是非常重要的，因为它是网页开发的基础，是网页内容的描述语言。而HTML可以用来描述网页的结构、内容、样式和交互让人们来更容易的实现构建网页、做出来让人满意的页面，它定义了网页的元素和组成部分，以及这些元素之间的关系。HTML还可以用来添加图像、音频和视频等多媒体元素，以及表单控件、下拉列表、按钮等交互元素，使网页更加丰富多彩。在前端工程中，HTML和CSS、JavaScript等技术一起，可以用来开发复杂的网页应用程序。其实了解html只是第一步，应当加强对html的学习，我觉得以下方法适合对于我这种新手来说比较友善的方法。

阅读相关书籍或教程：有很多优秀的书籍和在线教程可以帮助你学习HTML。例如，“HTML & CSS: Design and Build Websites”（Jon Duckett著）是一本很好的入门书籍。
了解基本语法和结构：学习HTML需要掌握一些基本的语法和结构，例如标签、属性、内容和注释等。你可以在W3Schools等在线教程中学习这些基础知识。
练习创建页面：创建一些简单的HTML页面，练习使用不同的标签和结构。你可以使用文本编辑器（例如Sublime Text、Atom或Visual Studio Code）来编写代码。
学习CSS：HTML和CSS是密不可分的技术，学习CSS可以帮助你更好地控制网页的外观和布局。你可以使用类似于CSS-Tricks和MDN Web Docs等在线教程来学习CSS。
掌握常用标签和框架：学习一些常用的HTML标签和框架（例如Bootstrap和React），可以帮助你更快地创建复杂的网页和应用程序。
参与社区和项目：加入一些HTML和CSS的社区（例如Stack Overflow和GitHub），参与一些开源项目或竞赛，可以帮助你提高技能并与其他人交流。


<!DOCTYPE html>
<html style="height: 100%; overflow: hidden" lang="zh" class="dark">
  <head>
    <title>新标签页</title>
    <meta
      name="keywords"
      content="创建和编辑属于您自己的浏览器标签页,精美日历、炫酷天气、每日头条、海量壁纸、常用网址随心订制"
    />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="description"
      content="自定义您新标签页上的网站和壁纸以及搜索引擎,创建和编辑属于您自己的浏览器标签页,精美日历、炫酷天气、每日头条、海量壁纸、常用网址随心订制"
    />
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval'; object-src 'self'"> -->
    <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'self'"> -->
    <link rel="icon" href="favicon.ico" />
    <link rel="apple-touch-icon" href="logo/logo.svg" />
    <link rel="mask-icon" href="logo/logo.svg" color="#00aba9" />
    <script type="module" crossorigin src="./assets/main-b11f0655.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/index-d086bd6c.js">
    <link rel="modulepreload" crossorigin href="./assets/todo-262c5398.js">
    <link rel="stylesheet" href="./assets/index-f811cf49.css">
    <link rel="stylesheet" href="./assets/todo-7d1f1700.css">
    <link rel="stylesheet" href="./assets/index-34b2eaca.css">
  </head>
  <style>

对其进行简要分析

文档类型声明：<!DOCTYPE html>，用于告诉浏览器这是一个HTML5文档。
HTML标签：<html>，用于包含整个HTML文档的内容。
元数据：包括标题、关键字、描述、字符编码、渲染器、浏览器兼容性等信息，用于提供给浏览器和搜索引擎更多的信息。
样式表：包括一些全局的样式，如字体、颜色、背景等。
脚本：包括一些JavaScript代码，用于页面的动态交互和数据处理。
标签：用于包含页面的主要内容，如div、img、script等对于本人来说，是一个基础尚可的人。在我看来，HTML有以下几个优点和缺点：优点：
易学习：HTML的语法简单，易于学习和使用，即使没有编程经验的人也可以快速上手。
易于阅读和理解：HTML代码是文本格式，可以直接阅读和理解，不需要任何特殊的工具或技能。
良好的兼容性：HTML可以在各种浏览器和设备上正常工作，不需要任何特殊的支持。
支持多媒体：HTML可以嵌入音频、视频、图像等多媒体元素，使网页更加生动和有趣。

缺点：

动态效果有限：HTML本身不支持复杂的动态效果，需要借助其他技术（如JavaScript）来实现。
不适合处理复杂的数据：HTML主要用于描述网页的结构和内容，不适合处理复杂的数据和计算任务。
容易出现兼容性问题：不同的浏览器和设备可能会对HTML代码有不同的解释和实现，容易出现兼容性问题。
不支持程序逻辑：HTML只能描述网页的结构和内容，不支持程序逻辑和控制，需要借助其他技术（如JavaScript）来实现

前端与HTML（详细介绍）｜青训营

什么是前端

前端应该关注哪些方面

HTML的详细介绍

语义化