前端与HTML | 青训营笔记

用户7972238102632
119 阅读3分钟

前端与HTML | 青训营笔记

这是我参加「第四届青训营」笔记创作活动的的第一天，今天主要学习前端工程的基础HTML，有一丢丢基础的我还是挺容易接受的。

一、什么是前端？

1、解决GUI人机交互问题

2、跨终端

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

3、Web技术栈

二、前端技术栈

image.png

JavaScript：用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。
CSS：用来控制网页的外观，例如颜色、字体、背景等
HTML：用来定义网页的内容，例如标题、正文、图像等

三、前端关注的方面

  • 性能
  • 功能
  • 兼容
  • 体验
  • 美观
  • 安全
  • 无障碍

四、开发工具

  • 浏览器 IE/Edge、Chrome、Firefox、Safari
  • 编辑器 VScode、Vim、webstorm

五、HTML？

HTML的全称为超文本标记语言，是一种标记语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

<html>
<head>
<meta charset="utf-8">
<title>HTML?</title>
</head>
<body>
</body>
</html>
  • <!DOCTYPE html>声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

六、DOM树

image.png

DOM全称为The Document Object Model，它定义了HTML和XML文档的逻辑结构和文档操作的编程接口。

七、HTML语法

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

HTML标题

标题（Heading）是通过<h1>-<h6>标签进行定义。 <h1>定义最大的标题，<h6>定义最小的标题

<h1>这是最大的标题</h1>

<h6>这是最小的标题</h6>

元素

  • <p>这是一个段落</p>
  • <a href="https://juejin.cn/?utm_source=gold_browser_extension">这是一个链接</a>
  • <br>这是一个换行

其实还有很多HTML标签元素，就不一一列举了

八、内容划分

image.png

九、语义化

概念

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。根据html内容的结构,选择合适的标签,即用正确的标签做正确的事情。便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化实例

<h2>次级标题</h2>
<p>这是文章段落，一般文章段落都会比其他HTML标签所包含的内容要多。段落中基本都是文字，一般为3-6行，也可能10多行。是网页主要的阅读部分。</p>
<dl>“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
<dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
</dl>

语义化的好处

  • 代码可读性：使页面没有css的情况下，也能够呈现出很好的内容结构
  • 可维护性：语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
  • 搜索引擎优化：使页面没有css的情况下，也能够呈现出很好的内容结构
  • 提升无障碍性：如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
avatar
文章
阅读
粉丝