当前位置: 首页 > 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.dtcms.com/a/389936.html

相关文章:

  • 【RAG】知识库问答不是只有 RAG
  • 前端缓存深度解析:localStorage 到底是同步还是异步?
  • Vue2 基础知识点二:事件绑定 (Event Binding)
  • ​​[硬件电路-250]:LDO电源核心指标、典型问题与工程实践指南
  • 论文笔记(九十二)RLVR-World: Training World Models with Reinforcement Learning
  • 驾校培训办公管理系统 专属驾校的OA系统 驾培管理行业
  • 绿色纺织品的国际通行证:GRS认证的深度解析
  • 如何解决 pip install 安装报错 ModuleNotFoundError: No module named ‘cryptography’ 问题
  • Linux网络:应用层http
  • 基于GeoDa与R语言的空间数据回归实践技术应用
  • 硅基计划3.0 学习总结 反射枚举Lambada表达式
  • 创作一个简单的编程语言2 ,开始增加中文关键字的功能
  • AI之EBT:《Energy-Based Transformers are Scalable Learners and Thinkers》的翻译与解读
  • UU远程听劝升级,防窥、远程协助更贴心
  • B站 韩顺平 笔记 (Day 26 - 27)
  • FTP传输替代方案:告别传统,迎接新时期高效安全的文件传输
  • 多层感知机(MLP)入门:从感知机到深度神经网络的关键一步
  • 工业级边缘计算网关-动环监控解决方案
  • 时空预测论文分享:机器学习+物理约束
  • Java 网络编程(二) --- TCP的socket的api
  • .NET 中使用Swagger 实现 API 分组管理
  • C++面试突击(2)
  • 2025年生物信息学与大数据国际会议(ICBBD 2025)
  • R 语言入门实战|第八章 S3 系统:用面向对象思维美化“老虎机”输出
  • SpringBoot自定义配置实战原理深层解析
  • cef:浏览器和渲染
  • EasyClick JavaScript 函数
  • Qt QSplineSeries详解
  • 扩散模型简介
  • [答疑]SysML模型的BDD中加了新的端口,怎样同步到IBD