前端与 HTML | 青训营笔记

彼岸an
487 阅读4分钟

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

一、本堂课重点内容：

  • 前端工作的定义
  • 前端技术栈拆解与分析
  • HTML 作用解析
  • HTML 语义化

二、详细知识点介绍：

  • 前端：使用web技术栈解决多端图形界面用户交互问题
  • 前端技术栈：主要分为html（内容、页面结构）、css（样式：大小、颜色）、js（行为：响应事件）三层。构成前端最基础的技术栈
  1. 运行在浏览器里面，浏览器通过http协议与服务器进行通信
  2. 把前端代码通过http协议从服务器取得
  3. 渲染成看到的页面
  4. 浏览器也可将用户填写的内容、或者用户一些行为，通过http协议提交至服务器端
  • 前端关注方面
  1. 美观、功能、无障碍、性能、安全、兼容、用户体验
  • 前端边界
  1. node.js-服务器端应用
  2. ELECTRON、React Native-客户端应用
  3. Web RTC-p to p在线传输、多人会议
  4. Web GL-流畅的3d游戏
  5. Web ASSEMBLY-c++或其他编写的代码直接在浏览器中可以运行
  • 开发环境：浏览器+编辑器

HTML

  • 超文本+标记语言
  • html标签
  1. 文档根标签：所有其他标签写在其中
  • head标签
  1. 用户需要的信息，但又不直接呈现给用户的
  • 浏览器将html代码解析成一个DOM树-树形结构
  1. 每个结点为DOM结点
  • HTML语法
  1. 标签、属性推荐小写。自定义组件大写表示。原生标签小写表示
  2. 空标签可以不闭合-不写结束标签，只在开始标签末尾+\
  3. 属性值推荐双引号包裹
  4. 某些属性值默认true，那么可以省略
  • 标题h1-h6标签
  1. 一个html文档只能有一个h1标签
  • ol有序列表
  1. type取值：
1. 1（123456的序列）
2. a(从a开始排序abcd...)
3. Ⅰ/ⅰ(罗马数字的一开始排序)
表示票房等
  • ul无序列表
  1. type取值
1. disc实心圆
2. cirde空心圆
3. square实心正方形
4. none空
  • dl自定义列表
  1. dt：属性名、图片
  2. dl：属性值、图片描述
  3. 多对多关系
  • a链接标签
  1. href属性值：跳转到的属性值
  2. target属性值：
1. _self：原有窗口打开
2. _blank:新窗口打开
  • img图片标签
  1. src图片路径
  2. alt展示不出图片的文字提示
  3. width图片宽度-等比例改变
  • audio音频标签
  1. src音频路径
  2. controls属性：默认需要播放控件
  • video视频标签
与video一致
  • input标签
  1. placeholder属性：提示信息，预填信息
1. placeholder="..."
填写信息时自动消失预填信息
  1. type值
1. range
进度条
2. number
min="1" max="10"
数值填写框范围1-10，有上下箭头可调整
3. date日期填写
min="" 
4. checkbox
多选
5. radio单选
通过相同name属性来制造互斥关系
  1. list
希望用户自由输入，同时给予一些快捷输入方式

image.png

  • select标签-下拉选择
<select>
  <option>1</option>
  <option>1</option>
</select>
选项比较多，在页面显示比较臃肿
  • textarea文本域标签
  1. 用户需要输入多行文字
  2. 开始和结束标签中间可插入信息，预填信息。
填写时预填信息不会消失

语义应用

文字上引用标签

  • blockquote块级引用标签-双标签
  1. cite属性：这段文字来源于哪？
  • cite标签-短引用
  1. 作品名字、章节
  2. 斜体
  • q引用标签
  1. 具体引用的内容-与cite的区别

代码标签

  • code标签
  1. 代码引用-短代码引用
  2. pre标签包围code标签-多行代码引用

强调标签

  • strong标签-强调作用
  1. 粗体
重要、紧急：含义上重要紧急
  • em标签-强调作用
  1. 斜体
语气重读的词：猫'是'可爱的动物、猫是'可爱'动物

页面划分

image.png

  • header标签-页头(可放logo、导航
  1. nav标签-导航
  • main标签-页面主体放在里面
  1. 一般一个页面主体只有一个main元素
  2. 页面内容放在article，可以有多个article
  • aside
  1. 跟内容相关的但不直接属于其中的。比如：广告弹窗、热点、文章推荐
  • footer标签
  1. 页尾，比如：版权、参考信息、备案等
html语义化原则
用处：
浏览器-自动翻译：lang属性
开发者：修改、维护页面
搜索引擎：提取关键词、排序：标题权重大于内容
屏幕阅读器：给盲人读页面'内容'、或者图片的替代性文本、老人阅读-文字字体等
  • 如何做到语义化？
  1. 了解每个标签和属性含义
  2. 思考标签含义
  3. 不直接可视化工具生成的代码
  • 推荐w3c的html5的规范、mdn文档

三、课后个人总结：

学习了一些常用的标签、了解了不同语义下使用哪些标签（文字引用、代码引用、强调作用）、以及页面内容划分标签

  • 本文若有不足之处 欢迎指正~
avatar
文章
阅读
粉丝