HTML学习（1）

news2025/1/24 2:21:22

文章目录

    • HTML初识
    • 第一个HTML程序
    • HTML元素
    • HTML属性
    • HTML标题
    • HTML段落
    • HTML样式
    • 格式化标签
    • HTML引用
    • HTML注释
    • HTML+CSS
    • HTML链接
    • HTML图片
    • HTML表格
    • HTML列表
    • HTML块

我的个人博客：欢迎来逛逛

HTML初识

HTML全称是：Hyper Text Markup Language

HTML不是一种编程语言，而是一种标记语言，使用标记标签来描述网页。

HTML标签是由<>包围起来的关键词，并且通常是成对出现的，例如<p> </p>，被称为开始标签（开放标签）和结束标签（闭合标签）

HTML文档就等同于网页，因为HTML文档包含HTML标签和纯文本，HTML文档也被称之为标签。浏览器会使用标签来解释网页的内容。

第一个HTML程序

<h1>我的第一个标题</h1>
<p>我的第一个段落</p>

<h1>我的第一个标题</h1>
<p>我的第一个段落</p>

HTML标题：使用 <h1> … <h6> 等作为不同的等级

<html>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
    </body>
</html>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

​

HTML段落：使用<p>标签进行定义

<html>
    <body>
        <p>段落</p>
    </body>
</html>

段落

​

HTML链接：使用<a href=“xxxx”>来表示，href表示链接的地址

<html>
    <body>
        <a href="https://helloylh.com">这是我的博客</a>
    </body>
</html>

这是我的博客

HTML显示图像：使用<img src=“xxx” width=“xx” height=“xxx”>来显示

<img src="https://cdnjson.com/images/2023/04/01/touxiang.md.png" width="480" height="640">

HTML元素

指的是开始标签和结束标签之间的内容。

<p>元素：元素的内容是：这是一个段落

<p>这是一个段落</p>

<body>元素：定义了html文档的主体，元素的内容是另一个HTML标签

<body>
    <p>这是一个段落</p>
</body>

<html>元素：定义了整个html文档。

<html>
    <body>
        <p>这是一个段落</p>
    </body>
</html>

省略结束标签虽然可以但是不要这么做

标签尽量使用小写。

HTML属性

属性为元素提供附加信息，属性总是在开始标签中定义。

href就是在<p>中指定的一个属性

<a href="helloylh.com"> This is My Blog.</a>

This is My Blog.

align属性：为标题设置对齐方式

<h1 align="center">主标题</h1>

主标题

bgcolor属性：在<body>中指定，设置网页的背景颜色

<body bgcolor="yellow">
    <h1 align="center">主标题</h1>
</body>

<h1 align="center" color="yellow">主标题</h1>

属性值应该始终被包括在引号内，单引号和双引号都可以。

HTML参考手册

HTML标题

HTML有六种不同的标题，分别对应<h1> 到 <h6>

HTML水平线：<hr />

<h1 align="center">主标题</h1>
<hr />
<p> 段落 </p>
<hr /> 
<p> 段落 </p>

主标题

段落

段落

HTML注释：<后面紧跟一个 ! 号

<!-- 这是一句注释 -->

HTML段落

如果你想要插入一个空行：这是一个空的html元素，因此没有结束标签

<br />

在不产生新段落的情况下换行：

<p>我在<br>不产生<br>新段落的条件下<br>换行了</p>

不要用没有结束标签的HTML元素，因此要使用<br /> 而不是<br >

HTML样式

style属性：提供了一种可以改变所有HTML元素样式的通用方法。

使用样式替代我们刚才的center align bgcolor等标签或者属性（废弃）

设置背景颜色：background-color

<body style="background-color:blanchedalmond;">
    
<h1 style="background-color: aqua;">这是一个主标题</h1>
<hr />
<p style="background-color: aquamarine;"> 段落 </p>

设置字体颜色和尺寸：

<p style="font-family:sans-serif;color: brown;font-size:50;">啦啦啦这是一句话，测试字体颜色和尺寸</p>

文本对齐：

<h1 style="background-color: aqua;text-align: center;" >这是一个主标题</h1>

