0基础学HTML，从快捷方式（IntelliJ IDEA）入手，一步步就能看懂了！

最新推荐文章于 2024-06-14 14:36:26 发布
最新推荐文章于 2024-06-14 14:36:26 发布
阅读量614 收藏
点赞数
分类专栏： 学习笔记 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wisdex/article/details/109602488
版权

在这里插入图片描述

HTML5

1、基本认识

  • HTML：Hyper Text Markup Language(超文本标记语言)
  • W3C：World Wide Web Consortium(万维网联盟)
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

2、网页的基本信息

<!--  DOCTYPE:告诉浏览器，使用什么规范 () -->
<!DOCTYPE html>

<html lang="en">

<!--  head:head标签代表网页头部 -->
<head>
    <!-- meta标签：描述网站的一些信息   -->
    <meta charset="UTF-8">
    <meta name="keywords" content="Feild学HTML">
    <meta name="description" content="认真学习，做好网站">
    <!--  网页标题  -->
    <title>我的第一个网页</title>
</head>

<!--  body:body标签代表网页主体 -->
<body>
I'm comming!

</body>
</html>

3、网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!-- 标题标签:h*-->
<!--快捷方式：h* + tab-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签:p-->
<!--快捷方式：p + tab-->
<p>不要温顺的走进那个良夜，</p>
<p>激情不能被消沉的暮色淹没，</p>
<p>咆哮吧，咆哮，痛斥那光的退缩。</p>
<p>智者在临终的时候，对黑暗妥协，</p>
<p>是因为它们的语言已黯然失色，</p>
<p>它们不想被夜色迷惑，</p>
<p>咆哮吧，咆哮，痛斥那光的退缩。</p>

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

<!--换行标签:br-->
不要温顺的走进那个良夜，<br/>
激情不能被消沉的暮色淹没，<br>
咆哮吧，咆哮，痛斥那光的退缩。<br/>
智者在临终的时候，对黑暗妥协，<br/>
是因为它们的语言已黯然失色，<br/>
它们不想被夜色迷惑，<br/>
咆哮吧，咆哮，痛斥那光的退缩。<br/>

<hr/>
<!-- 粗体：strong ， 斜体:em -->
<p>粗体：<strong>wisdex</strong></p>
<p>斜体：<em>Feild</em></p>

<hr/>
<!--特殊符号-->
<!--空格：&nbsp;-->
空                                          格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br/>

<!--其他&*;类-->
&gt;
&lt;              <br/>
&copy;版权所有Feild


</body>
</html>

4、图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!--图像标签
快捷方式：img + tab
src:（必填）图片地址
        相对地址：通过../ (通过上一级路径来找到具体地址)
        绝对地址：D:\note\code\HTML\resoures\image\cn.png
alt：（必填）图片备注，在图片无法显示时用
title：鼠标悬停时显示内容
width:图片宽度
height：图片高度
...
-->
<img src="../resoures/image/cn.png" alt="网站logo"
     title="悬停文字：欢迎你！" width="200" height="200">
<img src="" alt="">

</body>
</html>

5、链接标签

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

<!--锚链接：锚点（标记）：顶部-->
<a name="top">顶部</a>

<!--链接标签
快捷方式：a + tab
href:(必填) 要跳转到那个页面
可以直接嵌套图片
target:心窗口在哪里打开
    _blank:在新标签中打开
-->

<a href="1、我的第一个网页.html" target="_blank">点击跳转到页面1</a><br/>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a><br/>
<a href="1、我的第一个网页.html">
    <img src="../resoures/image/cn.png" alt="网站logo"
         title="悬停文字：欢迎你！" width="200" height="200">
</a><br/>

<!--锚链接：跳转锚点（标记）
            #锚点名（可以跨页面）
-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接：mailto：
-->
<a href="mailto:feild@wisdex.cn">联系我</a>


</body>
</html>

6、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>

<!--有序列表-->
<!--快捷方式：ol + tab；li + tab-->
<ol>
    <li>java</li>
    <li>html</li>
    <li>css</li>
    <li>vue</li>
