HTML5+CSS 学习笔记1_html5css笔记-CSDN博客

本文链接：https://blog.csdn.net/cmehppc/article/details/119766117

HTML：

HTML简介：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML？

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言

HTML 标签

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML网页结构

<!DOCTYPE>声明

用来告知 Web 浏览器页面使用了哪种 HTML 版本。

*目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8
在这里插入图片描述

HTML基础：

HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

注释: 浏览器会自动地在标题的前后添加空行。

HTML水平线标签<hr>

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

HTML段落

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

**注意：**浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

HMTL链接

HTML 链接是通过标签 <a> 来定义的。

<a href="https://www.baidu.com/">这是一个链接</a>

<a>超链接标签语法

格式：

<a herf="" target=""></a>

1、空链接 herf可以用空链接用#代替
2、下载链接如果herf里是一个zip或文件则默认下载
3、各种元素都可以做为超链接
4、锚点链接跳到本页中的某处的链接

herf属性里为’#名字’的形式<a herf="#two">
然后在目标标签里<h3 id=“two”>

5、targrt 链接页面的打开方式：_self为默认值在当前页打开 _blank为在新窗口打开

绝对路径和相对路径

相对路径：相对于html文件的路径

绝对路径：从盘符开始的路径

相对路径的写法

./：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的
…/：代表文件所在的父级目录
…/…/：代表文件所在的父级目录的父级目录
/：代表文件所在的根目录

绝对路径

如果找不到的话需要file协议(file:文件路径)

注：相对路径使用的是/ 绝对路径使用的是\

html链接中的target属性

<a href="http://news.baidu.com/" target="_blank">新闻</a>

将 target 属性设置为 "_blank"时，链接将在新窗口打开。

若无target="_blank"，则在当前页面打开。

html链接中的id属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

实例：
<a id="tips">有用的提示部分</a>                   在HTML文档中插入ID
<a href="#tips">访问有用的提示部分</a>               在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"
<a href="http://www.baidu.com/">访问有用的提示部分</a>   从另一个页面创建一个链接到"有用的提示部分(id="tips"）"

注意事项

在这里插入图片描述

HTML图像

HTML 图像是通过标签 <img> 来定义的。

<img src=“图像url”> 同一目录下可以直接用图片名作为url

<img loading="lazy" src="/images/logo.png" width="258" height="39" />

图像的名称和尺寸是以属性的形式提供的。

图像标签的参数 (参数之间用空格分开)：

1、alt：如果图片不能显示用来替换的文字

2、height/width：图片高度/宽度

3、title：鼠标放到图片上显示的文字

4、border：边框宽度【css设定的情况较多】

文本格式化标签

1、加粗：<strong>加粗标签<\strong>

2、斜体：<em>倾斜标签<\em>

3、删除线：<del>删除标签<\del>

4、下划线：<ins>下划标签<\ins>

HTML元素：

HTML元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

在这里插入图片描述

<p> 元素定义了 HTML 文档中的一个段落。
<body> 元素定义了 HTML 文档的主体。
<html> 元素定义了整个 HTML 文档。

HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

一些注意事项：

1、切记所有标签都需要闭合，不管是单体标签还是成对标签。

2、标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）。

HTML属性

1、HTML 元素可以设置属性。

2、属性可以在元素中添加附加信息。

3、属性一般描述于开始标签。

4、属性总是以名称/值对的形式出现，比如：name=“value”。

在这里插入图片描述

HTML头部

HTML <base>元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

实例：
<head>
<base href="http://www.baidu.com/" target="_blank">
</head>

HTML <link>元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML<style>元素

HTML5+CSS 学习笔记1

HTML：

HTML简介：

什么是HTML？

HTML 标签

HTML网页结构

<!DOCTYPE>声明

HTML基础：

HTML标题

HTML水平线标签<hr>

HTML段落

HMTL链接

<a>超链接标签语法

绝对路径和相对路径

相对路径的写法

绝对路径

html链接中的target属性

html链接中的id属性

注意事项

HTML图像

图像标签的参数 (参数之间**用空格分开**)：

文本格式化标签

HTML元素：

HTML元素语法

HTML空元素

一些注意事项：

HTML属性

HTML头部

HTML <base>元素

HTML <link>元素

HTML<style>元素

图像标签的参数 (参数之间用空格分开)：