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

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

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


相关文章
|
8月前
|
移动开发 JavaScript 前端开发
Vue系列教程(05)- 基础知识快速补充(html、css、js)
Vue系列教程(05)- 基础知识快速补充(html、css、js)
123 0
|
10天前
|
人工智能 前端开发 JavaScript
HTML 【实用教程】(2024最新版)
HTML 【实用教程】(2024最新版)
16 0
|
1月前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
1月前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
|
2月前
|
区块链
html网页title旁边的小图标制作教程
html网页title旁边的小图标制作教程
|
2月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
428 1
|
2月前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
70 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
|
2月前
|
移动开发 前端开发 JavaScript
15.HTML5视频播放器制作教程
15.HTML5视频播放器制作教程
106 0
|
2月前
|
Web App开发
某教程学习笔记(一):04、HTML基础
某教程学习笔记(一):04、HTML基础
24 0
|
2月前
|
移动开发 HTML5 容器
HTML入门级别教程(持续更新)
HTML入门级别教程(持续更新)