前端3剑客(第1篇)-初识HTML

100编程书屋_孔夫子旧书网

当今主流的技术中,可以分为前端和后端两个门类。

前端:简单的理解就是和用户打交道

后端:主要用于组织数据

而前端就Web开发方向来说, 分为三门语言, HTML、CSS、JavaScript

语言 作用
HTML 描述页面的结构,类似于动物的骨架
CSS 渲染技术,使得页面更好看,也可以一定程度的让页面动起来
JavaScript 实现和后端的交互, 数据验证、收发等功能

HTML的结构

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

上面面的一段代码既表示一段HTML的结构, 它表示生成了一个空白的HTML网页

组成HTML的元素称为标签,标签的结构分为两种

  • 有开始标签和结束标签的 如
  • 有单标签的 ,例如 ,单标签中的 / 即表示标签的闭合, / 符号不写也是可以的

下面这段HTML代码包含的标签解释如下

  • 声明类型, 意思为超文本语言类型。 是一种HTML5的规范写法,在HTML发展过程中还有以下的几种声明方式

    复制代码
    <!DOCTYPE html> html5规范, html的第一行必须为此值
    
    <!--html4 严格版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    
    <!--html4 过渡版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    <!--html4 框架版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
                "http://www.w3.org/TR/html4/frameset.dtd">
    
    关于html4的声明类型,可以参考:
    https://www.w3.org/TR/html4/sgml/dtd.html
  • html 最外层的一个跟节点,里面的所有元素都是它的子元素

    复制代码
    <!--lang属性表示使用英文,如果是中文,可以改成zh, 非严格属性也可以不写-->
    <html lang="en">
    
    </html>
  • head 头标记,整个网页的全局属性都会写在这个里面

  • body 网页的主体部分,用户可以直观感受到的显示内容的部分

  • meta 标签, 标记原数据,可以规定网页的字符、缩放比例等信息

    复制代码
    <!--规定字符集使用UTF-8, UTF-8 涵盖全球所有的国际和民族的文字和大量图像, UTF-8 规定一个字符占3个字节-->
    <meta charset="UTF-8">
  • title 标题标签,标题的内容会在浏览器的tab页中显示

相关推荐
花生侠8 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯15 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调22 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined224 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js