news 2026/6/9 22:48:17

HTML入门

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HTML入门

HTML 基础学习笔记

一、学习前的比喻与概念

<!-- HTML:搭建页面结构 → 盖房子 CSS:修饰页面 → 装修房子 JavaScript:页面交互 → 智能家居 -->

核心要点:

  • HTML:构建网页骨架
  • CSS:定义网页样式
  • JavaScript:实现交互功能

二、HTML 基本结构与语法

<!-- HTML基础:

  • 常用标签约30-40种
  • 标签语法:
    • 单标签(自闭合):<tag><tag />
    • 双标签:<start></end>
  • 标签关系:
    • 父子关系:直接包含(如html与head)
    • 兄弟关系:同父元素(如head与body)
    • 祖先后代:间接包含(如html与meta) -->

基本文档结构

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body></body> </html>

三、标签完整写法

<!-- 完整标签格式:<tag attribute1 attribute2="value" attribute3="value"></tag>-->

四、DOCTYPE与根标签

<!-- DOCTYPE声明:

  • 声明文档类型为HTML
  • 确保浏览器按HTML规范解析

HTML根标签:

  • 所有标签的祖先
  • 每个文档只能有一个
  • lang属性定义页面语言 -->
<!DOCTYPE html> <html lang="en">

五、head标签详解

<!-- head标签功能:

  • 配置网页基本信息
  • 设置标题、描述等SEO相关元素 -->

meta标签与字符集

<!-- charset="UTF-8":

  • 指定字符编码
  • 防止乱码问题 -->
<meta charset="UTF-8">

视口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

优化配置

<meta name="description" content="页面描述..."> <meta name="keywords" content="关键词1,关键词2"> <title>页面标题</title> <link rel="icon" href="favicon.ico" type="image/x-icon">

六、body主体内容

<!-- body标签:

  • 包含网页主要内容
  • 用户可见部分 -->
<body> 页面内容 <img src="" alt=""> </body>

七、HTML实体(特殊符号)

<!-- HTML实体:

  • 替代被HTML保留的字符
  • 语法:&entity_name;
  • 常用实体:
    • 空格:&nbsp;
    • &gt;

    • <:&lt;
    • >:&rt;
    • ©:&copy;--> 示例:
5>4 4<3 ©

八、HTML标签分类

块级标签(block)

  • 独占一行
  • 可设置宽高
  • 默认宽度100%
  • 示例:<div>,<p>,<h1>-<h6>

行内标签(inline)

  • 不独占一行
  • 不可设置宽高
  • 示例:<a>,<span>,<em>

行内块标签(inline-block)

  • 兼具两者特性
  • 标签间有3px间距
  • 示例:<img>,<input>,<button>

九、标签关系总结

关系类型示例
父子关系<html><head>的父元素
兄弟关系<head><body>是兄弟
祖先后代<html><meta>的祖先

十、学习总结

HTML是网页开发的基础,理解其结构和语义对后续学习CSS和JavaScript至关重要。写出语义化的HTML代码是专业前端开发的起点。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/9 21:34:38

基于单片机的电加热炉智能温度与液位PID控制系统设计

系统总体设计概述 点击链接下载设计资料&#xff1a;https://download.csdn.net/download/m0_51061483/91939253 1.1 设计背景与研究意义 随着工业自动化水平的不断提升&#xff0c;传统电加热炉在温度调节、液位控制以及安全保护方面逐渐暴露出响应慢、控制精度低、人工干预…

作者头像 李华
网站建设 2026/6/8 4:12:07

外企人才战略持续迭代,用友HR SaaS以数智化破局!

当不确定性成为全球商业常态&#xff0c;第八届中国国际进口博览会以 834.9 亿美元意向成交额再创历史新高&#xff0c;向世界传递出中国市场的坚定确定性。这场东方之约既印证了中国市场在全球经济格局中的独特价值&#xff0c;也揭示了在华外企发展的新逻辑 —— 亮眼成绩单背…

作者头像 李华
网站建设 2026/6/9 16:11:47

VB编程的现代实践:从经典到创新的全面指南

VB编程的现代实践:从经典到创新的全面指南 你是否想过,那个让你在Windows 95时代疯狂拖拽控件的VB,如今竟能驾驭云计算甚至量子计算?这可不是科幻小说的情节——让我们掀开VB三十年进化史的神秘面纱,探索它如何从“玩具语言”蜕变为企业级开发的瑞士军刀。 一、VB语言的前…

作者头像 李华
网站建设 2026/6/9 17:21:09

狂中Nature子刊!CNN-LSTM做时间序列预测火力全开,思路非常上头!

在处理兼具局部相关性与长期依赖性的复杂时序数据时&#xff0c;CNN-LSTM是个非常可靠和有效的选择。因为它通过分工协作有效解决了关键矛盾&#xff0c;这方面比单一模型更全面、更稳健。但从创新角度来说&#xff0c;CNN-LSTM做时序预测研究范式已经发生了深刻变化&#xff0…

作者头像 李华
网站建设 2026/6/9 17:22:24

千匠供应链商城系统:AI赋能、灵活部署,全力助推产业互联网平台建设与发展

千匠供应链商城系统以中台架构为核心&#xff0c;凭借其针对性的系统定位、强大的核心功能、先进的技术架构、广泛的应用场景和显著的实施价值&#xff0c;为企业打造深度整合采销一体化、交易撮合、全链路管理等多项功能的产业供应链平台&#xff0c;助力企业实现转型升级。系…

作者头像 李华