Html零基础入门教程(非常详细)

news2025/2/23 17:42:25

文章目录

  • 1.认识HTML
  • 2.html 框架
  • 3.HTML常见标签
  • 4.HTML语法特征
  • 5.列表

1.认识HTML

html是超文本标记语言:
目前最新版本是html5,由w3c(万维网联盟)完成标准制定。

声明文档的类型是html5 超文本标记语言。

HTML ，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是用来描述网页的一种语言， 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

何为超文本?
文本只是单纯的显示字符串,超文本还可以显示音频,视频,图片,对内容可以有不同样式的调整,即是超文本.

发展历史:
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言,是HTML最新的修订版本，
2014年10月由W3C(制定Web技术标准的机构)制定。

html如何识别?
html超文本标记语言,在b/s架构的服务中,利用http超文本传输协议,让浏览器进行解析,http独占80端口.
http: 超文本传输协议 (对html标记语言,传输解析的标准)
https: 加密版超文本传输协议 443
浏览器: 超文本的解析器

在这里插入图片描述
在这里插入图片描述

2.html 框架

<!--  --> 表示html注释
<!--
html :  网页的骨架
css  :  网页的样式
js/jq:  网页的动作
-->

<!DOCTYPE html>  声明文档的类型是html 超文本标记语言
<html>

    <head>
        此处写入web网页的配置信息
    </head>

    <body>
        此处写入网页的主体内容
        <font color="red" size=5> 学习html </font>   #目前font标签已被淘汰
    </body>

</html>

将html文件拉到浏览器，使用的是file协议
在这里插入图片描述

使用vscode 的open with live server打开的是http协议
在这里插入图片描述

3.HTML常见标签

font,meta,br,hr,pre,h1~h6,sub,p,strong,em
sub,sup,div,span,ul,ol,dl,a,img,
table,form,input,iframe

HTML标签种类

块状元素: 独占一行,可直接设置宽高
    例如:<h1>~<h6>,<div>,<p>,<ul>,<ol>,<dl>,<li>,<table>,<form> ..
行内元素: 不能独占一行,不能直接设置宽高
    例如:<span>,<a>,<label>,<strong>,<em>
行内块状元素: 不能独占一行,可直接设置宽高
    例如:<img>,<button>,<input>

4.HTML语法特征

1.内容不区分大小写
2.标签结构分为单闭合、双闭合标签(标签成对显示)
3.一个及多个空白符,都会被理解成一个空白符
页面代码写了多个空白符
在这里插入图片描述

网站页面只显示一个空白符
在这里插入图片描述

body里面写标签，大于号小于号，页面不会解析

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

换行标签
在这里插入图片描述
在这里插入图片描述

 <!-- 分割线标签 -->   一般是做演示的时候用
  <hr />

在这里插入图片描述
在这里插入图片描述

字符实体:使用字符实体来表达实际的字符含义;

&nbsp;  使用字符实体表达多个空格
<  : &lt; 小于号  &gt; 大于号
例子:
5&lt;d     c&gt;10

在这里插入图片描述
在这里插入图片描述

<!-- 格式化预览标签 原型化输出所有内容 <pre> -->
            <pre>
            333
           +444
           ------
            777
            </pre>

在这里插入图片描述
在这里插入图片描述

如果不加<pre>标签，则显示不出效果

在这里插入图片描述

并列显示了
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <!--设置编码集，meta是单标签-->
        <meta charset="utf-8" />
        <!--设置网站标题-->
        <title>这是前端界面</title>
        <!--设置网站显示的图标-->
        <!-- http://www.bitbug.net/  制作小图标的网址-->
        <link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico"/>
        <!-- 设置搜索排名权重分配，使用keywords，content里面配置相关搜索的关键字 -->
        <meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯" />
        <!-- 设置搜索引擎抓取页面的描述信息，使用description -->
        <meta name="description" content="CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.">
        <!-- 设置几秒之后页面跳转,content 设置等待几秒刷新，或跳转，跳转的url，url必须要写协议 -->
        <!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> -->

    </head>
    <body>
        <!-- 一个及多个空白符,都会被理解成一个空白符 -->
        1111       3333     343434                   234234
        <!-- 换行标签 -->
        <br />
        3<d   c>10
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11111
        <!-- 分割线标签 -->
        <hr />
        5&lt;d     c&gt;10

        <br/>
        <!-- 格式化预览标签 原型化输出所有内容 <pre> -->
        <!-- <pre> -->
        333
        +444
        ------
        777
        <!-- </pre> -->

    </body>
