HTML基础1（概述、标签、超链接、锚链接、块元素、行内元素）

最新推荐文章于 2022-04-27 22:12:35 发布
最新推荐文章于 2022-04-27 22:12:35 发布
阅读量1.2k 收藏 4
点赞数 2
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45677119/article/details/103578207
版权

HTML语言基础

概述：

  1. HTML(HyperText Markup Language)：称为超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

  2. HTML的基本结构：

<!--DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML-->
<!DOCTYPE html>
<!--"lang"表示“language”:语言;“en”即表示english-->
<html lang="en">
<!--网页的头部-->
<head>
	<!--建议规范编码，统一使用UTF-8编码-->
	<!--meta:描述信息-->
    <meta charset="UTF-8">
    <!--title:网页标题-->
    <title>Title</title>
</head>
<body>
<!--body网页的主体部分-->
</body>
</html>
  • 所有的HTML 标签 都以 <> 开始 </> 结尾；
  • 正常网页的所有内容都需要放在 < body> 标签中
  • 你的网页如果是中文页面，可将其改为
<html lang="zh">
<!--zh即表示中文; <html lang=""en">可以输出中文,只是会让你的浏览器提示你要不要翻译此页,如果改成zh-cn就没有翻译的选项了-->

标签

基本标签
  1. 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
...
  1. 段落标签
<p>
  盼望着，盼望着，东风来了，春天的脚步近了。
</p>
<p>
　 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
</p>
  1. 换行标签
<br/>
  1. 水平线标签
<hr/>
  1. 字体样式标签
<strong>李白</strong> <!--字体加粗-->
<em>唐代诗人</em> <!--字体倾斜-->
  1. 特殊符号标签
&nbsp;<!--空格-->
&gt;<!--大于-->
&lt;<!--小于-->
&copy;<!--版权符号：©-->
&phone;<!--电话符号：☎-->
...

符号太多了，就不一一举例了；其实也可以使用自己输入法输入特殊符号，但既然它是一门语言还是使用规范的语言较好

  • 演示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<h1>古诗</h1>
<h2>静夜思</h2>
<em>朝代：唐朝</em>&nbsp;&nbsp;&nbsp; 作者：<strong>李白</strong> <br/>
<hr/>
<p>
    床前明月光，<br/>
    疑是地上霜，<br/>
    举头望明月，<br/>
    低头思故乡。<br/>
</p>
<h1>李白</h1><h2>(唐代诗人)</h2>
<p>
    李白（701年－762年），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”<br/>
</p>

<p>
    李白深受黄老列庄思想影响，有《李太白集》传世，诗作中多以醉时写的。
</p>
<p>
    代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》《早发白帝城》等多首。
</p>
&copy;版权所有：Mr、Chen <br/>
&phone;029-8888888
</body>
</html>

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

图像标签

常见的图片格式： .png .jpg .jpeg .bmp .gif …
png 会有浏览器兼容问题，一般使用 .jpg .gif多一点；

<!--
src： 资源图片 ： 图片的路径
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 图片的宽
height：图片的高
-->
<img src="" alt="" title="" width="" height="">

超链接

表示从一个地方（网页）跳转到另外一个地方（网页）；

基本使用
<!--
href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
         _self : 在自己的窗口打开
         _blank： 在新窗口中打开
-->
<!--例如;在/statics/images路径下有一张1.png的图片，点击此图即可转到百度的网页-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/1.png">
</a>
锚链接

用于页面间指定位置跳转 ： 快速定位目录；
可以在同一页页面中跳转，也可以在不同页面中跳转 。

  • 锚点
<!--标记A-->
<a name="markerA">A</a>
<!--标记B-->
<a name="markerB">B</a>
<!--标记C-->
<a name="markerC">C</a>
  • 跳转至锚点
<!--在需要跳转的地方放标记A点击A即可跳转-->
<a href="#markerA">A</a> <br>
<!--点B即可跳转至百度网页-->
<a href="https://www.baidu.com">B</a> <br>
<!--也可跳转至自己的文件中特定位置：点击C即可跳转至Test1.html文件中的<a name="haha">此位置</a>-->
<a href="Test1.html#haha">C</a> <br>
功能性标签
  1. 邮件标签
    点击标签即可跳转至发邮件界面
