0到1三小时入门前端教程笔记（HTML篇）

视频教程来自B站，本教程供大家参考复习以及参照学习。本文档用于解决一些学习疑问，以及简单入门，我十分推荐大家访问阅读“菜鸟教程”
视频教程链接: b站前端快速入门教程
让我们开始学习吧！
菜鸟教程链接：菜鸟教程

• 前端入门，看完总会有收获的

1.前端简介

简单来说前端主要是由HTML,CSS,以及JavaScript三大技术组成，下面我们将以房子为例子与大家介绍。

HTML简介

这是一种超文本标记语言，主要负责网页开发中内容（也就是文本）的编辑，正如同我现在正在使用的Markdown语法编辑这篇文章。HTML正如毛坯房，未加任何装饰，仅仅是文字的堆砌。

CSS简介

它是网页页面的装修工，它对网页及HTML文本进行外表上的加工，使网页更加美观。

JavaScript简介

这是一门编程语言，它的作用正是使网页动态效果和与人的交互性更加良好。它通过各种已建成库的使用，使网页更加智能。它就像房子中的智能家居，优化人们的住房体验。

2.安装 vs code 开发环境（此处根据视频p2安装下载即可）

3.HTML简介及环境搭建

HTML是以标签（对）为基本组成，来对文本进行编辑。
视频对html基本组成进行了相关介绍，了解即可此处不加赘述。

搭建环境

1. 进入vscode的方式:可以是新建文件夹-在文件夹下目录页输入cmd进入命令行输入code .进入vscode；或者直接进入vscode打开文件夹。
2. 新建文件，命名为demo.html(demo是演示的意思—当然也可以是其他任何名字，.html是文档后缀格式)
3. 在代码部分输入！按下tab即可生成HTML框架
4. 标题在title标签对中进行更改，右键open with live serve即可在网页中查看。
5. else每次编程结束后按下ctrl+s保存后网页内容才会更改。也可在vscode后端更改设置，让代码自动保存，这样网页就可实时显示。接下来的内容都会在标签对中进行书写。

4.常用文本标签(对)

1. 加粗，斜体，下划线以及删除线的实现标签对
   加粗<b>;斜体<i>；下划线<u>；删除线<s>
2. 表格（无序列表，有序列表，以及列表）的实现形式
   无序列表<ul>；有序列表<ol>
   表格<table>//表格 <tr>//行标签 <th>//表格列标题,<td>//表格数据
   表格加边框<table border="1"></table>

5.HTML的标签属性

1. 标签属性介绍
   <开始标签名 属性名=“属性值”> 例如上边的border就是属性名（不区分大小写），1就是属性值（区分大小写）。
2. 通用标签属性（了解即可，后边学到css会用到）

   属性	描述
   class	为HTML元素定义一个或多个类名（类名从样式文件引入）
   id	定义元素唯一的id
   style	规定元素的行内样式

3. 链接标签及图片标签其属性
   • 链接标签
     <a href=""></a>href属性代表地址，属性内容填写链接地址
     <a href=""target=""></a>target属性代表链接打开方式，属性内容self表示从当前页面跳转，而blank表示从新的标签页跳转
   • 图片标签
     <img src="" alt="">src属性代表地址，属性内容输入图片地址alt属性代表文本内容，属性内容输入文本，当src地址失效无法显示的情况下alt显示。
     width属性和height属性调整图片大小和宽度
4. <br><hr>单标签
   <br>换行标签<hr>分隔标签，由于他们都无内容，所以无需成对标签。上边的链接标签和图片标签都是行内，所以一般要依靠他们来换行。由于我现在使用的markdown语法与html如出一辙，我现在演示以下标签效果
   代码内容1<br>2换行效果如下：
   1
   2
   代码内容1<hr>2分隔线效果如下:
   1

   ---

   2

6.块元素与行内元素

1. 块元素：在页面中占据整行宽度，可以包含其他块级元素和行元素。eg：<div><p><h><ol><ul><table><li><form>等

• <div>全称Division（分隔），在菜鸟教程中描述是** 定义文档中的节**，就是一个“容器”，能容纳其他块元素和行内元素。

2. 行元素：在页面内占据部分行宽度，仅可以包含其他行元素。eg：<span><a><strong><em><img><br><input>等

• <span>全称Span（范围），在菜鸟教程中描述也是** 定义文档中的节**，本身也是个“容器”，但只能容纳其它行内元素，不能容纳块元素。

3. else

• 视频中的举例<div class="nav">class是分类属性，nav意思是导航，这串始标签的意思是创建一个类别为导航栏的块，打开方式可以是.+属性内容；若包含id则是#+标签内容
• 总的来说，<div>和<span> 都是“容器”标签，不同的是div创建的是块节，span创建的是行节，它们一般都与css和js相配合使用。

7.HTML表单

表单—简单可以理解为表格，主要通过<form>和<input>标签实现，下图为典型的表单页面。
这个页面中主要实现三类：第一二行，第三四行以及最后一行。也就是type属性对应的三种不同的值，分别是文本，选择和提交。
其中文本-text；选择-radio（单选），checkbox（多选）；提交-submit
其余视频中都有讲，这里要补充的是

1. lable 标签中的for属性有什么用？
   答案是绑定，那绑定干什么呢？—绑定后当你点击lable标签中的文字，例如下图中的账号： 这几个字符它会自动点开后边的文本框。

<form action="#">
        <label for="account">账号：</label>
        <input type="text" name="账号" placeholder="请输入账号" id="account">
        <br>
        <label for="password">密码：</label>
        <input type="password" name="password" placeholder="请输入密码" id="password">
        <br>
        <label >性别：</label>
        <input type="radio" name="gender" >男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">else
        <br>
        <label >爱好：</label>
        <input type="checkbox" name="hobby">唱
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby">rap
        <br>
        <input type="submit" value="确定">
    </form>