zoukankan      html  css  js  c++  java
  • HTML

    html常用标签:

    //指定文档的类型,为html类型 //开始标签,对应结束标签
    <head> //html必备标签,表示头部
     
    <meta charset="utf-8" /> //定义字符集,utf-8 解释中文乱码

    </head>

    <body> //html必备标签,表示身体

    </body>

    </html> 1、 <!-- -->:写注释的快捷键,或者是注释掉一部分内容,用ctrl+/ 。 并注意浏览器只解释标签,不解释注释里面的。 写注释的好处就是提高代码的可读性

    2、<h1>~<h6> </h1>~</h6> : 标题标签 其中可以以 属性名=“属性值”的方式设置标题样式,<h1 align="center" > 标题 </h1> align="center" 用来设置对齐方式,居中对齐

    3、<p>段落标签</p> : 每一个段落之间会空一行,段落里面会有很多的嵌套

    4、斜体: 斜体的运用不广泛,但是有的时候必须要,em为斜体的标签元素

    5、加粗: <strong>加粗很常见,有的时候加粗的文字不一定是标题,有的可能就是直接加粗

     

    6、<hr />: 水平线,横线,它就是一条直线,并且它是一个单标签

    7、<img src="" alt="" width="" height="" />: 单标签,src指定图片的路径。alt图片资源路径没用时,替代的文本。width和height用来设置图片的宽度和高度 6.链接标签<a> <!--

    a标签

    href:必填,表示跳转那个页面

    target:表示窗口在那里打开 ——blank在新的窗口打开 _self在当前窗口打开

    -->

    <i>...</i>                      斜体字 

    <em>...</em>             斜体字(强调)

    <center>…</center>   居中文本

    <ul>…</ul>                 无序列表

    <ol>…</ol>                 有序列表

    <li>…</li>                   列表项目
    自定义列表:
    <dl>
       <dt>学科</dt>
       <dd>java</dd>
           <dd>linux</dd>
           <dd>python</dd>  
       <dd>c++</dd>
    </dl>


    <font>                         定义文本字体尺寸、颜色、大小

    <sub>                         下标

    <sup>                         上标

    <br>                           换行

    <p>                           段落
       
       
       <table>…</table>   定义表格

    <th>…</th>           定义表格中的表头单元格

    <tr>…</tr>             定义表格中的行

    <td>…</td>           定义表格中的单元
       
       
       <form>…</form>   定义供用户输入的 HTML 表单

    <frame>                 定义框架集的窗口或框架
       
       <!--音频和视频-->
       <video>:视频, contorls 控制条,autoplay:自动播放
       <video src="..."" contorls autoplay></video>
        <audio>:音频   contorls 控制条,autoplay:自动播放
        <audio src="..." contorls autoplay></audio></video>
           
                       
                       
       

     

    表单

        <h1>注册</h1>
        <!-- 
            表单form
            action:表单的提交位置,可以是网站,也可以是请求地址
            method:post,get提交方式
            get:提交的方式我们能在url看到我们的提交的信息,不安全但是 高效
           post:比较安全,传输大文件,
    ​
         -->
         <form action="列表.html" method="POST">
         <!-- 文本输入框 -->
         <p>名字:<input type="text" name="username"></p>
         <!-- 密码框 -->
         <p>密码:<input type="password" name="pwd"></p>
             
             
         <!-- 单选框标签
        input type ="radio"
        value:单选框的值
        name:表示组
    checked:默认选中
        -->
        <p>
            性别:
            <input type="radio" value="boy" name="sex"/><input type="radio" value="girl" name="sex"/>女
    ​
        </p>
             
             
             
        <!-- 多选框
        
            input type="checkbox"
    checked:默认选中
        -->
         
        <p>
          爱好:
          <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">游戏
        </p><!-- 按钮
      input type="button" 普通
      input type="image"  图片
      input type="submit" 提交
      input type="reset"  重置
    -->
        <p>按钮:
            <input type="button" name="btn1" value="点击变成">
            图片按钮:
            <input type="image" src="resourcesimagesQQ图片20200321231838.jpg">
        </p>
       <!-- 下拉框,列表框 -->
        <p>城市:
            <select name="城市名称">
                <option value="beiing">北京</option>
                <option value="hangzhou">杭州</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
       
            </select>
       
         </p>
            <!-- 文本域
                cols:30列
                rows:10行
           -->
           <p>反馈:
               <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
           </p>
       
           <!-- 文件域 
              input type="file" name="files"
             
           -->
          <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>
           <input type="number" name="num" max="100" step="10"><!-- 滑块
        input type="range"
        -->
            <P>音量:
                <input type="range" min="0" max="100">
    ​
    ​
            </P><!-- 搜索框search -->
            <p>搜索:
                <input type="search" name="search"></p><p>
            <!-- 提交 -->
             <input type="submit">
             <!-- 重置 -->
             <input type="reset">
         </p>
        </form>

    表单元素格式:

     

    表单的应用:

    disabled:禁用

    hidden:隐藏

         <!-- 增强鼠标可用性 根据id指向一个位置-->
          <p> <label for="mark">点我</label>
              <input type="text" id="mark">
          </p>

    placeholder:提示信息(用在所有的输入框中)

    required:非空判断(用在所有的输入框中)

    pattern 正则表达式判断

     

  • 相关阅读:
    Redis 思维导图 (解析版)
    一张图片了解redis
    Redis 思维导图
    计算机网络协议
    IT笔面试题
    Hadoop集群搭建
    天涯论坛只看楼主
    齐秦&r大约在冬季现场版
    郁可唯茶汤现场版
    MTK平台电路设计01
  • 原文地址:https://www.cnblogs.com/jinronga/p/12548055.html
Copyright © 2011-2022 走看看