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 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标签理解起来比较简单,经常运用就比较熟悉了,零基础也能很快掌握,小伙伴们尝试一下吧!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python是垃圾?千万不要再学Python了?

“人生苦短&#xff0c;快学Python”这句话&#xff0c;相信大家都有看到过&#xff0c;但是有细心留意过&#xff0c;就会发现Python其实在网上的评价褒贬不一&#xff0c;有好评&#xff0c;也有差评。这就会给那些不懂Python却想要学Python的一些人造成困惑&#xff0c;我到…

mongo之常用数据库操作

目录 一、准备环境 二、日常记录及执行示范 连接数据库查询版本查询表总数模糊查询(使用正则)查询文档中数据条数排序大于等于查询有哪些库时间查询不在条件内的查询复制数据更新字段名称删除数据库 四、高阶查询 五、备份迁移数据库 总结 一、准备环境 借鉴&#xff1a;…

【算法分析与设计】最大二叉树

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最…

Logic Pro:专业音乐制作软件,为你的音乐插上翅膀

Logic Pro是一款功能强大的音乐制作软件&#xff0c;专为专业音乐人和音乐爱好者设计。它提供了全面的音乐创作工具&#xff0c;包括音频录音、编辑、混音、合成以及自动化等功能&#xff0c;让你能够轻松实现音乐梦想。 Logic Pro软件获取 首先&#xff0c;Logic Pro拥有卓越…

关于网站的保姆级攻略

什么是域名&#xff1f; 域名是互联网上用于识别和定位计算机和网络服务的字符串。它提供了一个便于人们记忆和使用的名称&#xff0c;用来代替复杂的IP地址&#xff0c;可用于从客户端浏览器&#xff08;Chrome、EDGE&#xff09;访问网站。简单来说&#xff0c;域名是用户在浏…

这一次,彻底解决滚动穿透

什么是滚动穿透 如图所示&#xff0c;有一层遮罩蒙层覆盖在body上时&#xff0c;当我们滚动遮罩层&#xff0c;它下面的内容也会跟着一起滚动&#xff0c;看起来好像是上面的滚动事件穿透到下面的DOM元素上一样&#xff0c;我们称之为滚动穿透。 阻止冒泡&#xff1f; 刚开始…

Window系统禅道BUG管理系统安装配置并实现公网远程访问

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

【Linux】进程信号 --- 信号的产生 保存 捕捉递达

文章目录 信号的感知信号的结构描述 一、信号的产生1.通过键盘发送信号2.通过系统调用发送信号 二、信号的保存&#xff08;PCB内部的两张位图和一个函数指针数组&#xff09;理解三张数据结构表block pending haldler 三、通过代码编写 理解 信号的保存和递达1.信号集操作的库…

看到递归就晕?带你理解递归的本质!【基础算法精讲 09】

104 . 二叉树的最大深度 链接 : . - 力扣&#xff08;LeetCode&#xff09; 思路 : 对于题意&#xff0c;可以拆分为 : ans max(左子树的最大深度 &#xff0c; 右子树的最大深度) 1 ; 原问题 : 计算整颗树的最大深度 &#xff1b; 子问题 : 计算左右子树的最大深度 ;…

Postgresql中dblink扩展的使用

一、介绍 Postgresql数据库提供了一个dblink扩展的插件&#xff0c;能够直接在一个数据库中操作另外一个远程数据库&#xff0c;比如&#xff1a;一个数据库在服务器A上&#xff0c;另外一个数据库在服务器B上&#xff0c;我可以在A这台服务器数据库上面建立一个到B服务器数据库…

Redis是单线程还是多线程?

说Redis是单线程或者是多线程这种说法并不严谨&#xff0c;要拿版本说话&#xff0c;Redis的版本有很多3.x、4.x和6.x&#xff0c;版本不同架构也是不同的&#xff0c;不限定版本问是否单线程是不太严谨的。 版本3.x&#xff0c;最早版本&#xff0c;此时Redis是单线程的版本4…

精品ssm人事办公考勤报销管理系统

《[含文档PPT源码等]精品基于ssm办公管理系统[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#xff1a;HTML5,CSS3、JavaS…

webrtc

stun服务 阿里云服务器安全组添加端口开放 webrtc-streamer视屏流服务器搭建 - 简书

安科瑞Acrel-2000ES 储能柜能量管理系统

安科瑞戴婷 安科瑞储能能量管理系统Acrel-2000ES&#xff0c;专门针对工商业储能柜、储能集装箱研发的一款储能EMS&#xff0c; 具有完善的储能监控与管理功能,涵盖了储能系统设备(PCS、BMS、电表、消防、空调等)的详细信息,实现了数据采集、数据处理、数据存储、数据查询与分…

浅谈 Linux 网络编程 - 网络字节序

文章目录 前言核心知识关于 小端法关于 大端法网络字节序的转换 函数 前言 在进行 socket 网络编程时&#xff0c;会用到字节流的转换函数、例如 inet_pton、htons 等&#xff0c;那么为什么要用到这些函数呢&#xff0c;本篇主要就是对这部分进行介绍。 核心知识 重点需要记…

4-如何进行细分市场的分析-02 细分行业的构成和基本情况

如何快速摸清行业的构成&#xff0c;通常会看同行或自己做过的相似的行业&#xff0c;会根据不同的行业来采用不同的研究方法。对于成熟的行业和不同的行业都会有一些比较通用的研究方式。 假设我们是在分析某一个行业&#xff0c;在分析行业的时候它的本质还是市场分析&#…

Leetcode300. 最长递增子序列 -代码随想录

题目&#xff1a; 代码(首刷看解析 2024年2月29日&#xff09;&#xff1a; class Solution { public:int lengthOfLIS(vector<int>& nums) {int n nums.size();if (n < 1) return 1;vector<int> dp(n, 1);int res 0;for (int i 1; i < n; i) {for(i…

springboot+vue实现oss文件存储

前提oss准备工作 进入阿里云官网&#xff1a;阿里云oss官网 注册 搜OSS&#xff0c;点击“对象存储OSS” 第一次进入需要开通&#xff0c;直接点击立即开通&#xff0c;到右上角AccessKey管理中创建AccessKey&#xff0c;并且记住自己的accessKeyId和accessKeySecret&#…

使用 Gradle 版本目录进行依赖管理 - Android

/ 前言 / 在软件开发中&#xff0c;依赖管理是一个至关重要的方面。合理的依赖版本控制有助于确保项目的稳定性、安全性和可维护性。 Gradle版本目录&#xff08;Version Catalogs&#xff09;是 Gradle 构建工具的一个强大功能&#xff0c;它为项目提供了一种集中管理依赖…

使用Python对数据进行rsa加密

#!/usr/bin/python3 import base64 import json import jsonpath import requests from Crypto.PublicKey import RSA from Crypto.Cipher import PKCS1_v1_5 as Cipher_pkcs1_v1_5 from base64 import b64decode, b64encodedef get_public_key():"""备注&#…