回顾DAY1，前端与HTML | 青训营笔记

兔苕
87 阅读3分钟

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

1 前端:网页所展示给用户所能看到的界面

1.1 什么是前端

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

1.2 前端技术栈

  • HTML：网页的内容，负责网页的主体内容，类比于人的肢体
  • CSS：网页的样式，负责网页的布局，类比于人的长相与衣着
  • JavaScript：网页的行为，负责网页的交互行为，类比于人的行为动作

1.3 前端应该关注哪些方面？

  • 功能：这个产品的作用，可以用来做什么
  • 美观：产品界面的布局需要美观与简洁
  • 无障碍：不仅要适用于普通人群，还要适用于一些有生理缺陷的人群，
  • 安全：需要保障使用该产品的用户的数据不被泄露
  • 性能：产品的用户体验足够好
  • 兼容性：在各种各样的设备都能够使用

1.4 开发环境

  • 浏览器：IE(已宣布退役)、Edge、Chrome、Firefox、Safari等
  • 编辑器：VSCode、Vim、WebStorm、Sublime Text等
    适合自己的就是最好的

2 HTML:HyperText Markup Language

2.1 HTML语法

  • 标签和数学不去分大小写
  • 空标签可以不闭合
  • 属性值可以使用双引号包裹
  • 某些属性值可以省略

2.2 常用HTML标记

2.2.1 标题：h1~h6

image.png

2.2.2 列表:

  • ul>li：无序列表
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>

image.png

  • ol>li：有序列表
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

image.png

  • dl>dt>dd：定义列表
  <dl>定义列表
    <dt>列表项目1
    <dd>项目描述1</dd>
    <dd>项目描述2</dd>
    <dd>项目描述3</dd>
    </dt>
    <dt>列表项目2
    <dd>项目描述1</dd>
    <dd>项目描述2</dd>
    <dd>项目描述3</dd>
    </dt>
    <dt>列表项目3
    <dd>项目描述1</dd>
    <dd>项目描述2</dd>
    <dd>项目描述3</dd>
    </dt>
  </dl>

image.png

2.2.3 链接:a

<a href="http://" target="_blank" rel="noopener noreferrer"></a>
  • href：规定链接的目标 URL
  • target：规定在何处打开目标 URL。仅在 href 属性存在时使用;
  • rel：规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。

2.2.4 多媒体标签

  • img：图片 
    <img src="" title="" alt="">
    • title：鼠标移动到图片显示的值
    • alt：图片无法加载时显示的值
  • audio：音频 
    <audio src="" autoplay controls loop></audio>
    • autoplay:自动播放
    • loop：循环播放
    • controls：音频控件
  • video：视频 
    <audio src="" autoplay controls loop></audio>
    • autoplay：自动播放
    • loop：循环播放
    • controls：视频控件

都是通过src属性指定媒体文件路径

2.2.5 表单

  • input:通过type属性指定表单类型
    • button：按钮
    • checkbox：多选框
    • password：密码
    • radio：单选框
    • tel：电话
    • text：文本
    • number：数字
  • input的属性
    • checked：页面加载是默认选择该选项
    • disabled：禁用input元素
    • min，max：最大值、最小值
    • readonly：只读
    • value：value值
    • name：该表单的名称
    • placeholder：描述该表单的提示信息
  • textarea：文本域，可输入多行文本
  • select>option：
    • 下拉列表，select定义下拉列表，option定义列表选项
    • 属性：
      • multiple：可以选择多项
      • required：必须选择一个选项
      • size：可选的数目

如有不足与错误，望指出。

avatar
文章
阅读
粉丝