HTML~~web三剑客之一
html首先不是一种编程语言,html是一种语言标签,可以理解为一种将文本以网页的形式来进行展示,HTML的全称为超文本标记,组织信息的方式,它通过超级链接的方法将文本中的文字、图表与其他媒介相关联。
百度百科在这里的解释:HTML_百度百科
HTML在web上最常见的用法
1、 标签
(1)html标签按语义--分为无语义标签和有语义标签
无语义标签:比如div和span这两个标签(但是这两个标签搭配css和js就可以实现语义化)
有语义标签:每个标签带有特定的功能和用途,基本上heml标签都是有语义的
(2)html标签按结构--分为单标签和双标签
单标签:在heml下单独出现,比如换行<br>标签
双标签:那就是成对出现,即开始标签和结束标签,中间的就是写的内容
2、heml的基本框架(html,head,title标签)
<html>
<head>
<title>ivy</title>
</head>
<body>
</body>
</html>
框架包括
1、<html>...</html>,html 标签是整个 html 文件的根标签(最顶层标签)
2、<head>...</head>,则是html的头了,那这个头怎么理解呢?
如下图所见,不难理解我们打开网页看到的网页名字,就是用<title>...</title>来写的
3、<body>...</body>就是我们写的主要内容
在这里可以引出来一个概念:父标签和子标签
就拿html的基本框架来进行解读吧
html标签就是head和body的父标签
而title标签激素head标签的子标签
3、HTML的注释方法
<!-- 这就是html的注释的用法 -->
注释:其中的内容不会进行编译
4、标题标签-h标签
<h1>十年生死两茫茫,不思量,自难忘。</h1>
<h2>千里孤坟,无处话凄凉。</h2>
<h3>纵使相逢应不识,尘满面,鬓如霜。</h3>
<h4>夜来幽梦忽还乡,小轩窗,正梳妆。</h4>
<h5>相顾无言,惟有泪千行。</h5>
<h6>料得年年肠断处,明月夜,短松冈。</h6>
h标签总共有6个,从小至大-->标题的字体和大小逐渐递减
来一张图片进行直观的看吧
5、段落标签-p标签和换行标签-br标签
1、p标签是表示这是一个段落,下面代码则上面不使用p标签,而下面使用p标签所展示的效果
p 标签自动根据浏览器宽度来决定排版.。html 内容首尾处的换行 , 空格均无效 .在 html 中文字之间输入的多个空格只相当于一个空格 . html 中直接输入换行不会真的换行2、br标签在这里仅仅起到换行的作用标准写法:<br/>
<head>
<title>ivy</title>
</head>
<body>
1.一往情深深几许?深山夕照深秋雨。——纳兰性德《蝶恋花·出塞》
2.半世浮萍随逝水,一宵冷雨葬名花。——纳兰性德《山花子·林下荒苔道韫家》
3.不及芙蓉,一片幽情冷处浓。——纳兰性德《采桑子·桃花羞作无情死》
4.只恐重逢,明明相视更无语。——纳兰性德《台城路·白狼河北秋偏早》
5.只向从前悔薄情,凭仗丹青重省识,盈盈,一片伤心画不成。——纳兰性德《南乡子·为亡妇题照》
<br>
<p>1.一往情深深几许?深山夕照深秋雨。——纳兰性德《蝶恋花·出塞》</p>
<p>2.半世浮萍随逝水,一宵冷雨葬名花。——纳兰性德《山花子·林下荒苔道韫家》</p>
<p>3.不及芙蓉,一片幽情冷处浓。——纳兰性德《采桑子·桃花羞作无情死》</p>
<p>4.只恐重逢,明明相视更无语。——纳兰性德《台城路·白狼河北秋偏早》</p>
<p>5.只向从前悔薄情,凭仗丹青重省识,盈盈,一片伤心画不成。——纳兰性德《南乡子·为亡妇题照》</p>
</body>
</html>
6、格式化标签
1、加粗 : strong 标签 和 b 标签2、倾斜 : em 标签 和 i 标签3、删除线: del 标签 和 s 标签4、下划线 : ins 标签 和 u 标签
<strong>人生若只如初见,何事秋风悲画扇。</strong><br>
<em>等闲变却故人心,却道故心人易变。</em><br>
<del>骊山语罢清宵半,泪雨霖铃终不怨。</del><br>
<ins>何如薄幸锦衣郎,比翼连枝当日愿。</ins><br>
7、图片链接-img标签
<img src = "" >src表示图片的路径,这里的路径可以是相对路径、绝对路径、网络路径图片可以进行调整大小,通过width、hight来进行图片的宽度高度进行调整图片最好调整width、hight 一个属性,这样处理的图片不会失真-px--屏幕分辨率img的其他属性1、alt: 替换文本 . 当文本不能正确显示的时候 , 会显示一个替换的文字 .2、title: 提示文本 . 鼠标放到图片上 , 就会有提示 .3、border: 边框 , 参数是宽度的像素 . 但是一般使用 CSS 来设定 .
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20191213%2Ffdd17e15f2e643628bb13cd1c464b61d.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671260292&t=34688a042e2778354a1709112b05472b" alt="">
8、超链接标签-a标签
超链接:通过一个链接就可以找到另外一个资源,链接的资源可以来自于外部的网站 a标签对应的属性
href: 表示点击后会跳转到哪个页面 .target: 打开方式 . 默认是 _self. 如果是 _blank 则用新的标签页打开这里可以使用img图片进行柔和使用,使得点击图片也可以进行打开链接的内容
<a href="https://www.taobao.com">淘宝
</a>
链接的几种形式:
1、外部链接: href 引用其他网站的地址
2、内部链接: 网站内部页面之间的链接. 写相对路径即可.
3、空链接: 使用 # 在 href 中占位.
4、下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
5、网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
6、锚点链接: 可以快速定位到页面中的某个位置