</html>

常见标签：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> 常见标签 </title>
    </head>
    <body>
        <h1>一级标签</h1>    #最多6级，超过6就当做字符串显示了
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>

        <hr />
        <!-- 下角标 sub -->
        h20 => h<sub>2</sub>0

在这里插入图片描述

<br />
co2 => co<sub>2</sub>

在这里插入图片描述

<br />
<!-- 上角标 sup -->
x2 = 100  => x<sup>2</sup> = 100

在这里插入图片描述

<!-- p 是段落标签 -->
<p>这是第一个段落</p>    #一般段落我们用<div>标签，<p>标签一般塞入文章
<p>这是第二个段落</p>
<hr />

<!-- (了解)逻辑强调 带有语义话的含义 [w3c标准] 推荐-->
<strong>川普是我的偶像</strong>

在这里插入图片描述

<em>我的爱人</em>

在这里插入图片描述

        <!-- (了解)物理强调 带有语义话的含义 [非w3c标准]   w3c之前用的是b标签-->
        <b>川普是我的偶像</b>
        <i>我的爱人</i>
    </body>

</html>

块状标签，行内标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 指定移动端缩放比例，适配不同屏幕大小 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签的种类</title>
</head>
<body>
    <!--
        标签的种类:
            (1) 行内元素标签: 不能独占一行,不能设置宽和高,横向排列
                例子: span a
            (2) 块状元素标签: 独占一行,可以设置宽和高,纵向排列
                例子: div h1~h6 p
            (3) 行内块状标签: 不能独占一行,能设置宽和高,横向排列
                例子: button img input
    span 和 div 都属于无语义化标签,用来布局页面,划分页面结构
    -->

    <!-- 行内元素 -->
    <span style="width:200px;height:200px;background-color:yellowgreen;">我爱你 
        <span>奥斯托夫罗斯基</span>  
    </span>  111

设置宽和高无效，换行无效
在这里插入图片描述

我是网页的头部
我是网页的身体
我是网页的脚部

div独立成行，100%横跨整个页面
在这里插入图片描述

按我1
按我2
按我3

行内块状标签，不能独占一行,能设置宽和高,横向排列
在这里插入图片描述

</body>
</html>

5.列表

浏览器右键检查，或者按F12，打开调试窗口，点击小箭头，鼠标在网页放的位置可以找到对应代码
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ul 是无序列表 ，里面的小选项用li 包起来*** -->
    <!-- square 方块 circle 空心圆 -->
    <ul type="square">
        <li>姜子牙</li>
        <li>我和我的家乡</li>
        <li>八百</li>
        <li>唐人街探案3</li>
    </ul>

列表左边的标志类型可以设置，一般不用。原形态，默认实心圆
在这里插入图片描述
在这里插入图片描述

方块
在这里插入图片描述
在这里插入图片描述

空心圆
在这里插入图片描述
在这里插入图片描述

  1. 姜子牙
  2. 我和我的家乡
  3. 八百
  4. 唐人街探案3

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

在这里插入图片描述

起始值可以设置，一般不用
在这里插入图片描述
在这里插入图片描述

定义列表和有序列表用的都没无序列表ul用的频繁
女生曾经说过的谎言:
不要
你真坏
你是个好人
我给你介绍个漂亮的小姑娘

定义列表，文字方式
在这里插入图片描述
在这里插入图片描述

</body>
</html>

总结，html标签理解起来比较简单，经常运用就比较熟悉了，零基础也能很快掌握，小伙伴们尝试一下吧！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1478075.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微信小程序图片展示淡入淡出纯WXSS实现，无需使用消耗性能的动画引擎

微信小程序图片展示淡入淡出纯WXSS实现，无需使用消耗性能的动画引擎

进入下面小程序可以体验效果&#xff1a; 以下代码的淡入淡出是切换图片的时候动画效果显示的。需要用其他方式&#xff0c;可以基于这个wxss修改即可 原理就是&#xff0c;图片默认样式的opacity 是 0&#xff0c;通过变量改变样式的opacity即可&#xff0c;然后需要有transi…
阅读更多...
Vue纯前端实现链接生成二维码并支持下载

