前端与HTML学习笔记|青训营前端工作的定义前端工程师使用web技术栈解决多端用户图形界面交互问题的工程师什么是前端

前端工作的定义

前端工程师使用web技术栈解决多端用户图形界面交互问题的工程师

什么是前端？

· 解决GUI人机交互问题

· 跨终端

PC/移动浏览器
客户端/小程序
VR/AR等

· web技术栈

前端技术栈

屏幕截图 2023-07-27 100216.png

一般的技术栈组成是：一个前端框架 + 一个状态管理 + 一个UI组件库 + 一个打包工具 + 一个请求库。这几个应该就差不多了，其他的再结合业务情况。

前端应该关注哪些方面？

· 功能

· 美观

· 无障碍

· 安全

· 性能

· 兼容

前端对用户体验来说非常重要

前端的边界

开发环境

屏幕截图 2023-07-27 101223.png

有一个编辑器和浏览器就能上手了

HTML是什么

屏幕截图 2023-07-27 102132.png

<img src="photo.jpg">
# src是属性名；photo.jpg是属性值

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现

 <!doctype html> #html的版本，以此来决定浏览器的渲染模式
    <html>
      <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
      </head>
      <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
      </body>
    </html>

代码显示结果

屏幕截图 2023-07-27 102821.png

DOM树

屏幕截图 2023-07-27 102901.png

里面的每一个节点称为dom节点

HTML语法

· 标签和属性不区分大小写，推荐小写

· 空标签可以不闭合，比如input、meta

· 属性值推荐用双引号包裹

· 某些属性值可以省略，比如required、readonly

标题

    <h1>这是标题1</h1>
    <h2>这是标题2</h2>
    <p>这是一个段落</p>
    <h3>这是标题3</h3>
    <p>这是一个段落</p>
    <h4>这是标题4</h4>
    <h5>这是标题5</h5>
    <h6>这是标题6</h6>

代码结果展示：

屏幕截图 2023-07-27 104156.png

列表


    <h2>世界电影票排行榜</h2>
    <ol>
      <li>阿凡达</li>
      <li>泰坦尼克号</li>
      <li>复仇者联盟</li>
    </ol>

    <h2>购物清单</h2>
    <ul>
      <li>🍇</li>
      <li>🍉</li>
      <li>🍎</li>
    </ul>

    <h2>霸王别姬</h2>
    <dl>
      <dt>导演：</dt>
      <dd>陈凯歌</dd>
      <dt>主演：</dt>
      <dd>张国荣</dd>
    </dl>

代码运行结果:

屏幕截图 2023-07-27 104755.png

ol有序列表

ul无序列表

dl定义列表

链接

<a href="https://www.bytedance.com">
 字节跳动官网
</a>

<a href="https://www.bytedance.com"
 target="_blank">
 字节跳动官网
</a>

插入图片或音频

<img src="图片的url"
   alt="Metal movable type"
   width="400"
/>


<audio
   src="音频的url值"
   controls
></audio>


<video
   src="视频的url"
   controls
></video>

输入

       <input placeholder="请输入用户名">

       <input type="range">

       <input type="number" min="1" max="10">

       <input type="date" min="208-02-10">

       <textarea>Hey</textarea>

运行结果：

屏幕截图 2023-07-27 110826.png 选择

 # 下拉选择
 <p>
   <select>
     <option>🍎</option>
     <option>🍌</option>
     <option>🍫</option>
   </select>
 </p>

 # 能选多个的
 <p>
   <label><input type="checkbox" />🍉</label>
   <label><input type="checkbox" checked />🍏</label>
 </p>

 # 只能选单个
 <p>
   <label><input type="radio" name="sport" />⚽</label>
   <label><input type="radio" name="sport" />🏐</label>
 </p>

 # 自由输入
 <input list="countries" />
 <datalist id="countries">
   <option>Greece</option>
   <option>United Kingdom</option>
   <option>United States</option>
 </datalist>

运行结果

屏幕截图 2023-07-27 155553.png

HTML列表标签

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义列表
dt	自定义列表项目
dd	定义自定列表项的描述

引用

   # 块级引用
   <blockquote cite="http://t.cn/RfjKO0F">
     <p>天才并不是自由自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的</p>
   </blockquote>

引用的是一段话，也叫做长引用；cite属性——表示来源于哪

  # 短引用
  <p>我最喜欢的一本书是<cite>小王子</cite></p>

  <p>在<cite>第一章</cite>,我们讲过<q>字符串是不可变量</q>。</p>

cite和q标签都是用来短引用的，但是通常用来引用一本书，而"通常用来引用具体的话"

  <p><code>const</code>生命创建一个只读的常量</p>

code标签 通常用来引用代码

   <pre><code>
      const add=(a,b)=>a+b;
      const multiply=(a,b)=>a*b; 
   </code></pre>

强调：strong标签——黑体 <em标签——斜体

内容划分

屏幕截图 2023-07-27 161531.png

HTML语义化

语义化是什么？

· HTML中的元素、属性及属性值都拥有某些含义

· 开发者应该遵循语义来编写HTML

 有序列表用ol；无序列表用ul

 lang属性表示内容所使用的语言

谁在使用HTML

开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键字
屏幕阅读器-给盲人页面内容
HTML是传达内容的，而不是样式

那么语义化如此重要，如何做到语义化呢？

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码`

前端与HTML学习笔记|青训营