当前位置: 首页 > news >正文

详细介绍:【HTML】 第一章:HTML 基础

1.1 HTML 文件结构

每个网页至少包含下面结构:

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title></head><body><h1>欢迎学习 HTML</h1><p>这是一个段落。</p></body></html>

说明:

  • <!DOCTYPE html>:告诉浏览器这是 HTML5。
  • <html>:网页根标签。
  • <head>:头部信息(标题、编码、样式、脚本)。
  • <body>:网页主体内容。

1.2 常用标签

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落和换行

<p>这是一个段落。</p>
<br> <!-- 换行 -->

文本样式

<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>
<i>斜体</i>
<mark>高亮</mark>

列表

<!-- 无序列表 --><ul><li>苹果</li><li>香蕉</li></ul><!-- 有序列表 --><ol><li>第一步</li><li>第二步</li></ol>

链接

<a href="https://www.example.com" target="_blank">访问示例网站</a>

图片

<img src="logo.png" alt="LOGO" width="100">

容器

<div>块级容器</div>
<span>内联容器</span>

1.3 表单控件(常用输入)

<input type="text" placeholder="请输入名字"><input type="number" min="0" max="100" value="50"><input type="range" min="0" max="100" value="50"><input type="checkbox" checked><input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"><textarea rows="4" cols="30">多行文本</textarea><select><option value="1">选项1</option><option value="2">选项2</option></select><button>提交</button>

1.4 属性(Attributes)

  • id:唯一标识,JS 获取元素用
  • class:分类,CSS 样式共享
  • style:内联样式
  • name:表单控件名称
  • value:控件初始值
  • placeholder:输入提示

示例:

<input type="text" id="username" class="input-box" placeholder="请输入用户名">

1.5 小练习

  1. 写一个网页,显示一个标题和一个段落。
  2. 添加一个图片和一个超链接。
  3. 创建一个输入框和一个按钮。

这一章重点

  • HTML 文件结构必须完整
  • 常用标签的功能和语义
  • 表单控件和常用属性
http://www.jsqmd.com/news/2364/

相关文章:

  • 抖音视频关键词批量下载工具分享|分享痛点|
  • HarmonyOS动态照片,简易环境助力高效开发
  • 二叉树专题
  • IT项目管理主要做什么?-ManageEngine卓豪
  • 9.22学习笔记
  • 实用指南:详解RabbitMQ高级特性之延迟插件的安装和使用
  • Django 视图层
  • 第二部分:VTK核心类详解(第38章 vtkPointData点数据类) - 教程
  • Kettle: pentaho-server-9.4登录问题
  • Win11/Win10/Office 永久激活
  • springboot~获取原注解的方法findMergedAnnotation使用场景
  • Catalan数(卡特兰数)
  • IvorySQL文档共建计划第一期!提 PR,提 Issue,赢取 Beats 耳机、机械键盘、书籍等多重好礼!
  • ubuntu22.04 安装xrdp
  • 题解:P14058 【MX-X21-T3】[IAMOI R5] 两个人的演唱会
  • CSP-J 2025 初赛试题解析(第一部分:阅读程序题(一)(16-21)) - 指南
  • 深入解析Wallarm安全边缘:API边缘的即时防护技术
  • 使用ai来搭建测试用例1
  • 面试八股文之——JVM与并发编程/多线程 - 教程
  • 总线的概念以及分类
  • A Great Beginning
  • 邮件系统的未来趋势:技术革新与智能化的未来
  • python-uv入门使用 - 教程
  • docker volume使用
  • 详细介绍:基于伪随机数的WPS PIN码逆向原理分析(精灵尘埃/仙尘攻击)
  • 52805 JLINK 端口保护机制硬件保护具体流程分析;
  • 构建你的 MCP 能力层:.NET 9 + SK 的系统方案
  • pl/sql使用
  • PLC中的运动控制 - (二)基本控制指令MC_Power,MC_Stop,MC_Halt
  • WPF Prism PrismApplication OnInitialized()