• HTML

    HTML

    1. 注释符：

      <!-- -->  注释符
      快捷键：ctrl+/
      段落标签
      <p>
          
      </p>
      快捷键：p+tab键
      ​

       

      <!-- DOCTTPE：告诉浏览器，我们使用什么type-->
      ​
      <!DOCTYPE html>
      <html lang="en">
      <!--head标签代表头部-->
      <head>
      <!--    meta描述性标签，用于描述网页基本信息-->
      <!--    meta一般用来做SEO-->
          <meta charset="UTF-8">
          <meta name="keywords" contenteditable="yyl第一个网站">
      <!--    tittle网站标题-->
          <title>Title</title>
      </head>
      <!--body标签代表主体-->
      <body>
      ​
      </body>
      </html>
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>基本标签</title>
      </head>
      <body>
      <!--标题标签-->
      <h1>一级标签</h1>
      <h2>二级标签</h2>
      <h3>三级标签</h3>
      <!--段落标签-->
      <p>跑得快  跑得快</p>
      <p>两只老虎  两只老虎</p>
      <p>真奇怪  真奇怪</p>
      <!--水平线标签-->
      <hr/>
      <!--换行标签,与段落标签相比间隙更小-->
      跑得快  跑得<br/>
      两只老虎  两只老虎<br/>
      真奇怪  真奇怪<br/>
      <!--粗体，斜体-->
      <h1>字体样式标签</h1>
      <strong>粗体</strong>
      <em>斜体</em>
      <!--特殊符号-->
      空格：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
      大于符号：&gt;
      小于符号:&lt;
      版权符号：&copy;版权所有，狂神
      <!--
      特殊符号记忆方式
      &   ;
      ​
      -->
      </body>
      </html>

    图像标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图像标签学习</title>
    </head>
    <body>
    <!--image学习
    src图片地址：
    相对地址，绝对地址
    ../  代表上一级目录
    ​
    -->
    <img src="resources/food.jpg" alt="food" title="悬停文字" width="300" height="300">
    ​
    </body>
    </html>

    链接标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>链接标签</title>
    </head>
    <body>
    <!--使用name做标记-->
    <a name="top">顶部</a>
    <!--a标签
    herf必填，表示跳转到哪个界面
    target:表示窗口在哪里打开
           _blank:在新的标签页打开
           _self:在原本页面打开
    -->
    <a href="1.我的第一个网页.html" target="_blank"> 点击跳转网页</a>
    <a href="2.基本标签.html">点击跳转网页</a>
    <br/>
    <a href="2.基本标签.html">
        <img src="resources/food.jpg" alt="food" title="悬停文字" width="300" height="300">
    </a>
    ​
    ​
    ​
    ​
    ​
    ​
    ​
    ​
    ​
    ​
    <!--锚链接：
    1.需要一个锚标记
    2.跳转到标记-->
    <a href="#top">回到顶部</a>
    ​
    <!--功能性链接
    邮件链接：mailto：
    QQ链接
    -->
    </body>
    </html>

    列表标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表学习</title>
    </head>
    <body>
    <!--有序列表
    应用范围：试卷，问答-->
    <ol>
        <li>JAVA</li>
        <li>Python</li>
        <li>c</li>
        <li>c++</li>
    </ol>
    <hr/>
    <!--无序列表
    应用范围：导航，侧边栏-->
    <ul>
        <li>JAVA</li>
        <li>Python</li>
        <li>c</li>
        <li>c++</li>
    </ul>
    <!--自定义序列表
    dl:标签
    dt:列表名称
    dd:列表内容
    应用范围：公司网站底部-->
    <dl>
        <dt>学科</dt>
        <dd>JAVA</dd>
        <dd>Python</dd>
        <dd>Linux</dd>
        <dd>c</dd>
        <dt>位置</dt>
        <dd>都江堰</dd>
        <dd>天马</dd>
    </dl>
    </body>
    </html>

    表格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Table</title>
    </head>
    <body>
    <!--表格table
    行：tr
    列:td
    border:元素间隔-->
    <table border="1px">
        <tr>
    <!--        colspan:跨列，合并列-->
            <td colspan="3">1.1</td>
        </tr>
        <tr>
            <td>1.4</td>
            <td>1.5</td>
            <td>1.6</td>
        </tr>
        <tr>
    <!--        rowspan:跨行-->
            <td rowspan="3">1.7</td>
            <td>1.8</td>
            <td>1.9</td>
        </tr>
    </table>
    </body>
    </html>

    媒体元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>音视屏</title>
    </head>
    <body>
    <!--音频和视屏
    src:文件路径
    controls:控制条
    autoplay:自动播放-->
    <video src="video/起风了.mp4" controls></video>
    <audio src="audio/童话镇.flac" controls></audio>
    </body>
    </html>

    结构

    image-20210310220901137

    内联标签

    <body>
<!--iframe内联框架，
src：目标地址
height，width：高度宽度-->
<iframe src="https://www.baidu.com" name="1111" frameborder="0" width="1000" height="1000"></iframe>
</body>

    表单

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
<!--表单form
action:表单提交位置，可以是网站，也可以是请求处理地址
method:get或者post
get方式提交：get方式提交的参数可以在url中被看到，不安全，但是高效
post方式提交：post方式提交的参数不能在url中看到，比较安全，可以传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
<!--文本框参数：input type="text"
1.value：初始值
maxlength：最大长度
size：文本框大小-->


<!--    文本输入框 input type="text"-->
    <p>名字: <input type="text" name="username" value="123456" maxlength="8" size="30"></p>
<!--    密码框：input type="password"-->
    <p>密码：<input type="password" name="password"></p>
    <p>
        <!-- 单选框：input type="radio"
             必须有初始值value，文字写在标签外
             如果要作单选需选择在同一组，即name相同-->
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
<!--多选框： 如果是get传入，value代表了传入url中选择的信息  -->
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="English" name="hobby">英语
    </p>

<!--    按钮
--> <p>
    <input type="button" name="btn" value="点击变长">
    <input type="image" src="resources/food.jpg" width="450" height="300">
    </p>


<!--    下拉框，列表框：
select name=
selected:代表默认的选项-->
    国家
    <select name="列表名称" >
        <option value="中国"selected>中国</option>
        <option value="美国">美国</option>
        <option value="德国">德国</option>
        <option value="英国">英国</option>
    </select>


<!--    文本域-->
    <p>
        评论
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>
<!--文件域
input type="file"   注意加name属性
 <input type="button"-->
    <p>
        上传文件
        <input type="file" name="files">
        <input type="button" value="上传文件" name="upload" >
    </p>


<!--    邮箱验证-->
    <p>
        <input type="email" name="email">
    </p>
<!--    url-->
    <p>
        <input type="url" name="url">
    </p>
<!--    数字
step:加一按钮-->
    <input type="number" name="num" max="9999" min="0000" step="1">

<!--    滑块
input type="range"-->
    <p>
        音量：
        <input type="range" name="voice" min="10" max="100" step="2">
    </p>
<!--    搜索框-->

    <p>
        <input type="search" name="search">
    </p>


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


</form>
</body>
</html>
  • 相关阅读:
    数据结构（三）栈与递归
    机器学习（二）------ 回归
    数据结构（二）线性表
    数据结构（一）数据结构基础
    机器学习 （一）------分类
    操作系统概述
    NumPy函数库基础
    总线与输入输出子系统
    FT VIEW SE高效开发之全局对象
    STUDIO 5000 V32新CRACK和新功能
  • 原文地址：https://www.cnblogs.com/yylblog/p/14533813.html
Copyright © 2020-2023  润新知