zoukankan      html  css  js  c++  java
  • HTML 回顾整理

    <html>标签:定义HTML文档

    <body>标签:定义文档主体

    <h1> - <h6> 标签:定义HTML标题

    <hr> 标签:创建水平线

    <!-- 这是一个注释 --> 注释

    <p> 标签:段落

    <br />标签:换行


    HTML 链接

    <a> 标签:链接

    默认情况下,链接将以以下形式出现在浏览器中:

    • 一个未访问过的链接显示为蓝色字体并带有下划线。
    • 访问过的链接显示为紫色并带有下划线。
    • 点击链接时,链接显示为红色并带有下划线。

    (1)href属性:来描述链接的地址

    <a href="url">链接文本</a>

    (2)target 属性:定义被链接的文档在何处显示

      例:target="_blank": 链接将在新窗口打开

    (3)id属性:在一个HTML文档书签标记

      例:插入ID   <a id="tips">文字</a>

        文档中创建一个链接到ID部分  <a href="#tips">文字</a>

        创建一个链接到其它文档ID部分<a href="http://www.baidu.com/html-links.html#tips">文字</a>

    注释: 请始终将正斜杠添加到子文件夹。

      例:href="http://www.baidu.com/html/


    HTML <head> 元素

    头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

    <title> 标签:定义了不同文档的标题

    • 定义了浏览器工具栏的标题
    • 当网页添加到收藏夹时,显示在收藏夹中的标题
    • 显示在搜索引擎结果页面的标题

    <base> 标签:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

    <base href="http://www.baidu.com/images/" target="_blank">

    <link> 标签:链接到样式表(CSS)

    <link rel="stylesheet" type="text/css" href="mystyle.css">

    <style> 元素:直接添加CSS样式来渲染 HTML 文档

    <head>
    <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    </style>
    </head>

    <meta> 标签:提供了元数据不显示在页面上,但会被浏览器解析。

     为搜索引擎定义关键词:

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

    为网页定义描述内容:

    <meta name="description" content="免费 Web & 编程 教程">

    定义网页作者:

    <meta name="author" content="Runoob">

    每30秒中刷新当前页面:

    <meta http-equiv="refresh" content="30">

    <script>标签:用于加载脚本文件,如: JavaScript


    HTML 图像- 图像标签( <img>)源属性(Src)

    <img> 是空标签,只包含属性,没有闭合标签。

    <img src="url" alt="some_text">

    (1)src 属性: "source"源属性的值是图像的 URL 地址

    (2)alt 属性:用来为图像定义一串预备的可替换的文本。

    (3)height(高度) 与 width(宽度)属性:用于设置图像的高度与宽度。


    HTML 表格

    <table> 标签:表格

    <tr> 标签:行

    <th> 标签:表头

    <td> 标签:单元格

    colspan="2":链接行的两个段元格

    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    HTML 列表

     <ul> 标签:无序列表

     <ol> 标签:有序列表

    <li> 标签:每个列表项的开始

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    <dl>标签:自定义例表
    <dl>
    <dt>自定义列表项</dt>
    <dd>自定义列表项的定义<dd>
    <dt>自定义列表项</dt>
    <dd>自定义列表项的定义<dd>
    </dl>

    HTML 区块

     <div> 元素:块级元素,可用于组合其他 HTML 元素的容器。

     <span> 元素:内联元素,可用作文本的容器。

     <table> 元素:作用是显示表格化的数据。

    块级元素(block-level):在浏览器显示时,通常会以新行来开始(和结束)。例: <h1>, <p>, <ul>, <table>

    内联元素(inline):在显示时通常不会以新行开始。例: <b>, <td>, <a>, <img>


    HTML 布局

    <div>块级元素或是<table>表格化的数据


    HTML 表单和输入

    <form>标签:表单

    <input>标签:输入

    文本域(Text Fields):缺省宽度是20个字符

    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>

    密码字段:<input type="password">——密码不会显示,以星号或圆点替代

    <form>
    Password: <input type="password" name="pwd">
    </form>

    单选按钮:<input type="radio"> 

    <form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>

    复选框:<input type="checkbox">

    <form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
    </form>

    提交按钮:<input type="submit">

    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>

    HTML 框架

    <iframe>框架:在同一个浏览器窗口中显示不止一个页面。

    iframe语法:<iframe src="URL"></iframe>

    height 和 width 属性:用来定义iframe标签的高度与宽度。——属性默认以像素为单位,

    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

    frameborder 属性:是否显示边框——属性值为 "0" 移除iframe的边框

    <iframe src="demo_iframe.htm" frameborder="0"></iframe>

    例:点击链接,链接地址页面显示在iframe框架中

    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>

    注:name和target名字相同。


  • 相关阅读:
    docker初识--简单用法
    性能测试--面向目标场景设计
    性能测试之--波浪场景设计
    性能测试之--阶梯负载场景设计
    Jmeter后置处理器之正则提取器详解
    JMETE-元件执行顺序
    python高阶函数-map、reduce、filter
    socket 多线程安全、粘包问题
    The fastest MySQL Sandbox setup ever!
    两个实用的Python的装饰器
  • 原文地址:https://www.cnblogs.com/wuss/p/7461885.html
Copyright © 2011-2022 走看看