html一个案例学会所有常用HTML(H5)标签

news2025/8/8 23:20:57

目录

前言

HTML5声明

HTML框架

head头部

声明编码格式

告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

移动端适配 

网站标题

网站正文

网站内容的组成 

文字有关标签

音频视频标签

表单标签与input属性

 

前言

HTML没有什么难度，无论对于大一开始学的，或者大二进行重新复习都是一样，只要踏实下来就那么稳稳的敲个几遍也就记住了，这里面我没有涉及table标签，因为这个标签有层级结构，当大家掌握到基本入门的时候我再说table，因为到了web前后端考试的时候才会涉及到table的遍历，当然，这个也是分语言的，如果是java就是jsp，但是如果是.NET就会是ASP，我们会根据不同的语言进行讲解，jsp的el表达式遍历table，asp的GridView与repeater都会给大家比较细致的讲解。

超链接我也没添加在这里，就一个【a】字母，这篇文章主要让大家记住一些常用标签的单词，很简单的我就没添加，因为后面用的多，用着用着就都会了。大家踏实一些，将之前落下的补充上，后面都能顺利的听懂整堂的内容了，祝大家都可能顺利的通过考试。

HTML5声明

<!DOCTYPE html>

HTML框架

<!-- lang="en"代表英文，"zh"代表中文 -->
<html lang="en">
</html>

head头部

<head>
</head>

声明编码格式

<meta charset="UTF-8">

告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

移动端适配 

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

网站标题

<title>My First HTML Page</title>

网站正文

<body>
</body>

网站内容的组成 

    <!-- 1、文字 -->

    <!-- 2、图片 img -->

    <!-- 3、音频.mp3 -->

    <!-- 4、视频.mp4 -->

    <!-- 5、表单 -->

文字有关标签

<!-- 正斜杠/    反斜杠\ -->
<!-- 文章的标签pre -->
<!-- 段落标签p -->
<!-- 标题h1-h6 -->
<!-- align的属性值left center right -->
<!-- B加粗 I斜体 U下划线 -->
<!-- 标题标签H1-H6 -->
<!-- 分隔符标签hr -->

音频视频标签

    <!-- <video src="8117658.mp3" controls></video> -->

    <!-- <video src="第九套人民广播体操.mp4" controls></video> -->

表单标签与input属性

 <!-- 1、input标签中 -->
<!-- 2、type属性对应的属性值 -->
<!-- 3、text文本输入框 -->
<!-- 4、password密码输入框 -->
<!-- 5、单选radio -->
<!-- 6、复选框checkbox -->
<!-- 7、文件选择file -->
<!-- 8、下拉菜单select -->
<!-- 9、多行文本框textarea -->
<!-- 10、提交按钮submit -->

<!DOCTYPE html>
<html>

<head>
    <title>咱们的复习内容HTML5</title>
</head>

