HTML的初入学习

最新推荐文章于 2022-04-14 13:01:31 发布
最新推荐文章于 2022-04-14 13:01:31 发布
阅读量138 收藏 2
点赞数
分类专栏： Web安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43774199/article/details/118711621
版权

目录

HTML

HTML标签

按功能类别排列 HTML 标签

基础

格式化

表单和输入

框架

图像

音频/视频

链接

列表

表格

样式和语义

元信息

编程

开始写第一个HTML

HTML

超文本标记语言（Hyper Text Markup Language），是一种标记语言（是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。）。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

HTML标签

HTML标签是HTML语言中最基本的单位，也是最重要的组成部分。

  1. 由尖括号包围的关键字，如<html>
  2. 通常是成对出现的，如<div>和</div>
  3. 标签对中的第一个标签是开始标签（开放标签），第二个是结束标签（闭合标签）
  4. 也有单独呈现的标签，如<img src="xxxx.jpg"/>等
  5. 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值，如<h1>h1</h1>和<img scr="xxxx.jpg"/>
  6. 网页的内容须在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容嵌套在<body>标签中

HTML中的标签元素大体被分为三种不同的类型：块级标签，内联（行级）标签，内联块状标签

块级标签：标签独占一行，可指定宽、高，可以自动换行。如：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

内联（行级）标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时才会换行，无法设置宽高。如：<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联块状标签：就是同时具备内联元素、块状元素的特点，不会自动换行，能够设置宽高。如：<img>、<input>

按功能类别排列 HTML 标签

基础

标签描述
<!DOCTYPE> 定义文档类型。
<html>定义 HTML 文档。
<head>定义关于文档的信息。
<title>定义文档的标题。
<body>定义文档的主体。
<h1> to <h6>定义 HTML 标题。
<p>定义段落。
<br>定义简单的折行。
<hr>定义水平线。
<!--...-->定义注释。

格式化

标签描述
<acronym>定义只取首字母的缩写。HTML5 中不支持。请使用 <abbr> 代替。
<abbr>定义缩写。
<address>定义文档作者或拥有者的联系信息。
<b>定义粗体文本。
<bdi>定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>定义文字方向。
<big>定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<blockquote>定义长的引用。
<center>定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<cite>定义引用(citation)。
<code>定义计算机代码文本。
<del>定义被删除文本。
<dfn>定义定义项目。
<em>定义强调文本。
<font>定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<i>定义斜体文本。
<ins>定义被插入文本。
<kbd>定义键盘文本。
<mark>定义有记号的文本。
<meter>定义预定义范围内的度量。
<pre>定义预格式文本。
<progress>定义任何类型的任务的进度。
<q>定义短的引用。
<rp>定义若浏览器不支持 ruby 元素显示的内容。
<rt>定义 ruby 注释的解释。
<ruby>定义 ruby 注释。
<s>定义加删除线的文本。
<samp>定义计算机代码样本。
<small>定义小号文本。
<strike>定义加删除线文本。HTML5 中不支持。请使用 <del> 或 <s> 代替。
<strong>定义语气更为强烈的强调文本。
<sup>定义上标文本。
<sub>定义下标文本。
<template>定义用作容纳页面加载时隐藏内容的容器。
<time>定义日期/时间。
<tt>定义打字机文本。HTML5 中不支持。请使用 CSS 代替。
<u>定义下划线文本。
<var>定义文本的变量部分。
<wbr>定义可能的换行符。

表单和输入

标签描述
<form>定义供用户输入的 HTML 表单。
<input>定义输入控件。
<textarea>定义多行的文本输入控件。
<button>定义按钮。
<select>定义选择列表（下拉列表）。
<optgroup>定义选择列表中相关选项的组合。
<option>定义选择列表中的选项。
<label>定义 input 元素的标注。
<fieldset>定义围绕表单中元素的边框。
<legend>定义 fieldset 元素的标题。
<isindex>定义与文档相关的可搜索索引。HTML5 中不支持。
<datalist>定义下拉列表。
<keygen>定义生成密钥。
<output>定义输出的一些类型。

框架

标签描述
<frame>定义框架集的窗口或框架。HTML5 中不支持。
<frameset>定义框架集。HTML5 中不支持。
<noframes>定义针对不支持框架的用户的替代内容。HTML5 中不支持。
<iframe>定义内联框架。

图像

标签描述
<img>定义图像。
<map>定义图像映射。
<area>定义图像地图内部的区域。
<canvas>定义图形。
<figcaption>定义 figure 元素的标题。
<figure>定义媒介内容的分组，以及它们的标题。
<svg>定义 SVG 图形的容器。

音频/视频

标签描述
<audio>定义声音内容。
<source>定义媒介源。
<track>定义用在媒体播放器中的文本轨道。
<video>定义视频。

链接

标签描述
<a>定义锚。
<link>定义文档与外部资源的关系。
<nav>定义导航链接。

列表