格式化标签

参考文档

文本格式化

<b>定义粗体文本<br/></b>
<big>定义大号字体<br/></big>
<em>着重字<br/></em>
<i>斜体字<br/></i>
<strong>加重语气<br/></strong>
这是<sub>下标字<br/></sub>
这是<sup>上标字<br/></sup>
<del>这是删除字<br/></del>
<u>下划线<br></u>

定义粗体文本

定义大号字体

着重字

斜体字

加重语气

这是下标字

这是上标字

这是删除字

下划线

引用等：

<abbr title="我是沙雕">我的名字</abbr><br>
<address>
    我的网站是<a href="https://helloylh.com"><br>欢迎大家来逛逛</a><br>
    尽情期待吧
</address><br>
<blockquote>这是长的引用</blockquote>
<q>这是短引用</q>
<dfn>定义项目</dfn>

我的名字

我的网站是
欢迎大家来逛逛
尽情期待吧
这是长的引用
这是短引用 定义项目

输出等标签:：

<pre>预格式文本    保留了空行和换行 
      6666
</pre>

<p>很适合用来显示代码</p><br>

<pre>for (int i=1;i<=100;i++){
                sum+=i;
      }</pre><br>

预格式文本    保留了空行和换行 
      6666

很适合用来显示代码


for (int i=1;i<=100;i++){
                sum+=i;
      }

计算机编程代码：

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

HTML引用

短引用：<q>

<html>
    <body>
        <p> 
            我们的目标是：<q>构建和谐社会，构建人类命运共同体。</q>
        </p>
    </body>
</html>

我们的目标是：构建和谐社会，构建人类命运共同体。

长引用：<blockquote>

<html>
    <body>
        <p>我想说的是：</p>
        <blockquote cite="https://helloylh.com">
            我的网站啊啊啊啊，快点来访问我的网站！ 啊啊啊啊
        </blockquote>
    </body>
</html>

我想说的是：

我的网站啊啊啊啊，快点来访问我的网站！ 啊啊啊啊

使用缩略词：<abbr>


<html>
    <body>
        <p><abbr title="Ylh's Blog" >www</abbr></p> 
    </body>
</html>

用于定义的引用：<dfn>

<html>
    <body>
        <p><dfn title="Ylh's Blog">这是我的网站</dfn> 成立于2023年3月</p>
        <p><dfn><abbr title="Ylh's Blog">这是我的网站</abbr></dfn> 成立于2023年3月</p>
        <p><dfn>这是我的网站</dfn> 成立于2023年3月</p>
    </body>
</html>

用于显示地址：<address>

<html>
    <body>
        <p><dfn>这是我的网站</dfn> 成立于2023年3月</p>
    </body>
</html>

用于著作标题：<cite>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

用于双向重写：<bdo>


<html>
    <body>
        <bdo dir="ltr">从左往右写</bdo><br>
        <bdo dir="rtl">从右往左写</bdo>
    </body>
</html>

HTML注释

<html>
    <body>
        <!-- 下面是一段注释 -->
        <bdo dir="ltr">从左往右写</bdo><br>
        <bdo dir="rtl">从右往左写</bdo>
        <!-- 注释终止了 -->
    </body>
</html>

条件注释等

一个锚的提示功能（看下文）

HTML+CSS

在html中定义样式表

外部样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表：


<html>
    <head>
        <style>
            body{background-color: aqua}
            p{margin-left: 20px}
        </style>
    </head>
    <!-- 为下面的body及p标签定义了属性 -->
    <body>
        <p>
            <!-- 下面是一段注释 -->
            <bdo dir="ltr">从左往右写</bdo><br>
            <bdo dir="rtl">从右往左写</bdo>
            <!-- 注释终止了 -->
        </p>
    </body>
</html>

内联样式

HTML链接

使用<a href=“url”> 即可访问指定的url链接

<a href="https://helloylh.com" >在此标签页访问我</a><br>
<a href="https://helloylh.com" target="_blank">点击这里在外部外部标签页访问我</a>

设置target属性可以控制行为

命名锚：name属性可以规定锚的名称，这相当于一个书签，当我们定义了一个锚后，在之后我们可以直接跳转到这个锚点。

