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

0.课程概述

初步认识前端
简单介绍了html以及html中常用的一些标签

1.知识点总结&实例演示

1.1HTML

1.1.1HTML标签语言初识

第一行：我们当前所使用的html版本，帮助浏览器选择一种更好的渲染模式

第二行：< html >文档的根标签，所有的内容都写在根标签内

第三行：< head >记录页面的原数据，不直接呈现在网站视图上的内容，如：页面名称

第四行：< meta charset="UTF-8" >该页面所使用的编码

第六行：< body >该标签内展示所呈现给用户的内容

1.1.2HTML常用标签

1.1.2.1标题标签h1~h6

共有< h1 >~< h6 >六种标签大小供选择

1.1.2.2列表标签ol，ul，dl

1.1.2.2.1有序列表标签ol

1.1.2.2.2无序列表标签ul

1.1.2.2.3定义列表标签dl

1.1.2.3链接标签a🔗

< a href="www.example.com/">页面内显示名称</ a >

将原本页面窗口取代生成链接网站的内容

< a href="www.example.com/"target="_b…</ a >

跳转到新窗口打开链接网站内容

1.1.2.4多媒体标签img，audio，video

下方三个代码输出结果

1.1.2.4.1图片标签img

src: 获取图片的地址。

alt: 可以看成是图片地址未能获取成功后的一种备用方案

注意img标签的初始大小由图片的大小决定,但可以通过调整标签大小来调整图片的大小。

1.1.2.4.2音频标签audio

src: 获取音频的地址。

controls: 赋予控制音频的功能

1.1.2.4.3视频标签video

src: 获取视频的地址。

controls: 赋予控制视频的功能

1.1.2.5输入标签input

  <input originalholder="请输入">
  <input type="range">
  <input type="number" min="1" max="10">
  <input type="date" min="2018-02-10">
  <textarea>HEY</textarea> 出现一个可以随意调整大小的可输入多行文字的文本框

注意不同类型的input标签对输入的内容有不同的要求。像number类型的只能输入数字,不能输入字母或特殊符号等。

1.1.2.6选项标签

演示示例：

3.个人总结和补充

本章节主要初步认识并了解了前端的工作职能和常用的html简单标签用法，章节内容十分基础，没有太难的知识点，作为基础班的入门开端是一个非常容易上手的课程讲解。课上主要以单个标签的形式介绍其功能，课下应当多花时间去实践，完善代码语言的规范性和一体性。

其次本节课程中DOM树概念需要进行更好的理解，DOM（文档对象模型）树是 HTML 或 XML 文档的结构表示。它包含了文档中所有元素的结构和内容，并允许程序对其进行操作和修改。每个元素都是一个节点，并且有父节点和子节点之间的关系。通过使用 DOM API，可以在页面上查找和修改元素，添加或删除节点。上面所说的元素是指HTML或XML文档中的各个部分。在HTML中，元素可以是标题、段落、列表、图像等等。每个元素都有自己的标签，如< p >、< h1 >、< img >等。这些标签定义了元素的类型和属性。在DOM树中，每个元素都是一个节点，并且有父节点和子节点之间的关系。

举例：

在这个例子中，< div > 元素是父节点，而 < p > 和 < img > 元素是子节点。这是因为 < p > 和 < img > 元素都是 < div > 元素的子元素。可以通过DOM API来查找父节点和子节点，以及修改这些节点的属性或内容。

【青训营】前端与HTML