前端是什么 | 青训营笔记

90 阅读1分钟

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

前端简介

一、 语言

HTML: 全称HyperText Markup Lauguage即超文本标记语言

  • 超文本:图片、标题、链接、表格等
  • 标记语言: 即标签 <img src="photo.png" />

基本结构

image.png

  1. <!doctype html> : html5标准网页声明,有了这个网页就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面。
  2. <html></html>: 文档根标签
  3. <head> 表示页面的"头部",页面的 title(标题)和meta(使用的字符集)一般写在 <head></head> 中间;
  4. <title> 表示页面的标题;
  5. <body> 表示页面的"身体",页面中的绝大部分内容都可以写在 <body></body> 之间。

语法规范

  • 标签和属性不区分大小写,但是建议小写
  • 空标签可以不闭合,例如<input …… >
  • 属性值推荐使用双引号包裹
  • 某些属性可省略例如<img> 的alt属性

新知识

一、input的使用

  1. <input type=range>

image.png

  1. <input type="number" min="0" max="100">

image.png

  1. <input type="date" min="2022-07-23">

image.png

  1. 提示下拉框实现 image.png

二、引用

  1. blockquote : 一段文字的引用,cite属性加链接 ,效果类似有margin的块级元素
  2. cite:斜体
  3. q: 双引号括起内容
  4. code:代码格式
  5. 强调: strong严重 em语气

三、语义化

  1. header:页头 + nav: 导航
  2. main: 主体内容 => article: 文字、图片(主要内容)+ aside: 不太重要的文章
  3. footer: 页尾
为什么要写好html:
  • 让维护的同事易理解
  • 让浏览器展示页面更美观
  • 让搜索引擎更好的查找内容
  • 便于用户使用

html是传递内容的,而不是样式

课后阅读材料