HTML5

happly girl

于 2024-03-03 16:56:18 发布

阅读量353

点赞数 9

分类专栏：前端文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2201_75648436/article/details/136434054

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<h1>到<h6>一到六级标题

<br>换行

<hr color="red" width="500px" size="10px" align="left">水平线

<img>图片

<a>文本标签

<ol>+<li>有序列表

<ul>+<li>无序列表

<!DOCTYPE html>
<html lang="en">
<!--当前语言是英语-->

<head>
    <meta charset="UTF-8"><!--编码格式是utf-8-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>welcome</title>
</head>

<body>
    <h1 align="left">一级标题</h1>
    <h2 align="right">二级标题</h2>
    <h3 align="center">三级标题</h3>
    <!--<h1属性>，align分布位置，左右中-->
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--h$*6一键生成h1到h6的标题-->

    <p>我是一个段落</p>
    <!--<p> 段落-->
    <p>你好<br />我好开心</p>
    <!--<br>换行，/加不加都行-->
    <hr color="red" width="500px" size="10px" align="left">
    <!--<hr>水平线，width是长度，size是高度，
        align默认居中，只有左右，px是像素-->

    <img src="1 (1).jpg" alt="柯南" width="300px" title="柯南">
    <!-- <img>图片
        图片和源码必须在同一个文件夹下，
        src后面输入图片的路径名称,直接访问，相对路径
        alt:规定图像的代替文本，当图片无法显示将显示该文本
        width:规定宽度
        height：规定高度
        一般只规定宽度
        title:鼠标悬停在图片上的提示
    -->

    <img src="./p/1 (2).jpeg" alt="" width="400px">
    <!--两者相对关系，两者在同一路径下可以直接访问
    子级关系：/
    父级关系：../
    同级关系：./（可以省略）-->

    <!--网络地址-->

    <img src="D:\柯南\1 (2).jpeg" alt="" width="300px">
    <!--绝对路径-->

    <!--超链接：<a>
    超链接可以是一个字，一个词，一组词，一幅图，
    我们可以点击这些内容跳转到新的文档或者当前文档中的某个部分    
    
    href属性描述链接的地址，
    默认情况下，链接：
    一个未被访问过的链接显示蓝色字体并带有下划线
    访问过的链接显示紫色并带有下划线
    点击链接时，链接显示为红色并带有下划线
    -->
    <a href="https://www.itbaizhan.com/">百战程序员</a>
    
    <!--文本标签
    <em> 定义着重文字
    <b> 定义粗体文本
    <i>定义斜体
    <strong>定义加重语气
    <del>定义删除字
    <span>元素没有特定的含义
        段落代表一段文本，文本标签一般表示文本词汇-->
     <em>em快乐</em> 
     <b>b快乐</b>  
     <i>i快乐</i>
     <strong>strong快乐</strong>
     <span>span快乐</span>
     <del>del快乐</del>

     <!--有序列表 <ol>包含<li>
        列表可嵌套-->
    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>蔬菜
            <ol>
                <li>茄子</li>
                <li>西红柿</li>
            </ol>
        </li>
    </ol>
    <!--<ol>属性type
        1:列表用数字（1，2，3）标号
        a:小写字母
        A:大写字母
        i:小写罗马数字
        I：大写罗马数字-->

    <!--无序列表 <ul>+<li>
        <ul>type属性，
            disc默认实心圆
            circle空心圆
            square小方块
            none不显示    
    -->
    <ul type="square">
        <li>青菜</li>
        <li>菠菜</li>
        <li>黄瓜</li>
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
            </ul>
        </li>
    </ul>
    <!--ul>li*5-->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>