1.前端语言的基本能力

HTML

Hypertext Markup Language

HTML是一种标记语言，用于描述网页的结构和内容。通过使用不同的HTML标签和属性，可以创建出具有标题、段落、链接、图像等元素的网页。HTML负责给网页提供结构和语义，是构建Web页面的基础。

主要作用：构建框架结构，基石

CSS

Cascading Style Sheet 层叠样式表 CSS是一种样式表语言，用于描述网页的显示样式。通过使用CSS选择器和属性，可以控制网页的布局、颜色、字体、大小等外观效果。CSS负责网页的外观和样式，可以通过样式表将样式应用到整个网站或单个页面上。

给网站添加样式，适配不同的屏幕，是网站外表体现的工具

Javascript

是一种脚本语言，广泛用于前端开发。它是一种基于事件驱动的语言，可以为网页添加动态交互和功能。通过JavaScript，可以动态修改网页内容、响应用户操作、与服务器进行交互等。JavaScript是实现网页交互和动态效果的关键技术。

增加交互功能

2.前端语言的协作配合

CSS in HTML

Inline CSS

<p style="color: blue;">
    this is a paragraph
</p>

Internal CSS

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

External CSS

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

Javascript in HTML

HTML in Javascript

CSS in Javascript

3.你不知道的HTML

标签的分类

结构标签（Structural Tags）：结构标签用于定义网页的基本结构和布局，如<html>、<head>、<body>等。这些标签可以帮助浏览器正确解析网页，并确定页面的基本结构。
文本标签（Text Tags）：文本标签用于定义和展示文本内容，如标题、段落、链接、字体等。这些标签包括<h1>到<h6>（标题）、<p>（段落）、<a>（链接）、<span>（文本容器）等。
表格标签（Table Tags）：表格标签用于创建和展示表格数据，如<table>（表格）、<tr>（行）、<th>（表头单元格）、<td>（数据单元格）等。使用这些标签可以安排和展示结构化的数据。
表单标签（Form Tags）：表单标签用于创建输入表单和接收用户的输入数据，如<form>（表单）、<input>（输入框）、<select>（下拉选择框）、<button>（按钮）等。使用这些标签可以实现数据的收集和提交。
多媒体标签（Media Tags）：多媒体标签用于嵌入和展示多媒体内容，如图像、音频和视频等。常见的多媒体标签有<img>（图像）、<audio>（音频）、<video>（视频）等。
样式和脚本标签（Style and Script Tags）：样式和脚本标签用于引入和应用样式表和脚本文件，以控制网页的外观和动态行为。常见的样式标签有<link>（外部样式表）和<style>（内联样式）；常见的脚本标签有<script>（JavaScript脚本）

HTML ARIA

4.HTML5

语义化标签（Semantic Tags）：HTML5引入了一系列的语义化标签，如<header>（头部）、<nav>（导航）、<article>（文章）、<section>（区块）等。这些标签更好地描述了网页的结构，提高了可读性和可访问性。
表单增强（Form Enhancements）：HTML5为表单提供了更多的输入类型和属性，如<input type="date">（日期）、<input type="email">（邮件地址）、<input type="range">（范围选择）等。这些新增的表单元素使开发者能够更轻松地创建丰富的表单。
多媒体支持（Multimedia Support）：HTML5引入了<audio>和<video>标签，用于嵌入和播放音频和视频。此外，还提供了嵌入各种媒体类型的新属性和API，如<source>标签和Media API。这使网页可以更直观地展示和播放多媒体内容。
画布和图形绘制（Canvas and Graphics）：HTML5的<canvas>元素允许开发者使用JavaScript在网页上绘制图形、动画和游戏。通过Canvas API，开发者可以在网页中实现丰富的绘图效果，如绘制图形、处理像素数据等。
本地存储（Local Storage）：HTML5提供了本地存储API，使开发者可以在用户浏览器中存储数据，而无需依赖服务器。本地存储提供了两个主要的API：Web Storage（localStorage和sessionStorage）和IndexedDB。它们可以用于存储临时数据、离线应用和缓存数据等。
地理定位（Geolocation）：HTML5的地理定位API允许开发者获取用户设备的地理位置信息。通过使用Geolocation API，网页可以根据用户的位置提供个性化的服务和功能，如定位用户位置、查找附近的地点等。

Day1 前端语言串讲