<body>
    <!-- 1、文字 -->
    <!-- 2、图片 img -->
    <!-- 3、音频.mp3 -->
    <!-- <video src="3608117658.mp3" controls></video> -->
    <!-- <video src="第九套人民广播体操.mp4" controls></video> -->
    <!-- 4、视频.mp4 -->
    <!-- 5、表单 -->
    <!-- 1、input标签中 -->
    <!-- 2、type属性对应的属性值 -->
    <!-- 3、text文本输入框 -->
    <!-- 4、password密码输入框 -->
    <!-- 5、单选radio -->
    <!-- 6、复选框checkbox -->
    <!-- 7、文件选择file -->
    <!-- 8、下拉菜单select -->
    <!-- 9、多行文本框textarea -->
    <!-- 10、提交按钮submit -->
    <fieldset>
        <legend>表单操作</legend>
        <form action="#" method="get">
            <p>
                <!-- 文本 -->
                <input type="text" name="userName" value="666" readonly/>
            </p>
            <p>
                <!-- 密码 -->
                <input type="password" name="passWord">
            </p>
            <!-- 单选按钮 -->
            <p>
                <input type="radio" name="sex" value="boy" />男
                <input type="radio" name="sex" value="girl" checked/>女
            </p>
            <!-- 复选框-多选框 -->
            <p>
                <input type="checkbox" name="likes">电子游戏
                <input type="checkbox" name="likes" checked>电子小说
                <input type="checkbox" name="likes">改变世界
                <input type="checkbox" name="likes">学会养生
            </p>
            <!-- 文件获取 -->
            <p>
                <input type="file" name="file">
            </p>
            <!-- 选择 -->
            <p>
                <select name="minzu">
                    <optgroup label="少数民族">
                        <option>水族</option>
                        <option>葬爱家族</option>
                        <option>黎族</option>
                        <option>傣族</option>
                        <option>仡佬族</option>
                    </optgroup>
                    <optgroup label="非少数民族">
                        <option value="汉族">汉族</option>
                    </optgroup>
                </select>
            </p>
            <p>
                <!-- 多行文本框 -->
                <textarea rows="10" cols="50"></textarea>
            </p>
            <p>
                <input type="submit" value="提交" />
            </p>
        </form>
    </fieldset>
    <!-- 富文本编辑器 -->



    <!-- 正斜杠/    反斜杠\ -->
    <!-- 文章的标签pre -->
    <!-- 段落标签p -->
    <!-- 标题h1-h6 -->
    <!-- align的属性值left center right -->
    <!-- B加粗 I斜体 U下划线 -->
    <!-- 标题标签H1-H6 -->
    <!-- 分隔符标签hr -->
    <pre>
        dasdasdas 
        dsfds 
        sdfsdfsdf杀东方实际对话\n发送端飞说多了几分lksdf
        sdfsdfsd发斯蒂芬  是方式\r即可的风扇电机福克斯  
         飞的是否会速度较快和福克斯      数据的可接受的
    </pre>

    <b>孔武&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有力</b>
    <i>孔孟    之乡</i>
    <u>孔曰    取义</u>
    <h1 align="center">李白</h1>
    <p align="center">云想
        <font color="red" face="华文行楷">衣裳</font>
        花想容，</p>
    <p align="center">春风拂槛露华浓。</p>
    <p>若非群玉山头见，</p>
    <p>会向瑶台月下逢。</p>

    <h1>I Have A Dream!</h1>
    <h2>I Have A Dream!</h2>
    <h3>I Have A Dream!</h3>
    <h4>I Have A Dream!</h4>
    <h5>I Have A Dream!</h5>
    <h6>I Have A Dream!</h6>

    <hr color="red" size="7" />
</body>

</html>

这里对HTML概述讲解一下：

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1] 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

HTML由来

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/34217.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机网络笔记6应用层

计算机网络笔记6应用层

前言 站在巨人的肩膀上&#xff0c;让知识的获得更加容易&#xff01;本文为学习计算机网络后,自顶向下的学习笔记&#xff1b; 学习视频来源&#xff1a; 计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;课件pdf来源&#xff1a;评论区up bili_68567544整理目录…
阅读更多...
Linux（基于Centos7）（三）

Linux（基于Centos7）（三）

文章目录一、任务介绍二、任务实施2-1、管理用户账号与密码2-2、用户组管理一、任务介绍 知识目标 1.了解用户角色的类型。 2.理解用户和用户组的关系。 3.了解用户账号文件、用户密码文件和用户组账号文件。 能力目标 1.能够通过命令来创建和管理用户与用户组。 2.能够通过命…
阅读更多...
面向对象编程·下

面向对象编程·下

面向对象编程下⭐小提问解答⭐3.多态3.1向上转型 - 父类引用子类对象3.1.1方法传参3.1.2方法返回3.2动态绑定3.3方法重写3.4理解多态3.5向下转型 - 子类引用父类对象3.6super 关键字3.7在构造方法中调用重写的方法(一个坑)3.8总结4.抽象类4.1语法规则4.2抽象类的作用5.接口5.1语…
阅读更多...
基于2D连续图像序列的行人骨架关节角度估计

基于2D连续图像序列的行人骨架关节角度估计

