HTML基础标签——一直标题重复率太高，强迫症看着是真难受

原創 雪… 2020-06-21 15:12

title

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSDN闯关</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

标题与段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.标题与段落</title>
</head>
<body>
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>

<p>段落标签p</p>
</body>
</html>

在这里插入图片描述

水平线与换行符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.水平线与换行符</title>
</head>
<body>
水平线：hr
<hr/>
换行符：br
<hr/>
csdn1
csdn2
<br/>
csdn3
</body>
</html>

在这里插入图片描述

常见的转义符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.常见的转义符</title>
</head>
<body>
    空格：&nbsp;
    大于号：&gt;
    小于号：&lt;
</body>
</html>

在这里插入图片描述

链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.链接</title>
</head>
<body>
<!--
    a标签
        href:   超链接地址
        target="_self"       本窗口访问（默认）
        target="_blank"      新窗口访问
-->
<a href="//www.baidu.com">点击我，本窗口将访问百度</a>
<a href="//www.baidu.com" target="_blank">点击我，新窗口将访问百度</a>
</body>
</html>

在这里插入图片描述

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.图片标签</title>
</head>
<body>
<!--
    img标签：
        src     图片的地址
        alt     如果图片加载异常，显示的文字
-->

    <img src="CSDN.jpg" alt="如果图片加载失败，显示的文字">
    <img src="csdn.pngxxxx" alt="如果图片加载失败，显示的文字">
</body>
</html>

在这里插入图片描述

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.表格标签</title>
</head>
<body>
<!--
    table标签：
            border      边框
            width       宽度
            tr          行
            th          表头
            td          普通列
-->
    <table border="1px" width="300px">
        <tr>
            <th>表头th</th>
            <th>表头th</th>
        </tr>
        <tr>
            <td>普通列td</td>
            <td>普通列td</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.列表</title>
</head>
<body>
<!--
    ul      无序列表
    ol      有序列表
    li      列表项
-->
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
    </ul>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
    </ol>
</body>
</html>

在这里插入图片描述

常见的无意义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.常见的无意义标签</title>
</head>
<body>
<!--
    div     占用整行
    span    不占用整行，长度取决于内部元素的长度
-->
    <div>div标签</div>
    <div>div标签</div>
    <span>span标签</span>
    <span>span标签</span>
</body>
</html>

在这里插入图片描述

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表单1</title>
</head>
<body>
<!--
    input标签：
            1.文本框   type="text"
            2.密码框   type="password"
            3.单选框   type="radio"
            4.复选框   type="checkbox"
            5.文件框   type="file"
            6.按钮    type="button"
            7.提交    type="submit"
            8.重置    type="reset"
-->
    <form action="#" method="post" enctype="multipart/form-data">
        1.用户名（文本框text）：
            <input type="text" name="username">
        <hr/>
        2.密码（密码框password）：
            <input type="password" name="password">
        <hr/>
        3.性别（单选框radio）：
            男<input type="radio" name="gender" value="0">
            女<input type="radio" name="gender" value="1">
        <hr/>
        4.爱好（复选框checkbox）：
            学web<input type="checkbox" name="hobby" value="web">
            学爬虫<input type="checkbox" name="hobby" value="spider">
        <hr/>
        5.上传头像（文件框file）：
            <input type="file" name="img">
        <hr/>
        6.按钮（button）：
            <input type="button" value="空按钮">
        <hr/>
        7.提交（submit）:
            <input type="submit" value="提交按钮">
        <hr/>
        8.重置（reset）：
            <input type="reset" value="重置按钮">


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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表单2</title>
</head>
<body>
<!--
    下拉框：select和option
    大文本：textarea
            cols    列数
            rows    行数
-->
    <form action="#" method="post" enctype="multipart/form-data">
        <select name="year">
            <option value="2019">显示在下拉框的信息</option>
            <option value="2018">2018</option>
        </select>
        <textarea name="comment" cols="30" rows="10"></textarea>

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

在这里插入图片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【解决】element表单动态添加或更新表单项，回显后无法修改或提示为空的问题

