Html零基础入门教程(非常详细)-阿里云开发者社区

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

2024-04-29 19

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>