HTML学习

最新推荐文章于 2024-09-15 22:12:53 发布

SHX20010129

最新推荐文章于 2024-09-15 22:12:53 发布

阅读量29

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/SHX20010129/article/details/132676460

版权

1 概念

HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。

2 快速入门

2.1 html文档的后缀名

.html和.htm两种都可以

2.2 标签的分类

1. 基本结构标签：这些标签用于定义 HTML 文档的基本结构，包括头部、标题、主体等。例如 <html>, <head>, <title>, <body> 等。
2. 文本标签：用于处理文本内容的标签，包括段落、标题、链接、列表等。例如 <p>, <h1> - <h6>, <a>, <ul>, <ol>, <li> 等。
3. 表格标签：用于创建和组织表格的标签。例如 <table>, <tr>, <th>, <td> 等。
4. 表单标签：用于创建交互式表单的标签，用于用户输入和提交数据。例如 <form>, <input>, <select>, <textarea>, <button> 等。
5. 多媒体标签：用于嵌入和控制多媒体内容，如图像、音频、视频等。例如 <img>, <audio>, <video> 等。
6. 样式和布局标签：用于控制页面的显示样式和布局结构的标签。例如 <div>, <span>, <header>, <nav>, <footer> 等。
7. 元数据标签：用于提供关于 HTML 文档的元数据信息，如字符编码、关键词、描述等。例如 <meta>, <link>, <style> 等。
8. 脚本标签：用于引入和执行 JavaScript 脚本的标签。例如 <script>。

2.3 标签可以嵌套，但是嵌套的语法要正确

正确案例：<p><a></a></p>
错误案例：<p><a></p></a>

2.4 标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开

<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">
</p>

2.5 html标签不区分大小写，但是推荐全小写

3HTML文档的基本结构

3.1 基本结构

<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
<!--
head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写
格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>

3.2 HTML的注释

语法：
HTML注释以<!-- 开头 ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
这里编写HTML注释，
可以是一行，也可以是多行
-->

4 HTML中常用标签

4.1 文本标签

4.1.1 标题标签 h1–h6:字体逐渐缩小

一般用在文章的标题上
在这里插入图片描述

4.1.2 段落标签

一般用在正文
在这里插入图片描述

4.1.3 换行标签

在这里插入图片描述

4.1.4 水平线标签

在这里插入图片描述

4.1.5 范围标签

一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用
在这里插入图片描述
PS：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标签包裹，然后修改它的样式。

4.2 图片标签

4.2.1 基本属性

在这里插入图片描述

4.2.2 设置图片的热点区域–了解

在这里插入图片描述

4.3 列表标签

无序列表有序列表
在这里插入图片描述

4.4 布局标签 div

是在 HTML 中用来创建一个容器或者块级元素的标签。它是最常用的布局标签之一，被广泛用于组织和布置网页的内容和结构。

标签本身没有特定的语义含义，它只是一个通用的容器标签。通过在

标签中放置其他 HTML 元素，可以将它们组合在一起并进行样式控制。以下是

标签的示例使用方式：

<div>
  <h1>这是一个标题</h1>
  <p>这是一个段落文本。</p>
  <img src="image.jpg" alt="图片">
</div>

在上述示例中，<div> 标签创建了一个容器，其中包含了一个标题（<h1>）、一个段落（<p>）和一张图片（<img>）。通过将这些元素放置在 <div> 标签内，它们会被作为一组进行样式和布局的控制。

标签可以与 CSS 一起使用，通过添加类名、ID 或应用样式等方式进行更精细的布局和设计。例如：

<div class="container">
  <h1>这是一个标题</h1>
  <p>这是一个段落文本。</p>
  <img src="image.jpg" alt="图片">
</div>

上述示例中，给 <div> 标签添加了一个名为 “container” 的类名，该类名可以用于在 CSS 中定义特定的样式规则，以进一步自定义容器的外观和布局。

总之，<div> 标签是一个非常常用的布局标签，可以用来组织和包裹其他元素，进行更有效的页面结构和样式控制。

4.5 标签分类

html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1、块级元素会独占一行，其宽度自动填满其父元素宽度；
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。（此处的属性稍后介绍）
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol–li，
无序列表标签 ul–li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img

5 超链接

HTML 超链接使用 <a> 标签来创建，用于在网页中创建链接到其他页面、文档、资源或锚点的链接。

以下是 <a> 标签的示例使用方式：

<a href="URL">链接文本</a>

在上述示例中，href 属性被用于指定链接要跳转到的目标 URL。链接文本则是显示在页面上的可点击文本。

例如，下面的代码创建了一个超链接，将链接文本设置为 “点击这里”，并将链接目标设置为 “https://www.example.com”：

