html笔记_html

乖女子@@@

已于 2023-02-06 10:11:37 修改

阅读量737

点赞数

分类专栏： html 文章标签： html 前端 css

于 2023-02-03 14:13:45 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/128847817

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是 HTML?

HTML是由一系列元素组成的超文本标记语言。

tips: html标签不区分大小写！

HTML元素(定义)

开始标签、结束标签与内容相结合，便是一个完整的元素。

<p>My cat is very grumpy</p>

以上就是一个简单的段落元素，包含
- 开始标签
- 结束标签
- 内容
元素也可以存在属性，属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。
```
<p class='textp'>My cat is very grumpy</p>
```
如上述例子中，class为属性名，textp为属性值 --> class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

骨架

为了保证页面在浏览器能够正常打开，需要一些特定的标签，将这些标签进行组件称之为骨架。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <!-- 期望用户看到的内容 -->
  </body>
</html>

<!DOCTYPE html> 它并不是 HTML标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。
- <!DOCTYPE html>表示该文档是使用html5进行编写的
html：根元素 — 该元素包含整个页面的内容。
head: 头部元素 — 该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等
body: body元素 — 该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容

HTML元素

在此不一一列举，仅标注一些经常使用或比较复杂的元素

a标签

HTML a元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。a 中的内容应该指明链接的意图。如果存在 href 属性，当 a 元素聚焦时按下回车键就会激活它。

语法

属性	值
href	URL—需要跳转或下载的url链接
target	规定在何处打开目标 URL。仅在 href 属性存在时使用。 1._blank：新窗口打开。 2._parent：在父窗口中打开链接。 3._self：`默认`，当前页面跳转。 4._top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
download	filename—指定下载链接
title	msg—链接描述(当鼠标指针悬停在链接上时，标题将作为提示信息出现)

使用1-超链接

通过将文本或其它内容包裹在 a 标签内，并给它一个 href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。

若是外部链接，直接将链接url作为href属性值即可
```
 <a href="https://www.baidu.com/" title="站外链接">跳转到百度</a>
```
结果 -> 跳转到百度

若是站内链接

同一目录下
— HTML
------ learna.html
------ learninput.html

 <a href="./learninput.html" title="站内链接">learnInput标签</a>
 <a href="learninput.html" title="站内链接">learnInput标签</a>

子目录下
— HTML
------ learna.html
------ learninput
--------- learninput.html

<a href="learninput/learninput.html" title="站内链接">learnInput标签</a>

上级目录下
— HTML
------ learna.html
— learninput.html

<a href="../learninput.html" title="站内链接">learnInput标签</a>

tips: 本质就是相对路径的问题

使用2-锚点定位

通过锚点定位可以将页面滚动到指定位置
语法

<a href="#three" class="tofixed">定位</a>
<h1 id="three">第三章</h1>

href属性值必须与对应元素的id属性值一致。
上述代码中：当点击a标签时，页面会滑动到 h1标签对应位置，与此同时页面的url会拼接上 a标签的href属性值 #three。

此时点击a元素会立即滚动到指定位置 -> 没有过渡效果( 比较突兀)，若是想平滑滚动可以使用css3的scroll-behavior属性

html, body{
  scroll-behavior: smooth;
}

此时再点击时页面滚动是平滑效果(类似添加了过渡动画)

tips: 此处为什么不使用过渡动画？
-> 因为添加过渡动画要有 明确的属性值变化，因为此处滚动不是定义的，所以无法使用过渡动画！

使用3-文件下载

若是a标签存在download属性值，则表示该元素的作用并不是导航而是下载，且在下载过程中会将download属性值作为预填充文件名。
在使用过程中需要注意以下几点：

若url为远程链接，此属性存在同源策略—>不同源的url不会下载而是直接跳转;
若是数据为blob或data数据，则不需遵守同源策略；
在默认情况下，download属性值作为预填充文件名，若是http响应头中的content-dispostion属性赋予了一个不同于此属性值的文件名，则http头属性值优先与此属性。

案例1
使用download属性进行下载没有下载而是进行跳转

使用4-阻止a标签的默认事件

在点击a标签时，默认会进行链接跳转、锚点定位或是文件下载，若是不想使用这些默认效果，需要自定阻止。

  <a href="">xxx</a>

若是href属性值为空值，默认为跳转到当前页面的顶部(即scrollTop值为0)，同时会刷新页面 -> 相当于跳转到一个新的页面只是页面地址与之前相同。

<a href="#" class="tofixed">定位</a>

若是href属性值为#，默认为跳转到当前页面的顶部(即scrollTop值为0)但是不会刷新页面 -> 相当于锚点定位到页面顶部。

方法1:在点击a标签的点击事件中 return false可阻止a标签的默认事件
```
  <a href="#three" onclick="return false">xxx</a>
```
方法2：a标签的href属性值为javascript:;可阻止a标签的默认事件
```
<a href="javascript:;">xxx</a>
```
方法3:a标签的href属性值为javascript:void(0);可阻止a标签的默认事件
```
<a href="javascript:void(0);">xxx</a>
```