HTML基础

最新推荐文章于 2024-08-21 22:36:29 发布

77.star

最新推荐文章于 2024-08-21 22:36:29 发布

阅读量837

点赞数 17

文章标签： html

本文链接：https://blog.csdn.net/weixin_67804833/article/details/140558930

版权

一.HTML概述

HTML，全称叫超文本标记语言，英文名是Hyper Text Markup Language，是一种标记语言。 它包含了一系列具有描述性标记的标签(Tag，也可叫标记)，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，形成一个可供用户进行浏览、交互的优美页面。比如有描述段落、图片、文字、音频、视频、表格、链接等标签。

总之一句话，HTML是用来设计网页的布局结构的。

二.HTML基础结构

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

解析：

<!DOCTYPE html> : 声明该文档是HTML5文档，固定写法。必须放在首行
<html> : HTML的根标记(根元素)，该标记在文档中只能有且只有一个。
根标记中通常有两个子标记，分别是 <head>和<body>
- <head>标记：进行网页meta的设置（规定字符集等），定义标题，引入css文件，js文件，或者编写style和javascript代码等，可以添加在头部区域的元素标签为: <title>,<style>,<meta>,<link>, <script>,<noscript> 和 <base>。
- body标记：用来定义网页的可见内容。

三.HTML常用标签

1.<tittle>元素：在 HTML/XHTML 文档中是必需的，即浏览器工具栏(标签页)的标题；当网页添加到收藏夹时，显示在收藏夹中的标题；显示在搜索引擎结果页面的标题。

2.<base>元素：<base> 标签规定文档中所有相对 URL 的基准 URL(即父路径)。

3.<meta>元素：描述了一些基本的元数据。

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="michael">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">
<meta   http-equiv="refresh" content="3;url=https://www.baidu.com">

4.<style>元素：描述了一些基本的元数据

<head>
<style type="text/css">
body {
background-color:yellow;
}
</style>
</head>

5.<script>元素：用于引入外部的脚本文件，或者书写脚本代码。

6.<noscript>元素：noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。

四.HTML基础标签

1.标题标签：标题（Heading）是通过 <h1> - <h6> 标签进行定义的。（<h1>定义最大标题，<h6>定义最小标题）。

2.段落标签：HTML 可以将文档分割为若干段落。段落是通过<p>标签定义的。

3.换行标签：

使用 <br> 标签，在不产生一个新段落的情况下进行换行（新行）。
<br>标签对于写地址或诗歌非常有用。
<br> 元素是一个空的 HTML 元素，也就是自结束标签。在XHTML中，强制写斜杠的。
<br> 标签来插入换行符，而不是用它来增加段落之间的空白。

4.水平线标签：<hr> 标签在 HTML 页面中创建水平线，可用于分隔内容。

5.图像标签：<img>标签可以在网页上插入图片，是一个单标记，自结束标记, 名字后面带有斜杠。

<img>标签的常用属性如下：

属性	作用
src	用于书写图片的引用路径，可以是本地路径，也可以是网络路径
alt	如果由于某种原因无法显示图像，则指定图像的替代文本。该属性主要用于搜索引擎
width	图片的宽
height	图片的高

6.超链接标签：<a>是一个双标记，标签内容体可以是文本，也可以是图像。

<a> 的属性如下：

属性	重要性	描述
href	必需	指令链接目标的URL。可以是另一个页面，也可以是本页面的其他位置
title	可选	鼠标悬停在超链接上时显示的内容
target	可选	指定链接如何在浏览器中打开，常用值如下： `_blank`：在新标签页打开链接 `_self`：在当前标签页打开链接
rel	可选	规定当前文档和被链接文档之间的关系。

7.按钮标签：<button> 标签定义一个按钮。在 <button>元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

8.音频标签：<audio> 标签定义声音，比如音乐或其他音频流。

<audio>的属性如下：

属性	值	描述
src	URL	规定音频文件的 URL。
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。

9.视频标签：<vedio> 标签定义视频，比如电影片段或其他视频流。

<video>的属性：

属性	值	描述
src	URL	要播放的视频的URL
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
width	pixels	设置视频播放器的宽度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

五.列表

无序列表：是一个项目的列表，列表项使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用<ul>标签，列表项使用<li>标签。
有序列表：是一列项目，列表项使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li>标签。
自定义列表：不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

六.表格

1.表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行，每行被分割为若干单元格，表格可以包含标题行(俗称表头)，用于定义列的标题。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.<table> 元素表示整个表格，在整体上可以分成四个部分：<caption>，<thead> ，<tbody> 和 <tfoot>

<caption> 为整个表格定义主题
<thead> 表格头部部分(也称表格页眉)。
- <th> 在<thead>中使用<th>元素定义每一列的标题，有加粗效果，与普通单元格区分开来。（table header）
<tbody> 表格主体部分
- <tr> 在<tbody>中使用<tr>元素定义行（table row 的缩写）
- <td> 在<tr>中使用<td>元素定义单元格数据（ table data 的缩写）
<tfoot> 可用于在表格的底部定义摘要、统计信息等内容

七.表单

1.HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。这些元素也都被称为控件元素。

2.标签介绍：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
<textarea>元素用于创建文本域（多行文本输入控件），可写入字符的字数不受限制。