开发者社区> xiao-kai> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端与HTML

简介: 什么是前端
+关注继续查看

什么是前端

解决人机交互问题

跨终端

PC/移动浏览器
 客户端小程序
 VR/AR等

解决多端页面问题

前端技术栈

HTMLCSSJavaScript 运行在浏览器中,浏览器通过网络协议与服务器进行通信。

image

前端应该关注哪些方面?

人机交互问题

功能 :有哪些功能解决什么问题,有没有满足用户的一些需求

美观: 做出来的界面是不是好看

无障碍:做的网站是不是对所有人都可以用的,比如色盲症这些人

安全:能不能保障所以用户数据的安全,有没有存在一些漏洞被利用

性能:网站做出来速度是不是足够快,动画流畅,用户体验足够好

兼容性:做出来的网站是不是能在各种各样的设备上正常去使用,比如在电脑手机上可以使用

体验: 用户对产品直观的感受,前端对用户体验来说是非常重要的

前端的边界?

node.js:开发服务器端的一些应用

ELECTRON/React Native:开发客户端的应用

Web Rtc:开发在线传输 多人会议

WebGL:开发流畅3d的游戏

WewAssembly: c++ 其他的语言编写的一些代码直接编译在浏览器里面可以运行得一些代码

开发环境

编译器:VSCode Vim WebStorm

浏览器:IE Chrome Firefox Satari

HTNL是什么?

(HyperText Markup Language)超文本标记语言

image

image

image

<!doctype html>声明html当前版本

<hmtl>根标签

<head> 原数据

`<meta charset="UTF-8">`标签 实例 规定 HTML 文档的字符编码
 `<title>页面标题</title>`页面的标题

</head>

<body>呈现给用户的真正内容

</body>

</html>

浏览器拿到html代码然后解析出来一个Dom树

image

HTML语法

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

标题标签

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

列表

有序列表

<ol>

`<li></li>`

</ol>

无序列表

<ul>

<li></li>

</ul>

自定义列表

<dl>

<dt></dt>

<dd></dd>

</dl>

链接

<a href="#">href链接地址

多媒体

<img src="#" alt="#> src图片地址,alt 图片显示不出来用文字代替

<audio>音频

<video>视频

输入

<input placeholder="未输入时显示">未输入时显示

type属性

type="ranqe"ranqe范围

type=“number”只能输入数字

type=“dete”日期

type=“checkbox”多选项

type=“redio”单选项

<textarea></textarea>文本框

<select>下拉选项

<option></option>

</select>

文本标签

<blockquote></blockquote>块级引用:表示比较长的引用直接引用别人的一段话

<cite></cite>短引用,比如引用作者的名字

<q></q>具体内容引用

<code></code>页面中提到代码引用

<pre></pre>多行代码引用

<strong></strong>加粗表示这个东西非常重要

<em></em>语气上的强调

内容划分

image

header 头部内容

nav 导航栏

main 主内容

aside 次内容

footer 页尾

语义化是什么?

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

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

比如:有序列表用ol

无序列表用ul

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

谁在使用我们写的HTML

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

2、浏览器-展示页面

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

4、屏幕阅读器-给盲人读页面内容

语言化的好处

1、代码可读性

2、可维护性

3、搜索引擎优化

4、提升无障碍性

image

如何做到语义化

1、了解每个标签和属性的含义

2、思考什么标签最适合描述这个内容

3、不使用可视化工具生成代码

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端容灾
什么是容灾 容灾的概念始于后端,指当遇到某个服务器或某个机房发生自然灾害、断网断电等情况下的应急办法,可以保证服务依然可用。 新入行的小伙伴可能有疑问,都断网断电了怎么可能保证网站还可以正常访问那?其实这是对大型网站,理解不深导致的,你认为的网站是这样的 像这种单机的服务自然没法做什么容灾了,这一台机器挂了服务也就挂了。
2148 0
阿里云前端周刊 - 第 41 期
## 推荐 ### 1. Intel CPU 爆重大设计缺陷,浏览器中同样可以越权访问 https://googleprojectzero.blogspot.hk/2018/01/reading-privileged-memory-with-side.html 近日 Intel CPU 被爆存在设计缺陷,普通的用户程序能够识别受保护区域的内核布局及其中内容;所有能访问虚拟内存的 CP
2559 0
阿里云前端周刊 - 第 27 期
## 推荐 ### 1. Facebook 宣布重置 React,Jest,Flow 与 Immutable.js 的开源证书 https://code.facebook.com/posts/300798627056246 自宣布保留 React 等开源项目附带专利要求的开源协议之后,社区反馈了极大的不满与怀疑,包括 WordPress 在内的许多开源项目也宣布即将切换技术栈;鉴
15629 0
阿里云前端周刊 - 第 26 期
## 推荐 ### 1. Node.js 8.5.0 发布 https://nodejs.org/en/blog/release/v8.5.0/ 已经发布的 Node.js 8.5.0 版本中引入了一系列的新特性与错误修复,其中值得注意的是 V8 重新支持 Snapshots、引入了 console.group()、新增了 fs.copyFile 与 fs.copyFileSyn
2250 0
阿里云前端周刊 - 第 16 期
## 推荐 ### 1. 神经网络入门 http://www.ruanyifeng.com/blog/2017/07/neural-network.html 眼下最热门的技术,绝对是人工智能,人工智能的底层模型是"神经网络"(neural network)。许多复杂的应用(比如模式识别、自动控制)和高级模型(比如深度学习)都基于它。学习人工智能,一定是从它开始。 ### 2
1516 0
阿里云前端周刊 - 第 14 期
## 推荐 ### 1. JavaScript 在嵌入式设备与物联网中的应用现状 https://auth0.com/blog/javascript-for-microcontrollers-and-iot-part-1/?utm_source=newsjs&utm_medium=sc&utm_campaign=javascript_microcontrollers 随着近年来
1889 0
前端开发常用命名规范
前端开发常用命名规范: 项目命名 全部采用小写方式, 以下划线分隔。 例:my_project_name 目录命名 参照项目命名规则; 有复数结构时,要采用复数命名法。
3184 0
+关注
30
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载