</ol>

<!--无序列表-->
<!--快捷方式：ul + tab；li + tab-->
<ul>
    <li>顺序结构</li>
    <li>选择结构</li>
    <li>循环结构</li>
</ul>

<!--自定义列表，快捷方式类似
dl：标签
dt：列表名称
dd：列表内容
-->

<dl>
    <dt>语言</dt>
    <dd>Java</dd>
    <dd>Linux</dd>
    <dd>Python</dd>

    <dd>Go</dd>
    <dt>小工具</dt>
    <dd>Swagger</dd>
    <dd>Json</dd>
    <dd>Ajax</dd>
</dl>

</body>
</html>

7、表格标签

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

<!--表格标签
表格：table + tab;加边框:border
行：tr(table row) + tab;跨列：colspan,记得删除占用格
列：td + tab；跨列：rowspan,记得删除占用格
-->

<table border="1px">
    <tr>
    <!-- 跨列：colspan（column span） -->
        <td colspan="3">11</td>
        <td>14</td>
    </tr>
    <tr>
        <td rowspan="2">21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr>
        <td>32</td>
        <td>33</td>
        <td>34</td>
    </tr>
</table>

</body>
</html>

8、媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频-->
<!--视频快捷方式：video + tab
    src: 资源路径
    controls:控制开关
    autoplay:自动播放
-->
<video src="..//resoures/video/video.MP4"
       controls autoplay width="1000" height="500"></video>

<!--音频快捷方式：audio + tab
    src: 资源路径
    controls:控制开关
    autoplay:自动播放
-->

</body>
</html>

9、页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<!--网页头部：header + tab-->
<header>
    <h2>网页头部</h2>
</header>

<!--主体部分-->
<section>
    <h2>网页主体</h2>
    <!--  独立文章内容  -->
    <article>
        <h3>文章内容</h3>
    </article>

    <!--侧边栏-->
    <aside>
        <ol>
            <li>java</li>
            <li>python</li>
            <li>go</li>
            <li>c++</li>
        </ol>

        <!-- 导航 -->
        <nav>
            dadf
        </nav>
    </aside>

    <!--  da  -->
</section>


<!--网页脚部：footer + tab-->
<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

10、ifame内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架学习</title>
</head>
<body>

<!--快捷方式：iframe + tab
src：引用页面地址
name：框架标识名
-->

<iframe frameborder="0" height="200px"
       src="https://wisdex.cn" width="200px"></iframe>

<!--跳转到内联框架显示
1、先设置内联框架，并设置标签:name
2、链接跳转到标签
-->
<iframe src="" frameborder="0" name="hello"></iframe>
<a href="https://wisdex.cn" target="hello"
   height="200px" width="200px">点击跳转</a>

</body>
</html>

11、表单语法

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

<h1>注册</h1>

<!--表单form
action:提交的位置，网站、请求处理地址
method: 提交方式，
        post：安全，可以传输大文件
        get：可以在url中看到，不安全

-->

