前端与HTML| 青训营

用户1415385661368
88 阅读4分钟

什么是前端？

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

总结：前端工程师是使用Web技术栈，解决多端图形用户交互问题的工程师

前端技术栈

  • HTML（页面、结构、和内容）
  • CSS （页面中使用CSS设定样式）
  • JavaScript（定义网页的行为）

以上运行在浏览器中，浏览器通过http协议和服务器进行通信。浏览器将前端代码通过http协议从服务器拿到，然后渲染成页面。

前端应该关注哪些方面？

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

前端的边界？

技术不断发展，能做的东西远远超过了网页的范围。

  • nodejs 开发服务器端的内容
  • electron 开发客户端的应用
  • React Native 进行p2p的在线传输
  • webGL 开发3D游戏

开发环境

浏览器：各种浏览器，例如：IE/Edge,Chrome等 编辑器：VSCode,Vim,WebStorm

HTML是什么？

HyperText Markup Language

HyperText（超文本），不是简单纯文字，可以包含图片、标题、连接、表格等格式。使用标记语言（Markup Language）去表示这些格式。

Markup Language（标记语言），用<h1>文章标题</h1> 来表示一段内容或格式 image.png

形如<img src = "photo.jpg"/>省略了尾部的img

完整HTML代码举例 image.png

<!doctype html>标记了当前在使用的html文件是什么html版本，最终浏览器根据其使用渲染模式。

<html>文档的根标签，所有其他标签都写在这个标签内。

<head>和</head>存放页面的原数据（页面所需要的信息，又不需要呈现给客户的）。

<body>和</body>直接呈现给客户的一段文字或标题或文件。

上述代码呈现如下图。 image.png

浏览器拿到html之后，会将html代码进行解析，出来一个DOM树。

dom树是一个树型结构，每一个节点称为dom节点。 image.png

HTML语法

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

标题h1~h6

从大到小

列表

有序列表

<ol>与<ol>表示，子元素用<li>和</li>表示，在前面默认加1.2.3.

无序列表

<ul>和</ul>表示，子元素用<li>和</li>表示

dl型列表

有属性名。 用<dl>he</dl>表示。子元素用<dt>和</dt>表示描述列表的标题。用<dd>和<dd>表示具体的值。是一个多对多的关系。

链接

用<a和</a>表示，最重要的属性href,代表链接跳转到的地址。 例如，

<a href="http://www.bytedance.com/"> </a>

插入图片使用<img />标签,src表示图片地址,加入alt可以在图片加载失败后显示对应文字，width表示图片显示宽度。

插入音频使用<audio />标签,src表示音频地址，加入controls属性，表示浏览器默认空间。

插入视频使用<vidio />标签,src表示视频地址，加入controls属性，表示浏览器默认空间。

输入

使用<input,其中用placeholder=""表示占位符，没有输入时显示。

<input type="range">滑动块

<input type="number" min="1" max="10">数字输入框，限定最大值最小值（也可不限定）。

<input type="date" min="2018-02-10">日期输入框

<textarea>Hey</textarea>用户输入多行

<input type="checkbox">多选

<input type="radio">多选一，互斥属性通过name指定。含相同name属性的radio有且只有一个可被选中。

<select>多选输入框，子元素为option

image.png

文本类标签

blockquote 长引用，使用cite指定引用源，内部嵌套要引用的内容。

cite短引用

q为文字两头包上双引号

code表示代码，引用多行代码需要在code标签外部包裹pre标签

strong加粗，表示事情的紧急等

em斜体，多用于语气的强调

内容划分

image.png

header 放一些logo，导航。导航用nav表示。

主体放在main中，只有一个main。aside与主体相关又不直接属于main。内容放在artigic里（可没有）。

footer页尾，参考链接，版权信息等。

语义化是什么？

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

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

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

谁在使用我们写的HTML

  • 开发者——修改、维护页面
  • 浏览器——展示页面
  • 搜索引擎——提取关键字、排序
  • 屏幕阅读器——给盲人读页面内容

语义化的好处

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

总原则：传达内容，而不是样式

如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生产代码
avatar
文章
阅读
粉丝