HTML/CSS/JS学习笔记 Day2(HTML)

跟着该视频学习,记录笔记:【黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358

Day2 内容梳理:

目录

HTML

2.0 网页开发的标签

2.1 基础标签的含义

文档类型声明标签

语种标签

字符集

2.2 语义标签

标题标签:

段落标签

换行标签

文本格式化标签

无语义标签

图像标签 & 路径

(1)src属性

(2)其他属性:alt/title/width/height/border

(3)图像标签注意要点:


HTML

2.0 网页开发的标签

在VS Code中新建文件并将后缀改为.html后,在一行打一个英文的感叹号再点击Tab,得到系统默认的网页骨架,如下:

接下来将逐行解释每个标签的作用。

2.1 基础标签的含义

文档类型声明标签<!DOCTYPE>

作用是告诉浏览器该使用哪种HTML版本来显示网页

比如:<!DOCTYPE html>指当前页面采取的是HTML5版本来显示网页

注意:

  • 必须写在整个页面的第一行。
  • <!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签

语种标签<html lang=” ”>

比如<html lang=”en”>,用途是将当前文档显示的语言定义为英语,

分两类:”en”代表英文网页,”zh-CN”代表中文网页。

不过无论写的是en还是zh-CN,我们都可以在html代码中写各种语言。lang这个属性的作用是帮助浏览器和搜索引擎更好地分辨网页语言,并让用户决定是否翻译网站语言,如下:

字符集<meta charset=” ”>

字符集(Character set)是多个字符的集合,便于计算机能够识别和存储各种文字。

在head标签内,可通过<meta charset=“”>来规定HTML文档应该采用哪种字符编码。

Charset常用的值由UTF-8、G8K、BIG5、GB2312。其中UTF-8也被称为“万国码”,基本包含了全世界所有国家需要用到的字符。

注意只能写成UTF-8,其他格式(比如utf8、UTF8)都可能引起乱码。

2.2 语义标签

语义标签分为:标题标签、段落标签、换行标签

不采用语义标签就会导致所有内容都是同样的格式,不利于阅读,如下图:

标题标签:<h1>到<h6>

HTML提供了6个等级的网页标题,从<h1>到<h6>,按照重要性递减。

它们都是双标签的,比如:

<h1>这里是一级标题</h1>

补充一下,修改后记得先保存,再右键单击,点击”open in default browser”即可看到效果:

左侧是没使用标题标签的情况,右侧是使用了之后:

 

          

<h1>到<h6>的标题字体会逐渐变小变细,区别可参考下图(内容截取自笔记最上方的视频):

其中h2标题的“文字加粗一行显”指的是只有被囊括在双标签内的文字才算是标题。比如:

<h2>这是一个标题</h2>123

这行代码只会显示“这是一个标题”,而不显示“123”。

段落标签<p></p>

双标签<p></p>用于定义段落,比如:

特点:文本在段落中会根据浏览器窗口的大小自动换行;段落和段落之间有明显空隙。

换行标签<br />

一般在HTML中,段落中的文字遇到浏览器窗口的边缘时才会自动换行,如果希望某段文本强制换行,则需要使用单标签<br/>。br是单词break(打断)的缩写。比如:

补充:可通过文本间隔来区分段落标签和换行标签。段落标签会使段落之间有较大缝隙,而换行标签则不会。

文本格式化标签

是文字以特殊效果呈现,有粗体、斜体、下划线等等。

语义

标签

更推荐的标签(因为语义更强烈)

加粗

<strong></strong>或者<b></b>

<strong>双标签

倾斜

<em></em>或者<i></i>

<em>双标签

删除线

<del></del>或者<s></s>

<del>双标签

下划线

<ins></ins>或者<u></u>

<ins>双标签

使用效果如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是正常文字。<br />这是<strong>加粗</strong>的文字。<br />这是<em>倾斜</em>的文字。<br />这是<del>带删除线</del>的文字。<br />这是<ins>带下划线</ins>的文字。<br />
</body>
</html>

无语义标签 <div>、<span>

<div>和<span>无语义,它们的作用像是盒子,用来装内容。

div是division的缩写,表示分割、分区。而span则是跨度、跨距。

特点:

  • <div>双标签用于布局,但是一对<div>会独占一整行,所以可以理解为大盒子。
  • <span>双标签也用于布局,而一对对<span>可以显示在同一行,可以理解为小盒子

举个例子:

图像标签 & 路径
(1)src属性

<img>是一个单标签,用于定义HTML页面中的图像。

使用格式:

<img src=”图像URL” />

其中src是<img>图像标签的特性,要填入的“图像URL”负责帮网页找到对应图像的文件路径和文件名。