Vue纯前端实现链接生成二维码并支持下载

你好&#xff0c;我是小白Coding日志&#xff0c;一个热爱技术的程序员。在这里&#xff0c;我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客&#xff0c;一起在技术的世界里探索前行吧&#xff01; 在现代 Web 应用…
阅读更多...
（C语言）Sleep函数，system函数，数组练习，详解与运用

（C语言）Sleep函数，system函数，数组练习，详解与运用

一维数组详解&#xff1a;http://t.csdnimg.cn/zahZF 二维数组详解&#xff1a;http://t.csdnimg.cn/h2mLe 我们看过可一维数组与二维数组&#xff0c;现在我们来进行简单的练习。 题目&#xff1a;编写代码&#xff0c;演⽰多个字符从两端移动&#xff0c;向中间汇聚 1. …
阅读更多...
DFS之剪枝与优化

DFS之剪枝与优化

剪枝 1.优化搜索顺序&#xff1a;在大部分情况下&#xff0c;我们应该优先搜索分支较少的结点 2.排除等效冗余&#xff08;在不考虑顺序的情况下&#xff0c;尽量用组合的方式来搜索&#xff09; 3.可行性剪枝 4.最优性剪枝 5.记忆化搜索 165. 小猫爬山 - AcWing题库 import …
阅读更多...
【快速上手QT】06-检测按键检测鼠标

【快速上手QT】06-检测按键检测鼠标

今天聊聊事件&#xff0c;实际上我们在前两篇文章中就已经接触到了事件&#xff0c;分别是定时器事件和绘画事件&#xff0c;今天我们再来看看其他的事件。 我们打开QT助手&#xff0c;在QWidget的界面中找到下图中的地方。 我们可以看到很多函数的结尾都是Event&#xff0c;那…
阅读更多...
日本极致产品力|200人的小型家族企业，如何年销7亿块巧克力?

日本极致产品力|200人的小型家族企业，如何年销7亿块巧克力?

蒂罗尔巧克力是日本经典的巧克力品牌。糖果业务是其早期的主营业务&#xff0c;在主营业务下滑的情况下&#xff0c;确立新的竞争方向、打造新产品、寻找新方法&#xff0c;成就巧克力极致产品力重回增长。 竞争环境变化&#xff1a;糖果主营业务持续下滑 始于1903年的松尾株式…
阅读更多...
云原生架构技术揭秘：探索容器技术的奥秘

云原生架构技术揭秘：探索容器技术的奥秘

云原生的概念和演进都是围绕云计算的核心价值展开的&#xff0c;比如弹性、自动化、韧性&#xff0c;所以云原生所涵盖的技术领域非常丰富。 随着云计算技术的不断发展&#xff0c;云原生架构已经成为了新一代软件开发的重要趋势。本文将为您介绍云原生架构的相关技术&#xf…
阅读更多...
产品经理岗位的任职资格和职业规划

产品经理岗位的任职资格和职业规划

产品经理主要是商业银行以客户为导向的&#xff0c;具体负责组织银行某一金融产品线的创新设计、生产营销和管理服务的工作。这类人士主要负责应用实施工作&#xff0c;其中产品线由一系列的产品构成&#xff0c;公司的产品经理主要分为全过程产品创新设计专家、全过程产品生产…
阅读更多...
Decision Transformer

Decision Transformer

DT个人理解 emmm, 这里的Transformer 就和最近接触到的whisper一样，比起传统Transformer，自己还设计了针对特殊情况的tokens。比如whisper里对SOT，起始时间，语言种类等都指定了特殊tokens去做Decoder的输入和输出。 DT这里的作为输入的Tokens由RL里喜闻乐见的历史数据：…
阅读更多...
QtCreator报Failed to parse qmlimportscanner output解决

QtCreator报Failed to parse qmlimportscanner output解决

错误如下: 定位错误位置 增加错误信息打印 打印执行命令 执行打印输出的命令,成功返回JSON 但输出的JSON对象不是json格式,而是命令 增加$$成功输出JSON 使用QtCreator12编译一次后,再使用QtCreator13成功编译通过,问题解决
阅读更多...
Floyd算法、Dijkstra算法、基础拓扑排序

Floyd算法、Dijkstra算法、基础拓扑排序

Floyd算法 Dijkstra算法 基础拓扑排序
阅读更多...
TikTok运营应该使用什么IP？网络问题大全

