zoukankan      html  css  js  c++  java
  • html笔记

    HTML是一种描述网页的语言,指的是超文本标记语言;HTML并不是编程语言,而是一种标记语言!   

    HTML标签:由尖括号包含的关键词,如<html></html>;一般都是成对出现的,如<title></title>;标签对中第一个叫开始标签,第二个加了/的叫结束标签

    HTML元素:开始标签+内容+结束标签,如:

     
    <p>内容</p>

    有些标签没有结束标签,如<br />  , <hr />,在开始标签中闭合的叫空元素。


    HTML属性:大部分元素都可以添加html元素属性,属性一般放在开始标签中,以名称=值的形式存在,属性值一般用双引号包裹起来,如下中<a>标签的href属性,值为”http:http://www.cnblogs.com/yunmengshu“。

     
    <a href="http:http://www.cnblogs.com/yunmengshu">超链接</a>

    HTML格式如下:

    复制代码
    <!DOCTYPE html>
    <html>
      <head>
           <title>Hello World</title>
      </head>
      <body>
      </body>
    </html>
    复制代码

    <!DOCTYPE> 是文档声明,有助于浏览器中正确显示网页。其实就是声明了HTML的版本。目前通用的html5文档声明为   <!DOCTYPE html> 。

    <html>元素说明文档为html文档,也是根元素;

    <head>元素包含了所有的头部信息。

             <title></title> 定义标题,就是显示在浏览器工具栏中的标题名称;

             <meta> 描述了基本的元数据,如下,(当然还有其他的,需要以后慢慢摸索啦...)

    复制代码
    <head>
      <meta charset="utf-8">  // 定义字符编码,通常用utf-8
      <meta name="description" content="描述页面信息">
      <meta name="keywords" content="页面中的关键词">  
      <meta name="author" content="作者信息">
      <meta http-equiv="refresh" content="5">   // 每5秒刷新页面,可以在5后面加URL
      <link rel="stylesheet" type="text/css" href="外部链接路径">
      <style type="text/css">这里写css样式</style>
      <script type="text/javascript" src="外部脚本路径">这里不允许写js</script>
      <script type="text/javascript">这里写js</script>   //  不仅仅可以放在head元素中,还可以放在当前文档的<body>元素中
    </head>
    复制代码

    <body>元素中放的就是显示在页面中的内容啦!包含很多的标签元素和文本、图像、声音、视频等等内容!

    标题:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>     显示在页面上字体按顺序由大到小

    段落:<p></p>

    换行:<br />

    分割线:<hr />

    引用短的句子:<q></q>   显示在页面中就是将句子加了一个“双引号”,但是不要只为了需要双引号而是用<q>

    引用大块的句子或段落:<blockquote cite=""></blockquote>      显示在页面是整体缩进,但是不要只为了需要缩进而使用<blockquote>,cite属性值是引用的出处

    定义作品标题:<cite></cite>

    粗体:<b></b>

    斜体:<i></i>

    强调:<em></em>              显示为斜体,不要为了使用斜体而是用em

    强调:<strong></strong>    比em更强烈的强调,显示为粗体,不要为了使用粗体而是用strong

    计算机代码:<code></code>

    保留:<pre></pre>     可以保留文档中的空格、换行和TAB

    上标:<sup></sup>

    下标:<sub></sub>

    无意义标签:<div></div>,可作为容器,用来布局;<span></span>,可以用来和css配合改变文字的样式

    全局属性:id           必须以字母开头(大小写都可),后面跟字母(大小写都可)、数字(0-9)、连字符("-")、下划线("_")、冒号(":") 以及点号(".");文档中不能有相同的ID名称;

                  class      必须以字母开头(大小写都可),后面跟字母(大小写都可)、数字(0-9)、连字符("-")、下划线("_");文档中可以有相同的class名称;

                  style      行内样式 

                  title        显示额外信息

    注释:<!-- 注释内容 -->

    实体字符:   

                <      &lt;

                >      &gt;

                &      &amp;

                空格   &nbsp;

                ©      &copy;

                更多实体字符  http://www.w3cschool.cn/htmltags/ref-entities.html

    图像:<img src="图像所在路径" alt="" />, alt中的文本描述图片基本信息,当页面加载不出来图片的时候就会显示alt中的文本;<img>可以和<map>合作将图像定义客户器端图像映射,如下

    复制代码
    <!--
    shape定义区域的形状,coords定义区域的坐标,href定义URL。
    <img>的usemap属性值只是在<map>中name的属性值加#,这个很重要
    -->
    <img src="#" width="" height="" usemap="#map" />
    <map name="map">
    <area shape="rect" coords="0,0,50,60" href="#"></area>
    <area shape="circle" coords="0,0,50" href="#"></area>
    </map>
    复制代码

    超链接:<a>   有以下几种使用情况,

          1.文本超链接     <a href="http://www.cnblogs.com/yunmengshu/" target="_blank" title="超链接到我的博客">超链接</a>    target属性有 _self (默认,在当前页面打开链接页面),_blank (在新的窗口打开连接页面),_top (在整个窗口中打开被链接文档),和<iframe>中name属性配合显示在iframe中的页面。    title中的内容在鼠标放在链接文本上的时候会显示出来

          2.图像超链接    <a href="http://www.cnblogs.com/yunmengshu/" target="_blank"><img src="图像所在路径" alt="" /></a>    

          3.定义锚点  

     
    <body>
    <a id="tips">锚点</a>        // id 或者 name 都可以
    <a href="#tips">回到锚点</a>     
    </body>

          4.显示在iframe中    

    复制代码
    <body>
    <a href="http://www.cnblogs.com/yunmengshu/" target="a">显示在iframe中,咻</a>
    <iframe name="a"></iframe>
    
    <!--
    iframe 使用方法如下,会直接在iframe上显示对应的页面
    <iframe src="URL" width="" height=""></iframe>
    -->
    </body>
    复制代码

          5.链接到邮箱或者手机

    复制代码
    <body>
    <a href="mailto:yinyupiaoxue@126.com" target="_blank"">联系邮箱</a>
    <a href="tel:###########">联系手机</a>
    
    <--
    mailto后可跟多个邮箱,最后一个邮箱用?结束,后面是”cc=邮箱”(抄送),也可多个邮箱,用&结束,后面可跟“subject=主题”,以&结束,还可加“body=内容”,如下
    
    <a href="mailto:yinyupiaoxue@126.com?cc=1023027599@qq.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">联系邮箱</a>
    %20在这里代表空格
    -->
    </body>
    复制代码

    无序列表

    <ul>

      <li>html</li>

      <li>css</li>

      <li>javascript</li>

    </ul>

    注:无序列表默认实心黑色圆点,type属性可以改变,共有三个值:disc(默认),circle(空心圆点),square(实心黑色方块)。当然用css最好。

    有序列表

    <ol>

      <li>html</li>

      <li>css</li>

      <li>javascript</li>

    </ol>

    注:有序列表默认数字排序,type属性可以改变,有好几个值:1(数字), a(字母)等等;shart属性可以改变排序从第几个开始,比如数字排序,start="2",排序第一个就不再是 1 ,而是 2 。用css改变样式。

    自定义列表

    <dl>

    <dt>html</dt>

    <dd>表述页面的标记语言</dd>

    </dl>

    注:ul ol dl 之间是可以相互嵌套的。

    表格

    <table>

    <caption>table标题</caption>

    <thead>

    <tr>

    <th>表头</th>

    <td>单元格</td>

    </tr>

    </thead>

    <tbody>

    <tr>

    <th>表头</th>

    <td>单元格</td>

    </tr>

    </body>

    <tfoot>

    <th>表头</th>

    <td>单元格</td>

    </tr>

    </tfoot>

    </table>

    注:td 或 th 的 colspan 属性可以合并列, rowspan 可以合并行。table  的 cellspacing 属性控制单元格间距, cellpadding 属性控制单元格边距。

    表单

    复制代码


    <form action="" method="">      // actioin 表单提交地址; method 表单提交方式 post 或者 get; 定义id属性,可以让表单外的表单元素用 form 属性关联到此表单中
      <fieldset>                    //  分区
        <legend>分区标题</legend>    
         账号:<input type="text" name="" /><br />                 
         密码:<input type="password" name="" /><br />
         learn:<br />
         <label><input type="radio" name="ht" checked="checked" />html</label>            // 同一组 radio 的 name 值必须相同;checked 默认选中
         <label><input type="radio" name="ht" />css</label>                               // input  外加 label 为了点击字体的时候也可选中radio ;另一种方法是<label> 中的 for 属性和 radio 的 id 属性值相同 
         <label><input type="radio" name="ht" />javascript</label><br />
         like:<br />
         <label><input type="checkbox" name="l" value="骑行" />骑行</label>             // 
         <label><input type="checkbox" name="l" value="书法" checked="checked" />书法</label>
         <label><input type="checkbox" name="l" value="旅行" />旅行</label>
      </fieldset>
      城市:
      <select>
        <option>北京</option>
        <option selected="selected">上海</option>         // selected 默认选中
        <option>郑州</option>
      </select><br />
      简介:<br />
      <textarea cols="30" rows="5"></textarea><br />
      <input type="submit" name="" />
      <input type="reset" name="" />
      <input type="button" name="" value="按钮" />      // 按钮还是用 <button> 标签好一些 
      <br />
      <button type="submit">提交</button>
    </form>

    display 禁用; required 必须填写项; placeholder 提示词(显示灰色);multiple 可多选;min max 最小值、最大值;width 和 height input属性;
    input 的 type 属性还有其他值,比如,email,url,number, search,range,color,data,aurofocus
    还有list 和 datalist 的配合使用预选项
    <form> 也有新属性 这些等慢慢研究了再写



    
    
    复制代码

    视频

    复制代码
    <video width="" height="">            //  controls 显示控制条; autoplay 自动播放;loop 循环播放;单个文件可以直接放在 src 属性中
      <source src="movie.mp4" type="video/mp4" />       
      <source src="movie.webm" type="video/webm" />
      <source src="movie.ogg" type="video/ogg" />
      您的浏览器不支持video!
    </video>
    复制代码

    音频  (同 video)

    复制代码
    <audio width="" height="">
      <source src="music.mp3" type="audio/mp3" />
      <source src="music.wav" type="audio/wav" />
      <source src="music.ogg" type="audio/ogg" />
      您的浏览器不支持audio!
    </audio>
    复制代码

    html 最好全部都有小写;所有元素都要闭合;属性都要有值。

  • 相关阅读:
    “不裁员”才是公司度过艰难时期的聪明选择
    oracle服务端与客户端字符集不同导致中文乱码解决方案
    [转]ABAP数据库操作系列(5)
    [转]ABAP数据库操作系列(2)
    [转]整理的函数
    [转]ABAP数据库操作系列(6)
    [转]ABAP数据库操作系列(7)
    [转]Authoritycheck
    [转]ABAP Program to Display SAP Icons
    [转]ABAP数据库操作系列(3)
  • 原文地址:https://www.cnblogs.com/huhuxixi/p/10530374.html
Copyright © 2011-2022 走看看