前端与HTML|青训营

92 阅读2分钟

一、什么是前端呢?

  • 解决GUI人机交互
  • 跨终端
  • Web技术栈

二、前端技术栈

前端的技术主要分为三层:

  • HTML(主要负责页面、结构、内容) 
  • CSS(设置样式) 
  • JavaScript(定义网页的行为) 都是运行在浏览器里面的。

与http协议就构成了前端基础的技术栈

三、前端应该关注的方面有哪些?

美观、功能、无障碍、功能、安全、性能,并且前端对用户的体验是非常重要的。

开发环境:浏览器+编辑器(入门的门槛比较低)

四、HTML简介

HTML(HyperText(超文本) Markup Language)

根标签

之中放的呈现给用户的内容

浏览器拿到HTML会进行解析,解析成一个DOM树

五、HTML语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合,比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值恶意省略,比如required、readonly

标题:h1~h6

h1表示一级标题,h2表示二级标题,依次类推。

列表:三类标签

  1. 有序列表:ol标签
    1. 无序列表:ul标签
      • 最后一类列表:(属性名后边跟一些属性值这种列表)dl标签

      链接

      图片

      音频

      多媒体

      表单类标签让用户输入一些信息   多文本输入框

      如:在输入框中设定默认文字

      下拉选择:当选项较多时使用

      文本类的部分标签:

      长引用 ,即引用别人的一段话  cite中是引用的地址

       :短引用  一般用来表示作品的名字或章节等

      :也是短引用 一般表示具体引用的一个内容

      :代码标签  

      : 强调标签  更突出的是这个东西更加重要,非常紧急

      :强调标签  更加注重语气上的强调

      六、语义化是什么?

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

                  1 有序列表用ol;无序列表用ul
      2 lang属性表示内容所使用的语言

      七、谁在使用我们写的HTML呢?

      • 开发者-修改、维护页面

      • 浏览器-展示页面

      • 搜索引擎-提取关键词、排序

      • 屏幕阅读器-给茫然读页面内容

      总结:

      对于前端学习者,要不断的进行学习。学完HTML就要继续学习CSS,进行样式学习。至于学好的标准,我认为就是使用html+css+js写一个相对好看的由很多静态页面构成的网站。并且HTML是用来传送内容的,而不是样式。为了做到语义化,了解每个标签和属性含义;思考什么标签适合什么内容;不使用可视化工具生成代码。