HTML标签（上）

最新推荐文章于 2024-09-13 17:21:46 发布

图灵奖未来得主

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量1.6k

点赞数 5

分类专栏： HTML5+CSS3 文章标签： html css html5 js

本文链接：https://blog.csdn.net/m0_46416126/article/details/116395855

版权

HTML5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基础知识，包括语法规范，如标签的使用和结构；常用的HTML标签，如标题、段落、图像、超链接等；以及开发工具的推荐，如VSCode和相关插件。还提供了图像标签的属性和路径说明，以及超链接的多种类型。此外，通过实例展示了HTML在创建网页内容和布局中的应用。

摘要由CSDN通过智能技术生成

HTML标签（上）

写在前面

写在前面

根据b站大学黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程学习html5+css3学习的过程记录~
今天5.4，继续奋斗，永远为热爱而燃烧！
（tips:一开始仍然用记事本写，格式里面可以改大小和字体

HTML语法规范

1.所有标签必须包含在尖括号里 $< h t m l >$
2.几乎所有标签成对出现–开始标签&结束标签，唯一的不同是结束标签前面有斜杠/: $< h t m l > < / h t m l >$
3.有特殊的单标签，非常少，eg: $$
4.标签关系有包含关系和并列关系

conclusion:
<html> 
      <head>
	      <title></title>
	  </head>
      <body></body>
</html>

<br />

HTML基本结构标签

结构标签=骨架标签
HTML页面=HTML文档
$< h t m l > < / h t m l >$ ：HTML标签，根标签
$< h e a d > < / h e a d >$ ：文档头部，head标签中必须设置title
$< t i t l e > < / t i t l e >$ ：文档标题
$ $ ：文档主体

<html> 
      <head>
	      <title>落笔应风雨</title>
      </head>
      <body>
	      小舟从此逝，江海寄余生。
      </body>
</html>

开发工具

有很多~这里使用VSCode
记得安装这个插件

<!DOCTYPE html><!--文档类型声明，告诉浏览器使用HTML5显示网页-->
<!--写在最前面，它不是HTML标签，只是一个文档类型声明标签-->
<html lang="zh-CN"><!--语言种类-->
<!--有en & zh-CN ....分别为英文和中文-->
<head>
    <meta charset="UTF-8">
    <!--字符集，在head标签内，可以通过meta标签的charset属性规定html文档使用哪种字符编码-->
    <!--UTF-8是万国码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春水积木</title>
</head>
<body>
    欲把春水留在你的眼角，惊破了华韶,这一花一草是你眉心撩撩过的信条
</body>
</html>

HTML常用标签（重点）

1.语义标签
2.标题标签 $< h 1 > < / h 1 > - - > < h 6 > < / h 6 >$

	<h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

3.段落和换行标签 (important)
段落： $ $ paragraph
强制换行 $ o r $ break

<p>五四青年节源于中国1919年反帝爱国的“五四运动”，五四爱国运动是一次彻底的反对帝国主义和封建主义的爱国运动，也是中国新民主主义革命的开始。<br />1939年，陕甘宁边区西北青年救国联合会规定5月4日为中国青年节。</p>
<p>青年节期间，中国各地都要举行丰富多彩的纪念活动，青年们还要集中进行各种社会志愿和社会实践活动，还有许多地方在青年节期间举行成人仪式。</p>
<!--段落和段落之间空一行，换行不会空行-->

4.文本格式化标签
前面是推荐使用的，语义更强烈

语义	标签
加粗	$< s t r o n g > < / s t r o n g > o r < b > < / b >$
倾斜	$< e m > < / e m > o r < i > < / i >$
删除线	$< d e l > < / d e l > o r < s > < / s >$
下划线	$< i n s > < / i n s > o r < u > < / u >$

	我是一个<strong>加粗</strong>的词语<br /> 我是一个
    <b>加粗</b>的词语<br /> 我是一个
    <em>倾斜</em>的词语<br /> 我是一个
    <i>倾斜</i>的词语<br /> 我是一个
    <del>有删除线</del>的词语<br /> 我是一个
    <s>有删除线</s>的词语<br /> 我是一个
    <ins>有下划线</ins>的词语<br /> 我是一个
    <u>有下划线</u>的词语<br />

