• 狂神说Java个人笔记-HTML


    HTML

    什么是HTML

    Hyper Text Markup Language(超文本标记语言)

    超文本包括:文字,图片,音频,视频,动画等

    w3c标准

    WOrld Wide Web Consortium(万维网联盟)

    成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构

    W3C标准包括

    1. 结构化标准语言(HTML、XML)

    2. 表现标准语言(CSS)

    3. 行为标准(DOM、ECMAScript)

      image-20200528101643944

    <!--告诉浏览器,我们要是用什么规范 -->
    <!DOCTYPE html>
    <html lang="en">
    <!--head 网页头部-->
    <head>
    <!--   meta描述性标签,用来描述我们网站的一些信息-->
    <!--   meta一般用来做SEO-->
       <meta charset="UTF-8">
       <meta name="keywords" content="跟狂神学Java">
       <meta name="description" content="可以学习java">
    <!--   title网页标题-->
       <title>我的第一个网页</title>
    </head>
    <body>
    Hello,World!
    </body>
    </html>

    网页基本标签

    • 标题标签 <title> 标题</title>

    • 段落标签 <p>一段话</p>

    • 换行标签 一句话

    • 水平线标签 <hr/>

    • 字体样式标签 粗体 粗体 斜体

    • 注释和特殊符号 <!-- 注释-->

      <!--特殊符号-->
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:
      大于号&gt;
      小于号&lt;
      &copy;版权符号

    图像标签

    常见的图像格式

    JPG

    GIF

    PNG

    BMP

    <img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">
    <!--img学习
    src:图片地址
       相对地址(推荐使用),绝对地址
       ../返回上一级目录 -->

     

    alt 图片加载失败会显示的内容“”。

    链接标签

    <!-- a标签
    href:必填,表示要跳转到那个页面
    target:表示窗口在那里打开
    _blank 在新标签中打开
    _self   在自己的网页中打开
    -->

    超链接

    页面间链接

    从一个页面链接到另一个页面

    锚链接

    功能性链接


    <body>
    <!--使用name作为标记-->
    <a name="top">顶部</a>
    <!-- a标签
    href:必填,表示要跳转到那个页面
    target:表示窗口在那里打开
    _blank 在新标签中打开
    _self   在自己的网页中打开
    -->
    <a href="https://www.baidu.com" target="_blank">点击调转到百度
       <img src="../resources/image/1.jpg" alt="图片加载失败">

    </a>
    <!--锚链接
    1.需要一个锚标记
    2.跳转到标记-->
    <a href="#top">回到顶部</a>
    <a name="down">底部</a>
    <!--功能性连接
    邮件连接:mailto
    QQ链接-->
    <a href="mailto:1395950933@qq.com">点击联系我</a>

    </body>
    </html>

    行内元素和块元素

    块元素:无论内容有多少,元素自己独占一行

    例如:<p></p><hr/> <h1>

    行内元素:内容撑开宽度,左右都是行内元素的可以排在一行

    例如:<a><strong><em>

    列表标签

    什么是列表

    列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。

    列表的分类:

    • 无序列表

    • 有序列表

    • 定义列表

    表格

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>表格学习</title>
    </head>
    <body>
    <!--表格table
    行 tr rows
    列 td-->
    <!--border表格的边框-->
    <table border="1px">
       <tr>
    <!--colspan 跨列       -->
           <td colspan="4">1-1</td>
       </tr>
       <tr>
    <!--rowspan跨行-->
           <td rowspan="2">2-1</td>
           <td>2-2</td>
           <td>2-3</td>
           <td>2-4</td>
       </tr>
       <tr>
           <td>3-1</td>
           <td>3-2</td>
           <td>3-3</td>
       </tr>
    </table>
    </body>
    </html>

     

    视频和音频

        <title>视频和音频学习</title>
    </head>
    <body>
    <!--音频和视频
    src:资源路径
    controls:控制调
    autoplay:自动播放-->
    <video src="../resources/video/2.mp4" controls autoplay></video>
    <audio src="../resources/audio/3.mp3" controls autoplay></audio>
    </body>
    </html>

     

    image-20200528154532012

      <title>页面结构分析</title>
    </head>
    <body>
    <header>
        <h2>网页头部</h2>
    </header>
    <section>
        <h2>网页主体</h2>
    </section>
    <footer>
        <h2>网页脚步</h2>
    </footer>
    <!--导航 nav-->
    <nav></nav>
    </body>
    </html>

     

    iframe内联框架

      <title>内联框架iframe</title>
    </head>
    <body>
    <!--iframe内联框架
    src:地址
    w-h:宽,高-->
    <iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
    <a href="https://www.baidu.com" target="change" >点击跳转</a>
    
    
    </body>
    </html>

     

    表单

        <title>表单学习</title>
    </head>
    <body>
    <h1>注册</h1>
    <!--表单form
    action:表单提交的位置,可以是网站,也可以是一个请求处理地址
    method:post,get 提交方式
        get方式提交:我们可以在url中看到我们提交的信息,不安全,但高效
        post:比较安全,传输大文件-->
    <form action="10.表单.html" method="post">
    <!--文本输入框 Input type="text"  submit提交按钮 reset重置按钮  -->
        <p>名字:<input type="text" name="username"/></p>
        <p>密码:<input type="password" name="pwd"/></p>
        <p><input type="submit">
            <input type="reset"></p>
    
    
    </form>

    image-20200528164628934

     

        <title>表单学习</title>
    </head>
    <body>
    <h1>注册</h1>
    <!--表单form
    action:表单提交的位置,可以是网站,也可以是一个请求处理地址
    method:post,get 提交方式
        get方式提交:我们可以在url中看到我们提交的信息,不安全,但高效
        post:比较安全,传输大文件-->
    <form action="10.表单.html" method="post">
    <!--文本输入框 Input type="text"  name 输入框的名字
    value 默认一个初始化值
    maxlength 文本框最大输入字符
    size 文本框长度
    submit提交按钮 reset重置按钮
     -->
        <p>名字:<input type="text" name="username" value="帅" maxlength="8" size="10"/></p>
        <p>密码:<input type="password" name="pwd"/></p>
    <!--单选框按钮  name必须为一致,才能表示为同一组,才能只选择一个
      input标签 类型是radio时,必须有value-->
        <p>
            <input type="radio" value="boy" name="sex"/>男
            <input type="radio" value="girl"name="sex">女
    
        </p>
        <p><input type="submit">
            <input type="reset"></p>
    
    
    </form>
    
    </body>
    </html>

     

     

    单选框多选框

    <!--单选框按钮 input type="radio" name必须为一致,才能表示为同一组,才能只选择一个
      input标签 类型是radio时,必须有value
    	checked 默认选中-->
        <p>
            <input type="radio" value="boy" name="sex"/>男
            <input type="radio" value="girl"name="sex">女
    <!-- 多选框标签 input type="checkbox"   -->
            <input type="checkbox" value="sleep" name="hobby"/>睡觉
            <input type="checkbox" value="talk" name="hobby"/>聊天
            <input type="checkbox" value="game" name="hobby" checked/>游戏
            <input type="checkbox" value="eat" name="hobby"/>吃东西
        </p>

     

    按钮

    <!--    按钮
        input type="button" 普通按钮
        input type="image"  图片按钮
        input type="submit" 提交按钮
        input type="reset"  重置按钮
    
    -->
        <p><input type="button" name="btn1" value="按钮名字"/>
            <input type="image" src="resources/image/1.jpg"/>
        </p>
        <p><input type="submit">
            <input type="reset"></p>

     

    下拉框

    <!--下拉框 列表框
        <select>
        name是下拉框的名字
        option value 是下拉框可以选择的值
        selected是默认为那个列
    -->
    <p>国家
        <select name="列表名称" >
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="agt">阿根廷</option>
            <option value="md">缅甸</option>
        </select>
    </p>

    文本域、文件域

    <!--    文本域
    cols="30" rows="10" 行,,,列
    -->
        <p>反馈:<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></p>
    <!--    文件域
    
    -->
        <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>
    <!--    数字验证
    max最大数量
    min 最小数量
    step 每次点击增加或减少的数量-->
        <p><input type="number" name="num" max="100" min="1" step="1"></p>
    <!--滑块-->
        <p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p>
    <!--    搜索框-->
        <p><input type="search" name="search"></p>    

     

    表单的应用

    只读:value="admin"(先给一个默认值) readonly

    禁用:disabled

    隐藏:hidden

     

    单词:description 描述 content内容

    <!--    增强鼠标可用性-->
       <p> <lable for="mark">点击</lable>
           <input type="text" id="mark"/>
       </p>

     

    表单初级验证

    placeholder="请输入用户名"<!--提示属性-->
    required 非空判断
    pattern 正则表达式

    基础汇总

    <!--告诉浏览器使用的规范-->
    <!DOCTYPE html>
    <html lang="en">
    <!--网页的头部-->
    <head>
    <!--   meta描述标签,描述网站信息-->
       <meta name="description" content="和狂神学java">
       <meta charset="UTF-8">
       <title>HTML小练习</title>
    </head>
    <body>
    <a name="top">顶部</a>
    <!--段落-->
    <p>
       <b>你好,世界</b><br/>
       <em>i&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; love you</em>

       &copy;赵东
    </p>
    <!--水平线-->
    <hr/>
    <!--src=相对路径 alt=加载失败后显示文字 title=鼠标放在图片上显示的文字 width宽 height高-->
    <img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="800" height="600">
    <!--锚链接 先使用a标签 定义名字做标记 再想返回标记的地方 a标签 #名字-->
    <!-- a标签
    href:必填,表示要跳转到那个页面
    target:表示窗口在那里打开
    _blank 在新标签中打开
    _self   在自己的网页中打开
    -->
    <a href="https://www.baidu.com" target="_blank">点击跳转百度</a>
    <!--功能性连接
    邮件连接:mailto
    QQ链接-->
    <a href="mailto:1395950933@qq.com">点击联系我</a>
    <!--有序列表
    应用范围:试卷,问答。。。-->
    <ol>
       <ul>Java</ul>
       <ul>C++</ul>
       <ul>运维</ul>
       <ul>前端</ul>
    </ol>
    <!--无序列表
    应用范围:导航,侧边栏
    -->
    <ul>
       <li>Java</li>
       <li>C++</li>
       <li>运维</li>
       <li>前端</li>

    </ul>
    <!--自定义列表
    dl:标签
    dt:列表名称
    dd:列表内容
    范围:公司网站-->
    <dl>
       <dt>学科</dt>
       <dd>语文</dd>
       <dd>数学</dd>
       <dd>英语</dd>
       <dd>自然</dd>
    </dl>
    <!--表格table
    行 tr rows
    列 td
    border表格的边框-->
    <table border="1px">
       <tr>
    <!-- colspan跨列 -->
           <td colspan="4">学习java </td>
       </tr>
       <tr>
    <!--rowspan跨行 -->
           <td rowspan="2">java</td>
           <td>前端</td>
           <td>数据库</td>
           <td>Tomcat</td>
       </tr>
       <tr>
           <td>框架</td>
           <td>面向对象</td>
           <td>微服务</td>
       </tr>
    </table>
    <!--音频和视频
    src:资源路径
    controls:控制调
    autoplay:自动播放-->
    <hr/>
    <video src="../resources/video/2.mp4" controls autoplay></video>
    <audio src="../resources/audio/3.mp3" controls autoplay></audio>
    <a href="#top">回到顶部</a>
    <!--页面结构 header网页头部
               section网页主体
               footer网页脚部-->
    <header>
       <h2>网页头部</h2>
    </header>
    <section>
       <h2>网页主体</h2>
    </section>
    <footer>
       <h2>网页脚部</h2>
    </footer>
    <!--导航 nav-->
    <nav></nav>
    <hr>
    <!--内联框架 iframe
    src:地址
    w-h:宽,高-->
    <iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
    <a href="https://www.baidu.com" target="change" >点击跳转</a>
    <!--表单form
    action:表单提交的位置,可以是网站,也可以是一个请求处理地址
    method:post,get 提交方式
       get:可以在url中看到我们提交的信息,不安全
       post:比较安全,可传输大文件-->
    <form action="1.我的第一个网页.html" method="get">
    <!--   文本输入框 Input type=text name输入框名字
    value默认初始值
    maxlength文本框输入最大字节
    size文本框长度
    submit提交按钮
    reset重置按钮-->
       <p>请注册账号</p>
       <p>名字:<input type="text" name="username" value="帅哥" size="30" maxlength="20" placeholder="请输入用户名" ></p>
       <p>密码:<input type="password" name="pwd"></p>
    <!--单选框标签 type=radio input标签类型为radio时必须有value
       checked 默认选中-->
       <p><input type="radio" value="boy" name="sex" checked>男</p>
       <p><input type="radio" value="girl" name="sex">女</p>
    <!-- 多选框标签 input type=“checkbox” -->
       <p><input type="checkbox" value="sleep" name="hobby">睡觉
           <input type="checkbox" value="talk" name="hobby">说话
           <input type="checkbox" value="study" name="hobby">学习
           <input type="checkbox" value="eat" name="hobby">吃东西
       </p>

    <!--按钮
     input type="button" 普通按钮
     input type="image" 图片按钮
     input type="submit" 提交按钮
     input type="reset" 重置按钮-->
    <p><input type="button" name="btn1" value="按钮名字"/>
       <input type="image" src="../resources/image/1.jpg" width="200" height="160"/>
       <input type="submit"/>
       <input type="reset"/>
    </p>
    <!--下拉框 列表框   -->
    <p>国家
       <select name="列表名称" id="">
           <option value="china" selected>中国</option>
           <option value="us">美国</option>
           <option value="agt">阿根廷</option>
           <option value="md">缅甸</option>
       </select></p>
    <!--文本域
    cols 行 rows 列-->
       <p>反馈:<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></p>
    <!--   文件域-->
       <p><input type="file" name="files">
           <input type="button" value="上传" name="upload">
       </p>
    <!--   邮箱验证-->
       <p>邮箱:<input type="email" name="email"></p>
    <!--   URL验证-->
       <p>URL <input type="url" name="url"></p>
    <!--   数字验证
       max 最大数量
       min 最小数量
       step 每次点击增加或减少的数量-->
       <p>数字:<input type="number" name="num" max="100" min="1" step="1">
           <!--   滑块-->
          音量:<input type="range" name="voice" max="100" min="0" step="2">
       </p>
    <!--搜索框-->
       <p><input type="search" name="search"></p>
       <p><input type="submit"></p>
    <!--   增强鼠标可用性-->
           <p> <label for="mark"></label>
               <input type="text" id="mark"/>
           </p>


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

     

  • 相关阅读:
    java入门学习(二)
    java入门学习(一)
    python3之数据类型
    pip基础用法
    python中的序列化与反序列化
    python装饰器
    python WEB接口自动化测试之requests库详解
    QQ发送邮件实例
    获取当前目录下最新的文件
    The Zen of Python
  • 原文地址:https://www.cnblogs.com/fire-dong/p/13414759.html
Copyright © 2020-2023  润新知