html入门

值得的代码

已于 2023-07-07 23:56:06 修改

阅读量43

点赞数

文章标签： html css 前端

于 2023-07-07 23:30:37 首次发布

本文链接：https://blog.csdn.net/m0_75153133/article/details/131606032

版权

本文介绍了HTML的基本结构，包括文档类型声明、头部信息、body内容。详细讲解了标题标签（h1-h6）、段落（p）、换行（br）、文本格式标签（如strong,em,del等）、列表（ul,ol,dl）、区块元素（div,span）、图片（img）的使用，以及链接（a）的创建，包括锚点链接。此外，还涵盖了音频和视频元素，以及iframe标签用于页面嵌入。

摘要由CSDN通过智能技术生成

web前端

1.htlm大体框架

<!DOCTYPE html> <!-- 约束，声明 -->
<!-- html标签，表示html的开始，lang=“en" 表示默认显示英文 lang="zh_CN" 表示默认显示英文-->
<html lang="zh_CN">
<!-- heml标签一般分为两部分，head  body -->
<!--head 表示头部信息，一般包含三部分 ，title标签，css样式，js代码-->
<head>
    <!--meta charset="UTF-8"：表示当前页面使用utf-8 字符集  -->
    <meta charset="UTF-8">
    <!-- 表示页面标题   -->
    <title>某宝</title>
</head>
<!-- body 标签：是 html界面显示的主题内容-->
<body>
hello html
</body>
</html>

2.注释

ctrl+/

3.常见的文本标签

3.1.标题

HTML标题是通过h1~h6标签来定义，特点是级别越高标题越小。

    <h1>这是一个一级标题</h1>

    <h2>这是一个二级标题</h2>

    <h3>这是一个三级标题</h3>

    <h4>这是一个四级标题</h4>

    <h5>这是一个五级标题</h5>

    <h6>这是一个六级标题</h6>

3.2.段落

   <p>这是一个段落</p>

   <p>这是另一个段落</p>

3.3.换行

   换行标签<br/>

4.常见的文本格式

<strong>加粗</strong>

        <b>加粗</b>

        <em> 倾斜</em>

        <i>倾斜</i>

        <del>删除线</del>

        <s>删除线</s>

        <ins>下划线</ins>

        <u>下划线</u>

5.列表

5.1无序列表

   <ul>
                <li>张三</li>
                <li>李四</li>
                <li>王五</li>
   </ul>

5.2有序列表

<ol> 
          <li>张三</li>
          <li>李四</li>
          <li>王五</li>
</ol>

5.3自定义列表

<dl>   
                <dt>学生</dt>
                <dd>学号</dd>
                <dd>姓名</dd>
                <dd>性别</dd>
</dl>

6.区块

div元素：块级元素，<div>用于布局，一行只放一个<div>,大盒子，和CSS一同使用。
span元素：内联元素，<span>用于布局，一行可放多个<span>,小盒子，和CSS一同使用。

7.图片

<img src="url"  alt="替代文本">

                url：存储图像的位置，绝对路径和相对路径。 

                alt ：为图片定义一串预备的可替换的文本。

                title：描述图片。

                width(宽度)和height(高度)联合使用，设置图片大小，属性默认值单位为px

8.链接

   <a href="url" target="目标窗口的弹出方式">我要进行跳转啦~</a>

                url：目标的地址

                target:目标窗口的弹出方式

                    _self 原窗口打开

                    _blank 新窗口打开        
   

锚点链接

        目标元素的id

        a标签的href属性指向该id

        <a href="#shenghuo">生活经历</a>

        <h3 id="shenghuo">生活经历</h3>

9.音频标签

1视频
        <video src="url"></video>

                url                                 视频路径

                autoplay="autoplay"     自动播放

                muted="muted"            静音播放

                controls="controls"       显示播放控件

                loop="loop"                   循环播放

                poster                           加载等待的图片  

2音频
        <audio src="url"></audio> 

               autoplay="autoplay" 自动播放

               controls="controls" 显示播放控件

               loop="loop"         循环播放

               hidden="true"       隐藏插件

10.iframe标签:用于嵌套

<iframe src="https://www.taobao.com" width="900px" height="600px"></iframe>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul
        {
        list-style-type:none;
        margin:0;
        padding:0;
        overflow:hidden;
        }
        li
        {
        float:left;
        }
        a:link,a:visited
        {
        display:block;
        width:140px;
        font-weight:bold;
        color:#FFFFFF;
        background-color:#bebebe;
        text-align:center;
        padding:15px;
        text-decoration:none;
        text-transform:uppercase;
        }
        a:hover,a:active
        </style>
</head>
<body>
    <h1>欢迎您来到首页</h1>
<ul> 
    <li><a href="1.html">首页</a></li>
    <li><a href="2.html">列表页</a></li>
    <li><a href="3.html">详情页</a></li>
    <li><a href="4.html">登录页</a></li>
</ul>   
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
</head>
<body>
    <img src="1.jpg" >
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2</title>
</head>
<body>
    <img src="2.jpg">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3</title>
</head>
<body>
    <img src="3.jpg">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4</title>
</head>
<body>
    <img src="4.jpg">
</body>
</html>

在这里插入图片描述