前端与HTML | 青训营笔记

Dijiks
78 阅读4分钟

前端与HTML | 青训营笔记

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

什么是前端？

  • 解决GUI人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端小程序
    • VR/AR等

  • Web技术栈

1.前端技术栈

1.png

2.前端应该关注哪些方面？

1.功能

2.美观

3.无障碍

4.安全

5.性能

6.兼容

7.体验

3.前端的边界

2.png

4.开发环境

3.png

HTML

1.HTML是什么？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1] 

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

2.标签

1. HTML 标签

<html> 标签告知浏览器这是一个 HTML 文档。

<html> 标签是 HTML 文档中最外层的元素。

<html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

2. head元素

<head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

3. meta 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域 为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

4.title 元素

<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。

<title>元素：

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时的标题
  • 显示在搜索引擎结果中的页面标题

5.body 元素

<body> 标签定义文档的主体。

<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

6.h1 - h6 标签

<h1> - <h6> 标签被用来定义 HTML 标题。

<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。

  • 标题很重要,请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

  • 搜索引擎使用标题为您的网页的结构和内容编制索引。

  • 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

  • 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5
这是标题 6
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

7.p元素

<p> 标签定义段落。

<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

3.DOM树

4.png

4.HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如required、readonly

5.语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML

6.语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

7.如何做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

课后总结

第一堂课比较吃力，因为之前没有学过然后课程节奏又很快，但是干货满满哈。本节课最难的部分是标签的介绍，内容多语法不一样需要多记多用才行，熟能生巧才是硬道理。之后上课先预习一遍然后再听老师讲，课下再将知识点自己实现一遍，相信学习效果很好很多。加油~~

avatar
文章
阅读
粉丝