HTML 入门手册(一)

news2024/12/27 15:21:19

目录

HTML介绍

1-基础语法

单标签

双标签

整体结构

2-标题和水平线

标题

水平线

3-段落和换行

段落

换行

4-列表

无序列表

有序列表

嵌套列表

5-div和span

div

span

6-格式化标签

粗体

斜体

下划线中划线

上标和下标

7-超链接(a标签)

链接到URL

链接到本地文件

发送电子邮件

链接到页面内锚点

8-图片

9-表格

高度、宽度和边框

标题

合并单元格

HTML表格头部、主体、页脚

HTML 入门手册(二)

HTML介绍

        HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " 。是一种用于创建网页的标准标记语言。它使用一系列标签来描述网页内容的结构和样式，包括段落、标题、链接、图片、列表等。HTML文档是由HTML元素组成的，这些元素可以嵌套在其他元素中，从而构建出复杂的网页结构。

        HTML5是HTML的最新版本，相比之前的版本，它引入了许多新的元素和API，使得网页可以更好地支持多媒体内容、图形和动画等。此外，HTML5还提供了更多的表单控件和数据绑定功能，使得用户可以更方便地与网页进行交互。

1-基础语法

单标签

  • 无属性<标签名 />

  • 有属性 <标签名 属性名="属性值”/>

双标签

  • 无属性<标签名></标签名>

  • 有属性 <标签名 属性名="属性值"></标签名>

整体结构

  • <html></html> 表示当前是一个网页

  • <head></head>头部信息

  • <body></body>身体部分

<!-- 网页 -->
<doctype html/>
<html>
    <!-- 头部区域 -->
    <head>
        <meta charset="utf-8">
        <title>基础语法-Scc</title><!-- 标题 -->
        
    </head>
    <body bgcolor="red" text="white">
        <h1>标题H1</h1>
        <p>前端开发涉及到多种工具，用于提高开发效率、优化代码、测试应用程序等。</p>
    </body>
</html>

2-标题和水平线

标题

        HTML提供了六个级别的标题，分别是<h1>到<h6>。这些元素用于定义不同级别的标题，其中<h1>是最高级别的标题，<h6>是最低级别的标题。

水平线

        水平线元素用于在页面中创建水平分隔线，即水平线。在HTML中，水平线可以使用<hr>元素来创建。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题和水平线</title>
    </head>
    <body bgcolor="red" text="white" >
        <h1>标题H1</h1>
        <h2>标题H2</h2>
        <h3>标题H3</h3>
        <h4>标题H4</h4>
        <h5>标题H5</h5>
        <h6>标题H6</h6>
        <hr width="60%" align="left"><!-- 按照百分比显示(默认100%) -->
        <hr width="400px" align="right"><!-- 按照指定宽度显示 -->
    </body>
</html>

3-段落和换行

段落

        HTML中使用<p>元素来定义段落。段落元素用于将文本组织成段落，浏览器会自动在段落之间添加一些间距。

换行

        HTML中有两种方式可以实现换行：

        1.<br>元素： 用于在文本中创建换行。它是一个空的单标签。注：如果使用justify，justify对最后一行无效果！

        2.CSS样式： 使用CSS的 white-space 属性来设置文本的换行规则。（这个先不写，等后面跟CSS一起）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>段落和换行</title>
    </head>

    <body>
        <h2>段落</h2>
        <p>前端开发涉及到多种工具，用于提高开发效率、优化代码、测试应用程序等。</p>
    
        <p>前端开发涉及到多种工具，用于提高开发效率、优化代码、测试应用程序等。</p>
        <br>
        <br>
        前端开发涉及到多种工具，用于提高开发效率、优化代码、测试应用程序等。 <br>
        前端开发涉及到多种工具，用于提高开发效率、优化代码、测试应用程序等。
        <h2>段落-align</h2>
        <p >默认段落：中国特色金融xxx路越走越宽广。</p>
        <p align="left">左对齐(默认)：中国xxx越宽广。</p>
        <p align="right">右对齐：中国xxx越走越宽广。</p>
        <p align="center">居中对齐：中国xxxx越走越宽广。</p>
        <p align="justify">两端对齐：中国xxxxx越走越宽广。</p>

    </body>
</html>

4-列表

