HTML

最新推荐文章于 2023-09-06 08:30:00 发布
最新推荐文章于 2023-09-06 08:30:00 发布
阅读量141 收藏
点赞数
分类专栏： Java 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44911955/article/details/93239016
版权

什么是HTML？

  • HTML：
    超文本标记语言 ( Hyper Text Markup Language )，可以编写代码制作简易静态网页
    超文本：文字，图片，音频，视频，动画等

  • 发展历史：
    <1>HTML2.0—文字 , 特别丑的文本框
    <2>HTML 5—动画 , 渲染…

  • HTML的优势
    <1>HTML编写的代码，所有的浏览器都支持，都可以显示
    <2>市场的需求—从C/S—>b/s架构
    <3> 跨平台

  • W3C标准
    三个标准：
    <1>结构化标准：HTML，xml等
    <2>表现标准：CSS
    <3>行为标准：ECMA Script

HTML的基本结构

  • HTML注释 :
    在这里插入图片描述
  • HTML的基本结构 :
<!--声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>

<html lang="en">
<!--标签是成对出现-->
<!--头部标签-->
<head>
    <meta charset="UTF-8">
    <!--搜索关键字-->
    <meta name="keywords" content="我的第一个网页">
    <!--网页的描述-->
    <meta name="description" content="我的第一个网页有点cool!">
    <!--网页标题-->
    <title>我的第一个网页</title>
</head>

<!--网页主体，在网页上显示的内容写在这里-->
<body>

 Hello，World！！！

</body>


</html>

网页的基本标签

  • 标题标签

格式：

<h1>标题</h1>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<!--标题标签-->
<!--H1最大 , H6最小-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
</body>
</html>

运行结果如图：
在这里插入图片描述

  • 段落标签：

格式：

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第二个网页</title>
</head>
<body>

<!--段落标签-->
<!--p:表示段落标签-->
<h1>段落标签</h1>

<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>

</body>
</html>

运行结果为：
在这里插入图片描述

  • 换行标签 和 水平线标签
    格式：
两只老虎    两只老虎<br/>
<hr/>
跑得快       跑得快<br/>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第二个网页</title>
</head>
<body>
两只老虎    两只老虎<br/>
<hr/>
跑得快       跑得快<br/>
</body>
</html>

结果为：
在这里插入图片描述

  • 字体标签 和 特殊符号标签
    格式：
<!--strong : 粗体-->
<!--em : 斜体-->
加粗后 : <strong>I love you</strong>
斜体 : <em>I love you</em>

<!--特殊符号-->
<h1>特殊符号</h1>
<p>大于号 : &gt; </p>
<p>小于号 : &lt; </p>
<p>空格 :   你                好 | 你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好</p>
<p>引号 : &quot;&quot;</p>
<p>版权符号 : &copy; 版权所有狂神</p>
<!--& + 符号字符 + 分号结束-->

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第四个网页</title>
</head>
<body>

<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
<h1>字体字体样式</h1>
I love you
加粗后 : <strong>I love you</strong>
斜体 : <em>I love you</em>

<!--特殊符号-->
<h1>特殊符号</h1>
<p>大于号 : &gt; </p>
<p>小于号 : &lt; </p>
<p>空格 :   你                好 | 你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好</p>
<p>引号 : &quot;&quot;</p>
<p>版权符号 : &copy;</p>
<!--& + 符号字符 + 分号结束-->
</body>
</html>

结果为：
在这里插入图片描述

  • 图像标签

格式：

<img 
src=
"这里写图片的地址，可以填写本地图片地址，也可以填写网络图片下载地址" 
title=
"这里写图片标题" 
alt="这里写图片的名字" 
width="300px" 
height="300px">

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第五个网页</title>
</head>
<body>

<img
        src="https://b-ssl.duitang.com/uploads/item/201607/16/20160716104950_LPYMa.jpeg" title="火之意志" alt="自来也-鸣人" width="300px" height="200px">

</body>
</html>

运行结果为：
在这里插入图片描述

链接标签

  • 超链接
    格式：
<!--a:表示超链接-->
<!-- 

href : 表示连接的地址 : 必填
-->
<a href="https://www.baidu.com">点我跳转到百度</a>

<!--图像链接-->
<a href="https://www.bilibili.com"> <img src="https://b-ssl.duitang.com/uploads/item/201607/16/20160716104950_LPYMa.jpeg"> </a>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第六个网页</title>
</head>
<body>

<!--a:表示超链接-->
<!--

