iframe嵌套html_如何成为一名前端开发之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元素嵌套

My cat is very grumpy.

复制代码

块元素和行内元素

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

元素属性

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

# 等效于复制代码

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

favorite website复制代码

html文档结构

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

 # 定义解析格式 # 文档的root    #定义源数据地方     My test page     # 文档的可见内容部分    

This is my page

复制代码

元数据等请移步参考

html特殊字符

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

html注释

复制代码

html 多媒体

image

• 普通的图片

alt描述图片

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

caption添加标题

A T-Rex on display in the Manchester University Museum.

复制代码

• 响应式图片

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

复制代码

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

复制代码

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

复制代码

picture+svg

复制代码

audio

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

浏览器适配问题

Your browser doesn't support HTML5 audio. Here is a link to the audio instead.

复制代码

video

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

浏览器适配问题

svg

image引用svg

复制代码

html引用svg

复制代码

iframe等中引用svg

canvas

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

#html复制代码

嵌入元素

iframe, embed and object

iframe

html table

样式指定

Data 1 Data 2 Calcutta Orange Robots Jazz 复制代码

更好的样式指定

col 一次指定即可

# 定义在colgroup中，与th个数对应 Data 1 Data 2 Calcutta Orange Robots Jazz 复制代码

全部设置

复制代码

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料 大厂面试真题免费获取，希望能够对你们有所帮助。