HTML学习

已于 2023-10-15 11:54:20 修改
阅读量146 收藏 1
点赞数
文章标签： html 学习 前端
于 2023-10-15 11:45:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaowenzheng/article/details/133839710
版权

一、排版标签

<head></head>双标签内部是文章的开头，<title></title>双标签则是网页标题

<body></body>双标签内部是文章的主体

h1至h6是标题标签，字体默认加粗，字号逐渐减小

hr是分割线标签，br是换行标签

p是段落标签

加粗bstrong
下划线uins
倾斜iem
删除线sdel
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是网页的标题</title>  <!-- 标题标签 -->
</head>
<body>
    <h1>这是文章的标题</h1>
    <h5>这是文章的副标题</h5>
    <hr>
    <p>这是段落一</p>
    <p>这是段落二前半 <br> 这是段落二后半 </p>
    <p> <b>加粗</b> <br> <u>下划线</u> <br> <i>倾斜</i> <br> <s>删除线</s> </p>
    <p> <strong>加粗</strong> <br> <ins>下划线</ins> <br> <em>倾斜</em> <br> <del>删除线</del> </p>  <!-- 使用单词有突出重要性的强调语境的语义 -->
</body>
</html>

以上代码运行结果是

二、媒体标签

1、图片标签

<!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>
    <img src="mmexport1695732942018.jpg" alt="一张照片" title="这是title标签,当鼠标悬停时出现的文本" width="300" height="200">
    <!-- src是引入文本; 当src无法加载时会显示alt; alt是替换文本 -->
    <!-- title可用于所有标签 -->
    <!-- 当只使用width或hight时，图片会等比例缩放 -->
</body>
</html>

2、路径查找

1)绝对路径

通常从盘开始，但很少使用

<!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>
    <img src="C:\User\Desktop\桌面\896312F3BC17E5B8B734E3E47086847D.jpg" alt="" width="1000">
</body>
</html>

2）、相对路径

（1）、同级目录

直接查找目标文件或./目标文件

<!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>
    <img src="微信图片_20230926210222.jpg" alt="">
    <img src="./微信图片_20230926210222.jpg" alt=""> 
</body>
</html>

（2）、下级目录

先找到下级目录再找目标文件

<!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>
    <img src="./图片/微信图片_20230926210217.jpg" alt="">
    <img src="图片/微信图片_20230926210151.jpg" alt="">
    <!-- 先写文件夹/，再找出目标文件 -->
</body>
</html>
（3）、上级目录

先用../来返回上一级目录

<!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>
    <img src="../图片/微信图片_20230926210217.jpg" alt="" width="600">
</body>
</html>

3、音频标签

<!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>
    <audio src="./sweets parade - 花澤香菜 (はなざわ かな).ogg" controls loop ></audio>
<!-- controls/显示播放的控件  autoplay/自动播放（部分浏览器不支持）  loop/循环播放 -->
<!-- 目前音频只支持 MP3 mav ogg -->
</body>
</html>

4、视频标签

<!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>
    <video src="./MV/Vicetone-Cozi Zuehlsdorff-Nevada(高清).mp4" controls autoplay muted loop></video>
    <!-- Chromium内核中autoplay需配合muted使用 -->
    <!-- 视频标签目前支持 mp4 webm ogg -->
</body>
</html>

三、链接标签

<!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>
    <!-- target标签可以确定网页的打开形式 _self默认值(当前窗口跳转) _blank(新窗口跳转，保留原界面) -->
    <a href="https://www.vmall.com/index.html" target="_blank">跳到华为商城</a>
    <br>
    <a href="./图片标签.html" target="_self">跳转到图片标签</a>
    <!-- 开发网站初期，在不知道跳转地址时，href的值用#（空链接）替代 -->
    <br>
    <a href="#">空链接</a>
</body>
</html>

四、列表标签

1、无序列表

用ul标签来引出列表

<!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>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
    <!-- ul中只能允许包含li标签，li标签里可以包含任意内容 -->
</body>
</html>

2、有序列表

用ol标签来引出列表

<!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>
    <ol>
        <li>A:100</li>
        <li>B:80</li>
    </ol>
    <!-- ol中只能允许包含li标签，li标签里可以包含任意内容 -->
</body>
</html>

3、自定义列表

用dl引出列表

<!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>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <!-- dd前会默认缩进效果 -->
        <!-- dl中只允许包含dt和dd -->
        <!-- dt和dd可以包含任意内容 -->
    </dl>
</body>
</html>

五、表格标签

1、表格

<!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>
    <!-- table 表格整体，用于包含多个tr -->
    <!-- tr 表格每行，用于包含多个td -->
    <!-- td 表格单元格，用于包含内容 -->
    <table border="5" width="500" height="500">
        <!-- border 用于控制边框宽度 width用于控制表格宽度 height 用于控制表格高度-->
        <!-- 实际开发中，表格样式一般用CSS调整表格样式 -->
        <tr>
            <td>姓名</td> <td>成绩</td> <td>评估</td> 
        </tr>
        <tr>
            <td>男</td> <td>100</td> <td>好</td>
        </tr>
        <tr>
            <td>女</td> <td>100</td> <td>好</td>
        </tr>
        <tr>
            <td>总结</td> <td>100</td> <td>好</td>
        </tr>
    </table>
