前言：
今天大家对“htmllong”大致比较着重，看官们都需要了解一些“htmllong”的相关内容。那么小编在网上收集了一些关于“htmllong””的相关资讯，希望朋友们能喜欢，咱们快快来了解一下吧！文末有福利
前端开发，入门简单，有一台可以运行多款浏览器的电脑，能联网查询资料即可。深入的部分，需要更多的理论知识、肯钻研的精神。 前端开发，需要入门了解的屈指可数，主要就是如下几个大方面：
背景知识软件安装文本编辑器vscode(推荐使用，功能强大)Sublime TextNodePad++浏览器
Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
版本控制
Git GitHub
构建工具WebpackGulpWeb standards
Web standards ，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。
当下使用的web技术主流浏览器
Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
协议
协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常
httphttpssocketHTML, CSS, and JavaScript开发工具各浏览的DevTool,便于调试Linters插件Minify工具CDN等测试工具js库和前端框架（站点构建的更快、更高效）服务端语言
Python, NodeJS, Deno, Go, Rust面临的挑战浏览器兼容
Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在
响应式设计
厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容
性能
天下站点，只有快，才能留住用户
易用性
站点的访问人群不同，要具备普适性， 都能轻松使用。
国际化
国际语言众多，需要尽可能的多支持
安全性
用户隐私数据保护
HTMLhtml基础概念html元素
当然，也有例外，不是这种格式的
# Empty elements， or (void elements.) <img src=";>复制代码html元素嵌套
<p>My cat is <strong>very</strong> grumpy.</p>复制代码块元素和行内元素
块元素，独占一行；行内元素，按先后顺序，排列 这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含
元素属性
其中，也存在一种特殊的属性：Boolean attributes
<input type="text" disabled># 等效于<input type="text" disabled="disabled">复制代码
另外，也会存在一些特殊的写法。推荐都是key="value"形式
<a href=;favorite website</a>复制代码html文档结构
不管多少连续的空白，浏览器都会解析会一个空格
<!DOCTYPE html> # 定义解析格式<html> # 文档的root <head> #定义源数据地方 <meta charset="utf-8"> <title>My test page</title> </head> <body> # 文档的可见内容部分 <p>This is my page</p> </body></html>复制代码
元数据等请移步参考
html特殊字符
<, >,",' and &, 这是html自身使用的，如果用户需要展示，那么需要转义
html注释
<!-- <p>I am!</p> -->复制代码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添加标题
<figure> <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> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></picture>复制代码
picture+svg
<picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"></picture>复制代码audio
单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM
<video src="rabbit320.webm" controls> <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video>复制代码
浏览器适配问题
<audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <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 浏览器厂商，针对视频的支持格式不是不同的
<video src="rabbit320.webm" controls> <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"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <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 width="300" height="200"> <rect width="100%" height="100%" fill="green" /></svg>复制代码
iframe等中引用svg
<iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="Triangle with three unequal sides" /></iframe>复制代码canvas
canvas与svg不同，canvas基于像素,svg基于矢量图
#html<canvas id="my-canvas" width="600" height="400"></canvas>复制代码嵌入元素
iframe, embed and object
iframe
<iframe src="; width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href=";> Fallback link for browsers that don't support iframes </a> </p></iframe>复制代码html table样式指定
<table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> </tr> <tr> <td>Calcutta</td> <td style="background-color: yellow">Orange</td> </tr> <tr> <td>Robots</td> <td style="background-color: yellow">Jazz</td> </tr></table>复制代码更好的样式指定
col 一次指定即可
<table> <colgroup> <col> # 定义在colgroup中，与th个数对应 <col style="background-color: yellow"> </colgroup> <tr> <th>Data 1</th> <th>Data 2</th> </tr> <tr> <td>Calcutta</td> <td>Orange</td> </tr> <tr> <td>Robots</td> <td>Jazz</td> </tr></table>复制代码
全部设置
<colgroup> <col style="background-color: yellow" span="2"></colgroup>复制代码
如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料 大厂面试真题免费获取，希望能够对你们有所帮助。
标签： #htmllong #picturehtml5
