html相关基础

最新推荐文章于 2024-08-14 10:15:39 发布

m0_74074214

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量306

点赞数 10

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_74074214/article/details/140474183

版权

1.HTML全称为超文本标记语言，HTML作用是用于设计网页的布局结构的。

2.我们利用软件vscode来编写HTML文件，文件名的后缀为.html。该软件性能优秀，支持大量插件。

3.HTML需要利用浏览器运行，我们使用谷歌浏览器。

4.HTML的基本结构：<!DOCTYPE>这个是HTML文件的声明，必须放在首行，可以利用！+回车代替。

<html></html>作为根元素，在整个文件中只能存在一个。在根元素中通常有两个子元素<head><body>

<head>标记：通常用于编写css文件和javascrip文件，一般在网页中不可见

<body>标记：通常用于书写网页的可见内容。

一些常见的标签：<p></p>段落标签，可以生成一段话，常见的使用方法：

<p>

yyy真的帅

</p>

标题标签<h1></h1>,可以生成一个大标题，还可以有更多的标题比如：<h2></h2><h3></h3>

h后面的数字越大，该标题的字号就会越小。

<div>标签，属于块级元素，一行中如果有多个块级元素就会自动换行。可以配合css来改变网页的样式。

html中，注释通常使用Ctrl+/来完成，例如结果<!-- --!>

有些特殊字符在html中无法被识别，我们会使用字符实体来对其进行替换，例如：

< 替换为 &lt；

> 替换为 &gt；

空格替换为 &nbsp；

& 替换为 &amp；

需要注意：在使用字符实体时，务必加上分号（；）

head头部

在head中，我们可以添加scrip，css，style等不同的元素，有改变网页内容样式的作用。

最先学习title标签，作用不大，仅仅可以改变网页的标题，初始值为：<title>Document</title>

其次是base标签，主要针对URL，虽然我还不清楚什么意思，但是一个HTML文件中只能出现一个base

meta元素，一样不太懂，它决定的是网页的元数据巴拉巴拉。。。。。。

style元素，可以通过css来完成内部样式表，改变布局样式，有用

link元素，用于引入文件外的外部样式表，有用

scrip文件，主要是JavaScript相关的知识，忘记了。。

nojavascrip，告诉你浏览器用不了javascrip

相当的搞笑 hahahahahahahahaha

HTML中的那些基础标签

第一个是标题标签，就是之前说到的<h1>到<h6>，最多只能有h6，数字越大，字体越小，每一个标题都属于一个块级元素，一行只有一个，相当易于理解。

第二个是段落标签，形如：<p> yyy好帅 </p>

这样就可以形成一个段落，也属于块级元素

第三个是换行标签，十分常用，亲测也十分好用，一般形如：<br>里面的/我感觉不用谢，要不然每次还得切换中英文，很恶心

第四个创建水平线，可以利用<hr>来完成，有点作用，可以在一张网页东西比较多的时候进行分界面的操作

第五个图像标签，开始上难度了，利用<img/>来搞，其中有一个属性src，需要填写相关于图片的路径，相对路径，绝对路径都可以，绝对路径比较简单，可以右键属性去找，相对路径利用./去翻阅文件夹，直到找到你需要的文件为止。还有其他的属性，比如width和height，分别控制这个图片的宽度和长度，一般单位都是像素（px），如果只改变其中某一项指标，这个图片会等比例缩放。

需要注意，这个是放在body里的,而且属于一个单标记

其中的alt是为了给图片一个文字索引，可以不加
相对路径写法：<img src="./img/fcz/1.jpg" alt="黑寡妇">

绝对路径写法：<img src="D:/front/img/fcz/2.jpg" alt="雷神">

如果不加换行符的话，图片是有可能连在同一排的，因为图片不是块级元素，属于行内元素

第六个超链接标签，就是一个可以让你跳转到其他网页链接的标签，在生活中总能遇到，标签写法形如：<a></a>,很明显这是一个双标记，里面的内容可以设置成文字，也可以设置成图片的格式，它的属性有：href：路径（必须写），title：鼠标悬停时所显示的内容（可不写），target：_blank，_self（第一个值说新生成一个网页，第二个说在当前页面直接跳转）

<a href="https://www.runoob.com">点我，跳转到菜鸟教程</a>

属于一个行内元素，分行需要<br>

<a href="https://www.jd.com" title="京东官网" target="_blank">点我，跳转到某东官网</a>

锚点链接，是一种比较高级的超链接，最常见的是逛淘宝有个回到顶部，这属于一种锚点链接，
<a href="#c14">点我跳转到章节14</a>

大体上还是像超链接一样是以a为标签的，其中，href属性的值必须以#开头，其中的值也变为了id值

<h1> 章节1</h1>
<p> 段落的内容</p>

<h1> 章节2</h1>
<p> 段落的内容</p>

<h1> 章节3</h1>
<p> 段落的内容</p>

<h1 id="c4"> 章节4</h1>
<p> 段落的内容</p>

<h1> 章节5</h1>
<p> 段落的内容</p>

<h1> 章节6</h1>
<p> 段落的内容</p>

<h1> 章节7</h1>
<p> 段落的内容</p>

<h1> 章节8</h1>
<p> 段落的内容</p>

<h1> 章节9</h1>
<p> 段落的内容</p>

<h1> 章节10</h1>
<p> 段落的内容</p>

<h1> 章节11</h1>
<p> 段落的内容</p>

<h1> 章节12</h1>
<p> 段落的内容</p>

<h1> 章节13</h1>
<p> 段落的内容</p>

<h1 id="c14"> 章节14</h1>
<p> 段落的内容</p>
这段中明显设置了一个id值，c14，让上面的命令成功识别
<h1> 章节15</h1>
<p> 段落的内容</p>

<h1> 章节16</h1>
<p> 段落的内容</p>