HTML学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_52078143/article/details/136649065

网站

网站是由网页组成，网页通常由图片，文字等等，通常我们平时的网页以.html后缀的文件，所以网页俗称HTML文件

HTML

HTML是一种产文本标记预压，用来描述网页的一门语言，是一种标记语言

超文本：

1.可以加入图片，视频等等
2.可以从一个文件跳入另外一个文件

常用的浏览器

IE，火狐（firefox），谷歌，Safari

web标准

W3C（万维网联盟）是国际最著名的标准化组织

为什么需要web标准
浏览器显示页面或者排版不同
web标准的组成
主要包括结构、表现、行为
Web 标准提出的最佳体验方案：结构、样式、行为相分离就是把HTML写到html文件中，把表现写到CSS文件中、把行为写到JavaSciipt文件中

文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器是哟个那种HTML 版本来显示页面。
<!DOCTYPE html>就是说明当前页面采取的是HTML5版本来显示网页

lang语言类

用来定义当前文件显示的类型。

1.en定义语言为英语
2.zh-CN定义语言为中文
简单来叔定义为en就是英文网页，定义为zh-CN就是中文网页，但是可以互相显示

字符集

字符集是多个字符的集合。以便计算机能够是被和存储各种文字
在<hesd>可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种编码
一般都采用<meta charset="UTF-8"/>的形式，utf-8被称为万国码，版含量全世界所有国家需要用到的字符不写这个可能就会乱码

标签语义

简单理解标签的含义，就是要理解一下这个东西是干什么用的
根据标签的予以，再适合的地方给一个最合理的标签，可以让页面结构更加清晰

标题标签

<h1>我是一级标题</h1>单词head的缩写，加了标签的文字会变粗，字号也会变大

段落标签

<p>我是一个段落标签</p>

段落和换行标签

单词break的缩写

文本格式化标签

给文字设置粗体，斜体，下划线等效果

语义	标签	说明
加粗	`<strong></strong>` 或者`<b></b>`	更推荐使用`<strong>`标签
倾斜	`<em> </em>`或者`<i></i>`	更推荐使用`<em>`标签加粗，语义更加强烈
删除线	`<del></del>` 或者`<s></s>`	更推荐使用前者
下划线	`<ins></ins>`或者`<u></u>`	更推荐使用前者

`<div>`和`<span>`标签

他们是没有语义的，他们就像一个盒子没用来装内容的
div是division的缩写，表示分割、分区。span表示跨度，跨距

图像标签和路径

在HTML标签中，<img>标签用于dinginessHTML页面中的图像
<img src="图像URL"/>
src 是标签的必须属性，它用于指定文件的路径和文件名。所谓的属性简单理解就是属于这个图象标签的特性

图像标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图片不能显示的文本
title	文本	提示文本。鼠标放在图像上显示的文本
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像的边框粗细

图像标签属性的注意点：

图像标签可以由多个属性，必须在标签名的后面
属性之间不分先后顺序，标签名和属性、属性和属性之间均以空格分开
属性采取键值对的格式，即key = "value"的格式，属性=“属性值”

路径

页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件（images），这时在查找图像就要采用“路径”的方式来指定图像文件的位置。

相对路径：以应用文件所在的位置为参考基础，监理处的目录路径。简单的说就是图片想对于HTML的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如`<img src = "baidu.gif"/>`
下一级路径	/	图像文件位于HTML文件下一级，如`<img src " images/baidu.gif"/>`
上一级路径	…/	图像文件位于HTML文件上一级，如 `<
img src=“…/baidu.gif”/>`

绝对路径
是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，完整的网络地址也行。不常用。

链接的语法格式

外部链接

<a href="跳转目标"target="目标出啊港口的弹出方式">文本或者图像</a>

属性	作用
href	用于指定连接目标的url地址，(必须属性)当为标签应用href属性时，他就具有了超链接的能力
target	用于指定链接页面的打开方式，其中_self为默认值，__blank 为在新窗口打开方式

内部链接

网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>

空链接

如果当时没有明确的连接目标时，<a href="#">首页</a>

下载链接

如果href里面地址是一个文件或者压缩包，会下载这个文件

网页元素链接

在网页中的各种网页元素，比如文本，图像，表格个，音频，视频等都可以添加超链接

锚点链接

注释标签

快捷键ctrl+/

特殊字符

特殊字符	描述	字符的代码
	空格符	& nbsp;
<	小于号	& lt;
>	大于号	& gt;

表格的主要作用

摆个主要是用于显示，展示数据，因为它可以让数据显示的非常规整，可读性非常好。

表格的基本语法

<table> 
  <tr>
    <td>表格内的文字</td>
    
    ~~~~
    
  <tr>
<table>

<table>是用来定义表格的标签
<tr> 标签用于定义表格中的行，必须嵌套在表格中。
<td> 用于定义表格中的单元格，必须嵌套在上面那一个
字母td指表格数据(table data)，比奥是数据单元的内容

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本你内容加粗居中显示标签表示是HTML表格的表头部分(table head的缩写)

表格的结构标签

<thead>：用于定义表格的头部，
<tbody>:用于地暖管一表格的主体，主要用于放数据本体

列表标签

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而用列表项使用<li>标签来定义

自定义列表

列表总结

标签名	无需标签	说明
`<ul>`	无序标签	里面只能包含 li 没有顺序，使用较多 li里面可以包含任何标签
`<ol>`	有序标签	里面只能包含li，有顺序，使用较少
`<dl>`	自定义列表	里面只能包含dt和dd。