5. $< d i v > < s p a n >$ 标签
二者没有语义，是普通盒子用来装内容，用来布局网页。
div->division 用来布局，但是一行只能放一个div，是一个大盒子，是行
span->跨度、跨距，是小盒子，是列

	<div>一行只能放一个</div>123123
    <div>这里在下一行了，并且没有空一行，和段落不同</div>123
    <span>这相当于列</span>
    <span>你看没有换行</span><br />

6.图像标签和路径 (important)
图像标签：img，是单标签
$$
scr是img的必须属性–属于这个图像标签的特性，用于指定图像文件的路径和文件名
必须把图片文件和网页文件放在一起~

	<h4>图像标签的使用：</h4>
    <img src="桥本环奈.jpg" />
    <h4>alt:替换文本，图像显示不出来的时候用文字替换：</h4>
    <img src="我老婆.jpg" alt="桥本环奈是我老婆" />
    <h4>title:提示文本，鼠标放到图像上，提示的文字:</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" />
    <!--这是必须要写的-->>
    <h4>width:给图像设定宽度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" width="100" />
    <!--单位是像素-->
    <h4>height:给图像设定高度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" width="200" height="100" />
    <!--单位是像素-->
    <h4>height:给图像设定高度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" height="100" />
    <!--宽度高度修改一个就行-->
    <h4>border:给图像设定边框：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" height="100" border="5" />
    <!--单位是像素-->
    <!--属性名不分前后，但是要有空格，键值对形式-->

路径：
(1)目录文件夹&根目录
目录文件夹：普通文件夹，存放了我们做页面需要的相关素材，比如html文件、图片
根目录：打开目录文件夹的第一层就是根目录
(2)相对路径

	<H4>相对路径</H4>
    <!--同一级路径：-->
    <img src="桥本环奈.jpg" />
    <!--下一级路径：-->
    <img src="images/桥本环奈.jpg" />
    <!--上一级路径：-->
    <img src="../桥本环奈.jpg" />

(3)绝对路径，电脑里的具体位置，或者是网上的图片地址

<h4>绝对路径</h4>
    <img src="C:\Users\DELL\Desktop\黑马程序员HTML5+CSS3\HTML第一天\案例\桥本环奈.jpg" /><br />
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F26%2F20190126180525_tgwmv.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622723830&t=c3afac29ff0c64bb195680e0cbf9f05e"
    />

7.超链接标签(important)
$< a >$

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址（必须属性）
target	用于指定链接页面的打开方式，其中_self为默认值，当前窗口打开，_blank为在新窗口中打开

链接分类：
–外部链接

<a href="http://www.qq.com" target="_blank">腾讯</a>

–内部链接
直接链接内部页面名称即可

	<h4>2.内部链接</h4>
    <a href="03-vscode创建页面.html" target="_blank">crh的第一个页面</a>
    <!--这是同一级文件，所以直接写名字就行啦-->

–空链接
没有确定目标时使用

    <h4>3.空链接</h4>
    <a href="#" target="_blank">空链接</a>

–下载链接
href里面的地址时一个文件或者压缩包，可以下载

	<h4>4.下载链接，.exe或者.zip等压缩包形式</h4>
    <a href="桥本环奈.zip">下载链接</a>
    <!--这是同一级文件，所以直接写名字就行啦-->

–网页元素链接
文本图像表格音频视频都可以添加超链接

	<h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com" target="_blank"><img src="桥本环奈.jpg"></a>

–锚点链接
点击链接可以快速定位网页中某个位置
·连接文本：herf="#名字"，这是一个特殊的id
·找到目标位置标签，里面添加一个id属性=名字

 <h4>6.锚点标签</h4>
    <a href="#锚点链接">
        <h3>标题标签</h3>
    </a>
    <h4>锚点标签回到顶部</h4>
    <a href="#top">回到顶部</a>

HTML注释和特殊字符

1.注释
ctrl+/添加取消注释
2.特殊字符

