zoukankan      html  css  js  c++  java
  • HTML学习杂记

          超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准。它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

    • 元素

            包括空元素和非空元素

                   非空元素包含两个标签,opening tag&closing tag,在closing tag中关闭

                   空元素在opening tag中关闭

            大部分可分为块元素和内联元素

                   块元素block level element  在浏览器显示时,通常以新行开始(结束)

                   内联元素inline element  通常不会以新行开始(结束)

            元素可以嵌套

            标签要小写!

            元素一定要关闭!

            <head>

            所有头部元素的容器,指示浏览器样式表,元信息位置

             <title>

            定义浏览器工具栏中的标题

            提供页面被添加到收藏夹时显示的标题

            显示在搜索引擎结果中的页面标题

            <base>

            为所有链接添加默认地址或目标

            <link>

            当在文档中声明使用外接资源(比如CSS)时使用此标签

            <style>

            为html文档指定样式信息

            <meta>

            meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

            元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

            Meta robots标签管理着搜索引擎是否可以进入网页,你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。例如:

    <meta name="robot" content="noindex,nofollow"/>

           这个 meta 标签告诉搜索引擎不要获取网页,并且阻止其进入链接

          <script>

            定义客户端脚本,如javascript

           <h>

            标题元素

            浏览器自动在标题元素前后添加空行

           <hr/>

           水平线;分隔内容用

           HTML注释

    <!-- This is a comment –>

           <p>

            段落元素

            浏览器自动在标题元素前后添加空行

           <br/>

            在不产生段落的情况下空行

            <pre>

             预格式文本 元素

             对空格和空行进行控制

            <abbr> <acronym>

            缩写或首字母缩写 元素

    <html>
    <body>
    
    <abbr title="etcetera">
    etc.
    </abbr>
    
    <acronym title="World Wide Web">
    www
    </acronym>
    
    </body>
    </html>

           <bdo>  bi-directional override

            反方向输出文字  元素

    <html>
    <body>
    
    <bdo dir="rtl">
    收到了吗
    </bdo>
    
    </body>
    </html>

            <blockquote>  <quote>

            长引用和短引用

            使用<blockquote>浏览器会自动添加空行和边框,但使用<q>则不会

    <html>
    <body>
    <blockquote>
    黑猫白猫,抓老鼠的就是好猫
                                             --------邓xx
    </blockquote>
    
    <quote>
    已阅!!
    </quote>
    </body>
    </html>

            <del>   <ins>

            删除字效果和下划线效果 元素

    <html>
    <body>
    
    <p><del>玩你</del>育碧大法<ins></ins></p>
    
    </body>
    </html>

           <img>

            图像元素

            属性   scr=source(图像地址)   width  height

                      alt (图像不能显示时替换为文字)

    <img scr="mosaic.gif" alt="马赛克">

            <table>

            表格元素

            <tr>行元素      <td>列元素    <th>表头(默认粗体居中) <caption>标题

           colspan/rowspan列/行合并属性<th>,可创建跨列/行表头

           cellpadding  单元格中文字与边框距离属性<table>

           cellspacing  单元格与单元格距离属性<table>

           frame  控制边框属性<table> 值  box  above below hsides  vsides

    <table>
    <tr>
    <th>计划</th>
    <th>变化</th>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

            <ul>

            无序列表(列表项由<li>开始)

            type属性 disc circle square 定义项目符号

            <ol>

            有序列表(列表项由<li>开始)

            type属性 A a I i  定义排序符号

             <dl>

             自定义列表(列表项由<dt>开始,项定义由<dd>开始,可使用图片、段落等)  

          <form>

            允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素

             <input>

            文本域   由type属性控制(text 文本框   radio 单选按钮  checkbox 复选按钮 button 创建按钮)

            此文本域的缺省宽度是20个字

             action属性

    <form action="html.asp" method="get">
    Aegis or cheese?
    <input type="text" name="option" />
    <input type="submit" name="submit"/>
    </form>

             <select> 制作下拉列表

    <form>
    <select name="heros">
    <option value="Rubic">Rubic</option>
    <option value="Void">Void</option>
    <option value="Roshan">Roshan</option>
    </select>
    </form>
    <option value="Roshan" selected="selected">Roshan</option>

            上式可选定预选值

            <textarea>

            可以创建文本域  字数不受限制

    <html>
    <body>
    <textarea row="20" cols="70"/>

           <frameset>

           框架结构 元素

           rows和cols属性定义将页面按横向还是竖向分为几个框架

           不能将<body>和<frameset>同时使用

           但是对于不支持框架的浏览器应该用<noframes>说明,此时内部要用<body>

    <noframes>
    <body>
    您的浏览器不支持框架
    </body>
    </noframes>
    <frameset cols="20%,30%,50%">
    <frame   blablabla A/   noresize="noresize">  <!-- 禁止改变大小->
    <frame   blablabla B/>
    <frame   blablabla C/>
    </frameset>

            <iframe>

            内联框架 元素  用于在网页中显示网页

    <iframe scr="EA.html" name="Value" width="100" height="200">
    </iframe>
    <a href="www.baidu.com" target="Value">
    看我~
    </a>
    • 属性

            只能?在开始标签中规定属性值

            属性要小写!

            始终为属性值添加双引号!

          href:Hypertext Reference 超文本引用                                    

          相关语法 :

    <a href="value">

            属性值:

            a.绝对url  指向另外一个站点

            b.相对url  指向站内某个文件

            c.锚          指向页面中的锚(href="#top")

           target 属性

             定义被链接的文档在何处显示

    <html>
    <body>
    
    <a href="www.baidu.com"  target="_blank">百毒
    </a>
    
    </body>
    </html>

              将在新页面中打开网址

               name/id   命名锚

      在需要链接到的一段文字处命名,然后在本页面或其它页面处引用

    <a name="tips">基本注意事项-有用的提示</a>
    <a href="#tips">有用的提示</a>
    <a href="http://www.baidu.com/html/...#tips">有用的提示</a>

              background   添加页面背景图片/也可添加在<table>中作为表格背景/<td>中作为单元格背景

    <body background="nice.png">
    </body>

              align   指定位置(相对于文本)/可添加在单元格

    <img scr="good.jpg" align="top"/>
    <img scr="good.png" align="middle"/>
    <img scr="bad.bmp" align="bottom"/>
    <img scr="bad.bmp" align="left"/>
    <img scr="bad.bmp" align="right"/>

              bottom是默认对齐方式

              <!DOCTYPE>

               不是标签,只是用来声明该文档html类型

              html5声明

              <!DOCTYPE html>

              不间断空格(non-breaking space)

              HTML 中的常用字符实体是不间断空格(&nbsp;)。

              浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

               URL - Uniform Resource Locator  统一资源定位器

       语法规则: scheme://host.domain:port/path/filename

           scheme - 定义因特网服务的类型。最常见的类型是 http

                          http
                          超文本传输协议
                          以 http:// 开头的普通网页。不加密。

                          https
                          安全超文本传输协议
                          安全网页。加密所有信息交换。

                          ftp
                          文件传输协议
                          用于将文件下载或上传至网站。

                          file
                          您计算机上的文件。

           host - 定义域主机(http 的默认主机是 www)

           domain - 定义因特网域名,比如 w3school.com.cn

          :port - 定义主机上的端口号(http 的默认端口号是 80)

           path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

           filename - 定义文档/资源的名称

  • 相关阅读:
    周末之个人杂想(十三)
    PowerTip of the DaySorting Multiple Properties
    PowerTip of the DayCreate Remoting Solutions
    PowerTip of the DayAdd Help to Your Functions
    PowerTip of the DayAcessing Function Parameters by Type
    PowerTip of the DayReplace Text in Files
    PowerTip of the DayAdding Extra Information
    PowerTip of the DayPrinting Results
    Win7下IIS 7.5配置SSAS(2008)远程访问
    PowerTip of the DayOpening Current Folder in Explorer
  • 原文地址:https://www.cnblogs.com/herikutsu/p/5117855.html
Copyright © 2011-2022 走看看