<a href="https://www.example.com">点击这里</a>

点击该链接时，浏览器将跳转到指定的 URL。

除了外部链接，还可以使用相对路径和锚点来创建内部链接。

使用相对路径的示例：

<a href="about.html">关于我们</a>

上面的代码表示链接到与当前页面相同目录下的 “about.html” 文件。

使用锚点的示例：

<a href="#section1">跳转到第一节</a>

上述代码中引用了具有 id="section1" 的元素，通过点击链接，页面将滚动至包含该 ID 的元素处。

此外，<a> 标签还具有其他属性，如 target（定义链接在何处打开）和 title（为链接添加额外的描述信息）。可以根据需要使用这些属性来扩展超链接的行为和外观。

需要注意的是，为了遵循无障碍性原则，应提供清晰、有意义的链接文本，帮助用户理解链接目标。

6 表格标签

6.1 规则表格

在这里插入图片描述

6.2 不规则表格–跨行和跨列

要创建一个不规则表格并实现跨行（rowspan）和跨列（colspan）的效果，可以使用 HTML 的 <table>、<tr>、<td> 元素以及它们的 rowspan 和 colspan 属性。

下面是一个示例，展示了一个具有不规则结构以及跨行和跨列的表格：

<table>
  <tr>
    <td rowspan="2">跨行单元格</td>
    <td>普通单元格</td>
    <td colspan="2">跨列单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td>跨列单元格</td>
    <td>跨列单元格</td>
  </tr>
  <tr>
    <td colspan="4">跨列单元格</td>
  </tr>
</table>

在上述示例中，使用 <table> 标签创建表格。在表格中使用 <tr> 标签定义行，使用 <td> 标签定义单元格。

跨行：通过将 rowspan 属性添加到一个单元格中，可以使该单元格跨越多个行。例如，第一个单元格具有 rowspan="2"，它将跨越两行。
跨列：通过将 colspan 属性添加到一个单元格中，可以使该单元格横跨多列。例如，第三个单元格具有 colspan="2"，它将横跨两列。

以上面的示例为例，第一个单元格跨越两行，第三个单元格跨越两列。

通过适当设置 rowspan 和 colspan 属性，您可以根据需要创建更复杂的表格布局。请注意，在实际使用时，应根据具体需求和设计原则来创建表格，以确保最佳的用户体验。

6.3 表格的高级标签–标题标签和逻辑分区标签

在这里插入图片描述

7 表单

表单中的一些属性；

id:元素的唯一表示，不重复
name:表单项元素的名称，很重要–提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色

7.1 文本框

在这里插入图片描述

7.2 密码框

在这里插入图片描述

7.3 单选按钮

在这里插入图片描述

7.4 复选框

在这里插入图片描述

7.5 文件域

在这里插入图片描述

7.6 日期-h5中的新特性

在这里插入图片描述

7.7 隐藏域

在这里插入图片描述

7.8 下拉列表框

在这里插入图片描述

7.9 文本域

在这里插入图片描述

7.10 按钮

Submit（提交按钮）：用于将表单数据提交给服务器。用户点击该按钮后，将触发表单的提交动作。

<button type="submit">提交</button>

Reset（重置按钮）：用于将表单字段重置为默认值。用户点击该按钮后，将重置表单中的所有输入内容。

<button type="reset">重置</button>

Button（普通按钮）：用于执行自定义的 JavaScript 函数或处理特定的前端交互逻辑。

<button type="button" onclick="myFunction()">点击执行函数</button>

创建了一个按钮，并将其类型设置为 “button”。然后，在按钮内部嵌套了一个标签，其中的 src 属性指向您要使用的图像文件的路径，alt 属性为图像提供了替代文本。

<button type="button">
  <img src="path/to/image.png" alt="按钮图标">
</button>

7.11 lable标签

<label> 标签用于为表单控件（如输入框、复选框、单选按钮等）提供标签文本。使用 <label> 标签可以增加表单的可访问性，并改善用户体验。

以下是一个示例，展示了如何使用 <label> 标签：

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

在上述示例中，<label> 标签包裹着 “用户名:” 这段文本，并使用 for 属性指定了关联的表单控件的 id。相应的表单控件是一个文本输入框，它的 id 属性与 <label> 的 for 属性相匹配，以建立关联关系。

通过使用 <label> 标签，用户可以直接点击标签文本，从而聚焦到关联的表单控件，提高了用户操作的便利性。此外，屏幕阅读器和其他辅助技术也能够更好地解析和处理带有 <label> 标签的表单。

注意： <label> 标签不仅限于文本输入框，还可以与其他表单控件一起使用，比如复选框和单选按钮。使用 <label> 标签时，请确保 for 属性与关联的表单控件的 id 属性相匹配。

SHX20010129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