java获取html标签中的内容_第3天:HTML 中的 head 标签

昨天同学反馈的问题主要集中在以下几个:

1 .内容比较少,很快就学完了。

目前内容确实比较简单,我在文末加入一些比较难的内容,有条件的同学可以提前学习。

2 .多讲一些原理性的内容。

为了照顾所有的同学,还是从基础开始,后续会适当的增加一些除课程大纲外的内容。


前面我们讲了 HTML 的基本结构,对于各个标签并没有深入讲解,今天我们学习 head 标签。先看一下 MDN 关于 head 标签的说明:

The Head is the part of an HTML document that contains metadata about that document, such as author, description, and links to CSS or JavaScript files that should be applied to the HTML.

也就是说 head 标签中的内容是为了描述网页的「额外」信息,主要给浏览器或者搜索引擎使用的。而具体展示给用户的信息是在 body 中定义的。其中比较重要的是元数据标签 meta,它通过类似于 key 和 value 的形式提供不同的内容。总的来说 head 中可以定义:

1.定义基本的元数据信息,提供关于文档的额外信息;

定义页面的编码方式<meta charset="UTF-8">viewport 为可视区域,它的宽度为设备的宽度<meta name="viewport" content="width=device-width, initial-scale=1.0">http-equiv 表示执行一个命令,下面设置 HTTP 的 content-type<meta http-equiv="content-type" content="text/html; charset=UTF-8">页面的描述信息,可供搜索引擎显示<meta name="description"content="前端小课">

2.定义 CSS 样式,可通过 style 标签或 link 的方式引入。在后续文章中我们会详细说明 CSS;

直接定义css样式<style>  .title {    font-size: 20px;    color: red;}style>使用外部定义的 css<link rel="stylesheet" href="./day3.css">

3.定义 JavaScript 内容,可通过 script 或 link 的方式引入,这里需要强调一点 head 中定义的 JavaScript 将会在页面加载前执行,会阻塞页面加载,所以往往会把 JavaScript 定义在 body 标签中;

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>HTML Headtitle>    <script>        let name = "前端小课";        console.log(name);script>    <script src="./day3.js">script>head><body>    <p class="title">欢迎来到前端小课,共同学习前端p>    <script>        console.log("body js");script>body>html>

通过 onload 方法可以监听页面加载完成,在这个时机可以对 DOM 进行操作:

    <script>       window.onload = function() {         console.log('window loaded');       }    script></head>

4.定义 title 标签,也就是文档的标题。

总结

今天介绍了 head 标签,学完本节内容,希望你能够掌握如何使用外部定义的 CSS 和 JavaScript,内部直接定义 CSS 和 JavaScript,对 head 标签中的内容能干什么事情有一个了解。更多 meta 标签内容,可以参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta 。

今天的内容比较简单,可以提前学习一下 CSS 布局相关的内容,这部分知识学习起来会难一些。

加餐内容:图解CSS - 搞懂基本布局 position 。

今天的打卡指令是下面任意一种方式:

1.你都见过哪些 HTML 标签,并说出它们的作用;

2. 什么是 position 布局;

3. Head 标签中还能干什么或者还有哪些有用的meta标签;

4.如果觉得题目太难,可以点击 在看 也算打卡,同时鼓励下作者892d961f1fbe97f821427ccd22f97607.png

推荐阅读:

第1天:开篇词,开发环境准备

第2天:HTML 结构

前端小课

01df41c3ff3ef3360e96b672227e5941.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值