无序列表

        无序列表使用<ul>元素定义，每个列表项使用<li>元素定义。通常，无序列表使用圆点、方块或其他符号来表示列表项。type 属性设置列表图标：

  • square 方块

  • disc 实心圆(默认)

  • circle 空心

有序列表

        有序列表使用<ol>元素定义，同样，每个列表项使用<li>元素定义。有序列表使用数字或字母来表示列表项的顺序。type 属性设置列表图标：

  • 1 数字序号

  • a 小写字母

  • A 大写字母

  • i 小写罗马字母

  • I 大写罗马字母

嵌套列表

        列表可以嵌套在彼此之内，创建多层次的结构。例如，可以在无序列表中嵌套有序列表或者在有序列表中嵌套无序列表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表</title>
    </head>
    <body>
        <h3>无序列表</h3>
        <ul>
            <li>红色</li>
            <li>黄色</li>
            <li>蓝色</li>
        </ul>
        <ul>
            <li type="square">方块</li>
            <li type="disc">实心圆(默认)</li>
            <li type="circle">空心圆</li>

        </ul>

        <h3>有序列表</h3>
        <ol>
            <li>红色</li>
            <li>黄色</li>
            <li>蓝色</li>
        </ol>

        <ol>
            <li type="1">数字</li>
            <li type="a">小写字母</li>
            <li type="A">大写字母</li>
            <li type="i">小写罗马字母</li>
            <li type="I">大写罗马字母</li>
        </ol>


        <h3>嵌套列表</h3>
        <ol>

            <li type="A">颜色
                <ul>
                    <li type="square">红色</li>
                    <li type="square">黄色</li>
                    <li type="square">蓝色</li>
                </ul>
            </li>
            <li type="A">城市
                <ul>
                    <li type="disc">上海</li>
                    <li type="disc">北京</li>
                    <li type="disc">深圳</li>
                </ul>
            </li>
            <li type="A">地区</li>
        </ol>

    </body>
</html>

5-div和span

        <div>和<span>是HTML中两个常用的容器元素，它们用于组织和包装其他元素，以便对它们应用样式或进行其他操作。

div

        块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过<div>来布局定位网页中的每个区块。

span

        span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div和span</title>
    </head>
    <body>
        <h2>Div</h2>
        <div>
            <p>块级元素，用于定义文档中的一个区块。</p>
            <ul>
              <li>星期一</li>
              <li>星期二</li>
            </ul>
          </div>
          <br>
          <h2>Span</h2>
          <p>This is <span style="color: blue;">blue text</span> in a paragraph.</p>
    </body>
</html>

6-格式化标签

粗体

        <b> 和 <strong> 两个效果是一样的

        <p>我要加粗 <b>粗体</b> 就粗了.</p>
        <p>我要加粗 <strong>粗体</strong> 就粗了.</p>
斜体

        <i>和 <em> 两个效果是一样的

下划线中划线
        <p>我要下划线 <u>下划线</u> .</p>
        <p>我要中划线 <del>中划线</del> .</p>
        <p>我要中划线 <s>中划线</s>  .</p>

        <s>和 <del> 效果一样。

上标和下标
        <p>我要下标 H <sub>2</sub> O .</p>
        <p>我要上标 2 <sup>3</sup> + 2 = 10  .</p>

7-超链接(a标签)

        超链接在HTML中由<a>标签定义。超链接可以链接到其他网页、文件、位置内的锚点，或者发送电子邮件。如下：

<a href="URL">Link Text</a>

        必要属性： href，指定了链接的目标，可以是一个URL、文件路径、或者一个锚点。

        非必要属性：target，target="_blank"跳转至新页面。默认是在当前页面加载的。

链接到URL
 <a href="https://shuaici.blog.csdn.net/">CSDN，一触即发</a>
链接到本地文件
        <a href="2-标题和水平线.html">本地文件相对路径</a>
        <br>
        <a href="file:///Users/scc/Qianduan/4-列表.html">本地文件绝对路径</a>
发送电子邮件
  <a href="mailto:599957939@qq.com">发送邮件</a>