标签描述
<ul>定义无序列表。
<ol>定义有序列表。
<li>定义列表的项目。
<dir>定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
<dd>定义定义列表中项目的描述。
<menu>定义命令的菜单/列表。
<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。
<command>定义命令按钮。

表格

标签描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容（脚注）。
<col>定义表格中一个或多个列的属性值。
<colgroup>定义表格中供格式化的列组。

样式和语义

标签描述
<style>定义文档的样式信息。
<div>定义文档中的节。
<span>定义文档中的节。
<header>定义 section 或 page 的页眉。
<footer>定义 section 或 page 的页脚。
<main>定义文档的主要内容。
<section>定义 section。
<article>定义文章。
<aside>定义页面内容之外的内容。
<details>定义元素的细节。
<dialog>定义对话框或窗口。
<summary>为 <details> 元素定义可见的标题。
<data>添加给定内容的机器可读翻译。

元信息

标签描述
<head>定义关于文档的信息。
<meta>定义关于 HTML 文档的元信息。
<base>定义页面中所有链接的默认地址或默认目标。
<basefont>定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。

编程

标签描述
<script>定义客户端脚本。
<noscript>定义针对不支持客户端脚本的用户的替代内容。
<applet>定义嵌入的 applet。HTML5 中不支持。请使用 <embed> 和 <object> 代替。
<embed>为外部应用程序（非 HTML）定义容器。
<object>定义嵌入的对象。
<param>定义对象的参数。

开始写第一个HTML

通过输入！然后Tab键补全可以快速得到一个HTML模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<!DOCTYPE html>
<!-- 声明为HTML5文档 -->
<html lang="en">
<!-- 定义HTML文档，表示该页面是HTML语言，en为英文网站，zh为中文网站 -->
<head>
<!-- 定义文档的内容 -->
    <meta charset="UTF-8">
    <!-- 定义网页编码格式为utf-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到前端课程</title>
    <!-- 描述了文档的标题 -->
</head>
<body>
    <!--这是一个注释，按Ctrl+/添加注释和取消注释-->
    <h1>这是H1标签</h1>
    <h2>这是H2标签</h2>
    <!-- 定义一个大标题由h1~h6依次变小 -->
    <hr>
    <!-- 在HTML页面中创建水平线 -->
    <h3>h3</h3>
    <br>
    <!-- 在HTML页面中起到换行作用 -->
    <h4>h4</h4>
    <p>这是第一个段落</p>
    <p>这是第二个段落</p>
    <!-- 定义一个段落 -->
    <span style="font-size: large;">这是一个span标签</span>
    <!-- 能够对行内的元素进行分组或识别 -->
    <span>这是第二个span标签</span>
    <a href="https://www.baidu.com/" target="_blank">www.baidu.com</a>
    <!-- 一个超链接，在写网址的时候一定要写全，不能少https://，_blank指的是在新的页面打开链接 -->
    <img src="D:\我的收藏\壁纸\1.jpg" alt="这是一个logo" width="200" height="100">
    <!-- 在网页中嵌入一个图像 -->
    <font size="6">这是一个font标签</font>
    <!-- 规定文本的字体、字体尺寸、字体颜色。不建议使用 -->
    <strong>加粗</strong>
    <b>加粗</b>
    <em>斜体</em>
    <i>斜体</i>
    <del>删除线</del>
    <ins>插入字</ins>
    <sub>下标字</sub>
    <sup>上标字</sup>
    <small>小号字</small>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <!-- 无序排序 -->
    <ul style="list-style: none;">
        <!-- 去掉前边的圆点 -->
        <li style="float: left;margin-right: 30px;">中国</li>
        <!-- 不换行排序 -->
        <li>北京</li>
    </ul>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ol>
    <!-- 有序排序 -->
    <style>
        body {background-color: cyan;}
    </style>
    <!-- 改变网页背景颜色 -->
    <div style="width: 100px;height: 100px;border: 5px dashed black;border-radius: 50px;">
        <p>测试</p>        
        <a href="https://www.csdn.com">csdn欢迎你的加入</a>
    </div>
    <!-- div是块级元素，他可用于组合其他HTML元素的容器 -->
    <form action="./1.php" method="get">
        用户名：<input type="text" name="username"></input>
        密码：<input type="password" name="password"></input>
        邮箱：<input type="email" name="email"></input>
        男:<input type="radio" name="gender" value="male"></input>
        女:<input type="radio" name="gender" value="female"></input>
        <input type="submit" value="点击提交">
    </form>
    <!-- 是一个包含表单元素的区域 -->
    <!-- get是明文传参，post是密文传参 -->
</body>
</html>

参考：

https://www.w3school.com.cn/tags/html_ref_byfunc.asp

