前端与 HTML

前端三大件的作用：HTML负责页面的内容，CSS负责页面的样式，而JavaScript负责页面的一些行为。

前端要解决的根本问题：图形界面下的人机交互问题。

HTML，即HyperText Markup Language，超文本标记语言。其中HyperText指图片、标题、链接、表格等格式的内容。而Markup Language指标签样式的语言，例如<h1> Hello World ! </h1>。HTML是一种用于创建网页的标记语言。它使用标记标签来描述网页的结构和内容，并通过浏览器解释和呈现这些标记，以便用户可以在网页上浏览和与之交互。HTML基于标签的语法，标签用尖括号包围，通常成对出现，包括一个起始标签和一个结束标签。起始标签标识了一个元素的开始，而结束标签标识了元素的结束。元素可以包含文本、图像、链接、表格、表单等内容。

代码示例：

<html> 
<head> 
    <title>我的第一个网页</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
        } 
        h1 { 
            color: blue; 
        } 
    </style> 
</head> 
<body> 
    <h1>欢迎来到我的网页！</h1> 
    <p>这是一个简单的HTML示例。</p> 
    <img src="image.jpg" alt="图片"> 
    <a href="https://example.com">点击这里访问示例网站</a> 
</body> 
</html>

最开头的<!doctype>标签标记了当前使用的HTML文件使用了什么样HTML语言版本，便于浏览器采用对应的方式渲染。

<html>标签是HTML代码的根标签，HTML代码写在其中。

<body>标签里包含页面呈现给用户的内容。

alt属性：替代性文本，当图片等无法正常显示时展示的文本。

语义化

使用HTML标签要注意 “语义化”：HTML中的元素、属性及属性值都拥有某些含义。开发者应该遵循语义来编写HTML。

语义化的好处：

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
尝试不使用可视化工具生成代码

前端与 HTML ｜ 青训营

前端与 HTML

语义化

语义化的好处：

如何做到语义化

前端与 HTML ｜青训营