</body>
</html>

2、表格标题和表头

<!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>
    <table border="3">
        <caption><b>成绩单</b></caption>
        <!-- caption 表格标题 -->
        <thead>        
            <tr>
            <th>姓名</th><th>成绩</th><th>评语</th>
            <!-- th 表格单元格，通常用于第一行，默认加粗并居中 -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td><td>100.00000</td><td> </td>
            </tr>
        </tbody>
        <tfoot>
             
        </tfoot>
    </table>
</body>
</html>
<!-- 利用thead、tbody、tfoot对阅读没影响，只影响浏览器的编译效率 -->

3、合并单元格

<!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>
    <table border="3">
    <thead>
        <tr>
            <td><b>姓名</b></td> <td><b>成绩</b></td> <td><b>评估</b></td> 
        </tr>
    </thead>
     <tbody>
        <tr>
            <td>男</td> <td rowspan="2">100</td> <td>好</td>
            <!-- rowspan\跨行合并，合并纵向单元格,数字表示合并单元格个数-->
        </tr>
        <tr>
            <td>女</td> <td>好</td>
        </tr>
     </tbody>
    <tfoot>
        <tr>
            <td>总结</td> <td colspan="2">好</td>
            <!-- colspan\跨列合并，合并横向单元格，述职表示合并单元格个数 -->
        </tr>
    </tfoot>
    </table>
</body>
</html>
<!-- 合并单元格妖遵循左上原则，保留左方和上方，删除其对应位置 -->
<!-- 只有同一个结构标签中的单元格才能合并，不能跨标签合并（不能跨：thead、tbody、tfoot） -->

六、表单标签

1、input基本使用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input</title>
</head>
<body>
    文本框：<input type="text">
    <br>
    密码框：<input type="password">
    <br>
    单选框：<input type="radio">
    <br>
    多选框：<input type="checkbox">
    <br>
    上传文件：<input type="file">
</body>

2、input占位符

<!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>
    <input type="text" placeholder="请输入用户名">
    <br>
    <input type="password" placeholder="请输入密码">
    <!-- placeholder中的内容会出现在输入框中作为提示 -->
</body>
</html>

3、input单选、多选框默认选中

<!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>
    性别：<input type="radio" name="性别" id="">男 <input type="radio" name="性别" id="" checked>女
    <input type="checkbox" checked>
    <!-- radio默认无单选功能，需要利用name分组来完成单选，同一个name组别下只能选择一项 -->
    <!-- checked作为默认选中，例如该代码中默认选择 女  -->
</body>
</html>

4、上传多个文件

<!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>
    <input type="file" multiple >
    <!-- multiple标签支持上传多个文件 -->
</body>
</html>

5、按钮input

<!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>
    <form action="">
    用户名：<input type="text" placeholder="用户名">
    <br>
    密码：<input type="password" placeholder="密码">
    <br>
    <input type="submit" value="提交按钮">   <!-- 提交按钮，将数据提交至后台服务器 -->
    <input type="reset" value="重置按钮">    <!-- 重置按钮 -->
    <input type="button" value="普通按钮">   <!-- 普通按钮 -->
    <!-- value属性是用来输入按钮中文字 -->
    </form>
</body>
</html>

6、按钮button

<!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>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮，利用js添加功能</button>
</body>
</html>

7、下拉菜单

<!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>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
        <!-- 加selected前默认选择第一项，加selected后默认选中selected -->
    </select>
</body>
</html>

 8、文本域标签

<!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>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <!-- cols控制宽度，rows控制行数，实际情况下大多数用CSS来控制 -->
</body>
</html>

9、label标签

<!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>
    性别：<input type="radio" name="性别" id="nan"><label for="nan">男</label>
         <label><input type="radio" name="性别">女</label> <!-- 使用此方法时需要将label中的for删除 -->
</body>
</html>

