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

news/2025/9/23 17:56:37/文章来源:https://www.cnblogs.com/yxysuanfa/p/19107645

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.mzph.cn/news/913387.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抖音视频关键词批量下载工具分享|分享痛点|

抖音视频太难找?一款关键词批量下载工具帮你一键搞定! 你是不是也遇到过这些问题:想剪辑热门视频,却找不到合适素材? 收藏了几十条抖音视频,结果一个都下载不了? 下载后还带水印,根本没法用?作为一名剪辑博主…

网站换域名seo怎么做谷歌推广运营

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼前几天在微博上看到24点的游戏&#xff0c;6 6 610。算了很久是在算不出来&#xff0c;最后我想我何不写一个小程序解决它&#xff1f;说做就做&#xff0c;我刚开始的想法很简单&#xff0c;就是列举4个数的所有可能的表达式组合&…

HarmonyOS动态照片,简易环境助力高效开发

头图 随着移动终端体验的不断提升,动态照片这种有趣味与表现力的内容形式,越来越受到用户的青睐。HarmonyOS允许用户在设备上查看和处理动态照片,这些照片不仅包含静态图像,还融合了视频片段,为用户提供更加丰富和…

设计师逛的网站原神是哪家公司开发的

开头请记住一句话&#xff1a;复用针对资源&#xff0c;多址针对用户。 一、复用 1、复用是指一个信道传输多个信号&#xff0c;以提高资源利用率&#xff0c;针对的是信道资源。相当于高速公路上的车道&#xff0c;车道越多&#xff0c;传输速率越快&#xff0c;资源利用率也越…

网站js聊天代码如何把网站做成软件

目录 一、常见的发布方式 二、详解kubectl陈述式方式做灰度发布&#xff08;金丝雀发布&#xff09; 步骤一&#xff1a;先基于deployment控制器创建pod&#xff0c;然后发布 步骤二&#xff1a;基于命令行灰度发布 步骤三&#xff1a;测试等到版本稳定以后&#xff0c;再完…

怎么做属于自己的领券网站cnzz网站排名是怎么做的

题目 页面如下 页面长得像sql注入 点击help看一下 这里需要了解java web目录结构 WEB INF:Java的web应用安全目录&#xff1b; 此外如果想在页面访问WEB-INF应用里面的文件&#xff0c;必须要通过web.xml进行相应的映射才能访问&#xff1b; WEB-INF是Java Web应用程序中的一…

企业网站相关案例php自己写框架做网站6

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

印刷东莞网站建设技术支持做甜品台的网站

在营销落地页中&#xff0c;问卷类H5是一种制作简单&#xff0c;易于传播的落地页&#xff0c;通过精巧的设计和严密的逻辑设置&#xff0c;问卷类H5的投放效果也是不容小觑的。 问卷类H5在制作中有以下不可缺少的要素&#xff1a; 清晰的标题和简要的说明 标题应该简明扼要地…

淄博网站优化推广羽毛球赛事策划方案

基于云计算技术的B/S架构的HIS系统&#xff0c;为医疗机构提供标准化的、信息化的、可共享的医疗信息管理系统&#xff0c;实现医患事务管理和临床诊疗管理等标准医疗管理信息系统的功能。 系统利用云计算平台的技术优势&#xff0c;建立统一的云HIS、云病历、云LIS&#xff0…

龙岩城乡建设局网站商务网站建设教学视频教程

当磁盘大小超过标准时会有报警提示&#xff0c;这时如果掌握df和du命令是非常明智的选择。 df可以查看一级文件夹大小、使用比例、档案系统及其挂入点&#xff0c;但对文件却无能为力。 du可以查看文件及文件夹的大小。 两者配合使用&#xff0c;非常有效。比如用df查看哪个…

IT项目管理主要做什么?-ManageEngine卓豪

IT项目管理是管理IT项目从规划阶段到执行和部署阶段的过程,目的是实现将本地工具迁移到云、构建新功能或为企业构建知识库等目标。IT项目管理通常涉及利用可用资源来解决持续存在的问题,加强某些程序,甚至向IT基础设…

9.22学习笔记

虚拟机网络 NAT:宿主机做 NAT,客户机可出外网,宿主机→客户机需端口转发。 桥接:客户机直接拿到局域网独立 IP,方便同网段其他物理机访问。 Host-Only:与宿主机私网通信,无外网,最安全。 Hadoop 伪分布式核心配…

可以免费进的服务器网站做外汇看哪些网站

关于奇偶校验 奇校验(Odd Parity)&#xff1a;所有传送的数位&#xff08;含字符的各数位和校验位&#xff09;中&#xff0c;“1”的个数为奇数&#xff0c;如&#xff1a; 1 0110&#xff0c;0101 0 0110&#xff0c;0101 偶校验(Even Parity)&#xff1a;所有传送的数位&am…

wordpress站点标题副标题换行wordpress zendesk

Every day a Leetcode 题目来源&#xff1a;199. 二叉树的右视图 解法1&#xff1a;层序遍历 给定一个二叉树的 根节点 root&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 按层序遍历&#xff0c;将每层的…

搭建手机网站注册城乡规划师考试大纲

埃里克埃文斯&#xff08;Eric Evans&#xff09;已制定了什么是域驱动设计&#xff08;DDD&#xff09;。 Martin Fowler是DDD的大力支持者和拥护者。 这些都是非凡的名字&#xff0c;几乎可以肯定的是&#xff0c;他们正在支持一些有价值的东西。 我不是在这里对此争论。 也许…

2小时wordpress建站租整套房做民宿的网站

Java中所有类的对象都可以直接使用Object类中提供的一些方法 1. toString()&#xff1a;返回对象的字符串表示形式&#xff0c;通常在类中重写&#xff0c;以便于返回的是对象的内容 2. equals()&#xff1a;判断两个对象的地址是否相等&#xff0c;直接使用也一样&#xff0c;…

做cpa用什么类型的网站好国内新闻最近新闻今天

[1&#xff0e;GIS的概念 1&#xff0e;1什么是gis 地理信息系统 (GIS, Geographic Information System) 是一种基于计算机的工具&#xff0c;它可以对在地球上存在的东西和发生的事件进行成图和分析。 GI上次提到了EclipseTomcatLomboz Java Web开发环境的配置&#xff0c;可环…

长沙市建设工程质量安全监督站官方网站网站做前端

大神链接:作者有幸结识技术大神孙哥为好友,获益匪浅。现在把孙哥视频分享给大家。 孙哥链接:孙哥个人主页 作者简介:一个颜值99分,只比孙哥差一点的程序员 本专栏简介:话不多说,让我们一起干翻JVM 本文章简介:话不多说,让我们讲清楚JVM当中的操作数在栈以及分析操作数…

胶州市网站建设seo 哪些媒体网站可以发新闻

目录 dijkstra算法求最短距离步骤 朴素的dijkstra算法---acwing-849 代码如下 代码思路 堆优化版的dijkstra算法---acwing-850 代码如下 关于最短路问题分有好几种类型 &#xff1a; 单源就是指&#xff1a;只求从一个顶点到其他各顶点 多源是指&#xff1a;要求每个顶…

实用指南:详解RabbitMQ高级特性之延迟插件的安装和使用

实用指南:详解RabbitMQ高级特性之延迟插件的安装和使用2025-09-23 17:44 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; …