【HTML入门】第二课 - head标签下的常见表情们

目录

1 本节概要

2 head下的常见标签

2.1 网页编码设置

2.2 网页的标题

2.3 样式标签

3 head标签的内容不会显示到网页上

4 查看网页源代码


1 本节概要

上一节,我们说了HTML网页最基本的框架标签,说到标签分为head头部和body身体部分。这一小节呢,我们说一下head这个大标签下,一般都会包含哪些内容。

由于现在是入门可成,所以不会说太多复杂的,到后面慢慢的,我们都会说到。

2 head下的常见标签

2.1 网页编码设置

网页编码如果不正确,展示出来的就会是乱码,现在最常用最流行的,也就是utf-8编码。可以这样写:

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body></body>
</html>

你看,这个meta标签,里面有 charset 属性,对应着属性值是 utf-8。就表示咱们这个网页要设置为 utf-8 编码的。

2.2 网页的标题

你看,一般网页都是有标题的,表示这个网页的主旨内容。现在我们还没有设置,所以他用浏览器打开后,长这样:

所以,我们可以添加代码设置,代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title></head><body></body>
</html>

 再刷新一下网页,我们就可以看到最新设置的标题了。如下图:

2.3 样式标签

后面我们会学到给网页添加样式,也就是CSS的内容。这里我们先学一种标签 也就是  style 标签

这个style标签下面,会放CSS样式内容,可以控制网页中的一些元素,让他们更好看一些。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css"></style></head><body></body>
</html>

要记住,我们给 style 标签添加了 type 的属性,属性值是 text/css。这是固定写法,记下来就可以了

其实还可以引入外部的CSS样式表,用来影响当前网页的元素内容,这个我们后面说,先记住这个标签就可以了。

3 head标签的内容不会显示到网页上

我们虽然写了这么多标签,但都是在head标签里面的,这些head下面的内容,是不会显示在网页区域的。

比如我们在刚才的style标签下面,写几个文字,包括刚才加的 title 标签,都不会显示出来。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><style type="text/css">是否有内容呢?</style></head><body></body>
</html>

然后看一下自己的网页,刷新一下网页看一下效果:

对吧,并没有内容。 

4 查看网页源代码

那么我么写了那么多代码,从浏览器可以看到吗?是可以看到的,但是浏览器里只能看,不能改,如果要改动代码,还是得回到我们的编辑器里。

在浏览器右键,然后有“查看网页源代码”的按钮,点击这个按钮,就会弹出一个新的网页标签,就可以看到了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/370088.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

架构师学习理解和总结

1.架构设计理念 2.架构方法论 2.1需求分析 2.1.1常见需求层次 2.1.2 常见需求结果 2.1.3 需求与架构关系 2.2 领域分析 2.3 关键需求 2.4 概念架构设计 2.5 细化架构设计 2.6 架构设计验证 3.架构设计工具 3.1 DDD领域建模 3.2 41视图分析法 3.3 UML设计工具 4.架构师知…

全能PDF工具集 -- PDF Shaper Professional v14.3 特别版

软件简介 PDF Shaper是一款功能强大的PDF工具集&#xff0c;它提供了一系列用于处理PDF文档的工具。这款软件使用户能够轻松地转换、分割、合并、提取页面以及旋转和加密PDF文件。PDF Shaper的界面简洁直观&#xff0c;使得即使是新手用户也能快速上手。它支持广泛的功能&…

Linux系统(CentOS)安装Mysql5.7.x

安装准备&#xff1a; Linux系统(CentOS)添加防火墙、iptables的安装和配置 请访问地址&#xff1a;https://blog.csdn.net/esqabc/article/details/140209894 1&#xff0c;下载mysql安装文件&#xff08;mysql-5.7.44为例&#xff09; 选择Linux通用版本64位&#xff08;L…

hdu物联网硬件实验1 小灯闪烁