原方法  /** * 動態更新form * @param form */ updateForm(form) { this.form.manholeId = form.manholeId; this.form

原創 2024-05-15 12:08:40

SharePoint Online 客制化开发：如何使用CSS更改网站主题背景颜色？

一般情況下公司爲了某個團隊或者公司內部共享數據等用途來更改網站的樣式，打造獨特的品牌樣式，很多研發工程師給定的解決方案是爲他們的站點構建自定義主頁，雖然SharePoint Designer是一個強大的工具，但這裏我不推薦使用ShareP

osc_w6noy934 2024-05-14 02:00:35

第三次团队作业（需求分析）

這個作業屬於哪個課程 <a href="https://edu.cnblogs.com/campus/fzzcxy/SE" target="_blank" style="color: #0099ff; text-decoration:

osc_t1bxxmjp 2024-05-14 00:03:14

O2OA翱途开发平台前端API和后端API的访问以及使用

O2OA是一個高度可定製化的企業級開發平臺，它的API（應用程序接口）分爲前端和後端，各自有不同的用途，平臺爲用戶開放了全部的後端API供開發者使用，開發者可以根據各類API組織出符合實際業務需求的新服務或者新業務，用於數據查詢，業務接

原創 2024-05-13 22:50:31

Vue 学习笔记简写

一.Vue文件內容                <template>     </template>     <script>     </script>     <style>     </style>

原創 2024-05-13 21:42:40

鸿蒙原生应用已超4000个！

鴻蒙原生應用已超4000個！ 來自 HarmonyOS  微博近期消息，#鴻蒙千帆起# 重大里程碑！目前已有超4000個應用加入鴻蒙生態。從今年1月18日華爲宣佈首批200多家應用廠商正在加速開發鴻蒙原生應用，到3月底超4000個應用，短短

原創 2024-05-13 12:26:37

鸿蒙原生应用再添新丁！瑞幸咖啡 入局鸿蒙

鴻蒙原生應用再添新丁！瑞幸咖啡 入局鴻蒙 來自 @HarmonyOS  微博1月23日消息，國內擁有超過1.3萬家門店、累計服務超過2億客戶的瑞幸咖啡，已完#成鴻蒙原生應用#核心功能開發，大家以後可以隨時隨地在多種#HarmonyOS#終端

原創 2024-05-13 12:26:35

鸿蒙原生应用再添一批新丁！阿里旗下11款应用、广汽传祺、岚图汽车、零跑汽车、凯翼汽车 入局鸿蒙

 鴻蒙原生應用再添一批新丁！阿里旗下11款應用、廣汽傳祺、嵐圖汽車、零跑汽車、凱翼汽車 入局鴻蒙   來自 HarmonyOS  微博近期消息，阿里旗下閒魚、1688、飛豬、餓了麼、盒馬、菜鳥、點淘、淘寶特價版、大麥、淘票票、燈塔專業版共1

原創 2024-05-13 12:26:34

鸿蒙原生应用再添新丁！万达 入局鸿蒙

鴻蒙原生應用再添新丁！萬達 入局鴻蒙   來自 @HarmonyOS  微博1月11日消息，#萬達酒店及度假村啓動鴻蒙原生應用及元服務開發# 作爲具有中國特色的國牌服務酒店標杆之一，@萬達酒店及度假村Wanda 將帶來全新的服務和交互方式，

原創 2024-05-13 12:26:31

鸿蒙生态千帆启航！

2024年1月18日，華爲舉行的鴻蒙生態千帆啓航儀式，會上宣佈HarmonyOS NEXT鴻蒙星河版系統開發者預覽版開放申請。據介紹，鴻蒙星河版將實現原生精緻、原生應用、原生流暢、原生安全、原生智能、原生互聯六大極致原生體驗。Harmony

原創 2024-05-13 12:26:29

鸿蒙原生应用再添一批新丁！墨迹天气、北京银行、快手、中国电信 入局鸿蒙

 鴻蒙原生應用再添一批新丁！墨跡天氣、北京銀行、快手、中國電信 入局鴻蒙 來自 HarmonyOS  微博近期消息，#鴻蒙千帆起#服務超七億用戶的天氣App@墨跡天氣，啓動鴻蒙原生應用開發，讓智慧體驗落地更多場景！[打call]鴻蒙星河版墨

原創 2024-05-13 12:26:26

来了，永久免费的图床服务

前前後後也寫了很多博客和文章了，作爲一個資深的markdown用戶，我是非常喜歡markdown的簡潔語法，可以讓我在不太關注於文字格式的前提下，獲得比較好的閱讀和排版體驗。 但是用markdown語法也有一個壞處，就是在向markdown

原創 2024-05-13 09:47:53

使用NPS自建内网穿透服务器教程，带WEB管理

自帶WEB管理的輕量級內網穿透工具NPS的各種搭建方式和使用教程，支持X86、ARM、MIPS平臺。 NPS介紹 nps是一款輕量級、高性能、功能強大的內網穿透代理服務器。目前支持TCP、UDP流量轉發，可支持任何tcp、udp上層協議（訪

Darren_Leo 2024-05-13 02:05:53

鸿蒙原生应用再添新丁！高德地图入局鸿蒙

 鴻蒙原生應用再添新丁！高德地圖入局鴻蒙   來自HarmonyOS微博消息，12月1日#高德地圖#與華爲達成合作，將基於#HarmonyOS NEXT#啓動#鴻蒙原生應用#開發，成爲導航領域首個啓動鴻蒙原生應用開發的夥伴。 依託#Harm

原創 2024-05-13 00:24:53

鸿蒙原生应用再添两员新丁！ B站、58入局鸿蒙

鴻蒙原生應用再添兩員新丁！​B站、58入局鴻蒙   來自HarmonyOS微博消息，11月27日，B站與華爲達成合作，並正式啓動B站#鴻蒙原生應用#開發。作爲一個年輕人高度聚集的視頻社區，B站內容上涵蓋數千個品類和圈層，日活躍用戶數近1億。

原創 2024-05-13 00:24:50