前端与HTML学习|青训营

61 阅读3分钟

一、什么是前端呢?

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

二、前端技术栈

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

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

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

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

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

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

四、HTML简介

HTML(HyperText(超文本) Markup Language)

根标签

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

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

五、HTML语法

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

标题:h1~h6

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

列表:三类标签

  1. 有序列表:ol标签

  2. 无序列表:ul标签

  3. 最后一类列表:(属性名后边跟一些属性值这种列表)dl标签

链接

图片

音频

多媒体

表单类标签

让用户输入一些信息 多文本输入框

如:

在输入框中设定默认文字

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

文本类的部分标签:

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

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

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

:代码标签

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

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

六、语义化是什么?

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

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

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

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

  • 浏览器-展示页面

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

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

总结:

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

对于这些内容,首先掌握基础知识,然后要多练习代码,熟练掌握,增强理解,这样更有利于我们的学习。