href : 表示连接的地址 : 必填
-->
<a href="https://www.baidu.com">点我跳转到百度</a>
<br/>
<!--图像链接-->
<a href="https://www.bilibili.com"> <img src="https://b-ssl.duitang.com/uploads/item/201607/16/20160716104950_LPYMa.jpeg"> </a>

</body>
</html>

运行结果为：

这个图片没有描述点击“点我跳转到百度”，转跳到百度
点击图片，转跳到哔哩哔哩

  • 锚链接
    可以从一个地方转跳到你所标记的地方，因此，你需要创建一个标记
    格式:
<!--创建一个标记-->
<a name="mark">锚链接标记</a>

<!--跳转到标记-->
<a href="#mark">点击跳转</a>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第七个网页</title>
</head>
<body>
<a href="HTML1.html#mark1">点我跳到标记1</a>
<a href="HTML1.html#mark2">点位转跳到标记2</a>
<a href="HTML.html#mark">点击转跳到我的第六个网页</a>
<h1>超链接测试</h1>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<a name="mark1">标记1</a>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<a name="mark2">标记2</a>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
</body>
</html>

比较简单，代码运行后自行体会，

  • target
    格式
<p>
    <a target="_blank" href="1.第一网页.html">打开第一个网页_在新网页中打开</a>
    <a target="_self" href="1.第一网页.html">打开第一个网页_在自己网页中打开</a>
</p>

案例：

<p>
    <a target="_blank" href="1.第一网页.html">打开第一个网页_在新网页中打开</a><br>
    <a target="_self" href="1.第一网页.html">打开第一个网页_在自己网页中打开</a>
</p>

比较简单，代码运行后自行体会，

列表 和 表格

  • 列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>无序列表</h1>
<ul>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ul>


<h1>有序列表</h1>
<ol>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ol>



<h1>自定义列表</h1>
<dl>
    <dt>Java</dt>
    <dd>OOP</dd>
    <dd>Annotation</dd>
    <dd>Reflection</dd>

    <dt>Python</dt>
    <dd>数据分析</dd>
    <dd>数据挖掘</dd>
    <dd>...</dd>
</dl>
</body>
</html>

运行结果为：
在这里插入图片描述

  • 表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表格-->
<!--
table : 表格
tr : 行 table rows
td : 列
-->

<table border=1px>

    <tr>
        <!--colspan=跨列-->
        <td colspan="3">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <!--rowspan=跨行-->
        <td rowspan="3">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
       
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>

</table>
</body>
</html>

运行结果为：
在这里插入图片描述

表单测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单测试</title>
</head>
<body>
<h1>模拟用户登陆</h1>
<form action="HTML练习.html" method="get">
    <p>用户名：<input type="text" name="username" placeholder="请输入用户名" required></p>

    <p>密码： <input type="password" name="pass" placeholder="请输入密码" required></p>
    <p>确认密码： <input type="password" name="pass1" placeholder="请确认密码" required></p>

    <p>
        <input type="file">
    </p>

    <p>
        性别
        <input type="checkbox" name="group1" value="男">男
        <input type="radio" name="group1" value="女">女
    </p>

    <p>
        爱好
        <input type="radio" value="movie">看电影
        <input type="checkbox" value="music">听歌
        <input type="radio" value="rode">压马路
        <input type="checkbox" value="code" checked>敲代码
    </p>



    <hr/>
    <select name="国家">
        <option value="美国">美国</option>
        <option value="中国" selected>中国</option>
        <option value="印度">印度</option>
        <option value="西班牙">西班牙</option>
    </select>

    <p><input type="button" value="my first button"></p>

    <p>
        搜索：<input type="search" name="search">
    </p>
    <p>
        <input type="image" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1559977957&di=4782ae2dd9dbfc44c5aba191a4862c3a&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658">
    </p>

    <p>
        <textarea name="textarea" cols="30" rows="5">
            这是我写的第一个文本域

            纵横交错兮天下之局
            谁能参悟兮世事如棋
        </textarea>
    </p>

    <p>
        提交你的邮箱：<input type="email" name="email">（请确保真实性）
    </p>
    <p>
        提交你的博客：<input type="url" name="url">
    </p>

    <p>
        提交你喜欢的数字：<input type="number">
    </p>

    音量：<input type="range" name="range" value="30">


    <p>
        <a href="https://www.baidu.com">点击转跳到百度</a>
    </p>

    <p>
        <input type="submit" name="Button" value="提交">
        <input type="reset" name="Button" value="重写">
    </p>


    <p>
        <input type="button" value="我的第一个button按钮" >

    </p>


</form>
</body>
</html>

运行结果为：
在这里插入图片描述

