前端与HTML|青训营笔记

劳汉强
112 阅读2分钟

前端与HTML|青训营笔记

mobilebanner.png

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

浅谈前端

  • 目的：前端是为了解决GUI（图形界面下）人机交互的问题而存在！
  • 特点：跨终端（PC/移动端浏览器、客户端/小程序、VR/AR等）
  • 支持：前端所需要的技术栈有超文本标记语言（html）、层叠样式表（CSS）、Javascript（js）、http传输协议、Vue、React...
  • 关注：页面美观、安全、功能、兼容、性能、无障碍、体验
  • 边界：node.js（用js语言开发小型服务器）、ELECTRON（开发桌面应用框架）、React Native（跨平台移动应用开发框架）、WebRTC（实时浏览器通讯技术）、WebGL（3D绘图协议）、WebASSEMBLY（一种低级的类汇编语言、但解析速度快）
  • 开发环境：IE/Edge、Chrome、Firefox、Safari...
  • 编译器：VSCode、Vim、WebStorm...

1658683753276.png

html(超文本标记语言）

超文本：包括图片、标题、链接、表格

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

在一个标准的html文件中必须包含一下五个标签

  • <! doctype html> 文档类说明标签 告诉浏览器此HTML在HTML5上渲染
  • <html lang='zh-CN'></html> 根标签 lang定义当前文档显示语言    'zh-CN'表示中文
  • <head></head>头标签
  • <title></title>标题标签 定义文档的标题
  • <body>/body>体标签 写主要内容

解析<meta charset="UTF-8">

     charset="UTF-8"表示代码用万国码解析，如果不加此行代码则会出现乱码

DOM树

一个html文件可以看成一如下图的颗树：

eb90694a066bc18a1edb7b0d4aa11272.png

HTML语法

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

html常用的标签

  1. 标题标签h1-h6,字体由大到小，由粗到细（注意：标题标签不可以互相嵌套使用）
  2. 链接标签a，必须要有href属性说明链接跳转到哪里，'#'代表空链接（注意target属性的应用）
  3. 输入标签input，必须要有type属性（还有很多属性可以使用可以查阅NPM文档了解）
  4. 温馨提示：html还有很多很棒的标签有专门的作用可以去npm文档进行查阅学习哦！！

html的一般页面内容划分

u=2153632971,3275798804&fm=253&fmt=auto&app=120&f=PNG.webp

html的语义化

  • 什么是语义化：HTML中的元素、属性以及属性值都拥有某些含义

  • 如何遵循语义化：有序列表用Ol、无序列表用ul、表单用form...

  • 语义化的好处：提高代码可读性、提高代码可维护性、搜索引擎优化、提升无障碍性

  • 语义化的要求：了解每个标签和属性的含义，在布局时思考什么标签最适合描述内容

avatar
文章
阅读
粉丝