怎么成为一名前端开发：HTML入门知识

　　背景知识

　　软件安装

　　文本编辑器

　　vscode（推荐使用，功能强大）

　　Sublime Text

　　NodePad++

　　浏览器

　　Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

　　版本控制

　　Git GitHub

　　构建工具

　　Webpack

　　Gulp

　　Web standards

　　Web standards ，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。

　　当下使用的web技术

　　主流浏览器

　　Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

　　协议

　　协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常

　　http

　　https

　　socket

　　HTML, CSS, and JavaScript

　　开发工具

　　各浏览的DevTool,便于调试

　　Linters插件

　　Minify工具

　　CDN等

　　测试工具

　　js库和前端框架（站点构建的更快、更高效）

　　服务端语言

　　Python, NodeJS, Deno, Go, Rust

　　面临的挑战

　　浏览器兼容

　　Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在

　　响应式设计

　　厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容

　　性能

　　天下站点，只有快，才能留住用户

　　易用性

　　站点的访问人群不同，要具备普适性，都能轻松使用。

　　国际化

　　国际语言众多，需要尽可能的多支持

　　安全性

　　用户隐私数据保护

　　HTML

　　html基础概念

　　html元素

　　当然，也有例外，不是这种格式的

　　# Empty elements， or （void elements.）

　　复制代码

　　html元素嵌套

　　<p>My cat is <strong>very</strong> grumpy.</p>

　　复制代码

　　块元素和行内元素

　　块元素，独占一行；行内元素，按先后顺序，排列这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含

　　元素属性

　　其中，也存在一种特殊的属性：Boolean attributes

　　# 等效于

　　复制代码

　　另外，也会存在一些特殊的写法。推荐都是key="value"形式

　　<a href=https://www.mozilla.org/>favorite website</a>

　　复制代码

　　html文档结构

　　不管多少连续的空白，浏览器都会解析会一个空格

　　<!DOCTYPE html> # 定义解析格式

　　<html> # 文档的root

　　<head> #定义源数据地方

　　</head>

　　<body> # 文档的可见内容部分

　　</body>

　　</html>

　　复制代码

　　元数据等请移步参考

　　html特殊字符

　　<, >,",' and &, 这是html自身使用的，如果用户需要展示，那么需要转义

　　html注释

<!--

　　-->

　　复制代码

　　html 多媒体

　　image

　　普通的图片

　　alt描述图片

　　# 推荐添加alt,而不是text子元素节点添加

　　<img src="images/dinosaur.jpg"

　　alt="The head and torso of a dinosaur skeleton;

　　it has a large head with long sharp teeth">

　　复制代码

　　caption添加标题

　　<img src="images/dinosaur.jpg"

　　alt="The head and torso of a dinosaur skeleton;

　　it has a large head with long sharp teeth"

　　width="400"

　　height="341">

　　<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>

　　</figure>

　　复制代码

　　响应式图片

　　根据展示设备尺寸的不同，加载不同的图片

　　<img srcset="elva-fairy-480w.jpg 480w,

　　elva-fairy-800w.jpg 800w"

　　sizes="（max-width: 600px） 480px,

　　800px"

　　src="elva-fairy-800w.jpg"

　　alt="Elva dressed as a fairy">

　　复制代码

　　设备尺寸相同，但是分辨率不同

　　<img srcset="elva-fairy-320w.jpg,

　　elva-fairy-480w.jpg 1.5x,

　　elva-fairy-640w.jpg 2x"

　　src="elva-fairy-640w.jpg"

　　alt="Elva dressed as a fairy">

　　复制代码

　　利用picture，不同设选择加载不同的图片

　　</picture>

　　复制代码

　　picture+svg

　　</picture>

　　复制代码

　　audio

　　单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM

　　<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>

　　</video>

　　复制代码

　　浏览器适配问题

　　<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>

　　</audio>

　　复制代码

　　video

　　单一url 浏览器厂商，针对视频的支持格式不是不同的

　　<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>

　　</video>

　　复制代码

　　浏览器适配问题

　　<video controls width="400" height="400"

　　autoplay loop muted preload="auto"

　　poster="poster.png">

　　<p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>

　　</video>

　　复制代码

　　svg

　　image引用svg

　　<img

　　src="equilateral.svg"

　　alt="triangle with all three sides equal"

　　height="87"

　　width="100" />

　　复制代码

　　html引用svg

　　</svg>

　　复制代码

　　iframe等中引用svg

　　</iframe>

　　复制代码

　　canvas

　　canvas与svg不同，canvas基于像素，svg基于矢量图

　　#html

　　复制代码

　　嵌入元素

　　iframe, embed and object

　　iframe

　　<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"

　　width="100%" height="500" frameborder="0"

　　allowfullscreen sandbox>

　　<p>

　　Fallback link for browsers that don't support iframes

　　</a>

　　</p>

　　</iframe>

　　复制代码

　　html table

　　样式指定

　　<table>

　　<tr>

　　</tr>

　　<tr>

　　<td>Calcutta</td>

　　<td style="background-color: yellow">Orange</td>

　　</tr>

　　<tr>

　　<td>Robots</td>

　　</tr>

　　</table>

　　复制代码

　　更好的样式指定

　　col 一次指定即可

　　<table>

　　<col> # 定义在colgroup中，与th个数对应

　　</colgroup>

　　<tr>

　　</tr>

　　<tr>

　　<td>Calcutta</td>

　　<td>Orange</td>

　　</tr>

　　<tr>

　　<td>Robots</td>

　　</tr>

　　</table>

　　复制代码

　　全部设置

　　</colgroup>

　　复制代码

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h59948.shtml