• html常用的知识点以及混合框架


    html中:
     
    <hr/> 在页面中创建水平线
    例如:

     
    <p> p标签是定义段落
     
    >
    alt 作为可预备可替换信息,在无法加载图片时显示文字信息
     
    定义html表格
    <table> 定义表格
    <caption> 定义表格标题。
    <th> 定义表格的表头。
    <tr> 定义表格的行。
    <td> 定义表格单元。
    <thead> 定义表格的页眉。
    <tbody> 定义表格的主体。
    <tfoot> 定义表格的页脚。
    <col> 定义用于表格列的属性。
    <colgroup> 定义表格列的组。
     
    Table with frame="box":四周边框
    Month Savings
    January $100
    Table with frame="above":上边框线
    Month Savings
    January $100
    Table with frame="below":下边框线
    Month Savings
    January $100
    Table with frame="hsides":上下边框线
    Month Savings
    January $100
    Table with frame="vsides":左右边框线
    Month Savings
    January $100
     
    使用 HTML5 的网站布局
    header 定义文档或节的页眉
    nav 定义导航链接的容器
    section 定义文档中的节
    article 定义独立的自包含文章
    aside 定义内容之外的内容(比如侧栏)
    footer 定义文档或节的页脚
    details 定义额外的细节
    summary 定义 details 元素的标题
    HTML框架
     
    <html>
     
    <frameset rows="25%,50%,25%">
     
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
     
    </frameset>
     
    </html>
    <html>
     
    <frameset cols="25%,50%,25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
     
    <noframes>
    <body>您的浏览器无法处理框架!</body>
    </noframes>
     
    </frameset>
     
    </html>
     
    混合框架结构
    <html>
     
    <frameset rows="50%,50%">
     
    <frame src="/example/html/frame_a.html">
    noresize="noresize"
    <frameset cols="25%,75%">
    <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_b.html" noresize="noresize">
    <frame src="/example/html/frame_c.html"> 加入noresize="noresize"框架不可移动改变大小
    </frameset>
     
    </frameset>
     
    </html>
     
     
    导航框架
     
    <html>
     
    <frameset cols="120,*">
     
    <frame src="/example/html/html_contents.html">
    <frame src="/example/html/frame_a.html" name="showframe">
     
    </frameset>
     
    </html>
    内联框架
    <html>
     
    <body>
     
    <iframe src="/i/eg_landscape.jpg"></iframe>
     
    <p>一些老的浏览器不支持 iframe。</p>
    <p>如果得不到支持,iframe 是不可见的。</p>
     
     
    </body>
    </html>
     
    内联框架iframe
     
    添加 iframe 的语法
    URLIframe - 设置高度和宽度
    实例
     
     
    Iframe - 删除边框
    实例
     
     
    <!DOCTYPE html>
    <html>
    <body>
     
    <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
     
    <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
     
    <p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>
     
    </body>
     
     
    <noscript> 标签
    Your browser does not support JavaScript!
    HTML实体名
    HTML 中有用的字符实体
    注释:
    显示结果 描述 实体名称 实体编号
      空格 &nbsp; &#160;
    < 小于号 &lt; &#60;
    > 大于号 &gt; &#62;
    & 和号 &amp; &#38;
    " 引号 &quot; &#34;
    ' 撇号 &apos; (IE不支持) &#39;
    分(cent) &cent; &#162;
    £ 镑(pound) &pound; &#163;
    ¥ 元(yen) &yen; &#165;
    欧元(euro) &euro; &#8364;
    § 小节 &sect; &#167;
    © 版权(copyright) &copy; &#169;
    ® 注册商标 &reg; &#174;
    商标 &trade; &#8482;
    × 乘号 &times; &#215;
    ÷      
     
    html中颜色名
     
     
    HTML5 表单元素
     
    HTML5 <datalist> 元素
    listid 实例
     
     
     
     
    <input type="password">密码字段
    输入限制
    属性 描述
    disabled 规定输入字段应该被禁用。
    max 规定输入字段的最大值。
    maxlength 规定输入字段的最大字符数。
    min 规定输入字段的最小值。
    pattern 规定通过其检查输入值的正则表达式。
    readonly 规定输入字段为只读(无法修改)。
    required 规定输入字段是必需的(必需填写)。
    size 规定输入字段的宽度(以字符计)。
    step 规定输入字段的合法数字间隔。
    value 规定输入字段的默认值。
     
    type=date
     
    <form action="action_page.php">
    Birthday:
    <input type="date" name="bday">
    </form>
     
     
    可以输入添加限制
     
    <form action="action_page.php">
    Enter a date before 1980-01-01:<br>
    <input type="date" name="bday" max="1979-12-31"><br><br>
    Enter a date after 2000-01-01:<br>
    <input type="date" name="bday" min="2000-01-02"><br><br>
    <input type="submit">
    </form>
     
    常见的输入
    输入类型:range
    <input type="range">实例
    <form> <input type="range" name="points" min="0" max="10"> </form>
    输入类型:month
    <input type="month">实例
    <form> Birthday (month and year): <input type="month" name="bdaymonth"> </form>
    输入类型:week
    <input type="week">实例
    <form> Select a week: <input type="week" name="week_year"> </form>
    输入类型:time
    <input type="time">实例
    <form> Select a time: <input type="time" name="usr_time"> </form>
    输入类型:datetime
    <input type="datetime">实例
    <form> Birthday (date and time): <input type="datetime" name="bdaytime"> </form>
    输入类型:datetime-local
    <input type="datetime-local">实例
    <form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form>
    输入类型:email
    <input type="email">实例
    <form> E-mail: <input type="email" name="email"> </form>
    输入类型:search
    <input type="search">实例
    <form> Search Google: <input type="search" name="googlesearch"> </form>
    输入类型:tel
    <input type="tel">实例
    <form> Telephone: <input type="tel" name="usrtel"> </form>
    输入类型:url
    <input type="url">实例
    <form> Add your homepage: <input type="url" name="homepage"> </form>
     
     
     
    readonly 属性
    readonly
    disabled 属性
    disabled
    maxlength 属性
    maxlength实例
     
     
    autocomplete 属性
     
    autofocus 属性 页面加载自动获得焦点
     
    form 属性
    实例
     
     
    formaction 属性
    实例
     
     
    height 和 width 属性仅用于 <input type="image">。
    实例
     
     
    multiple 属性
    实例
     
     
    pattern 属性
    <form action="/example/html5/demo_form.asp" method="get">
    国家代码:<input type="text" name="country_code" pattern="[A-z]{3}"
    title="三个字母的国家代码" />
    <input type="submit" />
    </form>
     
    placeholder 属性
    实例
     
    required 属性
     
    step 属性
    示例
     
    HTML5 浏览器支持
     
     
  • 相关阅读:
    Linux下安装nginx
    使用Nginx搭建集群
    怎样解决虚拟机中多台机器之间的相互通信问题??
    怎样安装vmtools
    常用的机器学习&数据挖掘知识(点)领域链接
    sparkan安装链接
    matlab中怎样将散点用光滑曲线连接起来??
    matlab中怎样画出散点图,将这些散点连接成线??
    matlab中怎样计算两个集合的差集?-setdiff函数
    MATLAB中在一个三维矩阵中如何提取出一个二维矩阵,使用permute
  • 原文地址:https://www.cnblogs.com/lihaolh/p/6774657.html
Copyright © 2020-2023  润新知