前端与HTML|青训营笔记

成杰_英
328 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第1天。 今天学习的内容有：

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML作用解析
  4. HTML语义化

前端工作的定义

前端与HTML

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

前端技术栈拆解与分析

前端技术栈

  • 前端技术栈分为分别是HTML、CSS、JavaScript。HTML、CSS、JavaScript都运行在浏览器里，浏览器通过HTTP协议与服务器通信，完成页面渲染或将用户信息提交到服务器中。运作方式如下图。 image.png

前端应该关注那些方面

  • 功能
  • 性能
  • 兼容
  • 无障碍
  • 安全
  • 美观

开发环境

image.png

HTML作用解析

HTML是什么？

HTML的全称是：HyperText Markup Language

  • HyperText是超文本，即呈现内容除了文本外，还可以是图片、链接、表格等；Markup Language是标记语言，用来表示超文本。
  • 标记语言的标签上可以设置属性。

HTML语法

  • 标签和属性不区分大小写，使用原生组件推荐使用小写，使用自定义组件推荐大写。
  • 空标签可以不闭合，如input、meta。
  • 属性值推荐用双引号包裹。
  • 某些属性值可以省略，如required、readonly。

语义化

  • HTML中的元素、属性及属性值都拥有某些含义，即要表现什么样的内容就用对应的标签才能把代码格式写规范。
  • 开发者应该遵循语义来编写HTML。
  • 如：有序列表用ol;无序列表用ul;lang属性表示内容所使用的语言。

HTML实践记录

一: 标题标签应用 html中提供了六级标题，h1到h6,其中h1字号最大，h6字号最小

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

结果如下

image.png

二：列表标签应用

html中提供了三类列表标签。

第—类是有序列表标签，用[ol]表示,

第二类是无序列表标签，用[ul]表示，

第三类是自定义列表标签，用[dl]表示，[dt]是小标题，[dd]是标题下内容

<h2>字节青训营</h2>
<dl>
  <dt>每日任务</dt>
  <dd>阅读文章</dd>
  <dd>记笔记</dd>
  <dd>观看视频</dd>
  
  <dt>长期任务</dt>
  <dd>完成大项目</dd>
</dl>

结果如下：

image.png

三：连接标签应用

链接标签用[a]表示。[a]标签一个重要属性是[href]表示需要跳转页面的地址。

<a href="https://www.bytedance.com/">百度</a>

<a href="https://www.bytedance.com/" target="_blank">百度</a>

结果如下：

image.png

四：多媒体标签应用

  • 图片标签用[img]表示，属性[src]表示图片存放路径。
  • 音频标签用[audio]表示，属性[src]表示音频存放路径。
  • 视频标签用[video]表示，属性[src]表示视频存放路径。
  • controls表示显示多媒体的暂停，声音调节等按钮。
<video src="/assets/video.mp4" controls ></video>

结果如下：

image.png

五：文本输入框标签应用

文本输入框标签用[input]表示。 placeholder属性表示未内容时输入框显示的文字。

<input placeholder="请输入内容">

结果如下：

image.png

课后个人总结

  1. 通过此次学习，我了解了前端的定义及其技术栈组成和作用。学习实战了HTML语言，用其各个类型标签渲染不同组件形成不同超文本。。

  2. 需要课下多加练习掌握运用。

avatar
文章
阅读
粉丝