HTML(一天学完)总结。附上html思维导图

2023-05-16

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

 

     HTML

Hyper Text Markup Language (超文本语言)

W3C标准:

  1. 结构化标准语言(XHTML、XML)
  2. 表现标准语言(CSS
  3. 行为标准(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>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML(一天学完)总结。附上html思维导图 的相关文章

  • android 单双层桌面切换

    单双层桌面切换由于必须持久化数据 所以必须多创建单层桌面所须要的数据库表 一表为存储桌面图标 xff0c 表结构跟原生 桌面表一样 直接copy一份就可以了一表为存储桌面页 xff0c 表结构跟原生一样 创建上面两张表时注意下 数据库版本升
  • 对专业学习的期望与目标

    外界对计算机专业的评价多为晦涩 枯燥 难解 xff0c 一度 xff0c 让我这个初涉计算机领域的新手感到胆怯 彷徨 xff0c 而如今 xff0c 虽然我对计算机还是没有理解透 xff0c 还没有融入计算机的海洋 xff0c 却在一场极简
  • BGP路由

    内容概要 1 BGP的基本概念2 BGP的特点3 BGP的分类4 BGP的路由器5 BGP的工作原理6 BGP的状态机7 BGP对等体之间的交互原则8 建立对等体注意点9 命令 实验 1 BGP的基本概念 自治系统AS xff1a As是指
  • 【小5聊】VS2019开发工具之安装和部署winform项目

    VS2019版本 xff0c 已经移除了安装和部署功能 xff0c 需要到管理扩展下载 1 管理扩展下载安装和部署功能 installer Projects 记得需要关闭VS开发工具 xff0c 然后会自动安装 2 新建项目 搜索setup
  • C语言与C++的区别

    文章目录 前言语法加强部分一 struct关键字加强 xff1b 二 声明变量得到加强三 检测性加强1 申请寄存器变量并取地址问题2 重复定义变量问题3 函数传参问题 四 三目运算符的优化五 const常量的声明 主要有以下扩充引入了命名空
  • 双目+IMU标定详细流程、相关文件格式说明分析【T265为例】

    最近做一个无人机避障的项目 xff0c 无人机上面安装了机载电脑 xff0c 通过笔记本电脑进入机载电脑的桌面 xff0c 使用提前写好地脚本运行VIO 路径规划 飞控和相机启动 xff0c 在RVIZ中观察建图 定位和航迹点 xff0c
  • freertos与rt-thread在应用上的一些区别

    1 中断管理上的区别 freertos进入临界区时 xff0c 不响应优先级低于设定阈值的中断 xff0c 此时若需要一个绝对的定时时间来做一些采样业务 xff0c 那么采样周期就有可能被打断 若把中断优先级设定高于设定阈值 xff0c 就
  • 神经网络学习(一):拟合简单函数

    前言 学习用神经网络做点数学上的研究 xff0c 刚开始摸索 xff0c 记录一下过程 今天是用深度学习 xff08 Deep Learning xff09 来拟合一些函数 xff08 因为多项式的拟合比较简单 xff0c 直接学习参数就可
  • 远程访问云服务器上Neo4j等服务的本地网址

    使用腾讯云服务器安装Neo4j xff0c 其服务器启动在服务器的7474端口上 xff0c 即服务在http localhost 7474 而由于使用的命令行形式 xff0c 我们可以使用命令行控制浏览器访问固定网址 xff0c 并返回但
  • joern运行后.joernindex数据库无内容

    问题描述 xff1a 配置joern和neo4j的过程全部完成后 xff0c 具体过程见文章 但是当我导入数据之后 xff0c 产生了 joernindex文件 xff0c 该文件产生的位置和你当前所在文件夹 xff0c 具体位置可以在jo
  • linux中anaconda安装(Ubuntu)

    1 先去官方地址下载好对应的安装包 Ubuntu anaconda 下载地址 2 然后直接安装anaconda 命令安装 bash span class token operator span span class token operat
  • ImportError: `save_weights` requires h5py.问题解决

    问题分析 xff1a keras或者tensorflow保存模型是时候需要结合h5py使用 xff0c 所以需要安装该库即可 xff0c 并且保证h5py版本和keras或者tensorflow匹配问题 问题解决 安装h5py即可 pip
  • ModuleNotFoundError: No module named ‘yaml‘

    显示没有该库 xff0c 则安装即可 xff0c yaml的库名为pyyaml 解决方案 pip install pyyaml 如果有问题欢迎进一步交流 xff0c 关注公众号
  • scikit-learn no moudule named six

    在scikit learn版本0 23中删除了模块sklearn externals six 解决方案 要使用它 xff0c 你必须降级到0 22版本及以下 xff0c 可以执行以下命令 pip install scikit span cl
  • word2vec原理

    word2vec 主线 前言 Efficient Estimation of Word Representations in Vector Space Distributed Representations of Words and Phr
  • MyBatis--原生的 API--注解的方式和MyBatis--mybatis-config.xml-配置文件详解

    目录 原生的 API amp 注解的方式 MyBatis 原生的 API 调用 为了大家的观看我把基于xml的配置和类也展示了如果你想要详细的观看可以看 连接这个博客 创建Monster 创建MonsterMapper接口 创建Monste
  • word2vec发展过程

    引用 https www douban com note 323504583 Google目前开源了一款深度学习工具word2vec xff0c 该工具有很多有意思的特性 顾名思义 xff0c word2vec就是将词语转换为向量 xff0
  • 目标检测—安全帽检测实践

    目录 数据集部分 后端部分 前端部分 前后端连接 数据集部分 xff1a 在该项目当中我们采用的是传统的开源数据集SHWD Safety helmet hardhat wearing detect dataset 数据集标签为hat xff
  • 网页爬虫开发基础实验

  • A fltering algorithm for constraints of difference in CSPs

    A fltering algorithm for constraints of difference in CSPs 一 摘要 Alldierent约束它们在变量子集上由一组元组修饰 xff0c 在同一元组中出现的值都是不同的 本文针对这些

随机推荐