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

文章目录

  • 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 inputspan 和 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.mzph.cn/news/709349.shtml

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

相关文章

LNMP架构（搭建论坛+博客）

LNMP架构（搭建论坛+博客）

目录 一、LNMP架构概述 1、LNMP架构的概念 2、LNMP架构的优点 二、编译安装nginx软件 1、准备工作 1.1 关闭防火墙 1.2 安装依赖包 1.3 创建运行nginx用户 1.4 压缩包解压 2、编译与安装 3、添加nginx自启动文件 三、编译安装mysql软件 1、准备工作 1.1 安装mysq…
阅读更多...
利用R语言进行聚类分析实战（数据+代码+可视化+详细分析）

利用R语言进行聚类分析实战（数据+代码+可视化+详细分析）

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…
阅读更多...
width:100%和width:auto有啥区别

width:100%和width:auto有啥区别

项目中使用了with属性&#xff0c;突然好奇auto 和 100% 的区别&#xff0c;特地搜索实践总结了一下观点 一、 width属性介绍二、 代码带入三、 分析比较四、 总结 一、 width属性介绍 width 属性用于设置元素的宽度。width 默认设置内容区域的宽度&#xff0c;但如果 box-siz…
阅读更多...
Vue3切换路由白屏刷新后才显示页面内容

Vue3切换路由白屏刷新后才显示页面内容

1.首先检查页面路由以及页面路径配置是否配置错误。 在router-view 中给路由添加key标识。 &#xff01;&#xff01;注意&#xff1a;有使用layout封装布局的&#xff0c;是在layout下的主页面中的 router-view 添加标识&#xff0c;不是在src根目录下main.vue中修改&#xf…
阅读更多...
基于vue-office实现docx、xlsx、pdf文件的在线预览

基于vue-office实现docx、xlsx、pdf文件的在线预览

概述 在做项目的时候会遇到docx、xlsx、pdf等文件的在线预览需求&#xff0c;实现此需求可以有多种解决方式&#xff0c;本文基于vue-office实现纯前端的文件预览。 效果 如下图&#xff0c;分别为docx、xlsx、pdf三种类型的文件在线加载后的效果。你也可以访问官方预览网址…
阅读更多...
sawForceDimensionSDK安装，sigma7+ros

sawForceDimensionSDK安装，sigma7+ros

force dimension的sdk中没有关于ros&#xff0c;借助开源的sawForceDimensionSDK实现对于数据的封装和可视化&#xff0c;方便后续使用 链接&#xff1a; GitHub - jhu-saw/sawForceDimensionSDK 具体步骤&#xff1a; 安装qt和ros&#xff0c;官网下载Force Dimension SDK …
阅读更多...
小马识途营销顾问解析舆情处置方法

小马识途营销顾问解析舆情处置方法

大部分知名企业都逃不过负面舆情这一关&#xff0c;有负面不一定企业就不规范&#xff0c;产品就不好。其实&#xff0c;企业做大了&#xff0c;难以做到尽善尽美&#xff0c;有时候是同行不正当竞争造成的…… 总之&#xff0c;网络平台上面的负面舆情信息的影响不可小视&…
阅读更多...
什么是回表、索引覆盖、索引下推【重点】

什么是回表、索引覆盖、索引下推【重点】

参考链接 【1】https://xiaolincoding.com/mysql/index/index_interview.html#%E6%8C%89%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%88%86%E7%B1%BB 【2】https://www.toutiao.com/article/7095749260137726476/?wid1709192807222 【3】https://zhuanlan.zhihu.com/p/401198674…
阅读更多...
算法沉淀——动态规划之两个数组的 dp（下）（leetcode真题剖析）

算法沉淀——动态规划之两个数组的 dp（下）（leetcode真题剖析）

算法沉淀——动态规划之两个数组的 dp 01.正则表达式匹配02.交错字符串03.两个字符串的最小ASCII删除和04.最长重复子数组 01.正则表达式匹配 题目链接&#xff1a;https://leetcode.cn/problems/regular-expression-matching/ 给你一个字符串 s 和一个字符规律 p&#xff0c…
阅读更多...
产品经理岗位的任职资格和职业规划

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

产品经理主要是商业银行以客户为导向的&#xff0c;具体负责组织银行某一金融产品线的创新设计、生产营销和管理服务的工作。这类人士主要负责应用实施工作&#xff0c;其中产品线由一系列的产品构成&#xff0c;公司的产品经理主要分为全过程产品创新设计专家、全过程产品生产…
阅读更多...
武汉灰京文化：跨平台和云游戏，手游行业的未来发展趋势

