前端语言串讲

前端语言的基本能力

一、HTML

标签、浏览器中称为元素,通过浏览器容器完成文本到页面的转化过程,HTML是做好SEO的关键技术点

二、CSS

根据class选择的类选择器,选择全部的选择器(*)。

1、伪元素选择器，它可以在元素内容之前或之后，都可以添加新的元素。

2、id选择器，它可以根据以来送择元素。一个页面的id是唯一的。

3、伪类选择器(a:link)会选择没有被访问过超键接标签，被访问(:link)、被禁用(idisable)。

4、伪元素选择器两个冒号、MDN网站查找

三、Javascript

六个基本类型:string, Number, Boolean, Null, Vndefined, symbol 对象类型:Array, Function

四、CSS in HTML

1、Inline CSS

This is a paragraph.

#### 2、Internet CSS

<head>
	<style type =text/CSS>
    	bady {background-color:blue;}
    	p{color:yellow;}
	</style>
</head>

3.External CSS

<head>
	<link rel:"stylesheet" type="text/css" href="style.css">
</head>

五、HTML全部标签分类

文档型：<!DOCTYPE>``<head>``<body>

闭合型：

闭合标签<p></p>
空标签：<br>``<img>``<input>

换行型：

块级<div>``<h1>,<h2>,<h3>...
行内<span><a>

H5新元素：

语义化标签
媒体标签：<video><audio><embed>
表单标签：<input type="date"><input type="color">
功能标签：<canvas><progress>

head：

title：标题,全局唯一
base：
- 向页面所有相对url提供前缀
- 全局唯一,不建议使用
- mete：
- 通常是约定好的键值对
- 例外：charset、http-equiv
link：rel决定类型,href决定引入地址
script：
type指定MIME类型
可内嵌代码，可外链文件

六、HTML ARIA

可交互组件：

Slider 滑动条
Button 按钮
Spinbutton 微调按钮
Checkbox复选框
status 状态栏
Link链接
Switch 切换器
Log 日志
Textbox文本框
Marquee 跑马灯文字
Timer 计时器
Progressbar 进度条
Tootip弹出提示
Scrobibar 滚动条

七、HTML5二进制

微信图片_20230728205420.jpg

八、HTML5 Shadow DOM

特殊节点，避免内部元素被外部元素访问到

微信图片_20230728205416.jpg

九、HTML5 Web Component

复用自定义标签能力

心得：

我深深地体会到前端语言在现代Web开发中的重要性和影响力。在我刚开始学习前端开发时，我对HTML、CSS和JavaScript有了初步的了解，但随着时间的推移，我逐渐深入学习这些语言，并将它们应用于实际项目中，收获了一些宝贵的心得。

HTML是基础的骨架： HTML是网页的基础，是构建页面结构的语言。深入理解HTML标签的作用和语义，可以让网页结构更加清晰，对SEO（搜索引擎优化）也非常有帮助。在编写HTML时，保持语义化的标签使用，可以提高网页的可访问性和可维护性。
CSS是美化与布局的艺术： CSS是用于美化网页和定义布局的语言。通过掌握CSS的选择器、样式属性和盒模型，可以实现各种各样的设计效果。合理的布局设计能够使网页在不同设备上显示良好，并且提供出色的用户体验。同时，遵循CSS最佳实践和使用预处理器，如Sass或Less，可以更高效地管理样式，并提高开发效率。
JavaScript是实现交互与动态的关键： JavaScript是前端开发中最为强大和灵活的语言。它让网页变得有活力，可以实现丰富的交互效果、数据处理和动态内容加载。深入学习JavaScript的原生API和ES6+的新特性，对于编写高效且易维护的代码至关重要。同时，要注意优化JavaScript代码，以确保页面加载速度和性能。
框架与库提高效率：学习和使用前端框架和库，如React、Vue.js或Angular，可以显著提高开发效率。这些框架提供了组件化开发、虚拟DOM等功能，使得应用的开发更加模块化和便捷。但在使用框架时，也要深入理解其原理和机制，避免出现不必要的性能问题。

前端语言串讲|青训营；