链接到页面内锚点

        1.需要有一个带有id属性的元素； 2.使用href指向这个id即可。

        <a href="file:///Users/scc/Qianduan/4-列表.html" id="MiaodianId">被瞄位置</a>
        ......
        <a href="#MiaodianId">瞄点，回到指定区域</a>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>a标签超链接</title>
    </head>
    <body>
        <h2>超链接</h2>
        <a href="https://shuaici.blog.csdn.net/">CSDN，一触即发</a>
        <br><br>
        
        <a href="2-标题和水平线.html">本地文件相对路径</a>
        <br><br>

        <a href="file:///Users/scc/Qianduan/4-列表.html">本地文件绝对路径</a>
        <br><br>

        <a href="file:///Users/scc/Qianduan/4-列表.html" id="MiaodianId">被瞄位置</a>
        <br><br>

        <a href="https://shuaici.blog.csdn.net/" target="_blank">CSDN，新窗口打开</a>
        <br><br>
        <a href="mailto:599957939@qq.com">发送邮件</a>
        <br><br>
        <br><br>
        。。。。。。
        <br><br>
        <a href="#MiaodianId">瞄点，回到指定区域</a>
        <br><br>
    </body>
</html>

8-图片

使用标签定义 HTML 页面中的图片。

  • 必须属性:

    • src 被引入的图片的地址

  • src常用属性:

    • title 当鼠标悬停在图片上时显示的文字

    • alt 当图片加载失败时显示的文本

    • width 设置图片的宽度

    • height 设置图片的高度规定

    • align 如何根据文本来排列图像

        <img src="Downloads/ic_qq.webp" alt="加载失败提示">
        <!-- 本地资源加载 -->
        <img src="file:///Users/scc/Downloads/ic_qq.webp">
        <!-- 指定宽高，边框线等 -->
        <img src="file:///Users/scc/Downloads/ic_qq.webp" height="200" width="100" border="2">
        <!-- 网络资源加载 以及提示-->
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下，你就知道"><br>

9-表格

        表格由<table>元素定义。表格通常包含行（<tr>）、表头（<th>）、表体（<td>）等元素。例如：

        <table>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>学号</th>
            </tr>
            <tr>
                <td>嬴政</td>
                <td>二班</td>
                <td>001</td>
            </tr>
            <tr>
                <td>刘邦</td>
                <td>二班</td>
                <td>002</td>
            </tr>
            <tr>
                <td>刘秀</td>
                <td>三班</td>
                <td>003</td>
            </tr>
        </table>

        样式加工一下。

高度、宽度和边框
  <table border = "1" 
    width = "400" 
    height = "150" 
    style="border-collapse: collapse;">
    ......
    </table>

标题
  <table border = "1" width = "400" 
    height = "150" 
    style="border-collapse: collapse;">
            <caption>这是标题</caption>
    ......
    </table>    
合并单元格

  • 如果相当于将两个或多个列合并为一个列，将使用colspan属性

  • 如果要合并两行或多行，则将使用rowspan属性。

 <table border = "1" width = "400" height = "150" style="border-collapse: collapse;">
            <caption>这是标题</caption>
            <tr>
                <th colspan = "2">姓名+班级</th>
                <th>学号</th>
            </tr>
            <tr>
                <td>嬴政</td>
                <td rowspan = "2">二班</td>
                <td>001</td>
            </tr>
            <tr>
                <td>刘邦</td>
                <td>002</td>
            </tr>
            <tr>
                <td>刘秀</td>
                <td>三班</td>
                <td>003</td>
            </tr>
        </table>
HTML表格头部、主体、页脚

        表格可以分为三个部分——头部，主体和页脚，类似于word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

  • <thead> 创建单独的表头。

  • <tbody> 表示表格的主体。

  • <tfoot> 创建一个单独的表格脚。

注意：<thead>和<tfoot>标签应出现在<tbody>之前。

<table border = "1" width = "400" height = "150" style="border-collapse: collapse;">
            <caption>这是标题</caption>
            <thead>
                <tr>
                    <td colspan = "3">创建单独的表头</td>
                </tr>
            </thead>       
            <tfoot>
                <tr>
                    <td colspan = "3">创建一个单独的表格脚</td>
                </tr>
            </tfoot> 
            <tbody>
 
                <tr>
                    <th colspan = "2">姓名+班级</th>
                    <th>学号</th>
                </tr>
                <tr>
                    <td>嬴政</td>
                    <td rowspan = "2">二班</td>
                    <td>001</td>
                </tr>
                <tr>
                    <td>刘邦</td>
                    <td>002</td>
                </tr>
                <tr>
                    <td>刘秀</td>
                    <td>三班</td>
                    <td>003</td>
                </tr>
            </tbody> 
        </table>