武汉灰京文化：跨平台和云游戏，手游行业的未来发展趋势

随着科技的不断进步和智能设备的普及&#xff0c;手游行业正迎来新的发展机遇。武汉灰京文化认为&#xff0c;在这个过程中&#xff0c;跨平台游戏和云游戏作为两大关键技术将推动手游行业迈向更加丰富、便捷和多元化的发展。 跨平台游戏的出现将为玩家带来全新的游戏体验。在…
阅读更多...
java常用环境docker安装

java常用环境docker安装

配置目录 rocketmqredismysql不配置binlog配置binlog Nacoszookeeper 本文为精简安装&#xff0c;部分不带容器卷映射&#xff0c;仅供以学习使用。 rocketmq nameservice sudo docker run -d \ --privilegedtrue \ --name rmqnamesrv \ -p 9876:9876 \ -e "MAX_HEAP_SI…
阅读更多...
visio、ppt、office等另存图片，如何设置更清晰

visio、ppt、office等另存图片，如何设置更清晰

visio、ppt、office等另存图片&#xff0c;如何设置更清晰 选中要另存为的部分——文件——另存为——选好位置——格式选jpg——保存——按下图设置&#xff1a;质量100%&#xff0c;分辨率选打印机&#xff0c;大小选屏幕——确定
阅读更多...
android开发前景2019，android高级面试framework

android开发前景2019，android高级面试framework

到底是公司养活了我&#xff0c;还是我养活了公司&#xff1f; 1. 很难在一家公司干到退休 在我父母那一代&#xff0c;一个上班的职工&#xff0c;往往可以在一家单位干到退休&#xff0c;名副其实的“铁饭碗”。甚至更早之前的年代&#xff0c;职工的子女还可以接父母的班&a…
阅读更多...
计算机专业大学四年应该如何规划（Java方向）

计算机专业大学四年应该如何规划（Java方向）

计算机专业的学生&#xff0c;如何在大学四年内提高自己的竞争力&#xff0c;毕业之后直接进大厂工作&#xff1f; 以下将从大学四年计算机专业的学习规划、课程设置、能力提升、参考书籍等方面&#xff0c;为同学们提供一些建议和指导。 大一&#xff1a; 主攻技能学习并且达…
阅读更多...
数据结构之数组

数据结构之数组

一、定义 数组&#xff08;Array&#xff09;是一种用连续的内存空间存储相同数据类型数据的线性数据结构。 二、内存结构 1.创建数组 我们创建一个数组 int[] array {22,33,88,66,55,25} &#xff0c;在内存结构如下图所示&#xff1a; 首先创建了array数组&#xff0c;会…
阅读更多...
Node.js基础---npm与包

Node.js基础---npm与包

包 概念&#xff1a;Node.js 中的第三方模块又叫做包 来源&#xff1a;由第三方个人或团队开发出来的&#xff0c;免费使用&#xff0c;且为开源 为什么需要&#xff1a;Node.js的内置模块只有一些底层API&#xff0c;开发效率低 包是基于内置模块封装出来的&#xff0c;提供更…
阅读更多...
python实现跨进程（跨py文件）通信01

python实现跨进程（跨py文件）通信01

前言 项目中总会遇到数据需要跨进程通信的问题&#xff0c;今天就给大家带来一套简单的跨进程通信代码。代码分为服务端与客户端两部分。 一、server端 import multiprocessing import timedef do_socket(conn, addr, ):try:while True:if conn.poll(1) False:time.sleep(0…
阅读更多...
ZCANPRO基础操作流程

ZCANPRO基础操作流程

硬件准备 测试单关节需要准备如下工具&#xff1a; 电源&#xff1a; 推荐使用20-27V直流电源。关节峰值功率为额定功率的三倍。 CAN卡&#xff1a; 推荐使用周立功USB转CANFD卡&#xff0c;我们的单关节测试软件适配了该型号CAN卡驱动。 WHJ系列关节模组 WHJ系列关节模组包含…
阅读更多...
2024最新大厂Android面试真题解析，三年老Android经验面经

2024最新大厂Android面试真题解析，三年老Android经验面经

前言 不知道大家面试的时候&#xff0c;有没有遇到这种情况&#xff0c;面试工资谈的是10K&#xff0c;最后干着40K的活&#xff01;说着冠冕堂皇&#xff0c;提升大家能力的话&#xff0c;做着死命压榨员工&#xff0c;996成了程序员心里的魔咒&#xff01; 初级安卓开发工程…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023