极速掌握HTML（一）基础入门

最新推荐文章于 2024-05-30 07:59:17 发布

不被定义的巅峰

最新推荐文章于 2024-05-30 07:59:17 发布

阅读量219

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/sw__xin/article/details/127909076

版权

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、锚点链接: 可以快速定位到页面中的某个位置