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.hqwc.cn/news/498994.html

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

相关文章

【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>…
阅读更多...
MySQL 自增列解析（Auto_increment）

MySQL 自增列解析（Auto_increment）

MySQL数据库为列提供了一种自增属性&#xff0c;当列被定义为自增时。Insert语句对该列即使不提供值&#xff0c;MySQL也会自动为该列生成递增的唯一标识&#xff0c;因此这个特性广泛用于主键的自动生成。 一、自增列的用法 自增列具有自动生成序列值&#xff0c;整型&#…
阅读更多...
android开发前景2019，android高级面试framework

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

到底是公司养活了我&#xff0c;还是我养活了公司&#xff1f; 1. 很难在一家公司干到退休 在我父母那一代&#xff0c;一个上班的职工&#xff0c;往往可以在一家单位干到退休&#xff0c;名副其实的“铁饭碗”。甚至更早之前的年代&#xff0c;职工的子女还可以接父母的班&a…
阅读更多...
TCP的三次握手和四次挥手 | 查看网络状态

TCP的三次握手和四次挥手 | 查看网络状态

三次握手和四次挥手是在计算机网络中用于建立和终止TCP连接的协议。这两个过程是TCP协议的重要组成部分&#xff0c;确保数据的可靠传输。 三次握手指的是在客户端和服务器之间建立连接时的步骤。具体流程如下&#xff1a; 客户端向服务器发送一个连接请求报文段&#xff08;…
阅读更多...
前端-DOM树

前端-DOM树

dom树描述网页元素关系的一个专有名词&#xff0c;如html内包含了head、body&#xff0c;而head内包含meta、title、script等&#xff0c;body内包含div等元素&#xff1b;网页所有内容都在document里面&#xff0c;网页内容以树状形式排列&#xff0c;所以称之为dom树 dom树内…
阅读更多...
Docker 入门笔记

Docker 入门笔记

课程地址 容器技术概述 docker能做什么&#xff1a;将应用程序代码和依赖打包为一个镜像&#xff0c;作为交付介质&#xff0c;在各种环境中部署 相比于虚拟机&#xff0c;docker 只虚拟出一个隔离的程序运行环境&#xff0c;其需要则资源大大减少 容器内的程序就好像直接运…
阅读更多...
跨境电商新趋势：直播带货携手网红经济，品牌销售转化大提升

跨境电商新趋势：直播带货携手网红经济，品牌销售转化大提升

近年来&#xff0c;随着互联网技术的不断发展&#xff0c;跨境电商行业呈现出蓬勃的发展态势。在这个竞争激烈的环境中&#xff0c;直播带货作为一种新兴而高效的推广手段&#xff0c;不仅成为品牌提升知名度、吸引目标受众的重要工具&#xff0c;更是跨境电商领域中一种备受瞩…
阅读更多...
【Go语言】Go语言中的字典

【Go语言】Go语言中的字典

Go语言中的字典 字典就是存储键值对映射关系的集合&#xff0c;在Go语言中&#xff0c;需要在声明时指定键和值的类型&#xff0c;此外Go语言中的字典是个无序集合&#xff0c;底层不会按照元素添加顺序维护元素的存储顺序。 如下所示&#xff0c;Go语言中字典的简单示例&…
阅读更多...
开工大吉，接单助你！

开工大吉，接单助你！

新年的气息逐渐散去&#xff0c;打工人重返岗位&#xff0c;开启新一年的搬砖&#xff01; 虽说&#xff0c;个个都叫嚷着“这个班是非上不可不可嘛&#xff1f;&#xff01;”但不少人新年的第一条朋友圈却是“开工大吉”。好吧&#xff0c; 在生活和金钱的威逼利诱下&#…
阅读更多...
NOIP 2007 普及组初赛试题及解析

NOIP 2007 普及组初赛试题及解析

NOIP 2007 普及组初赛试题及解析 一. 单项选择题 &#xff08;共20题&#xff0c;每题1.5分&#xff0c;共计30分。每题有且仅有一个正确答案.&#xff09;。二. 问题求解&#xff08;共2题&#xff0c;每题5分&#xff0c;共计10分&#xff09;三. 阅读程序写结果&#xff08;…
阅读更多...
element ui富文本编辑器的使用(quill-editor)

element ui富文本编辑器的使用(quill-editor)

引用组件 <el-form-item label"内容"><editor v-model"obj.activity_content" :min-height"192"/> </el-form-item> 组件封装 <template><div><el-upload:action"uploadUrl":before-upload"…
阅读更多...
【教3妹学编程-算法题】标记所有下标的最早秒数 I

【教3妹学编程-算法题】标记所有下标的最早秒数 I

3妹&#xff1a;2哥2哥&#xff0c;你有没有看到上海女老师出轨男学生的瓜啊。 2哥 : 看到 了&#xff0c;真的是太毁三观了&#xff01; 3妹&#xff1a;是啊&#xff0c; 老师本是教书育人的职业&#xff0c;明确规定不能和学生谈恋爱啊&#xff0c;更何况是出轨。 2哥 : 是啊…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023