前端HTML学习第一天

2022023705王婷婷

已于 2023-07-07 22:06:43 修改

阅读量38

点赞数

文章标签：前端 html 学习

于 2023-07-07 18:09:54 首次发布

本文链接：https://blog.csdn.net/2201_75323989/article/details/131602186

版权

标题

 <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>
    <!-- h1-h6字大小逐渐变小 -->

段落标签

 <p>段落标签</p>段落标签
    <!-- <p>换行符 行与行之间段落标签 -->
    <br/>
    <!--换行标签 -->
    <hr/>
    <!-- <hr/>水平下划线-->

文本格式化标签

<strong></strong>
    <b></b>
    <!-- 文本格式化标签 加粗  -->
    <em></em>
    <i></i>
    <!-- 文本格式化标签 倾斜 -->
    <del ></del>
    <s></s>
    <!-- 文本格式化标签 删除线 -->
    <ins>2</ins>
    <u>1</u>
    <!-- 文本格式化标签 下划线 -->

无语义标签及图片标签

<div>
    <img src="../day1/images/cat.gif" alt="我是可爱小猫咪" 
    title="我是可爱小猫咪" border="1" width="100" height="100">
    <img src="D:\云计算\html\day1\images\cat.gif">
    <img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="">
        <!-- src指向图片位置 -->
        <!-- alt=图片地址发生错误时，用来提示的字 -->
        <!--
        title:鼠标经过时，显示的文字
        border  边框 
        width：宽度
        height：高度  -->
        <!-- 相对地址 绝对地址（本地 网站） -->
    </div>
    <!-- 无语义标签 容器 图片等啥都能放 独占一行多用于标签-->
    <span>1</span>
    <!-- 一行可存在多个 -->

视频标签

    <div id="ONE">视频标签</div>
    <video src="./images/video.mp4" controls></video>
    <video src="./images/video.mp4" autoplay muted></video>
    <video src="./images/video.mp4" controls loop poster="./images/dog.gif"></video>
 <!-- 
    controls 控件属性 
    autoplay 自动播放（现在已经自动放不了了）加上muted静音播放
    loop 循环播放
    poster 等待加载时的显示图片-->

音频标签

 <audio src="./images/music.mp3" controls muted autoplay loop></audio>

链接标签及锚链接

   <!--
        href 跳转的位置
        target: 打开方式  默认：_seif  新窗口打开： _blank

      -->
    <!-- 默认当前窗口打开 -->
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio">去mwd</a>
    <!-- 新开窗口打开 -->
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio" target="_blank">去mwd</a>
    <a href="./01.html"><img src="./images/cat.gif" alt=""></a>
    <!--点击图片跳转网页  -->
    <p>锚链接</p>
        <!-- 链接的都是本页的内容 -->
        <div id="ONE">视频标签</div>

列表

有序列表

<p>有序列表</p>
<ol type="A">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>螺蛳粉</li>
<!-- 默认1 2 3
    type可以改 -->

无序列表

<p>无序列表</p>
<ul>
    <li type="circle">小一</li>
    <!-- circle 空心圆 -->
    <li>小二</li>
    <li>小三</li>
    <li>小四</li>
    <!-- 默认实心圆 -->
</ul>

自定义列表

<h2><p>自定义列表</p></h2>
<dl>
    <dt>你喜欢的明星是</dt>
    <dd >zhansan</dd>
    <dd>lisi</dd>
    <dd>wangwu</dd>
</dl>

iframe框架（嵌套）

<h2><p>iframe框架</p></h2>
<iframe src="https://appzwzpbuab4903.h5.xiaoeknow.com/"></iframe>
<!-- 嵌套 -->
    <a href="https://www.taobao.com" target="nn">去淘宝</a>
    <iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>
    <!-- 与a链接合并使用 -->

特殊字符

<div>
    我是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法外狂徒张三&nbsp;
</div>
<!-- &nbsp 空格 -->

作业：

<!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>
    <h1>欢迎来到登录页</h1>
    <br/>
    <a href="https://www.baidu.com/" target="_blank">首页</a>
    <a href="https://www.baidu.com/" target="_blank">列表页</a>
    <a href="https://www.baidu.com/" target="_blank">详情页</a>
    <a href="https://www.baidu.com/" target="_blank">登录页</a>
    <br/>
    <img src="./images/微信图片_20230706105524.png">
</html>