点击可以看到效果：

有用的提示

<a href="https://helloylh.com" name="label">显示在页面上的文字</a><br> 
<a href="https://helloylh.com" >在此标签页访问我</a><br>
<a href="https://helloylh.com" target="_blank">点击这里在外部外部标签页访问我</a><br>
<a href="#label">跳转过去</a><br> <!-- 跳转到label点-->

HTML图片

使用<img>标签来指定src图片的url链接

<img src="https://cdnjson.com/images/2023/04/01/avatar9acfc8232ac99d15.jpg">

使用alt来替换文本的属性

当图片无法显示的时候，会显示指定的文本

 <img src="https://cdnjson.com/images/2023/04/01/avatar9acfc8232ac99d15.jpg" alt="这是一只狗">

嵌套将图片作为超链接

<a href="https://www.google.com/"><img src="https://cdnjson.com/images/2023/04/01/avatar9acfc8232ac99d15.jpg" alt="世界尽头"></a>

世界尽头

HTML表格

<table> 表示接下来是一个表格；<tr>表示每一行；<td>表示分割成的每一列

添加<border>属性来表示表格是否含有边框

使用<th>来表示列表的表头

<table border="1">
    <tr>
    	<th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>row 1,col 1</td>
        <td>row 1,col 2</td>
    </tr>
    <tr>
        <td>row 2,col 1</td>
        <td>row 2,col 2</td>
    </tr>
</table>
Heading 1Heading 2
row 1,col 1row 1,col 2
row 2,col 1row 2,col 2

HTML列表

无序列表

<ul>用来指定无序列表，<li>用来指定列表的每一项

<ul>
    <li>Coffee</li>
    <li>Cola</li>
    <li>Milk</li>
</ul>
  • Coffee
  • Cola
  • Milk

有序列表

<ol>用来创建有序列表

<ol>
    <li>Coffee</li>
    <li>Cola</li>
    <li>Milk</li>
</ol>
  1. Coffee
  2. Cola
  3. Milk

自定义列表项

<dl>指定自定义列表项的开始；<dt>表示每一个列表项；<dd>表示每一个列表项的定义

 <dl>
     <dt>Coffee</dt>
     <dd>Black hot drink</dd>
     <dt>Milk</dt>
     <dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink

HTML块

HTML的元素分为块元素和内联元素。

块元素可以自动换行，内联元素不会自动换行

设置块元素：

<div style="background-color: green">
  	<ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
    </ul>
    <ol>
    	<li>111111</li>
        <li>222222</li>
        <li>333333</li>
    </ol>
</div>
  • 111111
  • 222222
  • 333333
  1. 111111
  2. 222222
  3. 333333

设置内联元素：<span>

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

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

相关文章

如何在Windows系统上制作U盘启动盘？

如何在Windows系统上制作U盘启动盘？

使用U盘重装Windows电脑系统&#xff0c;对于熟悉电脑的人来说十分常见&#xff0c;但是不少电脑小白并不会制作U盘启动盘。U盘启动盘是包含操作系统的外部硬盘驱动器&#xff0c;可用于启动计算机或笔记本电脑。下面我们就来了解一下如何制作U盘启动盘。 注意&#xff1a; U …
阅读更多...
在芯片行业，想要达到年薪百万难吗？

在芯片行业，想要达到年薪百万难吗？

近两年芯片行业爆火&#xff0c;受到了方方面面的关注。新的一年新的开始&#xff0c;现在这个行业的真实情况到底如何&#xff1f;从事芯片行业有没有前途&#xff1f;下面就来具体谈一谈&#xff0c;希望能给想入高薪行业的你一些帮助。 芯片工程师为什么这么贵&#xff1f;…
阅读更多...
ControlNet 1.1重磅发布，14个模型全部开源！

ControlNet 1.1重磅发布，14个模型全部开源！

来源&#xff1a;https://github.com/lllyasviel/ControlNet-v1-1-nightly ControlNet 1.1 与 ControlNet 1.0 具有完全相同的体系结构,ControlNet 1.1 包括所有以前的模型&#xff0c;具有改进的稳健性和结果质量,并添加了几个新模型。 模型命名规则更新 从 ControlNet 1.1 开…
阅读更多...
英汉互译在线翻译-英文翻译中文的翻译

