第六届360前端星计划_HTML与前端

最新推荐文章于 2020-04-12 17:01:38 发布

明媚呀

最新推荐文章于 2020-04-12 17:01:38 发布

阅读量273

点赞数

分类专栏：第六届360前端星计划文章标签： 360 前端星计划 html与前端第六届

本文链接：https://blog.csdn.net/weixin_41796393/article/details/105375836

版权

第六届360前端星计划专栏收录该内容

16 篇文章 0 订阅

订阅专栏

主讲人

赵文博
360前端技术专家
奇舞团

一、什么是前端

解决GUI人机交互问题

跨终端
PC/移动浏览器
客户端

VR/AR等
Web技术栈

二、前端技术栈

JavaScript（行为）
CSS（样式）
HTML（内容）
JavaScript、CSS、HTML运行在浏览器中，通过http协议与服务器端通信，获取前端代码渲染页面，浏览器也可以把用户填写的内容通过HTTP协议，提交到服务器。

三、前端应该关注哪些方面？

功能（核心）：是否满足用户需求。
美观
无障碍性
安全（重要）
性能：加载速度是否快，动画是否流畅
兼容性：不同浏览器、平台
体验（重要）
前端掌握技能列表

四、前端的边界

node.js：开发服务器端应用
ELECTRON、React Native ：开发客户端应用
WebRTC：P2P数据传输，开发多人视频会议
WebGL：大型3D游戏
WEBASSEMBLY：把C++或其他语言编译成浏览器可以运行的程序。

五、开发环境

浏览器：IE / Edge、Chrome、Firefox、Safari
编辑器：VS Code（推荐）、Atom、Vim、WebStorm

六、HTML是什么

HyperText（超文本） Markup Language（标记语言）
超文本：可包括图片、标题、链接、表格等。
标记：

<h1>Hello World</h1>
<h1>：开始标签
Hello World：标签内容
</h1>：结束标签

<img src="photo.jpg" />
src：属性名
"photo.jpg"：属性值

完整的HTML代码解析：

<!doctype html>      		   /*指明HTML版本和渲染模式 */
<html>               		   /* 根(Root)标签*/
  <head>             		   /* 包含元数据 */
    <meta charset="UTF-8">     /*页面编码 */
    <title>页面标题</title>     /*页面标题 */
  </head>
  <body>                	  /*包含页面内容 */
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

运行效果：
在这里插入图片描述
HTML解析：
DOM树

七、HTML 语法

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

标题标签：h1~ h6
列表
1）有序列表：ol，列表项：li
2）无序列表：ul，列表项：li
3）定义列表：dl，列表项：dt：描述标题，dd：描述文本（dt和dd并不是一一对应的）
链接（a标签）
href：链接点击之后跳转的url。
target：链接的打开方式。默认：当前页面打开，target="_blank"：新窗口打开。
图片：img标签。
音频：audio标签，添加属性controls，浏览器会渲染一个默认UI。
视频：video标签，添加属性controls，浏览器会渲染一个默认UI。
输入：input标签，type属性设置输入类型，默认为text（文本），其中range：从范围中选择一个数值，number：输入数字，data：日期输入框，checkbox：多选框，radio：单选框。
多行文本：textarea标签。
下拉选择框：select标签。
可输入的下拉选择框：

<input list="countries">
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

文本标签

1）blockquote标签：长引用，一般用来引用一段话。

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长
    的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

2）cite标签：短引用，一般用来引用作品名字或者章节。

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

3）q标签：前文提到过的内容再次描述时使用。

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

4）code标签：代码。

<p><code>const</code>声明创建一个只读的常量。</p>

5）pre标签：多行代码。

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

6）strong标签：强调作用，表示重要紧急。

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

7）em标签：强调作用。

<p>Cats <em>are</em> cute animals.</p>

内容划分
1）header：页面头部，logo、nav。
2）main：页面主体，文章。
3）aside：侧边栏，不属于页面正文，广告。
4）footer：底部，参考链接、版权信息。

在这里插入图片描述

八、语义化

1. 语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用 ol；无序列表用 ul
lang 属性表示内容所使用的语言

2. 谁在使用我们写的 HTML

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

3. 语义化的好处

代码可读性 - 开发者
可维护性 - 开发者
搜索引擎优化 - 搜索引擎
提升无障碍性 - 盲人

传达内容，而不是样式
例：标题不应该使用p标签<p style="font-size:32px">前端工程师的自我修养</p>
应该使用h1标签<h1>前端工程师的自我修养</h1>

4. 如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码，要手写代码

明媚呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六届360前端星计划_HTML与前端

前言主讲人：赵文博360前端技术专家奇舞团一、什么是前端解决GUI人机交互问题跨终端PC/移动浏览器客户端VR/AR等Web技术栈二、前端技术栈JavaScript（行为）CSS（样式）HTML（内容）JavaScript、CSS、HTML运行在浏览器中，通过http协议与服务器端通信，获取前端代码渲染页面，浏览器也可以把用户填写的内容通过HTTP协...
复制链接

扫一扫