前端与HTML 标题 | 青训营

用户17717579247
50 阅读3分钟

# 前端与HTML

一、前端概念

什么是前端？

  • 解决GUI人机交互问题
  • 跨终端

​ PC/移动浏览器

​ 客户端/小程序

​ VR/AR等

  • Web技术栈

前端工程师是使用Web技术栈解决多端用户图形界面交互问题的工程师

二、前端技术栈

1.

第二节 1.png​ 浏览器通过HTTP和服务器进行通信，把前端代码通过HTTP从服务器上拿到，把它渲染成我们看到的页面。浏览器也可以把用户填写的内容或者说用户的行为通过HTTP协议提交到服务器端。

2.前端应该关注的方面
  • 功能
  • 美观
  • 无障碍
  • 安全
  • 体验
  • 兼容
  • 性能

三、HTML

3.1

第二节 2.png​

（1）<!doctype html>，其中doctype标记了我们当前使用的HTML文件是HTML什么版本，最终浏览器会根据这个选择使用哪种渲染模式，不写doctype，浏览器会选择以一种老旧的、怪异的模式去渲染页面，造成页面效果最终呈现出来不一致。

​ （2）<html>和</html>是根标签，所有的其他的标签是写在标签里面的。

​ （3）<head>标签，里面会放一些页面的源数据，即页面上需要这个信息，但又不需要直接呈现给用户的。

​ （4）<body>里放需要给用户呈现的。

3.2 DOM树

​ 浏览器拿到HTML之后，会把HTML代码解析，解析出来一个DOM树

第二节 3.png

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

​ 标签：

第二节 4.png ​

运行结果：

​

第二节 5.png

3.5

​ 页面中可以插入的多媒体样式：

第二节 6.png

​ 运行结果：

第二节 7.png

3.6

​ 输入类：

第二节 8.png

​ 运行结果：

第二节 9.png

3.7

​ 文本类一些标签：

第二节 10.png

​ 运行结果：

第二节 11.png

​ （1）<blockquote>块级引用，一般用于长引用，一般是直接引用别人的一段话。<blockquote>有一个cite属性，表示这段引用来自于哪里。

​ （2）<cite>标签，是短引用，一般用于说明引用作品名字或章节。

​ （3）<q>一般也是短引用，<q>和<cite>的一个区别是，<cite>一般是引用作品名字或章节，<q>一般是短的具体内容。

​ （4）<code>标签，一般用于页面中提到了一些代码的东西，可长可短。

​ （5）页面中长的代码用<code>包裹后，外面加上<pre></pre>,表示引用多行代码。

​ （6）<strong><em>都是表示强调语气，区别：<strong>表示这个东西非常重要，非常紧急，<em>更多的是在语气上的强调

3.8页面划分

第二节 12.png

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

​ 有序列表用ol；无序列表用ul

​ lang属性表示内容所使用的语言

3.10 HTML使用
  • 开发者 - 修改、维护页面
  • 浏览器 - 展示页面
  • 搜索引擎 - 提取关键词、排序
  • 屏幕阅读器 - 给盲人读页面内容
3.11 语义化好处

  • 增强代码可读性

  • 增强可维护性

  • 搜索引擎的优化

  • 提升无障碍性

    HTML是传达内容的，而不是样式

3.12 如何做到语义化
  • 了解每个标签和属性的含义（推荐看MDN的一些文档，W3C 上 HTML5 的规范）
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