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

前端的介绍

前端主要是运用web技术栈解决多端的人机交互问题，主要运用HTML、CSS、JavaScript。
HTML主要实现内容，CSS主要实现样式，Javascript主要实现网页的行为。

前端需要注意什么？

要注意页面的美观，程序是否安全，无障碍，兼容，体验，功能。

学习前端用到的主流工具

运用一些主流的浏览器，比如IE、chrome、Firefox、Safari
编写程序的一些主流编辑器：Hbuilder、VScode、WebStorm等等。

前端页面的主要框架？

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

本节课讲解的主要HTML标签

标题：h1~h6
无序列表：

<html>
  <head>
    <meta charset="UTF-8">
    <title>无序列表</title>
  </head>
  <body>
    <ul>
       <li>HTML</li>
       <li>CSS</li>
       <li>Javascript</li>
    </ul>
  </body>
</html>

有序列表：

<html>
  <head>
    <meta charset="UTF-8">
    <title>有序列表</title>
  </head>
  <body>
    <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>javacsript</li>
</ol>
  </body>
</html>

定义列表：

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <dl>
       <dt>班委</dt>
       <dd>小香</dd>
       <dd>小张</dd>
       <dt>体委</dt>
       <dd>小王</dd>
    </dl>
  </body>
</html>

图片链接：

<html>
  <head>
    <meta charset="UTF-8">
    <title>图片链接</title>
  </head>
  <body>
  <img src="图片地址" title="图片标题" alt="">
  </body>
</html>

a链接：
target属性主要是决定链接是否需要打开新窗口

<html>
  <head>
    <meta charset="UTF-8">
    <title>超链接</title>
  </head>
  <body>
  <a href="www.baidu.com" target="_blank">
  </body>
</html>

input文本框：

<html>
  <head>
    <meta charset="UTF-8">
    <title>文本框</title>
  </head>
  <body>
  <input placeholder="请输入用户名">
  <input type="range">
  <input type="number" min="1" max="10">
  <input type="date" min="2020-01-19">
  <textarea>Hey</textarea>
  </body>
</html>

通过本节课的学习，我了解到了什么是HTML，了解到了一些常用的HTML标签，知道了如何去完善页面的功能以及美观。本节课的标签只是少部分，很多的标签需要我们自己去运用并且将它熟记于心，随时可以熟练的运用，这对于我们后期的学习有很好的优势。

前端与HTML | 青训营笔记

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