目 录 第1章 绪 论 1 1.1 行人骨架关节角度估计 1 1.2 行人骨架关节角度估计的应用领域 2 1.3 行人骨架关节角度估计方法简述 3 1.3. 1 基于概率统计的方法 3 1.3.2 基于语法的方法 4 1.3.3 基于模型的方法 4 1.4 行人骨架关节角度估计的难点和面临的挑战 5 1.5 本文的研究意义…
阅读更多...
xinput1_4.dll丢失怎么修复？修复方法分享

xinput1_4.dll丢失怎么修复？修复方法分享

对于电脑系统来说牵一发而动全身。电脑系统当中的任何一个小小的文件都关系着整个电脑系统的运行&#xff0c;大家都明白&#xff0c;电脑系统以及很多的大型系统软件都是安装在电脑C盘当中的&#xff0c;所以C盘也叫做系统盘&#xff0c;系统盘中有很多非常重要的软件&#xf…
阅读更多...
【通用设计方法】之接收异常保护

【通用设计方法】之接收异常保护

目录 前言 一、接收异常保护 二、超短包、背靠背的支持 后记 前言 为了系统的鲁棒性&#xff0c;我们常常会做一系列的异常保护功能&#xff0c;避免系统挂死。 这里仅仅介绍接收保护的某些设计思路&#xff0c;抛砖引玉。 一、接收异常保护 设计思路&#xff1a;通过可配…
阅读更多...
肠道微生物在天然产物生物转化中的潜在作用

肠道微生物在天然产物生物转化中的潜在作用

谷禾健康 什么是天然产物&#xff1f; 天然产物是指动物、植物、昆虫或微生物体内的组成成分或其代谢产物以及人和动物体内许多内源性的化学成分&#xff0c;是自然产生的小分子。值得注意的是&#xff0c;天然产物来源中&#xff0c;植物来源占85%以上。 谷禾在这里主要介绍植…
阅读更多...
【服务器数据恢复】某云ECS网站服务器mysql数据恢复案例

【服务器数据恢复】某云ECS网站服务器mysql数据恢复案例

云服务器特点&#xff1a; 1、云服务器不需要购买硬件设备&#xff0c;用户按照业务需求支付一定的费用购买相应的硬软件资源。云服务器提供商的数据中心不仅提供硬件/软件环境&#xff0c;还提供咨询服务。 2、云服务器可以充分利用资源&#xff0c;根据业务需求随时调整硬软件…
阅读更多...
前后端分离项目，vue+uni-app+php+mysql在线小说电子书阅读小程序系统设计与实现

前后端分离项目，vue+uni-app+php+mysql在线小说电子书阅读小程序系统设计与实现

功能介绍 用户首次登陆系统需要注册一个用户作为账号&#xff0c;用户在登录平台后&#xff0c;可以进行平台的操作。主要模块包括以下几点&#xff1a; 登录功能&#xff1a;注册普通账号登录&#xff1b;登录后可以修改用户的基本信息&#xff0c;也可以退出。 资讯功能&…
阅读更多...
MySQL数据库优化总结

MySQL数据库优化总结

概述 本文所指的SQL优化主要是指MySQL优化&#xff0c;当然思想是通用的&#xff0c;其他SQL语言不排除其通用性。谈到SQL优化&#xff0c;最好有一个指导或者规范&#xff0c;照着这个规范去对比&#xff0c;发现可以优化的地方。参考博文MySQL推荐使用规范。 总体思路 优化…
阅读更多...
移动端开发之混合开发模式优劣势综述

移动端开发之混合开发模式优劣势综述

2020年&#xff0c;我国互联网行业实现快速发展&#xff0c;网民规模稳定增长。截至2020年底&#xff0c;我国5G网络用户数超过1.6亿&#xff0c;约占全球5G总用户数的89%。 截至2020年底&#xff0c;我国网民规模达9.89亿&#xff0c;互联网普及率达到70.4%。报告还显示&…
阅读更多...
2022买护眼灯到底有没有用？双十二学生护眼灯该怎么选择

2022买护眼灯到底有没有用？双十二学生护眼灯该怎么选择