TikTok运营应该使用什么IP？网络问题大全

想要迈过TikTok新手门槛&#xff0c;首先必须要学习的就是网络问题。很多人开始做TikTok账号或者TikTok小店时&#xff0c;都会遇到一些先前没有遇到的词汇和概念&#xff0c;比如原生IP&#xff0c;独享IP&#xff0c;甚至专线&#xff0c;那么一个IP可以做几个账号呢&#xf…
阅读更多...
编译 qsqlmysql.dll QMYSQL driver not loaded

编译 qsqlmysql.dll QMYSQL driver not loaded

Qt 连接MySQL数据库&#xff0c;没有匹配的qsqlmysql.dll, 需要我们跟进自己Mysql 以及QT版本自行编译的。异常如下图&#xff1a; 安装环境为 VS2019 Qt5.12.12&#xff08;msvc2017_64、以及源码&#xff09; 我的安装地址&#xff1a;D:\Qt\Qt5.12.12 Mysql 8.1.0 默认安…
阅读更多...
【C++从0到王者】第四十五站：图

【C++从0到王者】第四十五站：图

文章目录 一、图的概念1.图概念2.顶点与边的概念3.有向图和无向图4.完全图5.邻接顶点6.顶点的度7.路径与路径长度8.简单路径与回路9.子图10.连通图与强连通图11.生成树 二、图的存储结构1.邻接矩阵1.1 基本概念1.2 代码实现 2.邻接表1.1 基本概念1.2 代码实现 3.总结 一、图的概…
阅读更多...
如何设计一个秒杀系统？

如何设计一个秒杀系统？

秒杀是电商系统中常见的业务&#xff0c;用于吸引用户&#xff0c;刺激留存及消费所做的一种活动。经典的秒杀包含限时秒杀和限量秒杀。很多公司有专门的秒杀系统。哪个业务要做活动&#xff0c;就来对接这个系统。 系统特点 1、瞬时流量极大&#xff0c;过了秒杀时间点流量结束…
阅读更多...
【HTML】HTML基础2（一些常用标签）

【HTML】HTML基础2（一些常用标签）

目录 例子 首先是网页图标 然后是一些常用标签 插入图片 例子 <!DOCTYPE html> <html><head><link rel"icon" href"img/银河护卫队-星爵.png" type"image/x-icon"><meta charset"utf-8"><title>…
阅读更多...
[RoarCTF 2019]Easy Calc

[RoarCTF 2019]Easy Calc

这题考查的是: 字符串解析特性目录读取文件内容读取 字符串解析特性详解&#xff1a;PHP字符串解析特性 &#xff08;$GET/$POST参数绕过&#xff09;&#xff08;含例题 buuctf easycalc&#xff09;_参数解析 绕过-CSDN博客 ascii码查询表&#xff1a;ASCII 表 | 菜鸟工具 …
阅读更多...
人工智能_大模型010_Centos7.9中CPU安装ChatGLM3-6B大模型_安装使用_010---人工智能工作笔记0145

人工智能_大模型010_Centos7.9中CPU安装ChatGLM3-6B大模型_安装使用_010---人工智能工作笔记0145

从一个空的虚拟机开始安装: https://www.modelscope.cn/models/ZhipuAI/chatglm3-6b/files 可以看到这里有很多的数据文件,那么这里 这里点击模型文件就可以下载,这个就是chatglm3-6B的文件,需要点击每个文件,然后点击右边的下载,把文件都下载下来 右侧有下载按钮.点击下载可…
阅读更多...
如何使用固定公网地址远程访问本地RStudio Server【内网穿透】

如何使用固定公网地址远程访问本地RStudio Server【内网穿透】

文章目录 前言1. 安装RStudio Server2. 本地访问3. Linux 安装cpolar4. 配置RStudio server公网访问地址5. 公网远程访问RStudio6. 固定RStudio公网地址 前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE&#xff0c;并通过 Web 浏览器进行访问…
阅读更多...
操作系统系列学习——系统调用的实现

操作系统系列学习——系统调用的实现

文章目录 前言系统调用的实现 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划学习操作系统并完成6.0S81&#xff0c;加油&#xff01; 本文总结自B站【哈工大】操作系统 李治军&#xff08;全32讲&#xff09; 老师课程讲的非常好&#xff0c;感谢 【哈工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023