<form action="7、媒体元素.html" method="get">
    <!--  表单框快捷方式： p + tab  -->
            <!--  框内属性快捷方式：input + tab
            type：制定元素类型:
            -->

            <!--  文本输入类型：input type="text"  -->
                                     <!-- value:元素初始值，type是radio时必须制定一个值 -->
                                                            <!-- maxlength:输入的最大字符数 -->
                                                            <!-- size：初始宽度，单位：用密是字符，其他是像素 -->
    <p>名字：<input type="text" name="username" value="值得信" maxlength="8" size="30"></p>
            <!--  密码框类型：input type="password"  -->
                                <!-- 表单元素的名称：name -->
    <p>密码：<input type="password" name="pwd"></p>
    


            <!--  radio：单选中唯一选项的设置方法，通过name来统一组 -->
    <p>
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

            <!--  checkbox：
            同样关注组的问题
            checked:默认选中值
              -->
    <p>
        <input type="checkbox" value="read" name="hobby">看书
        <input type="checkbox" value="sports" name="hobby" checked>运动
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="eat" name="hobby">美食
        <input type="checkbox" value="code" name="hobby">编程

    </p>

    <p>
        <input type="image" src="../resoures/image/cn.png">
    </p>
    <hr>

            <!-- 文件域快捷方式:file + tab -->
            <!-- 按钮域快捷方式:button + tab -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传" >
    </p>
    
    <p>
             <!--  邮件验证  -->邮箱：
        <input type="email" name="email">
    </p>

    <p>
             <!--  URL  -->URL：
        <input type="url" name="url">
    </p>

    <p>
             <!--  数字  -->商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

    <p>
                <!--  滑块  -->音量：
        <input type="range" name="volume" min="0" max="100" step="2">
    </p>

    <p>
             <!--  搜索  -->搜索：
    <input type="search" name="search">
    </p>

    <hr>

    <!-- 下拉表单框快捷方式：select + tab
            表单表单快捷方式：option + tab
                    selected：默认选中值
    -->
    <p>应聘岗位
        <select name="jobs" id="">
            <option value="marketing">市场</option>
            <option value="sales">销售</option>
            <option value="project" selected>实施</option>
            <option value="hr">人力</option>
            <option value="financial">财务</option>
        </select>
    </p>



        <!-- 文本域快捷方式：textarea + tab
         cols：列数
         rows：行数
         -->
    <p>
        <textarea name="textarea" cols="50" rows="10" id="mark">个人补充</textarea>
    </p>

    <p>

        <input type="submit" value="提交">
        <input type="reset" value="清空表单">
    </p>

    <!--  隐藏域：hidden  -->
    <!--  禁用域：disabled  -->
    <!--  只读域：readonly  -->


    <!--  增强鼠标可用性：label  -->
    for:指向制定的位置高亮--> 在id中找对应的
    <p>
        <label for="mark">有什么说的，进来写点？</label>
    </p>

    <!--  表单验证
    placeholder：提示信息
    required:非空判断
    pattern:正则表达式(上网搜索)
      -->
    <p>姓名：
        <input type="text" placeholder="请输入姓名" >
    </p>
    <p>密码：
<!--        <input type="password" placeholder="请输入密码" required>-->
    </p>
    <p>邮箱：
        <input type="email" placeholder="请输入邮箱" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

</form>

