【前端基础学习笔记】1、HTML

最新推荐文章于 2024-07-15 15:35:16 发布

白皛玊

最新推荐文章于 2024-07-15 15:35:16 发布

阅读量158

点赞数 1

分类专栏：前端基础学习文章标签： html

本文链接：https://blog.csdn.net/qq_53743140/article/details/119331414

版权

前端基础学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

HTML概念
HTML作用
Web三要素
HTML特点
HTML标签

HTML概念

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

HTML是最基础的网页开发语言，Hyper Text Markup Language 超文本标记语言。

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：由标签构成的语言，使用标签的方法将需要的内容包括起来。<标签名称> 如 html，xml

注意：标记语言不是编程语言

HTML作用

HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。

网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

HTML代码：用于搭建基础网页，展示页面的内容、需要显示的数据。
CSS代码：用于美化页面，布局页面，使显示的数据更加好看。
JavaScript代码：控制页面的元素，让页面有一些动态的效果。

网页根据内容是否可以改变分为：静态页面、动态页面。

静态页面：使用静态网页开发技术发布的资源
特点：
编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
所有用户访问，得到的结果是一样的。
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
动态页面：使用动态网页及时发布的资源
特点：
会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。
所有用户访问，得到的结果可能不一样。
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。

注意：HTML是部署在服务器上，运行在浏览器上。

Web三要素

浏览器：向服务器发起请求，下载服务器中的网页（HTML），然后执行HTML显示出内容。
服务器：接收浏览器的请求，发送相应的页面到浏览器。
HTTP协议：浏览器与服务器的通讯协议。

HTML特点

HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是： *.html 或 *.htm
HTML结构都是由标签组成
标签名预先定义好的，我们只需要了解其功能即可。
标签名不区分大小写，建议使用小写。
围堵标签：通常情况下标签由开始标签和结束标签组成。例如：<a></a>
自闭和标签：如果没有结束标签，建议以/结尾。例如： <img/>
标签可以嵌套，例如： <a><b></b></a>
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来。
HTML结构包括两部分：头head和体body

HTML标签

基础模板

<!DOCTYPE html>
<html>
 	<head>
	 	<title>这是标题</title>
	 	<meta charset="UTF-8">
 	</head>
	 <body>
	 	这⾥是正文
	 </body>
</html>

<html>：整个页面的根标签，理论上一个页面只需要一个，由头和体组成。
<head> ：头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
<title> ⼦标签，用于定义文档的标题。
<meta> ⼦标签，提供关于HTML文档的元数据。用于规定页面的描述、关键词、文档作者、最后修改时间以及其他元数据。
常用属性：content、http-equiv、charset。
<body> 体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

注释：

注释特点：

浏览器查看时，不显示。右键查看源码可以看到。
注释标签不能嵌套。
注释特殊用法，为不同的浏览器提供不同的解决方案。

常用标签

<h1></h1> ：标题标签
<hr /> ：展示一条水平线
<font></font> ：字体标签
<b></b> ：字体加粗
<i></i> ：字体斜体
<p></p> ：段落标签
<br /> ：换行标签

图片标签

图⽚标签：<img>

<img>在html页面中引用一张图⽚。

src属性：指定需要显示图⽚的URL（路径）
width属性：设置图像的宽度
height属性：设置图像的⾼度
alt属性：图⽚⽆法显示时的替代文本
title属性：⿏标移上图⽚时显示的标题

音视频标签

视频标签：<video>

音频标签：<audio>

<video>在html页面中加入一个视频；<audio>在html页面中添加一段音乐。

controls属性：添加视频控制插件
loop属性：循环播放
autoplay属性：自动播放

列表标签

列表标签：<ul><ol>

<ol>定义有序列表
type：列表类型，取值：A、a、I、i、1等
<ul>定义⽆需列表
type：符号的类型，取值：disc实心圆、square方块、circle空心圆

超链接标签

<a>标签是超链接，是在html页面提供一种可以访问其他位置的实现方式。

href：用于确定需要显示页面的路径（URL）
target：确定以何种方式打开href所设置的页面。常用取值：_blank、_self 等
_blank 在新窗口中打开href确定的页面
_self 默认。使用href确定的页面替换当前页面

锚点是文档中某行的一个记号

用于链接到文档中的某个位置
定义锚点：
<a name="anchorname1">锚点一</a>
链接到锚点：在锚点名前加上#
<a href="#anchorname1">回到锚点一</a>

表格标签

表格标签：<table><tr><td>

HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。

<table>是父标签，相当于整个表格的容器。
border：表格边框的宽度、样式
width：表格的宽度
cellpadding：单元边沿与其内容之间的空白
cellspacing：单元格之间的空白
bgcolor：表格的背景颜色
<tr>标签用于定义行
align：对齐方式
<td>标签用于定义表格的单元格（一个列）
colspan：单元格可横跨的列数
rowspan：单元格可横跨的行数
align：单元格内容的水平对齐方式，取值：left左、right右、center居中
nowrap：单元格中的内容是否折行
<th>标签用于定义表头。单元格内的内容默认居中、加粗
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分