护眼台灯经过多年的发展&#xff0c;如今性能已经是非常不错了&#xff0c;护眼效果不能说百分之百可预防孩子近视&#xff0c;90%以上减少孩子近视的概率还是能轻松做到的&#xff0c;特别是一些主打专业护眼的台灯&#xff0c;效果极其明显出色。 学生护眼灯该怎样选择&…
阅读更多...
echarts优秀使用案例

echarts优秀使用案例

echarts优秀使用案例 App.vue <template><div class"box"><a-card size"small" title"各类型监测设备利用率" class"center"><!-- color 值由组件外部进行传递&#xff08;会重复修改的部分尽量减少逻辑复杂程度…
阅读更多...
开源让这位 00 后逆袭成为各类大奖收割者

开源让这位 00 后逆袭成为各类大奖收割者

OpenI 启智社区在 2022 年推出的开源打榜活动&#xff0c;聚集了一帮非常活跃的开发者&#xff0c;上榜者覆盖了来自全国高校、科研机构、企业达 100 多家。其中&#xff0c;高校学生占 65%&#xff0c;近 60%的上榜者是 90 后&#xff0c;32%的上榜者是 00 后。真是 00 后浪推…
阅读更多...
[hadoop全分布部署]虚拟机Hadoop集群交换 SSH 密钥与验证SSh无密码登录

[hadoop全分布部署]虚拟机Hadoop集群交换 SSH 密钥与验证SSh无密码登录

&#x1f468;‍&#x1f393;&#x1f468;‍&#x1f393;博主&#xff1a;发量不足 个人简介&#xff1a;耐心&#xff0c;自信来源于你强大的思想和知识基础&#xff01;&#xff01; &#x1f4d1;&#x1f4d1;本期更新内容&#xff1a;虚拟机Hadoop集群交换 SSH 密钥与…
阅读更多...
留学生怎么正确应对Paper写作？

留学生怎么正确应对Paper写作？

留学生很多都是对Paper比较抗拒的&#xff0c;因为Paper写作的频率是很高的&#xff0c;平时的课程也是比较紧凑的。相信对于初到英国留学的小伙伴们而言Paper将很长时间都是大家的痛。多少留学生被Paper折磨&#xff0c;其实英文Paper写不好的原因在于&#xff0c;对于中国留学…
阅读更多...
Neo4j 5的自治图数据库集群

Neo4j 5的自治图数据库集群

原文作者&#xff1a;John Stegeman &#xff0c;图数据库产品专家&#xff0c;Neo4j。基于原文翻译并补充整理而成。 新近发布的Neo4j 版本5推出了自治集群&#xff08;Autonomous Cluster&#xff09;&#xff0c;以支持易于部署、可扩展、自容错等重要特性。下面我们就来一…
阅读更多...
隐私计算推动金融转型

隐私计算推动金融转型

肖峰 开放隐私计算 开放隐私计算 开放隐私计算OpenMPC是国内第一个且影响力最大的隐私计算开放社区。社区秉承开放共享的精神&#xff0c;专注于隐私计算行业的研究与布道。社区致力于隐私计算技术的传播&#xff0c;愿成为中国 “隐私计算最后一公里的服务区”。 178篇原创…
阅读更多...
Outside ExpertPDF HtmlToPdf 转换器 17.0

Outside ExpertPDF HtmlToPdf 转换器 17.0

Outside Software Inc. 是一家罗马尼亚软件公司&#xff0c;旨在提供可靠、高质量的 IT 服务。该团队的成员在开发完整的 Web 应用程序、完全可伸缩的数据库解决方案、复杂的基于 Windows 的应用程序、出色的开发人员组件和工具方面拥有多年的经验。ExpertPDF HtmlToPdf 转换器…
阅读更多...
【现代机器人学】学习笔记一：位形空间

【现代机器人学】学习笔记一：位形空间

由于工作的关系&#xff0c;一年前开始接触机械臂。与此同时也在学习【现代机器人学】与【机器人学导论】两本书&#xff0c;感觉【现代机器人学】写的更好一些。大致走马观花的看了一遍&#xff0c;确实有所收获。因此想再从头过一遍&#xff0c;做一些总结&#xff0c;写给自…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023