</body>
</html>
Wisdex
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
idea创建web项目入门（登录静态页面）
碧根果专栏
07-30 1万+
大概步骤如下： 1、创建项目并设置classes、lib； 2、设置Tomcat 3、编辑页面 具体步骤如下： 1、创建项目并设置classes、lib idea中点击file——new——project，按照下图中设置 项目命名为testproject 找到web——WEB-INF下并新建classes、lib 两个文件夹 在项目testproject文件上右键选择proj...
牛逼！Java 从入门到精通，超全汇总版
热门推荐
程序员cxuan的个人主页
05-06 7万+
文章目录Java 基础Head First JavaJava 核心技术卷一Java 编程思想设计模式Head First 设计模式图解设计模式设计模式重学 Java 设计模式Java 进阶Java 并发编程实战Java 并发编程艺术Java 并发编程之美图解Java多线程设计模式JVM深入理解 Java 虚拟机Java 虚拟机规范HotSpot 实战自己动手写 Java 虚拟机MySQLMySQL 基础教程SQL 基础教程深入浅出 MySQLMySQL 必知必会SQL 必知必会高性能 MySQLMySQL
如何吃透一个Java项目？（附学习实践）
淘系技术
03-23 1万+
先说一下自己的情况：就是对着视频敲Java项目，其中遇到的BUG还能解决，但就是每次敲完一个项目，就感觉很空虚，项目里面的知识点感觉懂了但又好像没懂，我应该怎样才能掌握一个项目所用的知识点...
Spring Cloud使用与源码分析实战之Eureka（之一：基础理论讲解、骨架搭建和演示案例编写）
richie696的专栏
02-02 336
Spring Cloud使用与源码分析实战 从今天起，我们每日更新一个章节的内容，来剖析Spring Cloud的使用和源码分析，分析的内容会伴随着使用过程的深入来进行，因为Spring Cloud本身是一个非常庞大的框架集合，内容多到令人发指，在Github上都是一个专门的账号来托管Spring Cloud的源代码。 其中的仓库数量截止到撰文这一刻已经达到98个，所以我们不可能剖析完整的Spring Cloud源代码，因为数量实在是太庞大，本文仅剖析主要部分的核心代码，以便让我们能够更加清楚Spring
java基础知识学习教程-2IntelliJ IDEA.pptx
10-30
java基础知识学习教程-2IntelliJ IDEA
Intellij IDEA中常用的编写Java代码快的快捷方式.docx
03-18
IntelliJ IDEA 中常用的编写 Java 代码快捷方式 IntelliJ IDEA 是一款功能强大且流行的集成开发环境（IDE），它提供了许多实用的快捷方式来提高 Java 开发者的工作效率。在本文中，我们将介绍一些常用的编写 Java ...
IntelliJ IDEA 中配置 Tomcat 服务器方式
09-21
idea配置tomcat 在 IntelliJ IDEA 中配置 Tomcat 服务器是为了能够在开发过程中部署和运行您的 Java Web 应用程序。下面是配置 Tomcat 的基本步骤： ...打开 IntelliJ IDEA，并确保已打开您的项目或创建一个新项目。
IntelliJ IDEA 部署 Web 项目,看这一篇够了！
08-19
主要介绍了IntelliJ IDEA 部署 Web 项目的图文教程，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
基础阶段-Intellij IDEA 配置Maven.pdf
06-11
这份PDF文档提供了IntelliJ IDEA集成开发环境配置Maven构建工具的详细步骤和指南。Maven是一个项目管理和构建自动化工具，广泛用于Java项目中，用于处理项目的构建、依赖管理和文档生成等。 适用人群： 面向Java...
HTML5拖放（Drag and Drop）全面指南：让网页互动起来
艾恩小灰灰的博客
06-06 806
HTML5 引入了许多令人兴奋的新特性，其中之一便是原生支持的拖放（Drag and Drop）功能，它极大地丰富了网页的交互体验，允许用户直接在页面上通过鼠标操作来移动元素。本文将深入浅出地介绍如何在你的网页中实现拖放功能，包括基本概念、API使用、事件处理以及代码示例。
HTML5的新语义化标签
ggq53219的博客
06-11 372
HTML5 引入了一系列新的语义化标签，这些标签为网页内容提供了更明确的含义，有助于改善网页的可访问性和搜索引擎优化（SEO）。通过使用这些新的语义化标签，我们可以创建更加清晰、易于理解和维护的 HTML 文档，同时提高网页的可访问性和搜索引擎优化效果。
HTML5 语义元素：构建更清晰、更易理解的网页结构
艾恩小灰灰的博客
06-11 305
表示页面或区域的头部信息，通常包含网站标志、导航链接或搜索表单等。
HTML跨年烟花
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 549
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
Html_Css问答集(3)
最新发布
白话魔法师
06-14 597
html与css学习中的一些疑问，问答中轻松获取知识。
js之简单轮播图
weixin_58462329的博客
06-11 762
今天给大家封装一个简单的轮播图,可以点击下一张上一张以及自动轮播。如上图所示的效果,需要修改下样式更好看。
HTML (总结黑马的)
SKL4399的博客
06-01 1671
img src="./cat.jpg" alt="替换文本" title="提示文本"> 替换文本是图片没有显示的时候显示对应的文字；定义列表： 标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情 类似于苹果官网最下面的那个效果。 女。
js轮播图有，移入移出事件，左右滑动事件功能
tianxianghuiwei的博客
06-14 140
具体的轮播可以根据需求进行调整；
intellij idea 快捷补全
09-02
IntelliJ IDEA提供了多种快捷补全功能。首先，基本补全是一种常用的代码补全功能，可以通过按下Alt + /来触发。 另外，还可以通过修改IDEA的快捷键设置，将基本补全的快捷键设置为Eclipse中的快捷键Alt + /。请...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值