HTML学习笔记

csdndeidl

已于 2022-07-14 22:55:22 修改

阅读量468

点赞数

文章标签： html 前端学习 sublime text

于 2022-07-13 22:14:34 首次发布

本文链接：https://blog.csdn.net/csdndeidl/article/details/125773891

版权

HTML标签

摘要由CSDN通过智能技术生成

2022、7、13

一、HTML（超文本标记语言）

基础认知

1、浏览器

不同浏览器的渲染引擎不同，对于相同代码解析的效果存在差异

web标准：让不同浏览器按相同的标准显示结果，让展示的效果统一

2、web标准

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如颜色、大小）
行为	JavaScript	网页模型的定义和交互

3、html结构标签

html标签	网页的整体
head标签	网页的头部
body标签	网页的身体
title标签	网页的标题

4、html注释

注释的作用

为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

浏览器执行代码时会忽略所有的注释

快捷键

ctrl+/ ctrl+shift+/

5、html标签的构成

结构说明:

1．标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

2．常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容

3 少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

6、html标签的属性

属性名=“属性值”

注意点： 1.标签的属性写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

<!-- 举例 -->
<img src="" alt="">
<a href=""></a>
<strong class="one">文字变粗</strong>

7、html标签的关系（父子、兄弟关系）

1、父子关系（嵌套关系）

<!-- head为父标签（元素），title为子标签（元素 -->
<head>
    <title></title>
</head>

2、兄弟关系（并列关系）

<head></head>
<body></body>

HTML标签

1、排版标签

（1）标题标签(h1~h6)

在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

<!-- 标题标签 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

语义:1~6级标题，重要程度依次递减

特点: 文字都有加粗

文字都有变大，并且从h1→h6文字逐渐减小

独占一行

注意点:

h1标签对于网页尤为重要，开发中有特定的使用场景，如:新闻的标题、网页的logo部分

（2）段落标签（p标签）

<!-- 段落标签 -->
<p>超文本是一种组织信息的方式</p>
<p>HTML的全称为超文本标记语言，是一种标记语言</p>

p标签内的文字自成一段

（3）换行标签（br标签）

让文字强制换行显示

特点：单标签、强制换行显示

<!-- 换行标签 -->
<p>HTML的全称为超文本标记语言，是一种标记语言。<br>它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。<br>HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>

（4）水平线标签（hr标签）

场景：分割不同主题内容的水平线

语义: 主题的分割转换

特点: 单标签、在页面中显示一条水平线

<!-- 水平线标签 -->
<h1>前端开发</h1>
<hr>
<p>HTML的全称为超文本标记语言，是一种标记语言。</p>

2、文本格式化标签

场景:需要让文字加粗、下划线、倾斜、删除线等效果（突出重点）

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签（更推荐）	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

<!-- 文本格式化标签 -->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<br>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>

3、媒体标签

（1）图片标签

场景：在网页中显示图片

<!-- 图片标签 -->
<!-- src为目标图片的路径，alt为图片不显示时介绍的文字 -->
<img src="bj.jpg" alt="这是一张背景图片">

特点:

单标签

img标签需要展示对应的效果，需要借助标签的属性进行设置！

①alt属性（替换文本）

当图片加载失败时才会显示alt的文本

②title属性（提示文本）

当鼠标悬停时，才显示的文本

注意点： title属性不仅仅可以用于图片标签，还可以用于其他标签

<!-- 图片标签 -->
<h1 title="这是1级标题">1级标题</h1>
<img src="bj.jpg" alt="这是一张背景图片" title="这是title的效果">

③width、height属性（宽度和高度）

注意：

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（图片不会变形)

如果同时设置了width和height两个，若设置不当此时图片可能会变形

<!-- 图片标签 -->
<!-- 图片按设置的宽度、高度缩放 -->
<img src="img/bj.jpg" width="450px" height="300px" alt="这是一张背景图片" title="这是title的效果" />
<!-- 只设置宽度或高度，图片等比例缩放 -->
<img src="img/bj.jpg" height="300px" alt="这是一张背景图片" title="这是title的效果" />

（2）路径（绝对、相对）

场景：页面需要加载图片，需要先找到对应的图片

①绝对路径（了解）

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

盘符开头：D:\day01vimages11.jpg

完整的网络地址： https://www.itcast.cn/2018czgw/images/logo.gif

<!-- 绝对路径 -->
<!-- 盘符开头 -->
<img src="C:\Users\86133\Desktop\all\ppt\学习笔记\代码\img\bj.jpg" alt="">
<!-- 完整的网络地址 -->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=h