前端与HTML | 青训营

用户9410925091298
62 阅读2分钟

前端与HTML | 青训营

什么是前端

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

个人理解为前端是一个应用与用户相交互的部分，与此对应的后端则是与应用管理维护者交互的部分。

前端技术栈

  • HTML负责前端的内容显示
  • CSS则告诉计算机内容需要以什么样的形式显示
  • Javascript则告诉计算机当用户与之交互时将采取什么样的行为

前端需要关注的方面

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

HTML是什么

HyperText MarkupLanguage

即超文本标记语言

HTML语法

<!doctype html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>
  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、img
  • 属性值推荐用双引号包裹
  • 某些属性值课省略，比如 require、readonly

使用 h1~h2标签可以标记标题，例如

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>
  • <ol></ol> 表示有序列表
  • <ul></ul> 表示无序列表
  • <dl></dl> 表示有键值对的列表

链接

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

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

输入

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

<input type="range">

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

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

<textarea>Hey</textarea>

语义化是什么

  • HTML中元素、属性及属性值都有某些含义
  • 开发者应遵循语义来编写HTML

语义化的好处

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

个人的思考

HTML的语法其实是相当简单的，花费一天的时间肯定是可以完全学会的。

在编写HTML的过程中，最关键的是善于运用各种工具与互联网资源。

HTML发展到如今的时代，其中包含了相当多的element，想要在短时间内了解所有element的用法是不现实的，同时有些element的使用频率十分之低，了解所有element的用法也是没有意义的，因此只需要了解常用的element的用法即可，对于不常用的element可以查阅 MDN Reference。

除此以外，想要编写出一份优质的HTML代码，在平时的锻炼过程中则需要额外的注意代码的语义化，而不仅仅只是在意代码的样式。

avatar
文章
阅读
粉丝