0 - 前端与HTML｜ 青训营笔记

LianQi
107 阅读5分钟

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

前端的基本概念

什么是前端

  • 解决GUI人机交互问题

  • 跨终端

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

  • Web技术栈

前端技术栈

  • JavaScript（行为）
  • CSS（样式）
  • HTML（内容）

前端应该关注的方面

  • 功能
  • 美观
  • 无障碍
  • 安全

开发环境

  • 浏览器

    • IE/Edge
    • Chrome
    • Firefox
    • Safari

  • 编辑器

    • VSCode - Visual Studio Code
    • Vim
    • WebStorm

​

HTML 的基本概念

HTML 是什么

  • HyperText Markup Language - 超文本标记语言

    • HyperText - 超文本 - 图片/标题/链接/表格
    • Markup Language - 标记语言 - <h1>一级标题</h1>

HTML 的基本结构

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

  • <html></html> - 文档根标签

    • <head></head> - 文档元数据
    • <body></body> - 文档主体

HTML 的元素与属性

  1. 元素

     <!--开始标签-->
 <p>
     段落内容
 <!--结束标签-->
 </p>

    一个元素由一个开始标签和一个结束标签组成，<p></p>组成了一个段落元素

  2. 属性

     <img src="photo.jpg" />

    一个属性由属性名src和属性值photo.jpg组成，即key="value"

    img元素可以不使用额外内容，故仅插入/省略结束标签

HTML头 的常用元素

标签描述
<title>文档标题
<base>页面链接标签的默认链接地址
<link>一个文档和外部资源之间的关系
<style>HTML文档的样式文件
<meta>HTML文档中的元数据
<script>客户端的脚本文件

HTML 语法

HTML 标题

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h6>六级标题</h6>

HTML由6种标题，分别对应<h1> - <h6>，<h1>最大，<h6>最小

HTML 列表

  1. 有序列表 - ordered list

     <ol>
     <li>阿凡达</li>
     <li>泰坦尼克号</li>
     <li>复仇者联盟</li>
 </ol>

  2. 无序列表 - unordered list

     <ul>
     <li>阿凡达</li>
     <li>泰坦尼克号</li>
     <li>复仇者联盟</li>
 </ul>

  3. 描述列表 - description list

     <dl>
     <dt>键</dt>
     <dd>值</dd>
     <dt>键</dt>
     <dd>值1</dd>
     <dd>值2</dd>
     <dd>值3</dd>
 </dl>

    在描述列表中，使用键值对的形式表示每组值的关系，多个键可以对应多个值

    <dt>：键 - terms

    <dd>：值 - describes

HTML 链接

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

href="···"：定义超链接地址

target="_blank"：在新页面中打开

HTML 多媒体

  1. 图片 - img

     <img 
      src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg" 
      alt="Metal movable type" 
      width="400" 
 />

    src=""：图片源（本地路径或网络地址）

    alt=""：替代性文本（Alternative Text），降级传达图片信息

    width=""：图片宽度

  2. 音频 - audio

     <audio 
   src="/assets/music.ogg"
   controls
 ></audio>

    src:""：音频源

    controls：显示浏览器默认音频控件（进度条/暂停/音量等）

  3. 视频 - video

     <video
   src="/assets/video.mp4"
   controls
 ></video>

    src:""：视频源

    controls：显示浏览器默认视频控件（进度条/暂停/音量等）

HTML 表单控件

  1. <input> - 输入

     <input placeholder="请输入用户名">
 <input type="range" min="0" max="10" value="5">
 <input type="number" min="1" max="10">
 <input type="date" min="2018-02-10">

    placeholder=""：文本框占位符

    type="range"：创建一个滑条

    type="number"：限定文本框输入为数字

    type="date"：设置文本框为日历

  2. <textarea> - 多行文本框

     <textarea>Hey</textarea>

    <textarea>：多行文本输入框

  3. <checkbox> - 复选框

     <label><input type="checkbox" />apple</label>
 <label><input type="checkbox" checked />banana</label>

    <label>：为input元素定义标注，即当用户选择该标签时，自动将焦点转到和标签相关的表单控件上

    <type="checkbox">：复选框

    <chechboxed>：初始选中

  4. <radio> - 单选框

     <label><input type="radio" name="sports" />football</label>
 <label><input type="radio" name="sports" />basketball</label>

    type="radio"：单选框

    name=""：name值相同的input元素只能选定一个

  5. <select> - 下拉框

     <select>
     <option>peer</option>
     <option>apple</option>
     <option>bananan</option>
     <option>orange</option>
 </select>

    <select>：下拉框

    <option>：下拉框选项

  6. <datalist> - 预定义列表

     <input list="countries" />
 <datalist id="countries">
     <option>Greece</option>
     <option>United kingdom</option>
     <option>United States</option>
 </datalist>

    list=""：加载预定义列表

    <input list="">：该文本框允许输入任意值，但是为预定义列表提供补全功能

    <datalist>：预定义选项列表

    id=""：与input元素的list属性相等，用于绑定<datalist>和<input>

HTML 文本控件

  1. <blockquote> - 长引用

     <blockquote cite="http://t.cn/RfjKO0F">
 天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有这种民众，就没有天才。
 </blockquote>

    <blockquote>：长引用

    <cite>：引用的来源

  2. <cite> - 短引用

     我最喜欢的一本书是<cite>小王子</cite>。
 在<cite>第一章</cite>，我们讲过<q>字符串时不可变量</q>。

    <cite>：一般用于作品名字或章节名

    <q>：一般用于引用具体的内容

  3. <code> - 代码块

     <code>const</code>声明创建一个只读的常量。
 <pre><code>
 const add = (a, b) => a + b;
 const multiply = (a, b) => a + b;
 </code></pre>

    <code>：定义一个代码块，长度不限

    <pre>：定义一个预格式化文本，使用等宽字体

    其余常用的还有：

    • <samp>：定义程序输出
    • <kbd>：定义键盘输入
    • <var>：定义变量

  4. <strong> - 加粗

     在投资之前，<strong>一定要做风险评估</strong>。

    </strong>：粗体，一般强调事情重要，严重，紧急

  5. <em> - 斜体

     Cats <em>are</em> cute animals.

    <em>：斜体，一般用于强调语气上的强调

HTML 页面内容划分

HTML basic page division

<header>：页面头，一般放LOGO、导航等

<main>：页面主体，一般页面内只有一个main元素

<article>：页面正文，例如博客页面的一篇文章

<aside>：与页面内容相关，但不直接属于页面内容的，例如广告、热点文章等

<footer>：页尾，一般放参考、版权、备案等

HTML 语法的注意事项

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

HTML 的相关知识

语义化

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

  • 开发者应当遵循语义来编写HTML

    • 有序列表用ol；无序列表用ul
    • lang属性表示内容的语言

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

谁在使用我们写的 HTML

  • 开发者 - 修改、维护页面
  • 浏览器 - 展示页面
  • 搜索引擎 - 提取关键词、排序
  • 屏幕阅读器 - 无障碍性，给盲人读页面内容

如何做到语义化

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