HTML 入门手册(二)

 

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

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

相关文章

网络原理-初识(1)

网络原理-初识(1)

目录 网络发展史 独立模式 网络互连 局域网LAN 广域网WAN 网络通信基础 IP地址 概念 格式 端口 概念 格式 认识协议 概念 作用 五元组 网络发展史 独立模式 独立模式:计算机之间相互独立; 网络互连 随着时代的发展,越来越需要计算机之间相互通信,共享软件和数…
阅读更多...
精通 VS 调试技巧,学习与工作效率翻倍!

精通 VS 调试技巧,学习与工作效率翻倍!

​ ✨✨ 欢迎大家来到贝蒂大讲堂✨✨ ​ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; ​ 所属专栏&#xff1a;C语言学习 ​ 贝蒂的主页&#xff1a;Betty‘s blog 1. 什么是调试 当我们写代码时候常常会遇见输出结果不符合我们预…
阅读更多...
echarts绘制多条刻度线仪表盘，文本内容带背景且颜色渐变，echarts绘制复杂仪表盘

echarts绘制多条刻度线仪表盘，文本内容带背景且颜色渐变，echarts绘制复杂仪表盘

option {series: [{// 最外圈type: gauge,radius: 80%,center: [50%, 90%],startAngle: 180,endAngle: 0,min: 0,max: 100,progress: {show: false,width: 8},pointer: {show: false},axisLine: {show: false,lineStyle: {width: 50,color: [// axisTick使用的是这里的颜色[0.…
阅读更多...
算法通关村番外篇-面试150题五

算法通关村番外篇-面试150题五

大家好我是苏麟 , 今天带来LeetCode面试题的哈希题目 . 哈希表 202. 快乐数 描述 : 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为…
阅读更多...
HarmonyOS鸿蒙学习基础篇 - 基本语法概述

HarmonyOS鸿蒙学习基础篇 - 基本语法概述

书接上文 HarmonyOS鸿蒙学习基础篇 - 运行第一个程序 Hello World 基本语法概述 打开 entry>src>main>ets>pages>index.ets 代码如下代码详细解释如下&#xff1a; Entry //Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中&#xff0c;最多可以使用…
阅读更多...
如何在Linux上部署Docker容器

如何在Linux上部署Docker容器

一、什么是docker&#xff1f; Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows 机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不…
阅读更多...
超分之ESRGAN

超分之ESRGAN

Esrgan&#xff1a;增强型超分辨率生成对抗网络。Esrgan: Enhanced super-resolution generative adversarial networks.In: ECCVW. (2018)Xintao Wang, Ke Yu, Shixiang Wu, Jinjin Gu, Yihao Liu,Chao Dong, Yu Qiao, and Chen Change Loy. 文章目录 摘要一、引言二、相关工作…
阅读更多...
C. Peaceful Rooks

C. Peaceful Rooks

思路&#xff1a;如果是本来就位于对角线上的点&#xff0c;那么自然就没有必要进行移动了&#xff0c;否则就是在浪费操作次数。 那么不在对角线上的点一定需要操作一次&#xff0c;竖直移动或者水平移动到对角线上。 但是我们还发现可能会有n个点构成一个环&#xff0c;就像样…
阅读更多...
基于Springboot的大学生心理健康管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的大学生心理健康管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的大学生心理健康管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体…
阅读更多...
前端上传大文件使用分片上传

前端上传大文件使用分片上传

前提：分片上传针对于一些大的文件、普通大小的文件使用element中的上传组件可以实现效果，例如几G的文件就会比较卡，所以这时候就需要用到分片上传~ 前端及后端分片上传笔记 效果：（上传进度展示） 效果：（上传成功的效果展示） 1、 新建一个上传组件 2、使用vue-simple-…
阅读更多...
thinkphp5向数据表插入数据并且获得id

thinkphp5向数据表插入数据并且获得id

$id db(数据表名)->insertGetId([status>1]); 直接...打印$id就是这条插入的数据的id了
阅读更多...
MySQL定期整理磁盘碎片

MySQL定期整理磁盘碎片

MySQL定期整理磁盘碎片&#xff1a;提升数据库性能的终极指南 MySQL作为一个强大的关系型数据库管理系统&#xff0c;在长时间运行后可能会产生磁盘碎片&#xff0c;影响数据库性能。本博客将深入讨论如何定期整理MySQL磁盘碎片&#xff0c;以确保数据库的高效运行。我们将介绍…
阅读更多...
MySQL的启动与连接

MySQL的启动与连接

一、启动MySQL服务 方式一&#xff1a;进入计算机管理界面&#xff0c;点击【服务】&#xff0c;找到【MYSQL80】&#xff0c;右键开启即可 方式二&#xff1a;以管理员身份打开powershell, 输入命令net start MYSQL80. 二、连接MySQL服务 进入MySQL的安装目录中的bin目录&a…
阅读更多...
JS中splice方法的用法总结

JS中splice方法的用法总结

1. 概述 JavaScript中的splice()方法是用于增加、删除或替换数组中的元素。这个方法可以实现数组的细粒度操作，非常灵活和强大。 2. 语法 splice()方法的语法如下所示： start：必需，表示开始删除或插入的索引位置。如果为负数，则从数组的末尾开始计算。deleteCount：可选…
阅读更多...
一些es的基本操作

一些es的基本操作

目录 给索引增加字段&#xff1a;给索引删除字段[^1]&#xff1a;创建索引&#xff1a;插入document删除document(应该是按ID) : 给索引增加字段&#xff1a; 用postMan: 给名为population_portrait_hash_seven的索引增加了一个text类型的字段。 用chrome插件Elasticvue 的Re…
阅读更多...
一种解决常用存储设备无法被电脑识别的方法

一种解决常用存储设备无法被电脑识别的方法

一、通用串行总线控制器描述 通用串行总线&#xff08;Universal Serial Bus&#xff0c;简称USB&#xff09;&#xff0c;是连接电脑与设备的一种序列总线标准&#xff0c;也是一种输入输出&#xff08;I/O&#xff09;连接端口的技术规范&#xff0c;广泛应用于个人电脑和移动…
阅读更多...
解决vld内存泄露检测工具只支持到vs2015的问题，visual studio2015以上版本安装vld内存泄漏检测工具[实测vs2022生效]

解决vld内存泄露检测工具只支持到vs2015的问题，visual studio2015以上版本安装vld内存泄漏检测工具[实测vs2022生效]

目录 一.vld工具下载二.vld应用安装三.visual studio2022环境配置四.visual studio2022 vld内存检测测试 一.vld工具下载 Visual Leak Detector github链接: https://kinddragon.github.io/vld/ 下载直达链接: https://github.com/KindDragon/vld/releases/tag/v2.5.1 下拉至…
阅读更多...
怎么计算数据的均值和方差

怎么计算数据的均值和方差

1. 前言 pytorch 跑深度学习数据集的时候&#xff0c;需要先将数据归一化&#xff0c;可以让网络更好的收敛。一般的均值和方差都是利用&#xff08;灰度值 - 0.5 &#xff09;/ 0.5 本章提供一个计算均值和方差的代码&#xff0c;供以后使用 2. 完整代码 代码如下&#xff…
阅读更多...
大数据开发之Spark（累加器、广播变量、Top10热门品类实战）

大数据开发之Spark（累加器、广播变量、Top10热门品类实战）

第 3 章&#xff1a;累加器 累加器&#xff1a;分布式共享只写变量。&#xff08;executor和executor之间不能读数据&#xff09; 累加器用来把executor端变量信息聚合到driver端。在driver中定义的一个变量&#xff0c;在executor端的每个task都会得到这个变量的一份新的副本…
阅读更多...
C++——结构体

C++——结构体

1&#xff0c;结构体基本概念 结构体属于用户自定义的数据类型&#xff0c;允许用户存储不同的数据类型。像int&#xff08;整型&#xff09;&#xff0c;浮点型&#xff0c;bool型&#xff0c;字符串型等都是属于系统内置的数据类型。而今天要学习的结构体则是属于我们自定义…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023