HTML基础

56 阅读1分钟

HTML的基本结构

<!DOCTYPE html> 声明html的语言版本
 <html>
    <head>
        <meta charset="utf-8" />设置网页的字符集
        <title></title>设置网页的标题
    </head>
    <body>
        
    </body>
 </html>

!DOCTYPE为 文档类型声明

!DOCTYPE 标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。

必须在开头处使用标记为所有的XHTML文档指定XHTML版本和类型,这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。

h1.h2.h3分别表示一级标题,二级标题,三级标题

三类标签分别为:
ol 表示有序标签 ul表示无序标签 dl表示定义列表(dt表示dl的标题,dd对dl进行具体描述)

<!DOCTYPE html>
<h1>世界电影票房排行榜<h1>
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>

</ol>
<h2>购物清单</h2>
<ul>
    <li>香蕉</li>
    <li>苹果</li>
</ul>
<h3>霸王别姬</h3>
<dl>
    <dt>导演:</dt>
    <dd>陈凯歌</dd>
    <dt>主演:</dt>
    <dd>张国荣</dd>
    <dt>上映日期:</dt>
    <dd>1993-01-01</dd>
</dl>`

照片标记

 基本语法格式:<img src=“图像URL”/>

举例:
<img
   src="https://p2.cri.cn/M00/6C/32/rBABDGPGFROABEmPAAAAAAAAAAA992.2870x1198.jpg"
   alt="Metal movable type"  <!--表示当照片加载不出来时显示"Metal movable type"-->
   width="600"  <!--表示照片的宽度-->
/>

input用法

    <p><input placeholder="请输入用户名"></p>
    <p><input type="range"></p>
    <p><input type="=number" min="1" max="100"></p>
    <p><input type="date" min="2018-1-1"></p>
    效果如下

屏幕截图 2023-07-26 183132.png