比如我要下图文件夹中的HTML.png显示在网页中,在“图像URL”处就要写HTML.png。

代码和结果如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是一个图像<br /><img src="HTML.png" />
</body>
</html>

若图片展示不成功,很可能是该图片和该代码不在同一文件夹下。

(2)其他属性:alt/title/width/height/border

属性

属性值

说明

src

图片路径

必要属性

alt

文本

替换文本。是在图像显示不出来的时候用文字替换。

title

文本

提示文本

width

像素

设置图像的宽度

height

像素

设置图像的高度

border

像素

设置图像的边框粗细

alt,替换文本,例子:

(名为AAAA的图片不存在,因此会显示替换文字)

title,鼠标悬停在图片上时会显示的文字,例子:

width、height:单独使用时,是等比缩放图片的大小。若同时规定两者的数值,则是压扁或拉长图片。实际应用时往往只修改width或heigh。

border,规定边框的粗细,给图片加边框,例子:

图片多了一个15像素宽的黑色边框:

(3)图像标签注意要点:
  • 图像标签可以有多个属性,但都必须写在src=”图像URL”的后面。
  • 除了src以外的属性之间不分先后顺序,src与其他属性之间、其他属性之间均以空格相互隔开。
  • 属性采用键值对的格式,即key=”value”(属性=“属性值”)。
  • src这个属性是必须要写的,其他属性按需求加即可。

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

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

相关文章

Python爬虫:通过js逆向获取某瓜视频的下载链接

爬虫:通过js逆向获取某瓜视频的下载链接 1. 前言2. 获取script标签下的视频加密数据3. 第一步:获取解密后的视频下载链接4. 第二步:模拟生成加密的webid值 1. 前言 就小编了解&#xff0c;某瓜视频这个网站对应视频下载链接加密处理至少经过三个版本。之前在CSDN发布了一篇关于…

