第六届字节跳动青训营第二课 ｜ 青训营

Sixteen
48 阅读2分钟

前端与HTML|青训营

什么是前端？

  • 解决GUI人机交互问题

  • 跨终端

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

  • web技术栈

前端技术栈

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

前端应该关注哪方面

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

HTML是什么

  • HyperText（图片、标题、链接、表格） Markup Language（

    文章标题

    ）
  • !doctype html:标记了我们当前使用的html文件，是什么样的html版本，最终浏览器决定使用哪一种渲染模式
  • html标签所有其他的元素都写在这里面，也是根标签
  • head标签里面会放页面的原数据，页面上需要的信息，但不用呈现在用户上
  • body放需要呈现给用户的内容
  • DOM树：浏览器拿到html之后，会把html代码进行解析，得到DOM树

HTML语法

  • 标签与属性不区分大小写，推荐小写
  • 空标签可以不闭合，eg：input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，eg：required、readonly

标题h1~h6(逐渐变小)

列表

  • 有序列表（默认前面数字加123）

    <ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

  • 无序列表（前面会有一个小的黑点点）

    <ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

  • 定义列表

    <dl>
    <dt></dt>
    <dt></dt>
    <dt></dt>
</dl>

链接

  • 可以通过链接点到别的页面

多媒体

<img src='路径' alt='替代行文本，当加载不出来的时候，会显示这段文字' width='宽度值'/>
​
<audio src='路径' controls(显示播放控件)></audio>
​
<video src='路径' controls></video>

输入

<input placeholder='请输入用户名'>
​
<input type='range'>
​
<input type='number' min='1' max='10'>
​
<input type='date' min='2018-02-10'>
​
<textarea>Hey</textarea>//(输入多行文字)

选项选择

  • 选多个：
<lable>
    <input type='checkbox'/>
</lable>
  • 选一个：
<lable>
    <input type='radio' name='sport'/>//(是从name相同里面选一个)
</lable>
  • 选项多，页面展示出来比较臃肿，就可以用下拉选择
<p>
   <select>
        <option>1</option>    
        <option>2</option>    
        <option>3</option>    
   </select> 
</p>

文本类标签

  • 直接引用别人的一段话
<blockqute cite='' ></blockqute>
  • 短引用 eg：书名、作者
<cite>小王子</cite>
  • 短引用，具体引用的内容
<q></q>
  • 提到代码，可用此标签引起来声明创建一个只读常量
<code></code>
  • 多行代码引用，前面加pre，展示起来字体会有区别
<pre>
	<code></code>
</pre>
  • strong标签，更突出这个东西的重要性，字体加粗了
  • em标签，更多在语气上展示，重读

语义化是什么

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

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

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

语义化的好处

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

如何做到语义化

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

感受

学习这节课，让我大致回顾了前端的基础，让我对起印象更加深刻，温故而知新。

avatar
文章
阅读
粉丝