整理下HTML学习笔记-CSDN博客

本文链接：https://blog.csdn.net/2401_85258143/article/details/139176742

1.HTML的基本标签

1）html基本结构

<!DOCTYPE html>

<head>

......

</head>

<body>

......

<body>

</html>

(2)HTML

整个网页是从<html>这里开始的，然后到</html>结束。

(3)head

head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”

<head>内部标签	说明
<title>	定义网页的标题
<meta>	定义网页的基本信息（供搜索引擎）
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位（用得很少）

(4)body

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”。

2、段落与文字

(一)、段落标签

(1)、段落与文字标签

标签	语义	说明
<h1>~<h6>	header	标题
<p>	paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

(2)、文本格式化标签


标签	语义	说明
<strong>	strong（加强）	加粗
<em>	emphasized（强调）	斜体
<cite>	cite（引用）	斜体

(二)、块元素和行内元素

(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

(2)、块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。

(3)、行内元素特点：

（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素；常见行内元素有：strong、em、span等。

3.列表

3种列表的语义记忆：


标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

（1）有序列表

<ol>

<li>有序列表项</li>

</ol>

（2）无序列表（用处最广泛）

<ul type="列表项符号">

<li>无序列表项</li>

<li>无序列表项</li>（可嵌套使用）

<li>无序列表项</li>

</ul>

注意：嵌套使用时结构完整：ul里嵌套ul

（3）定义列表

<dl>

<dt>定义名词</dt>

<dd>定义描述</dd>

<dl>

4.图像

(一)、图像标签

图像标签为<img>。<img>是一个自闭合标签。（3个属性：src、alt、title。）

语法：

属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

(二)、相对路径和绝对路径

绝对路径，指的是图片在你的电脑中的完整路径。

相对路径，指的是图片相对当前页面的位置

(三)、图片格式

1、jpg格式
概述：拓展名为点.jpg或.jpeg，它是一种有损的压缩格式，他将肉眼不容易观察出来的细节丢弃了
主要特点:支持的颜色丰富，占用空间小，但不支持透明背景，不支持动态图
使用场景：对细节没有极高要求的场景，比如说产品的宣传图等等

2、png格式
概述：是一种无损压缩格式，能更高质量的保存图片
主要特点：支持的颜色丰富，占用空间大，支持透明背景，不支持动态图
使用场景：需要使用透明背景的图片、想要呈现更高质量的图片

3、bmp格式
概述：不进行压缩的格式，最大程度上保留细节。
主要特点：支持颜色丰富，保留细节，占用空间极大，不支持透明背景和动态图
使用场景：对图片细节要求极高，如大型游戏

4、gif 格式
概述：支持256中颜色，色彩呈现不是很完整
主要特点：支持的颜色较少，支持简单透明背景、支持动态图
使用场景：动态图

5、webp格式
概述：谷歌退出的一种格式，专门用来在网页中呈现图片
主要特点：具备以上几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容问题
使用场景：网页中的各种图片

六、base64 格式
本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
原理：把图片进行base64编码，形成一串文本，直接作为img的src即可。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。

5、链接

超链接根据链接对象的不同分为：跳转页面，跳转文件，跳转锚点

（1）跳转页面

语法：

<a href="链接地址" target="目标窗口的打开方式">（打个a就出来了）

target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

（2）跳转文件

<a href='./xxx.png'></a> 能直接打开的文件
<a href='./xxx.zip'></a> 浏览器无法打开的文件，会自动触发下载
<a href='./xxx.map4' download='xxx.map4'></a> 可以通过download强制触发下载

（3）跳转锚点

第一种方式:a标签配合name属性：

例：<a href="#qsl">跳转到qsl（给用户看）</a>

第二种方式:其他标签配合id属性：

例：<a href="#xmx">跳转到xmx(给用户看）</a>

注意点:
1.具有 href 属性的a标签是超链接，具有name 属性的a标签是锚点。
2. name 和 id 都是区分大小写的，且id最好别是数字开头。

6.表格

（1）表格基本结构

<table>

<thead>(表头）

<tr>

<th>表头单元格1</th>（表头单元格用th）

<th>表头单元格2</th> ...

</tr>

</thead>

<tbody>（表身）

<tr>

<td>标准单元格1</td>(表身，表脚单元格用td）

<td>标准单元格2</td>...

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>...

</tr>

</tbody>

<tfoot>（表脚）

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>...

</tr>

</tfoot>

</table>

(2)表格标签名语义及常用属性

7.表单

（1）表单基本结构

<form >

......

</form>

常用属性：

1.action:用于指定表单的提交地址(需要与后端人员沟通后确定)。

2.target:用于控制表单提交后，如何打开页面

常用值如下:
_blank : 在新窗口打开。 _self :在本窗口打开。

（2）input标签表单

大部分表单都是用input标签完成的。

语法：

type属性值	说明
password	密码文本框
radio	单选框
checkbox	复选框
hidden	隐藏域
reset	重置按钮
button	按钮
text	单行文本框
image	图像形式提交按钮