<a href="mailto:123456789@qq.com">联系我们</a>
  1. 借助第三方平台
<!--例如QQ推广:https://shang.qq.com/v3/widget.html-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">点击这里给我发送消息</a>

块元素、行内元素

块元素

  • 无论内容多少，都是独占一行的
<p></p>
<h1></h1>

行内元素

  • 只根据内容的长度来扩展。 （a，strong，em….）
<a href="">a链接</a>
<strong>字体为粗体</strong>
<em>字体为斜体</em>

//下篇再见…谢谢

Tigirs
关注
专栏目录
html怎样去除超链接的样式_HTML 概述与 CSS 总结
weixin_39845220的博客
11-14 811
作者：好好先生来源：SegmentFault 思否社区一、HTML概述0、HTML+CSSHTML：超文本标记语言，其实就是用来开发网页的一门语言CSS：层叠样式表，可以用于渲染网页、美化网页做网页建房子HTML标签搭建网页的结构砖块：搭建房子的结构CSS样式：对网页进行美化石灰、油漆：对房子进行美化1、HTML介绍(了解)HTML：超文本...
网页概述及HTML结构、标签分类
m0_59897687的博客
07-23 1249
网页概述 网页概念：网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。 网页组成元素：网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。 静态网页与动态网页 静态网页：用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。 动态网页：显示的内容则会随着用户操作和时间的不同而变化。动态网页可以...
HTML+CSS基础知识简单版
TonyOliver的博客
11-07 998
HTML+CSS基础知识简单版 一、HTML概述 HTML：超文本标记语言，其实就是用来开发网页的一门语言； CSS：层叠样式表，可以用于渲染网页、美化网页、做网页。 1. HTML介绍 HTML：超文本标记语言 超文本：超过文本、超级文本； HTML不仅可以包含文本，还可以包含图片、音频、视频等各种格式的文件； 标记：标签、元素，指的是用尖括号括起来的一组内容，例如：<div>,<img>,<h1>,</h1>,</div>等。 其实就是用
HTML5 中的块级链接
weixin_34128501的博客
02-26 299
　　英文叫做 “Block-level” links，我以为只有我厂那些鸟毛不知道，没想到不知道的还挺多， 　　需要普及一下。 　　最近看了 kejun 的 PPT 　　前端开发理论热点面对面：从怎么看，到怎么做?，p21 引用了 　　10 HTML Tag Crimes You Really Shouldn’t Commit 　　中的一条： 　　很遗憾，Web 标准中处处充满了打...
body超链接标签部分(5)
c17854254215的博客
07-30 647
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;了不起的盖茨比&lt;/title&gt; &lt;/head&gt; &lt;
转义字符 行内元素和块级元素 web浏览器 超链接标签
goodcaoyu的博客
12-06 451
一、转义字符 由<> 包裹的文本 会当做标签去解析   空格 &emsp； ？ &lt 、gt < > 二、行内元素和块级元素 1.块级标签 默认情况下，每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性 p h1~6 hr div 2.行内标签 不会换行可以和其他的标签或文本在一行内显示 b i s...
为块级元素添加链接
weixin_30826761的博客
08-13 410
HTML5允许网页设计人员在包含子元素的块级元素添加<a>元素。浙江使整块变成一个链接。 <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta nam...
html中的超链接
qq_45587146的博客
06-13 1219
超链接使用<a></a>标签来定义，此标签是行内元素，但它可以嵌套除它自身之外的任意元素（是个特殊的行内标签） 作用：它可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置 属性： href：指定跳转的目标路径 格式为href=“目标路径” ，它的值既可以是外部网站的地址，也可以是一个内部网页的地址 （1）href=“#”，点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置，在开发中可以用#作为超链接的路径的占位符使用（回到顶...
行内块级元素.txt
02-06
### 行内与块级元素概述 在HTML中，元素主要分为两大类：块级元素和行内元素。这两种类型的元素具有不同的显示特性和布局方式，掌握它们的区别对于编写高效且美观的网页至关重要。 #### 块级元素 块级元素（Block...
HTML基础知识与标签概述
HTML文档包含了一系列元素（elements），这些元素通过标签（tags）来标记。在Web浏览器中，这些标记可以被解释和展示为页面内容。HTML是构成万维网的基础，也是网页设计和开发的重要基础。 ## 1.1 HTML的定义 HTML...
html标签和css参数
04-20
这些标签都是块元素，意味着它们会各自占据一行。 - `hgroup` 标签用于为一组相关的标题进行分组，例如可以将 `<h1>` 和 `<h2>` 放在同一组内。 - `em` 和 `strong` 标签分别用于表示语音语调的加重和强调重要的内容...
HTML常用标签之超链接标签
anig2014的专栏
03-06 1390
前面学习过了格式标签和文本标签, 本章开始学习超链接标签 三. 超链接标签  1. 分类: 超链接标签分为相对URL和绝对URL  2. 作用:  相对URL: 指向站点内的某个文件（例如: 跳转到xxx.html） 绝对URL: 指向另一个站点 (例如: 跳转到http://www.baidu.com)   3. 属性作用:    4. 代码示例:
HTML05超链接标签及其应用 06块元素和行内元素（DAY 48)
学恒的博客
04-27 1761
文章目录1:基本知识2:跳转的链接如图3:嵌套 在链接里面再加一个链接4：target表示期望在哪里打开5：锚链接：用于页面之间的跳转或者本页面跳转锚链接跳转其实和游戏里面的传送一样，一个目的地然后传送。邮件链接 1:基本知识 a + tab 在href的第一个双引号里面打上网页或者要跳转的链接的地址 后面的两个箭头中间写名称。 2:跳转的链接如图 3:嵌套 在链接里面再加一个链接 两个箭头中间加一个图片，点击图片也可以跳转链接。 4：target表示期望在哪里打开 5：锚链接：用于页
html如何把快变为行内元素,怎么把行元素变为块元素
weixin_31854817的博客
06-07 8844
1. HTML中 块级元素 如何转为 行内元素可以通过display: inline-block设置为行内元素。步骤如下：一、设计两个块级元素div，代码如下：此时的块级元素显示效果：二、设计两个块级元素div，添加属性 display:inline-block，代码如下：此时的元素显示效果：扩展资料1、display:inline比较经典的用法是用在 2、display:inline 的作...
HTML基础6-常用标签(超链接标签)
nb_zsy的博客
05-18 659
4.7超链接标签(重点) 1.链接的语法格式 <a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像</a> 单词anchor的缩写,意为:锚. 两个属性的作用如下: 属性 作用 href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接功能 target 用于指定链接页面的打开方式,其中_self为默认值,_blank在新窗口中打开方式. 2.链接分类: 1.外部链接:例如 <a href=“http://www.
CSS基础1(概述、选择器、超链接伪类)
Pluto.的博客
01-18 395
CSS语言基础 概述 CSS：层叠样式表(Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。简而言之就是对网页进行美化。 发展（几个重要版本）： CSS 在...
html（二）图像标签、链接标签、行内元素和块元素
qq_38904347的博客
08-20 702
继续学习中第二篇 图像标签 &amp;lt;img src=&quot;../&quot; alt=&quot;text&quot; title=&quot;text&quot; width=&quot;x&quot; height=&quot;y&quot; /&amp;gt; src：图片路径../代表跳出当前文件夹 alt：图片未加载时的图片代替文字 title：鼠标悬停在文字上时的文字提
html5块级超链接,前端面试 | 18个常见HTML问题与答案
weixin_39901358的博客
06-30 224
HTML 是互联网上应用开发最广泛的语言之一，它可以带我们深入Web开发的世界，提高技能。如果你想从事 WEB 开发(前端开发)相关的职业，HTML 的基础就必须熟练掌握，下面就以问答的形式开启我们的回顾之路，为即将踏入这个行业的新人们铺铺路。Q1：什么是 HTML？超文本标记语言(HyperText Markup Language，简称：HTML)是一种用于创建网页的标准标记语言。HTML 使...
html中的内联、块圾、行内块元素
CDZAllier的博客
09-10 226
是根据标签类别分类： 1. 内联无素（a,span等） 特点：不独占一行，设置宽高（内容多大，盒子多大） 设置display:inline 可以将块状元素转换为内联元素 例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>浮动</...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值