HTML常用标签

最新推荐文章于 2023-05-07 23:36:37 发布
最新推荐文章于 2023-05-07 23:36:37 发布
阅读量82 收藏
点赞数
分类专栏： Java HTML 文章标签： html 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45672377/article/details/110792188
版权
Java 同时被 2 个专栏收录
40 篇文章 1 订阅
订阅专栏
HTML
1 篇文章 0 订阅
订阅专栏

基础标签

实例

<!--这是注释-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>

<!--段落标签-->
<p>登鹳雀楼</p>
<p>【作者】王之涣 【朝代】唐</p>

<p>白日依山尽，黄河入海流。</p>

<p>欲穷千里目，更上一层楼。</p>

<!--换行标签-->
登鹳雀楼<br/>
【作者】王之涣 【朝代】唐<br/>
白日依山尽，黄河入海流。<br/>
欲穷千里目，更上一层楼。<br/>

<!--水平线标签-->
<hr/>

<!--粗体、斜体标签-->
<strong>这是粗体</strong>
<em>这是斜体</em><br/>

<!--特殊符号-->
<!--空格符号-->
你&nbsp;&nbsp;&nbsp;好<br/>
<!--大于、小于符号-->
&gt;&lt;<br/>

<!--版权符号-->
&copy;这是版权符号

</body>
</html>

图像标签

<img src="../resources/image/1.jpg" alt = "未找到" title="图片" width="400" height="534">

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接学习</title>
</head>
<body>

<!--使用name作为标记-->
<a name="TOP"></a>

<!--普通超链接，跳转页面会替代当前页面-->
<a href="HTML01.html">"这里是超链接"</a><br/>

<!--图片超链接，跳转页面会在新页面-->
<a href="HTML01.html" target="_blank"><img src="../resources/image/1.jpg" alt="图片未找到"></a><br/>

<!--锚链接，需要使用name做标记-->
<a href="#TOP">回到顶部</a>

</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--自定义列表-->
<ol>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>物理</li>
</ol>

<!--无序列表-->
<ul>
    <li>笔</li>
    <li>草稿纸</li>
    <li>笔记本</li>
    <li>橡皮</li>
</ul>

<!--自定义列表-->
<dl>运动项目
    <dd>游泳</dd>
    <dd>跑步</dd>
    <dd>篮球</dd>
    <dd>羽毛球</dd>
</dl>

</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>


</head>
<body>

    <!--表格-->
    <table border="1px">
        <tr>
            <!--跨列-->
            <td colspan="3">期末成绩</td>
        </tr>

        <tr>
             <!--跨行-->
            <td rowspan="2">小明</td>
            <td>语文</td>
            <td>100</td>
        </tr>

        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>

        <tr>
            <td rowspan="2">小华</td>
            <td>语文</td>
            <td>0</td>
        </tr>

        <tr>
            <td>数学</td>
            <td>0</td>
        </tr>
    </table>

</body>
</html>

内联框架标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架练习</title>
</head>
<body>
<!--iframe内联框架，src链接地址-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>

</body>
</html>

在这里插入图片描述

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
<!--get 方法效率高，但不安全，用户名和密码会显示在url中-->
<!--post 安全性更高，且可以传输大文件-->
<!--action 为发送表单的位置 method 为发送表单方法-->
<form action="HTML01.html" method="post">

    <h1>注册</h1>
    <p>账号:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="psw"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>

单选框、多选框、下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
<!--get 方法效率高，但不安全，用户名和密码会显示在url中-->
<!--post 安全性更高，且可以传输大文件-->
<!--action 为发送表单的位置 method 为发送表单方法-->
<form action="HTML01.html" method="get">

    <h1>注册</h1>
    <p>账号:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="psw"></p>

    <!--radio 为单选框，需要设置value值,同时需要设置name值以确保为同一组单选框按钮-->
    <p>
        <input type="radio" value="男" name="gender">男
        <input type="radio" value="女" name="gender">女
    </p>

    <!--checkbox为多选框-->
    <p>
        篮球<input type="checkbox" name="hobby" value="篮球">
        羽毛球<input type="checkbox" name="hobby" value="羽毛球">
        乒乓球<input type="checkbox" name="hobby" value="乒乓球">
    </p>

     <!--下拉框-->
    <p>
        下拉框:
        <select name="国家">
            <option value="Chain">中国</option>
            <option value="Japan">日本</option>
            <option value="America">美国</option>
        </select>
    </p>

    <!--button为普通按钮，image为图片按钮且会自动提交，submit为提交按钮，reset为重置按钮-->
    <p>
        按钮
        <input type="button" value="btn1">
        <input type="image" src="../resources/image/1.jpg">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>