小正的学习日记
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML常用标签之文本格式化、语义化、占位符
weixin_45604020的博客
06-19 819
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这就要用到文本格式化标签。
HTML空格占位符汇总
热门推荐
Alone_in_的博客
08-30 4万+
1.&nbsp;（常用） 不换行空格，全称No-Break Space，它是按下space键产生的空格。空格不会累加（只显示一个）。使用html表示才会累加，该空格占据宽度受字体影响。 2.&ensp; 半角空格，全称En Space，en为em宽度的一半（em类似于px受设置不同为20px=1em或其他自定义大小）。占据0.5个中文宽度，不受字体影响。 3、&em...
如何在HTML文档中显示空格
wuhen8的专栏
11-29 1万+
一、使用全角空格 全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。 二、使用空格的替代符号 替代符号就是在需要显示空格的地方加入替代符号，这些符号会被浏览器解释为空格显示。 空格的替代符号有以下几种： 名称 编号 描述     不断行的空白（1个字符宽度） &en
html 中文占位符
836811384
06-07 627
在html 中 &amp;#12288;代表一个空白占位符。
html 空白汉字占位符
pirenyu2701的博客
01-03 722
相比平时的空格（ ）， 拥有不间断（non-breaking）特性。即连续的 会在同一行内显示。== == == no-break space （普通的英文半角空格但不换行）即使有100个连续的nbsp，浏览器也不会把它们拆成两行。== 四分之一em空格 （四分之一中文宽度）==   == en空格 （半个中文宽度）==   == em空格 （一个中文宽度）== 普通的英文半角空格。
html 学习教程.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML 学习记录.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
css、html 学习.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
Html 学习与实践项目.zip
最新发布
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML 学习和项目文件.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html占位符小于号,常用的一些占位符
weixin_35157304的博客
06-03 827
常用的一些占位符：%@：字符串占位符%d:整型%ld:长整型%f:浮点型%c:char类型%%：%的占位符尽管有那么多的占位符，但是好像没有发现BOOL型的数据的占位符，这也是比较纠结的地方，看了一下别人是怎么解决这个问题的BOOL studyBool = YES;NSLog(@"打印BOOL型数据%@",studyBool?@"YES":@"NO");//打印BOOL型数据YESNSLog(@"...
html模板之占位参数
2301_76481440的博客
11-25 428
就是说我们可以通过python向html代码中的{{x}}的x变量传递参数，来确定变量的值，当html是另一个html的模板时，并且其中有占位变量{% block x %} {% endblock %},就有点像抽象父类的接口需要子类去实现一样，在子html中输入变量值也就确定html，确定网页效果了，而且这个用来确定网络效果的变量可以由python主代码传递进去。
HTML常用占位符
机智的奎哥的博客
08-26 3217
符号 表示 &nbsp； 英文半角空格不换行 &#160； 英文半角空格不换行 &#12288； 中文全角空格 &ensp； 半角空格 &#8194； 半角空格 &#8195； 全角空格 &emsp； 全角空格 &#8197； 四分之一全角空格 &#32； 英文半角空格 注意： em是字体排印学的计量单位，相当于当前指定的点数。例如，1
html中的空格占位符,在HTML中插入空格的几种方法
weixin_35645701的博客
05-31 6515
关于HTML，基本上作为程序员我们都会用到，本篇内容我们主要是针对刚入门的学员们，介绍两种在HTML中插入空格的方法。方法1、插入单个空格和制表符1、插入一个非间断空格。一般来说，无论你按多少次空格键，HTML也只会在单词之间显示一个空白间隔。当你需要插入多个空格时，请输入或代码。 它们名为“空格占位符”，你输入几个，就能在页面中显示几个空格。之所以称之为非间断空格，是因为这样不会产生换行符。...
一般处理程序修改html中的占位符
秋忆夏伤的博客
11-25 2822
html代码： table{ border-collapse:collapse; /* collapse：合并相邻的边框； separate：默认值，边框独立。*/ border-spacing:2px; /* 设置单元格间距。如果设置了合并边框，则此设置无效。 */
html页面占位显示
程序员大柱
07-02 470
如果页面内容是ajax加载的内容，那么提前用template/js将页面的内容框架展示出来，待ajax获取到数据后再将数据展示到页面内。 现将对应的内容用一个class,例如placeholder: .page.flex .placeholder { margin: 5px; padding: 0 10px; background-color: #ebebeb; h...
前端小知识点——html中占位隐藏
weixin_52563146的博客
08-17 487
CSS中的占位隐藏属性 <style> .abc{ visibility:hidden; } </style> 注意： display:none；是直接隐藏掉，不占位置 visibility:hidden；是隐藏了，但是还占着位置
07.HTML标签以及自定义定界符配置---《Beetl视频课程》
Gavin的博客
12-13 704
本期视频实现了评论列表分页； 内容简介：使用了HTML完成分页抽取，并且介绍了自定义定界符 一起学beetl目录：https://my.oschina.net/u/1590490?tab=newest&amp;catalogId=6214598 作者：GK HTML标签 Beetl 也支持HTML tag形式的标签，个人认为，这是一种引用模板更加优雅的实现，能和静态HTML标签融...
HTML图片占位符
Economic_shark的博客
01-25 1万+
http://temp.im/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片</title> </head> <body> <h1>图片</h1> <img src="http://temp.im/466x466/4CD964/fff" alt="广告图片占位符"> </body
HTML学习指南：从基础到实战
HTML学习帮助手册 HTML，全称为HyperText Markup Language（超文本标记语言），是一种基础的网页制作语言，用于创建和设计网页结构。它由W3School等在线资源提供丰富的教程和文档支持，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值