物联网硬件基础实验报告 学院 班级 学号 姓名 日期 成绩 实验题目 配置环境小灯 实验目的 配置环境以及小灯闪烁 硬件原理 无 关键代码及注释 /* Blink The basic Energia example. Turns on an LED on for one second, then off for one sec…

网络安全领域国标分类汇总大全V1.0版:共计425份标准文档,全部可免费下载

《网络安全法》、《数据安全法》、《个人信息保护法》落地实施需要大量国家标准的支撑&#xff0c;博主耗时三周时间&#xff0c;吐血整理了从1999年至今相关的所有涉及安全的国家标准&#xff0c;梳理出《网络安全领域国标分类汇总大全V1.0版》&#xff0c;共计 425 项现行标准…

Cartographer前后端梳理

0. 简介 最近在研究整个SLAM框架的改进处&#xff0c;想着能不能从Cartographer中找到一些亮点可以用于参考。所以这一篇博客希望能够梳理好Cartographer前后端优化&#xff0c;并从中得到一些启发。carto整体是graph-based框架&#xff0c;前端是scan-map匹配&#xff0c;后端…

【笔记】记一次在linux上通过在线安装mysql报错 CentOS 7 的官方镜像已经不再可用的解决方法+mysql配置

报错&#xff08;恨恨恨恨恨恨恨&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff09;&#xff1a; [rootlocalhost ~]# sudo yum install mysql-server 已加载插件&#xff1a;fastestmirror, langpacks Determining fastest mirrors Could not retrie…

JMeter--定时执行的方法

原文网址&#xff1a;JMeter--定时执行的方法_IT利刃出鞘的博客-CSDN博客 简介 本文介绍JMeter如何使用定时器定时执行测试任务。 Java技术星球&#xff1a;way2j.com 方法 第一步&#xff1a;新建定时器 右键测试任务> Add > Timer> Constant Timer 如下图所示…

NTP协议格式解析

1. NTP时间戳格式 SNTP使用在RFC 1305 及其以前的版本所描述标准NTP时间戳的格式。与因特网标准标准一致&#xff0c; NTP 数据被指定为整数或定点小数&#xff0c;位以big-endian风格从左边0位或者高位计数。除非不这样指定&#xff0c;全部数量都将设成unsigned的类型&#…

加盖骑缝章软件、可以给PDF软件加盖自己的骑缝章

加盖骑缝章的软件多种多样&#xff0c;尤其是针对PDF文件&#xff0c;有多种软件可以实现给PDF文件加盖自己的骑缝章。以下是一些常用的软件及其特点&#xff1a; 1. Adobe Acrobat Pro DC 特点&#xff1a; 多功能PDF编辑&#xff1a;Adobe Acrobat Pro DC是一款功能强大的…

【Kubernetes】Pod 资源调度之亲和性调度

Pod 资源调度之亲和性调度 1.Node 亲和性调度1.1 Node 硬亲和性1.2 Node 软亲和性 2.Pod 亲和性调度2.1 Pod 硬亲和2.2 Pod 软亲和2.3 Pod 反亲和 Kubernetes 的 默认调度器 以 预选、优选、选定机制 完成将每个新的 Pod 资源绑定至为其选出的目标节点上&#xff0c;不过&#…

记录第一次写脚本

使用csh语言&#xff0c;Linux系统操作的 写和执行csh&#xff08;C Shell&#xff09;脚本不需要额外的软件&#xff0c;只需要一个支持csh的终端环境。 1.检查是否安装了C Shell 在终端terminal运行以下命令 which csh 如果返回路径&#xff0c;比如/bin/csh&#xff0c…

HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)

html 中的表格 <table> 由行 <tr> 组成&#xff0c;每行由单元格 <td> 组成。 所以表格是由行组成&#xff08;行由列组成&#xff09;&#xff0c;而不是由行和列组成。 table 标签 display: table &#xff0c;属于块级元素。 table 的属性 border&#…

如何用Python向PPT中批量插入图片

办公自动化办公中&#xff0c;Python最大的优势是可以批量操作&#xff0c;省去了用户粘贴、复制、插入等繁琐的操作。经常做PPT的朋友都知道&#xff0c;把图片插入到PPT当中的固定位置是一个非常繁琐的操作&#xff0c;往往调整图片时耗费大量的时间和精力。如何能省时省力插…

视频编辑和视频剪辑有什么区别 视频编辑怎么旋转方向 会声会影视频制作教程下载 视频剪辑软件免费下载中文版 视频剪辑用哪个软件

如果你还分不清视频编辑与视频剪辑&#xff0c;请务必仔细阅读本文&#xff0c;了解二者之间的不同。本文还将重点介绍&#xff0c;旋转视频方向的三种常用方法&#xff0c;手把手地教你如何旋转视频方向。有关视频编辑和视频剪辑有什么区别&#xff0c;视频编辑怎么旋转方向的…

CurrentHashMap巧妙利用位运算获取数组指定下标元素

先来了解一下数组对象在堆中的存储形式【数组长度&#xff0c;数组元素类型信息等】 【存放元素对象的空间】 Ma 基础信息实例数据内存填充Mark Word,ClassPointer,数组长度第一个元素第二个元素固定的填充内容 所以我们想要获取某个下标的元素首先要获取这个元素的起始位置…

CSS实现图片裁剪居中(只截取剪裁图片中间部分,图片不变形)

1.第一种方式&#xff1a;&#xff08;直接给图片设置&#xff1a;object-fit:cover;&#xff09; .imgbox{width: 100%;height:200px;overflow: hidden;position: relative;img{width: 100%;height: 100%; //图片要设置高度display: block;position: absolute;left: 0;right…

QT TCP网络通信编程

学习目标&#xff1a; TCP网络通信编程 前置环境 运行环境:qt creator 4.12 学习内容 一、TCP 协议基础知识: TCP 是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP 拥塞控制算法包括慢启动、拥塞避免、快速重传和快速恢复。TCP 通信需要建立连接,Qt 提供 QTcp…

云原生之容器编排实践-OpenEuler23.09在线安装Kubernetes与KubeSphere

背景 前几篇文章中介绍了如何将 ruoyi-cloud 项目部署到 Kubernetes 集群中&#xff0c;包括网关服务、认证服务和系统服务并且对全部服务采用 YAML 文件的方式来进行部署&#xff0c;这虽然有助于理解 K8S 组织管理资源的风格与底层机制&#xff0c;但是对于团队中不太熟悉命…

Lunaproxy与711Proxy的对比与优劣分析

今天我们来深入对比两款在市场上备受关注的代理IP服务&#xff1a;Lunaproxy和711Proxy。接下来&#xff0c;我们将从多个角度对这两款服务进行详细分析&#xff0c;帮助大家做出明智的选择。 优势分析 711Proxy的优势 1. 性价比高&#xff1a;711Proxy提供多种灵活的套餐选…