英汉互译在线翻译-英文翻译中文的翻译

您是否曾经遇到需要翻译英语文件&#xff0c;但被繁琐的翻译过程所拖慢了工作进度&#xff1f;或者遭遇了机器翻译的低准确率和翻译错误困扰&#xff1f;如果是这样&#xff0c;那么我们的英语翻译中文转换器将是您在这方面的最佳选择&#xff01; 我们的英语翻译中文转换器是…
阅读更多...
CSS学习（2） - 边距与高宽 + 框模型

CSS学习（2） - 边距与高宽 + 框模型

文章首发于&#xff1a;欢迎大佬们前来逛逛 文章目录CSS边框边框样式边框宽度边框颜色单独设置边框边框属性简写圆角边框CSS边距外边距外边距合并CSS内边距内边距与内容宽度CSS高度与宽度CSS框模型CSS边框 border 属性能够设置边框的属性&#xff0c;包括样式&#xff0c;颜色…
阅读更多...
vscode连接Linux开发

vscode连接Linux开发

vscode远程开发Linux项目 1、首先在vscode中下载安装 Remote SSH。 安装完成后 vscode 左侧就会出现下面的图标。 2、配置远程Linux的信息 # Read more about SSH config files: https://linux.die.net/man/5/ssh_config # Host centos # HostName 192.168.88.10 # …
阅读更多...
14. unity粒子特效--速度、粒子环绕、力（重力、阻力、风力等）、噪音

14. unity粒子特效--速度、粒子环绕、力（重力、阻力、风力等）、噪音

1. 渐变速度&#xff08;Velocity over Time&#xff09; 可以分别指定x,y,z三个方向的速度&#xff0c;最终的速度是三个方向的速度合成&#xff0c;点击右侧的下拉三角&#xff0c;也可以使用曲线进行速度的控制调节&#xff0c;如下图所示&#xff1a; 2. 粒子环绕 粒子…
阅读更多...
数据治理：1分钟教你认识和识别主数据

数据治理：1分钟教你认识和识别主数据

​我们讲元数据是企业数据管理的基石&#xff0c;主数据是企业经营运作的主体对象。一般而言&#xff0c;都是从元数据或主数据切入&#xff0c;再逐步展开数据治理的其他领域。企业数据的范围很广而且在不断的增加和演变&#xff0c;哪些数据应该作为主数据加以合理的管理&…
阅读更多...
【JSON学习笔记】1.JSON 简介及语法

【JSON学习笔记】1.JSON 简介及语法

前言 本章介绍JSON及其语法。 JSON 教程 JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法&#xff0c;类似 XML。 JSON 比 XML 更小、更快&#xff0c;更易解析。 JSON 易于人阅读和编写。 C、Python、C、Java、PHP、Go等编程…
阅读更多...
python机器学习基础——监督学习算法之线性回归

python机器学习基础——监督学习算法之线性回归

定义 线性模型是在实践中广泛使用的一类模型&#xff0c;几十年来被广泛研究&#xff0c;它可以追溯到一百多年前。线性模型利用输入特征的线性函数 用于回归的线性模型 import mglearn import matplotlib.pyplot as pltmglearn.plots.plot_linear_regression_wave()plt.show…
阅读更多...
使用vue实现分页

使用vue实现分页

使用vue实现分页的逻辑并不复杂&#xff0c;接收后端传输过来的数据&#xff0c;然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页 我编写了一个简单的前端页面用来查询数据&#xff0c;页面一共有几个逻辑 具体的效果可以看下面的演示 下面就来看一下具体的实…
阅读更多...
【MyBatis】MyBatis分页插件的使用

【MyBatis】MyBatis分页插件的使用

文章目录MyBatis分页插件的使用前置知识分页插件的使用MyBatis分页插件的使用 前置知识 MyBatis基础用法。推荐阅读&#xff1a;MyBatis的基本使用 MySQL分页查询&#xff1a; 知道分页查询的规律&#xff0c;同时知道limit index pageSize的使用 index&#xff1a;当前页的起…
阅读更多...
【分布式 论文】之 1. MapReduce——Simplified Data Processing on Large Clusters

