第一节 前端与HTML| 字节青训营笔记

RunnerUP
409 阅读7分钟

初识前端

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

首先课程开头讲到了什么是前端？

简单来说前端就是在用户终端展现给用户浏览和使用的GUI（图形化界面）。

主要有以下三个常见的终端方向

  • PC/移动浏览器
  • 客户端APP/微信小程序
  • VR技术端/AR技术端 而前端工程师主要要负责什么呢？

结合上面的前端定义，用一句话来总结就是前端工程师是使用Web技术栈来解决多端下的GUI交换的工程师。

其开发所使用的技术栈可以分为三层

最基础层（即为我们常说的前端三剑客 JS，CSS，HTML ）

image.png

JavaScript（行为）:作为三剑客的老大，其功能比较强大，主要定义页面的一些行为，动作。例如用户点击页面的按钮，JS去设置页面的响应方式等。

CSS (样式)： 作为三剑客的老二，设置页面的样式。例如位置，大小，颜色这些使得页面格式多样化的信息。

HTML (内容)： 作为三剑客的老三，主要负责整个页面的内容和结构，是最基础的页面开发技术。

以上的三种语言都是运行在浏览器中，而浏览器则依靠HTTP协议和服务器进行通信来拉取到前端的这些代码进行页面渲染，同时浏览器也可以把用户输入的内容和其他各类表单信息通过HTTP协议提交到服务器。到这里我们对前端页面的服务模式已经有了初步了解，总结来看前端最基础的技术栈就是通过三大基础语言和HTTP协议来构成的。

下面我们具体来学习了HTML语言的一些内容。

HTML

HTML是什么呢？

首先HTML全称 HyperText Markup Language。其中具体的含义如下：

  • HyperText：超文本的意思，即超越普通文本的表现形式，主要包含图片，标题，表格，链接等。

  • Markup Language：标记语言，通常使用一组开始标签和结束标签来表示，例如标题内容的表示：

      <h1>文章标题<h1>

我们也可以在标签上设置属性去具体化标签的功能，比如我们显示一张图片需要用到标签，但是如何找到显示的图片是那一张呢？这里就需要用到标签属性src。

        <img src = "photo.jpg" />

而一个简单完整的HTML页面则如下图表示

image.png

HTML语法主要有以下四点：

  • 标签和属性不区分大小写，但推荐原生的一些标签使用小写，构架的组件可以用大写来表示。
  • 空标签可以不闭合，因为标签中间不会再放其他内容，例如input，meta
  • 属性值推荐使用双引号来包裹
  • 某些属性值可以省略，比如required，readonly

HTML标签详解

标签 h1~h6 主要是标题标签，h1代表一级标题，h2二级标题，以此类推，具体的展示效果如下图：

image.png

列表标签主要有三类

  • 有序列表 ol：在ol标签中使用li标签可以实现1-n的数字排序
  • 无序列表 ul：在ul标签中使用li标签可以实现 . 的项目符号排序
  • 定义列表 dl：在dl标签中可以使用dt（标题）dd（标题具体描述的值），且一个dt可以对应多个dd

image.png

链接标签 a

主要使用href属性来确定具体要跳转的页面链接以及跳转方式。

    <a href ="https://juejin.cn/?utm_source=gold_browser_extension">
    稀土掘金首页
    </a>
    
    <a href ="https://juejin.cn/?utm_source=gold_browser_extension"
    target="_blank">
    在新的页面中打开稀土掘金首页
    </a>

输入标签 input

主要使用input + 属性值 来实现不同效果的输入表示。

    <input placeholder ="请输入用户名">  输出一个可以填写文本信息的文本框
    <input type ="range">  输出一个可以调节范围的拉伸条
    <input type ="number" min ="1" max ="10"> 输出一个可以填写数字的文本框并规定范围
    <input type ="date" min ="2018-02-10"> 输出一个可以填写日期的文本框并有最小日期
    <textarea> Hey </textarea> 输出一个可以填写多行文字的文本框

选项标签 p

多选标签：在p标签中使用label和input标签 通过定义input的type属性为checkbox来实现多选功能

    <p>
        <label><input type="checkbox" /> 选项1</label>
        <label><input type="checkbox" /> 选项2</label>
    </p>

单选标签：在p标签中使用label和input标签 通过定义input的type属性为radio和name来实现单选功能，具体是通过比较多个radio之间如果name相同，则只能从name相同的选项中去选择一个，属于是互斥的关系。

     <p>
        <label><input type="radio" name="sport" /> 选项1</label>
        <label><input type="radio" name="sport" /> 选项2</label>
    </p>

下拉选择标签：在p标签中使用select和option标签来实现

     <p>
         <select>
         <option>选项1</option>
         <option>选项2</option>
         <option>选项3</option>
         </select>
     </p>

自定义输入标签：在p标签中使用input和datalist标签来实现,同样可以使用option标签来为用户输入的答案做一些提示信息。

      <input list="countries" />
      <datalist id="countries">
         <option>提示信息1</option>
         <option>提示信息2</option>
         <option>提示信息3</option>
       </ datalist>

其他标签

  • blockquote:快捷引用标签，表示较长的引用，一般用于直接引用其他文章的一段话，使用cite属性指明文章的来源。
  • cite标签：短引用标签，引用较短的文字，例如引用其他人的作品名字，类似功能的有q标签。
  • code标签：代码标签，引用长段代码和较短的代码关键字。
  • strong标签：通常用于文本标签中，表示强调，突出所描述内容的严重性和紧急性，类似的有em标签，em标签主要侧重于在语气上的强调，通常去强调一个词的重音。

小结

课程的结尾，主要由几个引人深思的问题来结束。

  1. 语义化是什么？

HTML的规范标签数量很多，从HTML到HTML5，语言的更新和发展由调整和删除很多的标签，我们在使用和写这些标签的时候，需要去考虑元素，属性以及属性值代表的意义是什么。我们在开发的时候需要追寻标签的语义，在不同情况下合理的使用正确的标签，例如有序列表使用ol，无序列表使用ul，以及识别页面语言所转用的lang属性等，都是语义化的表现。

  1. 谁在使用我们写的HTML？

我们知道代码语义化会给我们带来一系列的好处，首先可以提高我们的代码可读度，提升维护人员对代码的可维护性。其次也可以优化搜索引擎，提升无障碍性的普及。而这些优势会直接惠及我们HTML的使用人员，包括但不限于开发人员，维护团队，其他用户群体，浏览器引擎等，语义化的高无障碍性还可以普及一些特殊群体对HTML产品的使用。从而做到传达内容，培养自己作为前端工程师的专业修养，而不是单纯的传达HTML的样式。

  1. 如何做到语义化？

首先要去具体了解每个标签的属性和含义，可以去看W3c上面关于HTML5的规范开发文档。同时尽量自己去思考和选择合理的标签，减少使用可视化工具去生成代码的行为，养成自我控制代码标签的习惯，可以让你在面对不同需求的情况下，更得心应手的选择最合适的标签去完成需求实现。

今天的分享就到这里啦！因为是纯小白学习，笔记中有错误的地方，还请各位大神多多指出，谢谢你们！

avatar
文章
阅读
粉丝