Day1前端与 HTML | 青训营笔记

Leo菌
91 阅读4分钟

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

知识要点与个人感悟

一、什么是前端

  1. 使用web技术栈解决（多端）GUI（图形界面下）的人机交互问题；
  2. 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  3. Web技术栈
    • 网络协议与前端三件套（运行在浏览器内，通过网络协议与服务器通信）构成了前端最基础的技术栈
    • 使用时，是浏览器通过网络协议从服务器中拿到代码把它渲染成页面

二、前端应该关注哪些问题

不仅是技术还有其他方面：

  1. 做这个产品他有什么功能，解决了什么问题，有没有满足用户的某些需求，首先考虑的因素；
  2. 再从美观、功能、无障碍（色盲、色弱等）、安全、性能（速度是否快，动画是否流畅）、兼容性来考虑
  3. 前端的边界： 当然前端也可以去利用nodejs开发服务器端的应用；electron、react native去开发客户端的应用；webrtc进行P2P的即时通讯、多人会议技术；可以用webGL开发一些3D游戏；使用webAssembly可以把c++、rust等其他语言的代码编译成直接在浏览器可以运行的代码

三、HTML是什么

HyperText Markup Language 利用标签h1

  • 在标签上可设定属性

image.png

  • 一个完整html代码浏览器拿到之后解析成DOM树
1.html语法
  • 标签和属性不区分大小写，推荐小写；
  • 空标签可以不闭合，例如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，例如 required、readonly
2.列表属性
  1. 顺序（有序）列表 ol（order list），里面的每个列表项用list item表示
  2. 无序列表ul（UNordered list），列表项依然用li 表示
  3. key，value形式的列表：<dl></dl>dl为definition list，dl为定义列；dl内部包裹dt（definition title）和dd（definition description）。<dt></dt>里面为属性名；<dd></dd>里面为属性值，一个属性名内可有多个属性值。
3.链接属性
<a href="https: //www.bytedance.com/">字节跳动官网</a>
<a href="https://www.bytedance.com/"target="_blank">字节跳动官网</a>
4.多媒体属性
  • 图片属性 其中的alt （alternative text 替代性文本）为当图片加载不出来时的代替物。
<img src="https://lf3-
static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg
  "alt="Metal movable type "width="400"/>
  • audio、video，controls 默认显示播放控件
<audio src=" / assets/music.ogg"controls></ audio>
<video src="/assets/video.mp4"controls></video>
5.输入属性

  • placeholder 为占位符，当未输入任何东西
  • range表示滑动块
  • date表示日期选择
  • textarea表示输入多行
6.选择属性
  • input标签 checkbox为多选，radio为只能单选，select为下拉选择框

  • input 中若想给用户输入一些提示，使用list属性
<input list="countries" /><datalist id="countries"><option>Greece</option>
<option>United Kingdom</option><option>United States</option></datalist>
7.文本类属性
  1. 引用标签：
  • <blockquote></blockquote>表示块级引用，长引用，直接引用别人的一段话，有一个cite属性，表示引用的这段文字是来源于哪里。
<blockquote cite="http://t.cn/RfjKOOF">
  <p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，
  所以没有这种民众，就没有天才。</p>
</blockquote>
  • cite标签，短引用：一般用短短几个字引用别人的书的名字等，<q></q>也是短引用，区别是q是具体引用的哪个内容，cite就是表示作品的名字和某个章节
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>,我们讲过<q>字符串是不可变量</q></P>
  • code标签，当引用了某些代码时使用它包裹，可长可短，当长代码时：code标签外部加上pre标签形成等宽字体；短代码时不用
<p><code>const</ code>声明创建一个只读的常量。</p>
  
<pre><code>
const add = (a, b)=>a + b;
const multiply = (a, b) =>a * b;</code></pre>
  • 强调标签，strong标签（强调事情更加严重紧急）、em标签（语气上的强调） 内容划分的标签

四、内容划分的标签

五、语义化是什么

  • html中的元素、属性及属性值都用某些含义
  • 开发者应该遵循予以来编写html
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的的语言
  • 传达的是内容不是样式，如何做到语义化：
    • 了解每个标签和属性的含义，去看MDN或者W3C上的规范文档，看每个标签属性
  • 思考什么标签最合适描述这个内容
  • 不使用可视化工具生成代码

六、谁在使用我们写的HTML

  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器=给盲人读页面内容
avatar
文章
阅读
粉丝