在这里插入图片描述

内联框架

要在网页中嵌入另一个网页，或者把多个网页放入一个网页中时，使用内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<iframe src="HTML3.html">  </iframe>
<iframe src="HTML4.html" > </iframe>
<!--把HTML3.html和HTML4.html放入同一个网页中-->
</body>
</html>
</body>
</html>
阿百川pro
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML+CSS小白入门与进阶教程
热门推荐
qq_29192703的博客
08-07 9万+
本文旨在让你快速了解HTML语法结构，通过实例操作快速从无到有的入门与进阶。Html语言学习的特点有点像刚开始学word软件，word的功能就像html标签，用多了就熟悉了，不常用的一些功能现学现用即可（你要不知道什么是标签的意思不要着急，下面会讲到）。 [注]本文使用的开发软件是Notepad++，我在文章的最后提供的所有需要素材和网站源码，但我希望你能在看完整篇文章后再去下载，文章中实验代码...
HTML（超详细）（图+文）
Czc1357618897的博客
01-12 1万+
HTML各个知识点超详解 ！！！
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
最新发布
ZL_1618的博客
09-06 1万+
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML介绍
m0_62360856的博客
03-07 3202
HTML标签介绍
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
HTML基础知识
m0_53161561的博客
03-23 4213
HTML基础知识HTML的概述及开发环境1.1.1 HTML的概述1.1.2 HTML的历史版本1.1.3 网页组成1.1.4 开发环境HTML标签组织页面内容2.1.1 HTML标签名称与属性 HTML的概述及开发环境 1.1.1 HTML的概述 HTML是超文本标记语言，英语名称为HyperText Markup Language，它是一种用于创建网页的标准标记语言。 可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 超文本标记语言是标准通用标记语言
HTML常用基础内容总结
moteandsunlight的博客
02-26 3482
Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。HTML，即Hyper Text MarkupLanguage，是一种超文本标记语言。顾名思义，这种语言可以表示很多形式的信息，不仅限于文本。
HTML详解
weixin_51356824的博客
08-22 2027
HTML 一、HTML简介 1、什么是HTML HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方
html入门教程
打代码是一天，不打代码也是一天
03-17 4168
dl > < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 …… < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 ……
一篇文章，带你详细了解HTML基础知识
PICACHU+++的博客
10-23 1675
HTML是用来描述网页的一种语言，中文名称叫做超文本标记语言（HyperTEXT Markup Language)HTML不是一门编程语言，是一种标记语言，本身有一套完整的标记标签通过这些标签标记来描述网页，完整标签组成的文档称为HTML文档，包含了文本和标签，是一个完整的HTML文档也叫Web页面。
Web前端学习：HTML基础【入门宝典】
Oh_Python的博客
03-11 7089
一、HTML简介 什么是HTML？ HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。 1、HTML的特点 （1）HTML不是编程语言，而是标记语言。 （2）HTML使用标签的形式来标识网页的不同组成部分 （3）HTML文档包含了HTML标签和文本 （4）HTML文档又叫做Web页面 （5）HTML文档的后缀：html 或 htm 2、HTML元素语法 （1）HTML 元素以开始标签起始 （2）HTML 元素以结束标签终止
HTML的介绍
tianfen_auster的博客
12-03 6134
一、HTML的介绍 1、HTML的概述： html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解
HTML 概述
Dailyblue的专栏
03-29 2638
HTML 的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
html基础知识
firenaimal的博客
04-06 2855
文本标签加粗加粗倾斜倾斜删除下滑线字体修饰标签有哪些？加粗
html
05-29
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。HTML 由各种元素（tags）和属性（attributes）组成，这些元素和属性可以用来定义网页的结构和内容。 HTML 元素通常由一个开始标记和一个结束标记组成。例如，p 元素用于定义段落，其开始标记和结束标记分别为 <p> 和 </p>。元素中的内容是由标记之间的文本和其他元素组成的。 HTML 还支持属性，属性用于为元素提供额外的信息。例如，img 元素用于插入图像，其 src 属性用于指定图像文件的 URL。 以下是一个简单的 HTML 示例： ```html <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到我的网页！</h1> <p>这是一个段落。</p> <img src="image.jpg" alt="图像"> </body> </html> ``` 在上面的示例中，<!DOCTYPE html> 用于指定 HTML 版本。html 元素用于定义 HTML 文档。head 元素用于包含文档的元数据，例如标题和样式表等。title 元素用于定义文档的标题。body 元素用于定义文档的主体。 希望这个简单的 HTML 示例可以帮助你了解 HTML 的基本结构和语法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值