首页 > 其他分享 >HTML基本类型

HTML基本类型

时间:2024-10-31 08:52:31浏览次数:6  
标签:基本 你好 ol 标签 ul HTML 类型 文本 200px

HTML基本类型

1.结构类型标签 UL ol li
    UL:是无序列表  type="none" 可以消除前面的黑点
    OL:是有序列表
    LI:可以包含流内容,如文本、图片或其他元素。
    
​
2.文本类型标签 b i s u p
    p:段落标签 只能放文本
    b:加粗标签 加粗文本
    i:斜体标签 文本斜体
    s:删除线标签 文本删除线
    u:下划线标签 文本下划线
​
3.特殊标签 img a
    1 img 图片
     src:是文档的地址
     width【宽度】:设置宽度   等比例缩放
     height【高度】:
     alt:图片发生意外(百分之90以上 是 地址错误)
     title:标题
     id[名字  唯一 ]:不会在浏览器上显示
     class[名字  不唯一 ]:
    2 a 超链接
        href:地址
        target:访问方式 _blank:打开一个新的网页访问
        锚点(使用少)
            使用: # + id名
​
4.容器标签 div span
​
​
5.CSS3的表达方式
​
​
6.开发者工具:打开方式【1:右键 2:f12】
    英文=中文
    
    
7页面的布局:
    从左至右 从上到下
    
8命名:
    不要用中文
    不要用数字开头命名
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!--    编码格式-->
    <meta charset="UTF-8">
<!--    标题-->
    <title>Title</title>
    <style>
        div
        {
            display: inline-block;
        }
    </style>
    <style>
        li
        {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <style>
         ul
        {
            display: flex;
            background-color: green;
        }
    </style>
    <style>
        #段落标签01
        {
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<!--在浏览器显示-->
<body>
<!--    图像显示
        src:地址
        ale:图片发生意外(百分之90以上 是 地址错误)
        Width:宽度
        height:高度
        title:图片标题
        id[名字  唯一 ]:不会在浏览器上显示
        class[名字  不唯一 ]:不会在浏览器显示
-->
    <img src="./图片1.png"
         alt="图片未显示"
         title="python"
         id="图片文件01"
         class="图片文件01"
         width="100"
    >
<!--    超(视频 音频 文本 文档 ) 链接 如果要访问另外一端的话(点击)
        href:地址
        target:访问方式 _blank:打开一个新的网页访问
        锚点(使用少)
            使用: # + id名
-->
<!--<div style="height: 10000px"></div>-->
​
    <a href="./图片1.png"
       id="超链接文件01"
       class="超链接文件01"
       title="点击此处进行跳转"
       target="_blank"
    >图片链接</a>
    <a href="#图片文件01"
       title="点击此处,回到顶部"
    >回到顶部</a>
<!--容器标签
    div:是往下走的   主要作用就是划分地盘
    span : 是往前走的 文本容器
-->
    <div>我是DIV1</div>
    <div>我是DIV2</div>
​
    <span>我是span1</span>
    <span>我是span2</span>
​
<!--结构类型标签
    UL:是无序列表  type="none" 可以消除前面的黑点
    OL:是有序列表
    LI:
​
-->
    <ol>
        <li>我是ol 1</li>
        <li>我是ol 2</li>
        <li>我是ol 3</li>
        <li>我是ol 4</li>
        <li>我是ol 5</li>
    </ol>
​
    <ul>
        <li>我是ul 1</li>
        <li>我是ul 2</li>
        <li>我是ul 3</li>
        <li>我是ul 4</li>
    </ul>
<!--文本标签
    p:段落标签 只能放文本
    b:加粗标签 加粗文本
    i:斜体标签 文本斜体
    s:删除线标签 文本删除线
    u:下划线标签 文本下划线
-->
    <p id="段落标签01">你好,我是HTML</p>
    <b id="文本加粗01">你好,加粗标签</b>
    <i id="文本斜体01">你好,文本斜体</i>
    <s id="文本删除线01">你好,文本删除线</s>
    <u id="文字下划线01">你好,文本下划线</u>
</body>
</html>
​

标签:基本,你好,ol,标签,ul,HTML,类型,文本,200px
From: https://blog.csdn.net/2302_79986066/article/details/143355253

相关文章