主要记住 &nbsp &lt &gt
总结~

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="锚点链接">标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
    <p>五四青年节源于中国1919年反帝爱国的“五四运动”，五四爱国运动是一次彻底的反对帝国主义和封建主义的爱国运动，也是中国新民主主义革命的开始。<br />1939年，陕甘宁边区西北青年救国联合会规定5月4日为中国青年节。</p>
    <p>青年节期间，中国各地都要举行丰富多彩的纪念活动，青年们还要集中进行各种社会志愿和社会实践活动，还有许多地方在青年节期间举行成人仪式。</p>
    <!--段落和段落之间空一行，换行不会空行-->
    我是一个<strong>加粗</strong>的词语<br /> 我是一个
    <b>加粗</b>的词语<br /> 我是一个
    <em>倾斜</em>的词语<br /> 我是一个
    <i>倾斜</i>的词语<br /> 我是一个
    <del>有删除线</del>的词语<br /> 我是一个
    <s>有删除线</s>的词语<br /> 我是一个
    <ins>有下划线</ins>的词语<br /> 我是一个
    <u>有下划线</u>的词语<br />
    <div>一行只能放一个</div>123123
    <div>这里在下一行了，并且没有空一行，和段落不同</div>123
    <span>这相当于列</span>
    <span>你看没有换行</span><br />
    <br />
    <h4>图像标签的使用：</h4>
    <img src="桥本环奈.jpg" />
    <h4>alt:替换文本，图像显示不出来的时候用文字替换：</h4>
    <img src="我老婆.jpg" alt="桥本环奈是我老婆" />
    <h4>title:提示文本，鼠标放到图像上，提示的文字:</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" />
    <!--这是必须要写的-->>
    <h4>width:给图像设定宽度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" width="100" />
    <!--单位是像素-->
    <h4>height:给图像设定高度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" width="200" height="100" />
    <!--单位是像素-->
    <h4>height:给图像设定高度：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" height="100" />
    <!--宽度高度修改一个就行-->
    <h4>border:给图像设定边框：</h4>
    <img src="桥本环奈.jpg" alt="桥本环奈是我老婆" title="桥本环奈是我老婆" height="100" border="5" />
    <!--单位是像素-->
    <!--属性名不分前后，但是要有空格，键值对形式-->
    <H4>相对路径</H4>
    <!--同一级路径：-->
    <img src="桥本环奈.jpg" />
    <!--下一级路径：-->
    <img src="images/桥本环奈.jpg" />
    <!--上一级路径：-->
    <img src="../桥本环奈.jpg" />
    <h4>绝对路径</h4>
    <img src="C:\Users\DELL\Desktop\黑马程序员HTML5+CSS3\HTML第一天\案例\桥本环奈.jpg" /><br />
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F26%2F20190126180525_tgwmv.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622723830&t=c3afac29ff0c64bb195680e0cbf9f05e"
    />
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <h4>2.内部链接</h4>
    <a href="03-vscode创建页面.html" target="_blank">crh的第一个页面</a>
    <!--这是同一级文件，所以直接写名字就行啦-->
    <h4>3.空链接</h4>
    <a href="#" target="_blank">空链接</a>
    <h4>4.下载链接，.exe或者.zip等压缩包形式</h4>
    <a href="桥本环奈.zip">下载链接</a>
    <!--这是同一级文件，所以直接写名字就行啦-->
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com" target="_blank"><img src="桥本环奈.jpg"></a>
    <h4>6.锚点标签</h4>
    <a href="#锚点链接">
        <h3>标题标签</h3>
    </a>
    <h4>锚点标签回到顶部</h4>
    <a href="#top">回到顶部</a>
</body>

</html>

综合案例-剑网三七夕贺曲

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>良辰佳景共渡江湖</title>
</head>

