首页 > 代码库 > HTML的认识

HTML的认识

 学了四周多的html,让我认识到这html的神奇。在中西(在操作的过程当中用<p></p>等的结构在其中加字,它能让字变大 缩小   变色等奇妙无比)结合的情形下,在网页上展示了它的精妙之处。

   

HTML 指的是超文本标记语言 (Hyper Text Markup Language)       HTML 不是一种编程语言,而是一种标记语言 (markup language)       标记语言是一套标记标签 (markup tag)       HTML 使用标记标签来描述网页

<!---->  注释             实例:  <!-- This is a comment -->

     <body> 定义 HTML 文档的主体。

    <select id="year" name="year">          <option value="http://www.mamicode.com/91">1992</option>          <option>1993</option>          <option selected="selected">1994</option>          <option>1995</option>          <option>1996</option>      </select>      下拉列表

     <html> 与 </html> 之间的文本描述网页

     <body> 与 </body> 之间的文本是可见的页面内容

     <h1> 与 </h1> 之间的文本被显示为标题                  实例:   <h1>This is a heading</h1>                          <h2>This is a heading</h2>                          <h3>This is a heading</h3>

      HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的

     图像是通过 <img> 标签进行定义的。                实例: <img src="http://www.mamicode.com/1.jpg" width="104" height="142" />

      链接是通过 <a> 标签进行定义的                实例: <a href="http://www.baidu.com">百度</a>

      <p> 元素定义了 HTML 文档中的一个段落                 实例: <p>不是吗 </p>

      <br> 没有关闭标签的空元素(<br> 标签定义换行)                 实例: <br />,是关闭空元素的正确方法

      <name="value">标签的属性

      <h1 align="center"> align="center" 对齐方式的附加信息              实例: <h1 align="center">This is heading 1</h1>

      <table> 使用 HTML的表格

     <body bgcolor="yellow"> 使用背景颜色的

     <table border="1"> <tr><td></td></tr> 使用表格边框的

     class  规定元素的类名(

      id 规定元素的唯一

      style  规定元素的行内样式

      <hr /> 水平线          实例: <p>This is a paragraph</p>                <hr />                <p>This is a paragraph</p>                <hr />                <p>This is a paragraph</p>

         <b> 定义粗体文本。

      <big> 定义大号字。

      <a> 定义锚

      &nbsp;空格符号

      <table> 定义表格

      <caption> 定义表格标题

      <th> 定义表格的表头

      <tr> 定义表格的行

      <td> 定义表格单元

      <thead> 定义表格的页眉

      <tbody> 定义表格的主体

       <tfoot> 定义表格的页脚

       <col> 定义用于表格列的属性

       <colgroup> 定义表格列的

        无序列表用 <ul>  每个列表要用 <li>开始                实例:    <ul>                          <li>哈哈</li>                          <li>呵呵</li>                         </ul>         有序列表用 <ol>  每个列表要用 <li>开始                实例:    <ol>                           <li>哈哈</li>                           <li>呵呵</li>                         </ol>         自定义列表用 <dl>  每个自定义列表要用 <dt> 开始。每个自定义列表用 <dd> 开始                 实例:   <dl>                            <dt>哈哈</dt>                            <dd>你要来一炮吗</dd>                            <dt>呵呵</dt>                            <dd>你认为是谁</dd>                        </dl>         <ol> 定义有序列表

        <ul> 定义无序列表

        <li> 定义列表项

        <dl> 定义定义列表

        <dt> 定义定义项目

        <dd> 定义定义的描述

        <span> 是内联元素,用于作文本的容器

        <div> 定义文档中的分区

        <form>使用于表单

       <input type="text" name="firstname" />输入的文本框架

        <button type="button">按钮</button> 按钮               disabled 是规定禁用此按钮。

        alt  用于区域的替换文本

        shape  定义区域的形状

        <blockquote></blockquote>  标记长的引用

        <colspan="" rowspan="">  用于单元格的合并

        selector  选择器

        P {color:deeppink; font-size: 20px }         #idp{background-color:orangered}         .p1 {color:blue }         input{color: red }         a:link{color: red; text-decoration:none}         a:hover{text-decoration:underline color:yellow; font-size: 20px}         h1 {color:red; font-size:14px;}             不同的变颜色的方法

        规定元素的 id、宽度和高度:                 实例:   <canvas id="myCanvas" width="200" height="100"></canvas>

        在 head 部分通过 <style> 标签定义内部样式表。                 实例:   <head>                           <style type="text/css">                            p {margin-left: 20px}                           </style>                        </head>

         外部样式表                 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css">

          链接语法               <a href="http://www.mamicode.com/url">Link text</a>               <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

          命名锚的语法               <a name="label">Text to be displayed</a>

            从不同的位置插入图片             <p>                 来自另一个文件夹的图像:                   <img src="http://www.mamicode.com/i/ct_netscape.jpg" tppabs="http://w3school.com.cn/i/ct_netscape.jpg" />             </p>

            <p>                 来自 W3School.com.cn 的图像:                   <img src="http://www.mamicode.com/www.w3school.com.cn/i/w3school_logo_white.gif" tppabs="http://www.w3school.com.cn/i/w3school_logo_white.gif" />             </p>

            alt 属性用来为图像定义一串预备的可替换的文本                   <img src="http://www.mamicode.com/boat.gif" alt="Big Boat">

            插背景图片                     <body background="../i/eg_background.jpg" tppabs="http://w3school.com.cn/i/eg_background.jpg">

                    <h3>图像背景</h3>

                    <p>gif 和 jpg 文件均可用作 HTML 背景。</p>

                     <p>如果图像小于页面,图像会进行重复。</p>

             叶面布局                     <table width="500" border="0">                         <tr>                             <td colspan="2" style="">                                 <h1>Main Title of Web Page</h1>                             </td>                         </tr>

          当用户从若干给定的的选择中选取其一时,就会用到单选框。

                        <form>                             <input type="radio" name="sex" value="http://www.mamicode.com/male" /> Male                             <br />                             <input type="radio" name="sex" value="http://www.mamicode.com/female" /> Female                         </form>

HTML的认识