文本域与文件域

<!--文本域-->
    <p>文本域:
        <textarea name="文本域" cols="30" rows="10">
        </textarea>
    </p>

    <p>文件域:
        <input type="file" name="files">
    </p>
向阳的人生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
HTML常用标签合集
rbh200812的博客
07-26 1万+
html常见标签的认识与运用
HTML常用标签总结
weixin_64182409的博客
05-07 4977
一些常用的HTML标签的介绍与使用
html常用标签总结
ch206265的博客
02-28 1633
html负责结构，css负责样式，JavaScript负责页面交互等行为，html中常用的结构标签有标题标签、段落标签、水平线标签、换行标签、文本格式化标签、图像标签、链接标签以及注释和特殊字符标签等。
html常用标签
weixin_51450341的博客
07-16 3491
html常用标签简介
HTML常用标签大全
weixin_45203607的博客
09-22 2934
HTML常用标签大全 HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 内容 </body> </html> 布局标签 <nav>导航</nav> <header> 头部区域
HTML常用标签详解
淘小欣的博客
03-04 7633
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
HTML常用标签及其属性
wangkai2580的博客
07-11 5123
HTML的常用标签
HTML常用标签--整理篇
程序员小章的博客
09-13 1万+
HTML常用标签 文章目录HTML常用标签文本标签HTML格式化标签HTML图像标签HTML表格标签HTML表单标签 文本标签 常⽤文本标签如下： <hn>...</hn>标题标签，其中n为1–6的值。 <i>...</i>斜体 ... 强调斜体 <b>...</b> 加粗 <strong>...</strong> 强调加粗 <cite></cite&
HTML常用标签超详细整理
热门推荐
shengyin714959的博客
05-27 2万+
HTML概述 1.1 什么是HTML HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术 1.2 HTML概念 HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们构建网页的。 【超文本】：网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。
20.2 HTML 常用标签
最新发布
07-28
配套资源
HTML常用标签属性.txt
04-29
HTML常用标签属性大全
四种解决父级边框塌陷方法
weixin_45672377的博客
12-16 2373
问题引入 当我们使用浮动时，可能出现元素超出父级元素的情况 如图 可以看到父级边框出现了塌陷情况 解决方案一：在父级属性设置高度（不推荐） .father{ border: 1px solid black; height: 10000px; } 解决方案二：添加一个空div块 <div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; } 解决方案三：父级
CSS 四种层次选择器
weixin_45672377的博客
12-14 1489
实例结构图 后代选择器 格式：元素 标签{} 特点 作用域为元素所有子代标签 实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> body p{ background: red; } </sty
Java 接口Map实现类HashMap
weixin_45672377的博客
11-16 1140
Map接口 与Collection接口同等级，与Collection不同的是，Map是映射接口，成对元素放入，而Collection单元素放入 Collection< E e> <------------------------> Map(Key k,Value v) HashMap实现类 HashMap()是Map其中的一个实现类 特点 输出无序 Key（键值）唯一 import java.util.HashMap; public class Ha
类三大特性 封装、继承、多态
weixin_45672377的博客
11-09 728
类三大特性 封装 封装将类的某些信息隐藏在类内部，不允许外部程序直接访问，只能通过该类提供的方法来实现对隐藏信息的操作和访问。从而更好地实现“高内聚、低耦合”思想。 特点 Java可以通过private、default、protected、public来修饰成员变量，从而实现外部程序访问成员变量权限 private 修饰的成员变量不能被外部成员直接访问，通常需要调用get/set实现访问成员变量的效果 public String getName(){ return this.nam
CSS圆角边框和阴影
weixin_45672377的博客
12-16 571
圆角边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角边框</title> <style> div{ height: 50px; width: 100px; border: 3px solid red;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值