【分布式 论文】之 1. MapReduce——Simplified Data Processing on Large Clusters

文章目录1. 需求 / 现存问题2. 总述3. 实现3.1 概述3.2 Master的数据结构3.3 容错性3.3.1 worker节点故障3.3.2 master节点故障3.3.3 故障环境下的语义3.4 位置&#xff08;Locality&#xff09;3.5 任务粒度3.6 备份任务4. 对MapReduce的扩展4.1 划分函数4.2 排序保证4.3 聚合…
阅读更多...
【Python】网络请求

【Python】网络请求

目录 一、网络请求流程 1.HTTP 2.URL 3.网络传输模型 4.长链接/短链接 二、爬虫基础 1.基础概念 2.发送请求 3.请求模式 4.cookie 5.retrying 一、网络请求流程 1.HTTP 用户输入网址&#xff0c;例如 www.baidu.com浏览器先向DNS请求&#xff0c;找到网址域名对应的…
阅读更多...
【Linux】网络层 — IP协议

【Linux】网络层 — IP协议

&#x1f387;Linux&#xff1a; 博客主页&#xff1a;一起去看日落吗分享博主的在Linux中学习到的知识和遇到的问题博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 看似不起波澜的日复一日&#xff0c;一定会在某一天让你看见坚持…
阅读更多...
html页面在其他浏览器中渲染不出来

html页面在其他浏览器中渲染不出来

参考文章 问题 Vs code软件中live sever插件设置默认的浏览器是360浏览器&#xff0c;所以一直以来页面都是默认在360浏览器上进行打开并且没有问题。 后面想换谷歌浏览器打开html页面看下效果&#xff0c;发现图表和数据渲染不出来&#xff1a; 报错信息&#xff1a; 用js…
阅读更多...
想制作出专业水准的音视频？掌握H.264编码技巧是关键

想制作出专业水准的音视频？掌握H.264编码技巧是关键

H.264编码原理 H.264&#xff0c;也被称为先进视频编码&#xff08;AVC&#xff09;&#xff0c;是目前最流行的视频编码标准之一&#xff0c;其压缩效率很高。H.264编码基于视频编码的原始数据&#xff0c;使用一系列算法和技术以更小的比特率呈现更高质量的视频。以下是H.26…
阅读更多...
【SSM】Spring6(十一.Spring对事务支持)

【SSM】Spring6(十一.Spring对事务支持)

文章目录1.引入事务场景1.1准备数据库1.2 创建包结构1.3 创建POJO类1.4 编写持久层1.5 编写业务层1.6 Spring配置文件1.7 表示层&#xff08;测试&#xff09;1.8 模拟异常2.Spring对事务的支持2.1 spring事务管理API2.2 spring事务之注解方式2.3 事务的属性2.4 事务的传播行为…
阅读更多...
春季儿童吃什么有助于长高，3款适合孩子长高的食谱做法，学起来

春季儿童吃什么有助于长高，3款适合孩子长高的食谱做法，学起来

儿童身高一直以来都比较受到父母的关注&#xff0c;虽然身高不能说明一个人的能力有多强&#xff0c;但是会影响到人的外表。身高影响成败&#xff0c;一些专业对身高要求非常严格&#xff0c;因此大部分家长都希望孩子在身高方面能有一定的优势。 春季是孩子分泌生长激素增加时…
阅读更多...
一位27岁软件测试员，测试在职近5年，月薪不到2W，担心被应届生取代

一位27岁软件测试员，测试在职近5年，月薪不到2W，担心被应届生取代

工作了近5年&#xff0c;一个月工资不到20K&#xff0c;担心被应届毕业生取代&#xff01;互联网的快速发展伴随着员工适者生存的加速&#xff0c;测试员的薪资也在不断增长&#xff0c;以3年、5年、8年为一条分水岭。如果人们的能力和体力不够&#xff0c;他们就会被淘汰。看起…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023