目录
- 什么是 HTML?
- HTML元素(定义)
- 骨架
- HTML元素
- a标签
- 语法
- 使用1-超链接
- 使用2-锚点定位
- 使用3-文件下载
- 使用4-阻止a标签的默认事件
- HTML5新增元素
- HTML5新增元素属性
什么是 HTML?
HTML是由一系列元素组成的超文本标记语言。
tips: html标签
不区分大小写！
HTML元素(定义)
开始标签、结束标签与内容相结合，便是一个完整的元素。
<p>My cat is very grumpy</p>
- 以上就是一个简单的段落元素，包含
- 开始标签
- 结束标签
- 内容
- 元素也可以存在属性，属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。
如上述例子中，class为属性名，textp为属性值 --> class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。<p class='textp'>My cat is very grumpy</p>
骨架
为了保证页面在浏览器能够正常打开，需要一些特定的标签，将这些标签进行组件称之为骨架。
<!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>
HTML5新增元素
HTML5新增元素属性
- a标签的download属性
