• HTML超文本标记语言


    HTML超文本标记语言

    基本结构:html head body

    <!DOCTYPE html>
    <html>
      
      <head>
        <title>Page Title</title>
      </head>
    
      <body>
        <p>Page Contxt</p>
      </body>
    
    </html>
    

    标签

    • 标题标签

          <h1>一级标题标签</h1>
          <h2>二级标题标签</h2>
          <h3>三级标题标签</h3>
          <h4>四级标题标签</h4>
          <h5>五级标题标签</h5>
      
    • 段落标签,<p>段落</p>

    • 换行标签,<br/>

    • 水平线标签,<hr/>

    • 粗体,<strong>粗体</strong>

    • 斜体,<em>斜体</em>

    • 空格,&nbsp;

    • 大于,&gt;。小于&lt;

    • 版权符号:&copy;

    图像标签<img/>

    <img src="img/timg (2).jpg" alt="阿精" title="看屁呢!" width="200" height="200" />
    
    • src:图片地址
    • alt:替换文本,图片无法加载时显示
    • title:鼠标悬停在图片上显示的文字

    超链接

    文字超链接<a href="http://www.runoob.com">这是一个链接</a>

    图片超链接

        <a href="1.我的第一个网页">
            <img src="img/timg (2).jpg" alt="阿精" title="看屁呢!" width="200" height="200" />
        </a>
    

    锚链接

    <a name="#top">顶</a>
        ....
        <a href="#top">回到顶</a>
    	<a href="#last">直达底</a>
    <a name="#last">底</a>
    

    功能性链接

    邮箱链接:mailto
    <a href="mailto:3737@qq.com">邮箱链接:mailto</a>
    qq推广链接:
    <!--百度搜索qq推广-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=446783737&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:446783737:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
    

    块元素和行内元素

    块元素:独占一行。h1,h2,h3,p

    行内元素:不会自动换行 strong,em

    列表

    资源的一种展示形式,以列表的方式展示,使信息资源结构化和条理化

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

    1. 000
    2. 000

    无序列表<ui><li></li></ui>

    • 000
    • 000

    定义列表<dl><dt><dd> </dd></dt></dl>

    dl:标签 dt:列表名称 dd:列表类容

    表格标签

    tr:表示一行 td:表示一列 rowspan:向下跨行 colspan:向后跨列

    <table border="1">
        <tr>
            <td rowspan="2">00</td>
            <td colspan="5">1</td>
        </tr>
        <tr>
            <td>00</td>
            <td>00</td>
            <td>00</td>
            <td>00</td>
            <td>00</td>
            <td>2</td>
        </tr>
    </table>
    

    媒体元素

    视频:<video src="" controls autoplay/> controls--->控制条
    
    音频:<audio src="" controls autoplay/>
    

    iframe 内联框架

    <iframe 
    src="https://www.cnblogs.com/qqkkOvO/" 
    frameborder="0" 
    name=""
    width="1000px" height="800px"></iframe>
    name--->框架标识名
    

    表单

    <!-- action:表单提交的位置,可以是网站,也可以是一个请求处理地址 -->
    <form action="" method="GET">
        <p>
           名字: <input type="text" name="name">
        </p>
        <p>
            密码: <input type="password" name="passord" value="123" maxlength="6">
         </p>
         <p>性别:
             <!-- name,表示单选框的分组,一个组只能选一个 -->
                    <input type="radio" value="男孩" name="sex">男
                    <input type="radio" value="女孩" name="sex">女
         </p>
         <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>
         <p>上传文件:
             <input type="file" name="files">
         </p>
         <p>
             <input type="submit">
             <input type="reset">
         </p>
    </form>
    

    表单元素

    input

    • type:
      • text文本框
      • search搜索框
      • password密码框
      • radio单选框
      • checkbox多选框
      • file文件域
      • email邮箱
      • number数量,step=2表示每次 +/- 2
      • range滑块
      • button按钮
      • image图片按钮
      • submit提交
      • reset重置
    • value,初始值
    • required,非空判断。当前字段必须有值,没有值无法提交
    • hidden,隐藏域
    • palaceholder,提示信息
    • readonly,只读
    • disabled,禁用
    • maxlength,最大长度

    select, option下拉框

         <p>
             <select name="country">
                 <option value="Chana">中国</option>
                 <option value="mm">没国</option>
                 <option value="ee">额国</option>
                 <option value="rr">日国</option>
             </select>
         </p>
    

    textarea文本域

         <p>意见:
             <textarea name="textarea" cols="60" rows="10">内容</textarea>
         </p>
    

    表单验证

    pattern 正则表达式

    常用正则表达式地址:https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html

  • 相关阅读:
    深入admin之chang_list
    List<T>列表通用过滤模块设计
    Mysql行转换为列
    Linux中cp直接覆盖不提示的方法
    hibernate Restrictions 用法
    java.lang.OutOfMemoryError: PermGen space
    ruby+gem常用命令
    Linux查看CPU和内存使用情况
    在Ubuntu 9.04下配置Apache和ModPython
    有关查询和执行计划的DMV 从而明确那些SQL要优化
  • 原文地址:https://www.cnblogs.com/qqkkOvO/p/13963669.html
Copyright © 2020-2023  润新知