前端与HTML | 青训营笔记

124 阅读2分钟

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

本节课主要介绍HTML的相关知识

一.什么是前端

前端即网站前台部分,运行在pc端,移动端等浏览器上展现给用户浏览的网页。

二.前端技术栈

  • HTML(内容) HyperText Markup Language
    超文本标记语言,HTML是一门描述性语言
  • CSS(样式)
    层叠样式表,是用来控制网页外观的一种技术
  • JavaScript(行为)
    是一种嵌入到HTML页面中的语言,由浏览器一边解释一边执行
    HTML用来控制网页的结构,CSS用来控制网页的外观,JavaScript用来控制网页的行为

三.DOM树

Document Object Model 文档对象模型
DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分 dom.svg

四.HTML语法

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

HTML

<h1> - <h6> 定义HTML标题

HTML链接

使用<a> - </a>来设置链接
<a href="url" target="_blank">链接文本</a>
href属性表示链接的目标,target定义被链接的文档在何处显示

五.语义化是什么

HTML语义化:用正确的标签做正确的事情
语义化例子:
article:定义文章
aside:定义文章的侧边栏
footer:定义页脚
header:定义页眉
section:定义文档中的区段
nav:定义导航栏

语义化的好处:

  • 代码可读性高,便于理解
  • 可维护性强
  • 搜索引擎优化,利于SEO
  • 提升无障碍性

总结

HTML 是一种在 Web 上使用的通用标记语言,其关键是标签,标签具体的内容可以在很多网站上进行查询。

本文若有不足之处,欢迎纠正。