前端与HTML

简介: 什么是前端

什么是前端

解决人机交互问题

跨终端

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

解决多端页面问题

前端技术栈

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

网络异常,图片无法展示
|

前端应该关注哪些方面?

人机交互问题

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

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

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

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

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

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

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

前端的边界?

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

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

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

WebGL:开发流畅3d的游戏

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

开发环境

编译器:VSCode Vim WebStorm

浏览器:IE Chrome Firefox Satari

HTNL是什么?

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

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

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

<hmtl>根标签

<head> 原数据

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

</head>

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

</body>

</html>

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

网络异常,图片无法展示
|

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>语气上的强调

内容划分

网络异常,图片无法展示
|

header 头部内容

nav 导航栏

main 主内容

aside 次内容

footer 页尾

语义化是什么?

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

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

比如:有序列表用ol

无序列表用ul

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

谁在使用我们写的HTML

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

2、浏览器-展示页面

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

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

语言化的好处

1、代码可读性

2、可维护性

3、搜索引擎优化

4、提升无障碍性

网络异常,图片无法展示
|

如何做到语义化

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

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

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

目录
相关文章
|
7天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
13天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
24 1
|
16天前
|
前端开发 JavaScript 数据安全/隐私保护
前端秘法基础式(HTML)(第二卷)
前端秘法基础式(HTML)(第二卷)
|
16天前
|
前端开发
前端秘法基础式(HTML)(第一卷)
前端秘法基础式(HTML)(第一卷)
|
16天前
|
前端开发 JavaScript Windows
前端秘法引言(配置vscode, 以及html的基础)
前端秘法引言(配置vscode, 以及html的基础)
162 0
|
17天前
|
移动开发 前端开发 HTML5
分享83个Html前端模板,总有一款适合您
分享83个Html前端模板,总有一款适合您
23 4
|
17天前
|
移动开发 前端开发 程序员
分享90个Html前端模板,总有一款适合您
分享90个Html前端模板,总有一款适合您
12 2
|
17天前
|
移动开发 前端开发 JavaScript
分享79个Html前端模板,总有一款适合您
分享79个Html前端模板,总有一款适合您
19 0
|
17天前
|
移动开发 开发框架 前端开发
分享78个Html前端模板,总有一款适合您
分享78个Html前端模板,总有一款适合您
12 0
|
18天前
|
移动开发 前端开发 JavaScript
分享76个Html前端模板,总有一款适合您
分享76个Html前端模板,总有一款适合您
20 5

相关产品

  • 云迁移中心