HTML（一天学完）总结。附上html思维导图

最新推荐文章于 2025-06-01 12:11:05 发布

原创最新推荐文章于 2025-06-01 12:11:05 发布 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #intellij idea #java #html5 #html

road to succes 专栏收录该内容

4 篇文章

订阅专栏

本文概述了HTML的基本结构，包括超链接、列表、表格、视频音频元素，以及常用的页面结构和内联框架。同时介绍了CSS的基础应用，如样式设置和布局控制。适合初学者快速掌握网页制作基础知识。

3.24 偷懒了几天。昨天加今天看完了狂神说的html 。因为html和mysql是一起学的，我看腻了mysql就去看html。在这里写一篇总结。附上html思维导图

HTML

Hyper Text Markup Language （超文本语言）

W3C标准：

结构化标准语言（XHTML、XML）
表现标准语言（CSS
行为标准（DOM、ECMASript）

IDEA 注释快捷键

ctrl+/

分割线 <hr>

换行 <br>

标题<h1> (h1、h2...)

定义段落 <p>

< !—a标签
  Href:必填，表示要跳转到那个页面
  Target:表示窗口在哪里打开
_blank  //在新标签中打开
_self    //在自己的网页中打开
-->

如 < a href=https://www.baidu.com target=”_self”>点击我跳转到百度</a>

<!--使用name作为标记-->
<a name="top">顶部</a>

<br>
<a href="https://www.baidu.com"target="_blank">点击我跳转到百度</a>

<br>    <!- 换行 -->

<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>

<br>

<!-- 功能性链接
  邮件链接 ：mailto:
 -->
<a href="mailto:kimloklee@foxmail.com">点击联系我</a>

<br>
<!--qq推广网页复制过来的-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2863183742&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2863183742:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

======================================================================================================列表学习=====================================

<!--有序列表-->
<ol>
    <li>JAVA</li>
    <li>PYTHON</li>
    <li>C</li>
    <li>GO</li>
</ol>

<hr>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>JAVA</li>
    <li>PYTHON</li>
    <li>C</li>
    <li>GO</li>
</ul>

<hr>
<!--自定义列表
  dl: 标签
  dt：列表名称
  dd: 列表内容
应用：公司网站底部
-->
<dl>
    <dt>课程</dt>
    <dd>JAVA</dd>
    <dd>PYTHON</dd>
    <dd>C</dd>
    <dd>GO</dd>
    <dt>位置</dt>
    <dd>郑州</dd>
</dl>

========================================================================================================表格学习===================================

<!-- 表格table
行 tr  --rows
列 td
-->

<table border="1px">
    <tr>
            <td colspan="3">1-1</td>         <!--   colspan   跨列-->
    </tr>
    <tr>                                  
        <td rowspan="2">2-1</td>             <!--   rowspan   跨行-->
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

=========================================================================================================视频和音频=================================

<!--音频和视频
src:资源路径
sontrols:控制条
autoplay:自动播放
-->

<video src="../sources/video/rap.mp4" controls autoplay></video>

<audio src="../sources/audio/有人.m4a" controls ></audio>

==========================================================================================================页面结构=================================

<header>
    <h2>
        网页头部
    </h2>
</header>

<section>
    <h2>
        网页主体
    </h2>
</section>

<footer>
    <h2>
        网页脚部
    </h2>
</footer>

=======================================================================================================iframe内联框架===============================

<iframe src="//player.bilibili.com/player.html?aid=467385773&bvid=BV1dL411P7tS&cid=553104379&page=1"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<!--   iframe 内敛框架
       src:地址
       w-h：宽度高度
-->

<iframe src="https://www.4399.com" frameborder="0" width="1100px" height="900px"</iframe>

<!--跳转-->
<iframe src="" name="hello" frameborder="0" width="1100px" height="900px"></iframe>
<a href="5.列表.html" _blank>点击跳转</a>

<h1>注册</h1>        
<!--        表单form
            action：表单提交的位置，可以是网站，也可以是一个请求处理地址
            method:post,get提交方式
            value=“lok” --name默认初始值为lok
            get方式提交我们可以在url中看到提交的信息 不安全
-->

<form action="6.表格学习.html" method="get">
<!--    文本输入框 input标签
readonly  只读
required  非空才能提交
-->
    <p>名字：<input type="text" name="username" required ="请输入用户名"></p>
    <p>密码：<input type="password" name="pwd"></p>

       <!--       单选框属性
                  input type="radio"
                  value:是单选框的值
                  name: name一样的是一个组
                  disable 禁用
                  hidden 隐藏
        -->

    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
         <!--           多选
                        input type="checkbox "
                        checked 默认选中
          -->
    <p>爱好：
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="washing" name="hobby">洗澡
    <input type="checkbox" value="tea" name="hobby">喝茶
    <input type="checkbox" value="basketball" name="hobby">打球
    </p>

           <!--        按钮
                       input type="button"  普通按钮
                       input type="image"   图像按钮
                       input type="submit"  提交按钮
                       input type="reset"   清空表单
           -->
   <p>按钮：
        <input type="button" name="btn1" value="点击变长">
   </p>

           <!--        下拉框，列表框
                       selected 默认
            -->
   <p>国家：
     <select name="列表名称">
         <option value="china">中国</option>
         <option value="america">美国</option>
         <option value="japan" selected>日本</option>
         <option value="india">印度</option>
     </select>
   </p>
                 <!--   文本域    -->
   <p>反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>

   </p>
                 <!--   文件域    -->
   <p>
        <input type="file" name="files">
        <input type="button" name=upload" value="上传" >
   </p>

              <!--    邮箱验证
                      pattern 正则表达式
              /-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
              
              <!--    url-->
    <p>url:
        <input type="url" name="urls">
    </p>

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

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

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


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