【专题】2024全球电商消费电子市场研究报告合集PDF分享(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p37552 在如今数字经济蓬勃发展的大环境下&#xff0c;电商行业正以前所未有的迅猛之势&#xff0c;对全球商业版图进行着深刻的重塑。据 Stocklytics 发布的有关全球电商市场价值及未来增长趋势的专项调查报告显示&#xff0c;2024…

docker部署nginx、docker常用命令

1、安装nginx 未加版本号&#xff0c;默认最新版 docker pull nginxdocker pull nginx:版本号2、查看是否拉取成功 2-1、查看镜像 docker images2-2、镜像打包->可给他人使用 docker save -o nginx.tar nginx:latest2-3、读取打包的镜像 记得先走第三步删除镜像&#x…

【Python】Windows环境下更改pip安装源

文章目录 1.前言2.pip临时安装更改源3.pip永久更改安装源3.1方法13.2方法2 1.前言 由于pip的默认的安装源在国外,导致我们在使用pip命令安装Python 库或包时速度特别慢,因此我们可以临时使用国内的源进行下载,或者直接更改pip的下载源 2.pip临时安装更改源 pip install xxx …

MyCat分库分表

本章重点 mycat分表分库技术&#xff08;横向数据切分&#xff09; mycat数据切分规则&#xff08;取余分库&#xff0c;自然月分库&#xff09; mycat全局序列号&#xff08;实现mysql集群主键ID全局自增&#xff09; 一、分库分表 简单来说&#xff0c;就是指通过某种特…

“Interface 和 Type 区别”深度解析

“Interface 和 Type 区别”深度解析 文章目录 一、Interface 和 Type 是什么二、如何使用 Interface 和 Type1. 定义 Interface2. 定义 Type3. 使用 Interface 和 Type4. 区别与联系 三、Interface 和 Type 二者有哪些区别&#xff0c;分别在哪些场景使用1. 区别2. 场景 四、扩…

深入解析反射型 XSS 与存储型 XSS:原理、危害与防范

在网络安全领域&#xff0c;跨站脚本攻击&#xff08;XSS&#xff09;是一种常见的安全漏洞。XSS 攻击可以分为反射型 XSS 和存储型 XSS 两种类型。本文将详细介绍这两种类型的 XSS 攻击的原理、危害和防范措施。 一、反射型 XSS 1、原理 反射型 XSS 攻击也称为非持久性 XSS …

数据丢失要怎么处理,助你一键恢复数据

你平常会用优盘来传输资料吗&#xff1f;如果你也出现过优盘因为病毒或者误操作等原因引起了数据丢失的情况那就继续往下看吧。这篇文章带你了解u盘格式化后数据能恢复吗&#xff0c;带你了解可操作的工具。 1.福昕恢复数据 链接直达&#xff1a;https://www.pdf365.cn/foxit…

集成电路学习:什么是RTOS实时操作系统

RTOS&#xff1a;实时操作系统 RTOS&#xff0c;全称Real Time Operating System&#xff0c;即实时操作系统&#xff0c;是一种专为满足实时控制需求而设计的操作系统。它能够在外部事件或数据产生时&#xff0c;以足够快的速度进行处理&#xff0c;并在规定的时间内控制生产过…

2024国赛数学建模-模拟火算法(MATLAB 实现)

模拟退火算法 1.1 算法原理 模拟退火算法的基本思想是从一给定解开始 ,从邻域 中随机产生另一个解 ,接受 Metropolis准则允许目标函数在 有限范围内变坏 ,它由一控制参数 t决定 ,其作用类似于物 理过程中的温度 T,对于控制参数的每一取值 ,算法持续进 行“产生 —判断 —接受…

vscode中暂存块功能不能用了

vscode中暂存文件修改可以按每一处暂存&#xff0c;而不用一次暂存整个文件的修改&#xff0c;今天发现这个功能不能用了&#xff0c;不知道啥原因&#xff0c;记录一下。

Android 存储之 SharedPreferences 框架体系编码模板

一、SharedPreferences 框架体系 1、SharedPreferences 基本介绍 SharedPreferences 是 Android 的一个轻量级存储工具&#xff0c;它采用 key - value 的键值对方式进行存储 它允许保存和读取应用中的基本数据类型&#xff0c;例如&#xff0c;String、int、float、boolean …

JavaWeb案例

环境搭建 先创建好数据库&#xff0c;建表并插入数据 create database talis; use talis;-- 部门管理 create table dept(id int unsigned primary key auto_increment comment 主键ID,name varchar(10) not null unique comment 部门名称,create_time datetime not null com…

QT QGraphicsView实现预览图片显示缩略图功能

QT QGraphicsView实现预览图片显示缩略图功能QT creator Qt5.15.2 头文件&#xff1a; #ifndef TGRAPHICSVIEW_H #define TGRAPHICSVIEW_H#include <QGraphicsView> #include <QMainWindow> #include <QObject> #include <QWidget>class TGraphicsVie…

TCP的传输速度

如何确定TCP最大传输速度&#xff1f; TCP 的传输速度&#xff0c;受限于发送窗⼝&#xff0c;接收窗⼝以及⽹络设备传输能⼒。 其中&#xff0c;窗⼝⼤⼩由内核缓冲区⼤⼩决定。如果缓冲区与⽹络传输能⼒匹配&#xff0c;那么缓冲区的利⽤率就达到了最⼤化。 如何计算网络传…

vue transition组件

可能不生效的几个注意点 选择器的优先级谨慎合并样式 显示三阶段和隐藏三阶段的class名 1、vue2中显示的初始阶段类名是&#xff1a;v-enter&#xff1b;隐藏的初始阶段类名是&#xff1a;v-leave2、v-enter-active、v-leave-active这两个 class 可以被用来定义动画的持续时间…

设计模式1:C#开发中使用创建型的工厂模式和行为型的策略模式

一、接口设计的好处 三大好处&#xff1a;解耦、可复用、可扩展。 二、简单工厂模式 【三要素】能创建具体产品的工厂、抽象产品&#xff08;接口&#xff09;、具体产品 【基本用法】字符串>创建对象>调用其方法 // 产品接口 public interface IProduct {void Opera…

应用开发---VTK放大镜(区域放大)功能实现

VTK 医学图像处理---放大镜/区域放大功能 本博文主要内容为:实现放大镜的源代码;实现思路;具体代码说明。 目录 VTK 医学图像处理---放大镜/区域放大功能 简介: 1 放大镜源代码 1 wxInteractorStyleImage 类源代码 2 wxMagnifierAcotor类源代码 3 Magnifier.cpp 源…

Android 打开 GBK项目如何设置成UTF-8

1.标题 今天打开一个eclipse老项目&#xff0c;编码格式为GBK&#xff0c;Android studio导入项目报错&#xff0c;本人想到一个方案就是批量修改文件格式从 GBK到 UTF-8&#xff0c;这样可以一键解决问题 2.开发脚本 使用前请备份代码 使用前请备份代码 使用前请备份代码…

NLP从零开始------文本中阶处理之序列到序列模型(完整版)

1. 序列到序列模型简介 序列到序列( sequence to sequence, seq2seq) 是指输入和输出各为一个序列(如一句话) 的任务。本节将输入序列称作源序列&#xff0c;输出序列称作目标序列。序列到序列有非常多的重要应用&#xff0c; 其中最有名的是机器翻译( machine translation), 机…