<body>
    <h2>剑网三七夕贺曲</h2>
    <a href="#良辰佳景">
        <h3>1.良辰佳景</h3>
    </a>
    <a href="#共渡江湖">
        <h3>2.共渡江湖</h3>
    </a>
    <h3>剑网三</h3>
    <img src="images/剑网三.png" alt="剑网三" title="剑网三" />
    <p>《剑侠情缘网络版叁》（简称《剑网3》）是由是由金山软件公司西山居工作室开发的一款3D武侠MMORPG（大型多人在线角色扮演）电脑客户端国产游戏，于2009年8月28日正式开启公测。</p>
    <p>《剑网3》凭借地形植被渲染技术、场景光影特效和SpeedTree等引擎特效来展现中国传统武侠世界，将诗词、歌舞、丝绸、古琴、饮酒文化、茶艺、音乐等多种具有中国传统文化特色的元素融入到游戏中，展现给玩家一个气势恢弘、壮丽华美的大唐世界。同时，《剑网3》通过物理引擎打造的ACT新轻功玩法，为玩家带来新的游戏体验。</p>
    <a href="https://baike.baidu.com/item/%E5%89%91%E4%BE%A0%E6%83%85%E7%BC%98%E7%BD%91%E7%BB%9C%E7%89%88%E5%8F%81?fromtitle=%E5%89%91%E7%BD%91%E4%B8%89&fromid=23562159" target="_blank">查看更多</a>
    <br/><br/>
    <a href="良辰佳景.html" target="_blank">
        <h3 id="良辰佳景">良辰佳景</h3>
    </a>
    <em>点击图片试听<br/></em>
    <a href="https://y.qq.com/portal/song/003X5abf35GLbk.html" target="_blank"><img src="images/良辰佳景.jpg" alt="良辰佳景" title="点击图片试听良辰佳景" /></a>
    <p>
        作词 : 黄然<br/> 作曲 : 伍昊予<br/> 原曲:《胭脂香
        <br/> 策划:青卿
        <br/> 作词:魅灵
        <br/> 后期:丝竹
        <br/> 海报/题字:斩嘲风
        <br/> Pv:栗原
        <br/>
        <div>
            <p>
                <strong>【原翻staff】:</strong> <br/>五毒—青卿&nbsp&nbsp唐门—流浪的蛙蛙<br/> 万花—莹酱&nbsp&nbsp纯阳—宝玉<br/> 明教—Momo半夏&nbsp&nbsp丐帮—5ive_years<br/> 七秀—千舞樱落&nbsp&nbsp少林—布丁<br/> 长歌—宝物&nbsp&nbsp苍云—莫辞<br/> 藏剑—池年&nbsp&nbsp天策—五音Jw <br/></p>
            <p>
                <em>【cv】:</em> <br/>七秀—朔小兔 少林—郭病号 <br/>五毒—风清云 唐门—淡狩觞 <br/>万花—云烟若纱 纯阳—各种布丁<br/> 藏剑—白鸦此去 天策—雨肖<br/> 明教—浮梦若薇 丐帮——北辰<br/> 长歌—萋萋女王 苍云—秦且歌 </p>
        </div>
        <p>
            【万花】半乐城 <br/>蕙长坠雪下案头 花浪动新瓯 <br/>袖藏心意一二字 熏风添浓稠<br/> 【纯阳】阿三 <br/>放剑拾笔应卷首 情深亦如旧 <br/>白鹤成双穿云岫 紫摆牵清袖 <br/>【藏剑】喑言<br/> 日落西山折垂柳 摇桨泛小舟 <br/>春送一池花如雨 俯身掬一抔 <br/>【天策】kaya <br/>征雁归来矫羽收 不作别离久 <br/>刀影星芒埋汀洲 同看烟波皱 <br/>【七秀】子顾梦清 <br/>青灯古阶卷幕透 <br/>三千红尘耳边叩<br/>            【少林】十二<br/> 霓霞瑞色叠影厚 不辨春与秋 <br/>【少林+七秀】<br/> 难逢眼前知心人 难守年年岁悠悠 <br/>当此良辰共佳景 须臾亦长久<br/>
            <strong><em> 【cv万花】：不貳月 我生于万花，长于万花，见过晴昼花浪似海，却从未见过雪。你什么时候能带我去看看坐忘峰的飞雪呀？<br/>
            【cv纯阳】：叶尘 但凭你意。 <br/>【cv天策】：kaya 兵戈铁马非我所愿，我始终希望有朝一日，天下大定，我可卸甲归田，时时陪你共游。<br/> 【cv藏剑】：半乐城 无妨。此刻，你我便是良辰美景，花好月圆。<br/></em></strong> 【五毒】席途
            <br/> 横笛吹鸟啭莺啼 叶落拨千机 <br/>赤足踏歌乘彩羽 月小枝头倚 <br/>【唐门】瓜皮<br/> 通窍奇门晓五行 也自得灵犀 <br/>竹间山泉映清光 折潋滟一缕 <br/>【丐帮】六鱼<br/> 抱坛豪饮吞日月 醉梦无朝夕
            <br/> 拍岸碧涛震八野 三生一壶里 【明教】鱼胆 <br/>大漠风沙狂烟起 莲灯逐潮汐<br/> 弦月半掩沉眼底 激千层涟漪 <br/>【长歌】十四 <br/>引杯下筷诗半句 另半慵眼待来续 <br/>【苍云】半半 <br/>疑入蓬岛华筵中 樽前闻仙曲 <br/>【苍云+长歌】<br/> 难逢眼前知心人 难守年年岁悠悠 <br/>当此良辰共佳景 须臾亦长久 <br/>【全体合】 <br/>或披甲驰骋千里 或出世不避风雨 <br/>或仗青锋拔云梯 或悬壶以济<br/> 难逢眼前知心人
            难守年年岁悠悠
            <br/> 当此良辰共佳景 须臾亦长久<br/>
            <strong><em>【cv少林】：叶尘贫僧愚钝，不解施主之意。 <br/>【cv七秀】：不貳月 你啊，总是避着我。那你告诉我，为何连耳根子都红了。<br/> 【cv五毒】：九白 中原人，本姑娘的呱太很喜欢你。 <br/>【cv唐门】：叶尘 那你呢？你喜欢我吗。
            <br/> 【cv丐帮】：kaya 行走江湖，有酒，有你，便已足够。<br/> 【cv明教】：半乐城 呵，在三生树下说过的话，可不能不算数哦。<br/> 【cv苍云】：韦唯诺诺 此身愿为你之盾，护你一世安好。<br/> 【cv长歌】：九白 那我便为你抚曲，如何。</em></strong> </p>


        <a href="共渡江湖.html" target="_blank">
            <h3 id="共渡江湖">共渡江湖</h3>
        </a>
        <em>点击图片试听<br/></em>
        <a href="http://5sing.kugou.com/fm/m/" target="_blank"> <img src="images/共渡江湖.jpg" alt="共渡江湖" title="点击图片试听共渡江湖" /></a>
        <p>
            <strong><em>《共渡江湖》是冬子演唱的歌曲，由皮哟皮哟皮作词，漫夜星作曲，收录于《共渡江湖》专辑中。</em></strong></p>
        <p>
            万花-许多葵： 桃源听风 拂散白发间飞雪<br/> 纯阳-Braska： 凭虚凌空 放剑取春枝华叶<br/> 万花-许多葵： 笺末顿笔 折袖缀新墨一点 <br/>万花/纯阳： 花落声 又惊起心事潋滟 <br/>天策-海疼： 策马匆匆 卸一身峥嵘掀雨幕一帘<br/> 藏剑-执素兮： 断桥迎远归故人 二三梅瓣绘伞面 <br/>天策-海疼： 双骑漫步 青山间 <br/>藏剑-执素兮： 身后九溪雾绵延 <br/>天策/藏剑：回首脉脉相对 陷于此深渊 <br/>少林-旧是旧人： 青灯之下尘埃片片<br/>            七秀-千月兔： 二十四桥衣袂正蹁跹 <br/>少林/七秀： 相隔天涯漫漫望长夜 仍可共婵娟 <br/>少林-旧是旧人： 阖目轻诵佛经一篇篇 <br/>七秀-千月兔： 一舞四方拜眼前 <br/>少林/七秀： 共渡阴晴圆缺 只待再见 <br/>唐门-蛙蛙： 乘风而来 树屋升萤光点点 <br/>五毒-兰芽： 笛声忽停 惊鸿掠影入双眼 <br/>唐门-蛙蛙： 清光相拥 蝴蝶扑翅落指尖<br/> 唐门/五毒： 隔万山 也难阻 归心似箭 <br/>明教-冥月： 驼铃轻响关外寒星冽 细沙吹满面
            <br/> 丐帮-阿睿： 竹排荡几层波澜 开坛遥对月下眠 <br/>明教-冥月： 灯火阑珊 相逢处<br/> 丐帮-阿睿： 一树桃花映连天<br/> 明教/丐帮： 携得酒意醺然 赴酣梦三千<br/> 长歌-IRiS七叶： 浅袖起落 春水按弦<br/> 苍云-冬子： 千钧玄甲 愿为遮风雪 <br/>长歌/苍云： 合听宫商飞扬曲悠悠 拨雁门狼烟 <br/>霸刀-漆柚： 推窗晴空万里雕盘旋<br/> 蓬莱-小千： 踏波收伞如谪仙<br/> 霸刀/蓬莱： 一袭暖裘覆于 彼此双肩 <br/>蓬莱-小千：
            坐观海浪涛涛 逍遥世间</p>
        <a href="#top">回到顶部</a>
</body>

</html>