精雕细琢方成瑜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML 表单和输入
qq_34028001的博客
02-02 557
文章目录HTML 表单和输入一、 HTML 表单二、HTML 表单-输入元素1. 文本域(Text Fields)2. 密码字段3. 单选按钮（radio buttons）4. 复选框（checkboxes）5. 提交按钮（submit button）6. 简单的下拉列表7. 预选下拉列表8. 创建按钮9. 从表单发送电子邮件10. datalist11.output12. keygen HTML...
HTML基础（新手入门教程）
华夏天骄
05-17 5115
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
HTML input type 输入类型
GarfieldEr007的专栏
11-26 3604
本章描述 元素的输入类型。 输入类型：text  定义供文本输入的单行输入字段： 实例 First name: Last name: 亲自试一试 以上 HTML 代码在浏览器中看上去是这样的： First name:   Last name: 输入类型：password  定义密码字段： 实例 Use
HTML入门：输入方式
ekxavol的博客
03-12 479
HTML用表单(form)来处理用户输入，基本语法为： <form> 请输入账户：<input type="text" name="account" value="默认值"><br> </form> 通过改变type类型，可以改变输入方式。如： type=“password”，表示以密码形式输入，文本会以星号键形式显示。 type=“checkbo...
HTML新手入门（一）
Mr_MT1998的博客
06-01 812
HTML新手入门——html初步(一)环境配置(二)创建文档简介(三)基本知识叙述1.常用标签a.块级标签b.行内标签2.块级元素与行内元素3.实体元素（符号）4.路径的描述a.绝对路径b.相对路径(四) 参考实例1.糖醋排骨2.楚乔传   缘于小编在校参加学校的集中实训，就将学习过程中知识点进行一遍梳理，希望对大家有所帮助。 (一)环境配置   我先介绍一下我目前正在用的软件，visual studio code （简称VScode），这个软件支持扩展功能，以及能满足多种程序语言的日常工作和学习。 下载
HTML初步学习
qq_62292176的博客
04-14 531
HTML 超文本标记语言 1.结构代码 <!DOCTYPE html>//文档申明 <html> <head>//页头 <meta charset="UTF-8"> <title>网页标题</title> </head> <body>//页身 网页显示内容 </body> </html> <!--文档声
HTML基础学习
qq_37235798的博客
09-06 362
HTML的基础属性介绍。 什么是网页？      一个html文件，就是一个网页 什么是网站？      把所有的网站资源文件（html，css，js，图片，视频等）整合到一起的一个文件夹 什么是html？      HTML指的是超文本标记语言（Hyper Text Markup Language） 什么是XHTML?      XHTML指可扩展超文本标记语言（标识语言）（Ex...
适合初入Web前端的新手参考研究学习使用Html模板源码.zip
05-19
适合初入Web前端的新手参考研究学习使用Html模板源码，内含36个网站源代码，大多有交互特效，每个均可运行。
尚硅谷前端HTML+CSS学习笔记
07-15
尚硅谷前端HTML+CSS学习笔记 1. 计算机基础知识：计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆功能。计算机由硬件和软件组成，硬件是看得见摸得着的物理...
HTML学习
05-05
HTML起源于1990年代初，由欧洲核子研究中心的蒂姆·伯纳斯-李（Tim Berners-Lee）发明，目的是为了促进科研信息的共享。随着时间的推移，HTML经历了多个版本的迭代，从HTML 2.0到最新的HTML5，每次更新都引入了更多...
前端第一阶段学习-HTML
08-08
本文将深入探讨HTML的一些核心概念和常用标签，帮助初入前端的小伙伴们建立起扎实的基础。 首先，让我们从创建第一个网页开始。一个简单的HTML文件通常由`<!DOCTYPE html>`声明开始，接着是`<html>`标签，它定义了...
初窥HTML&CSS.md
06-04
html 与 css 的学习笔记，简单的说明了 html 和 css 的用法，适合快速入门。文件为 markdown 文件，建议使用 typora
前端初学者必看----html中几种常用输入框
热门推荐
clepsidra的博客
09-16 1万+
一般用户名 手机号等文本输入类 可用 input type=“text” 注册密码 支付密码等重要的需要安全性保障的 用 input type=“password” 需要重置性功能的按钮时 可以用 input type=“reset” value=“重新输入” 带有单选框功能的 选项功能 input type=“redio” name=“ral”(再有多个选框时 name属性需要输入相同的名词...
html的入门——从标签开始（1）
03-12 240
概念介绍： 标签：标签的作用就像是容器。它们告诉你其实标签和结束标签之前的内容的结构信息。 元素：一个元素包括起始标签，结束标签以及其中的内容。 空元素：有一小部分元素，其起始标签和结束标签之间不含有任何文字，这些元素被称为空元素。 一个空元素通常只含有一个标签，在空元素的闭合尖括号前，经常是一个空格和一个斜线的形式，如<br />换行符、<hr />插入...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
Matlab实现斑点鬣狗优化算法SHO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
HTML基础认知与标签学习
在HTML初体验阶段，我们将学习HTML的基本语法规范，比如如何正确地使用标签来构建网页结构。HTML标签是HTML的核心元素，它们以尖括号包围，如`<h1>`表示一级标题，`<p>`代表段落。通过学习这些标签，我们可以创建出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值