HTML学习笔记

最新推荐文章于 2023-11-21 12:39:45 发布

_sunShine女孩

最新推荐文章于 2023-11-21 12:39:45 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/MYgirlHHH/article/details/122274518

版权

HTML网页HTML基本语法概述标签关系HTML网页基本标签段落和换行标签段落标签换行标签文本格式化标签div 和 span 标签图像标签和路径图像标签网页网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。网页是图片、链接、文字、

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

网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。
网页是图片、链接、文字、声音、视频等元素组成其实就是一个html文件(后缀名为html)

HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markup language)。
标记语言是一套标记标签(markup tag)。

所谓超文本，有2层含义∶

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制)。
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。

基本语法概述

HTML标签是由尖括号包围的关键词，例如<html>。
HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是
开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如<br>，我们称为单标签。

标签关系

双标签关系可以分为两类∶包含关系和并列关系。

包含关系

<head>
	<title> </title>
</head>

并列关系

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

HTML网页

每个网页都会有一个基本的结构标签(也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		Hello World!
	</body>
</html>

在这里插入图片描述

基本标签

段落和换行标签

段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph的缩写，意为段落。标签语义:可以把HTML文档分割为若干段落。

特点∶

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br>。
<br>单词break的缩写，意为打断、换行。标签语义：强制换行。

特点:

<br>是个单标签。
<br>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
在这里插入图片描述

div 和 span 标签

<div>和<span>是没有语义的，它们就是一个套子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点∶

<div>标签用来布局，但是现在一行只能放一个<div>大盒子
<span>标签用来布局，一行上可以多个<span>小盒子

图像标签和路径

图像

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img src="图像URL" />

单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。所谓属性∶简单理解就是属于这个图像标签的特性。
在这里插入图片描述
图像标签属性注意点:

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

路径

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

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
简单来说，图片相对于HTML页面的位置

在这里插入图片描述
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

绝对路径∶是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，D:\web\imglogo.gif或完整的网络地址http://www.itcast.cn/images/logo.gif

超链接标签

在HTML标签中，<a>标签(anchor 锚)用于定义超链接，作用是从一个页面链接到另一个页面。

链接的语法格式

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

在这里插入图片描述
2. 链接分类:
(1) 外部链接: 例如<a href="http://www.baidu.com">百度</a>。
(2) 内部链接: 网站内部页面之间的相互链接.直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
(3) 空链接: 如果当时没有确定链接目标时，<a href="#">首页</a>。
(4) 下载链接: 如果href里面地址是一个文件或者压缩包，会下载这个文件。
(5) 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
(6) 锚点链接: 点我们点击链接，可以快速定位到页面中的某个位置。

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍<h3>

注释标签

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以结束。快捷键：Ctrl +L

<!--注释语句-->

添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
在这里插入图片描述

表格标签

<table> </table>是用于定义表格的标签。
<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
<td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中。

<table align="center" border="1" >
	<tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
	<tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
	<tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
	<tr><td>郭富城</td>

最低0.47元/天解锁文章

_sunShine女孩

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML网页HTML基本语法概述标签关系HTML网页基本标签段落和换行标签段落标签换行标签文本格式化标签div 和 span 标签图像标签和路径图像标签网页网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。网页是图片、链接、文字、
复制链接

扫一扫