zoukankan      html  css  js  c++  java
  • HTML基础

    什么是HTML?

    HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup Language。

    它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页

    HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 标签是由尖括号包围的关键词,比如 <html>,通常是成对出现的,比如 <b> 和 </b>。

    HTML页面就是由许多标签组成的。我们的浏览器负责解析这些标签,从而为我们展示丰富的内容。 

    HTML 属性

    属性一般描述于开始标签,属性总是以名称/值对的形式出现,比如:name="value"

    例如:下面a标签中的href就是a标签的一个属性。

    <a href="http://www.runoob.com">这是一个链接</a> 

    下面从一个页面分析具体的HTML

       下面具体的列出了测试代码的运行显示情况。可以很直观的看到各种常用HTML元素的使用情况。


    这是个测试文章-文章标题

    本篇文章列举了常用HTM的元素。

    文章段落标签span这是个a标签,通常用来表示链接,href属性配置链接地址

    文本格式化标签:定义粗体文本b。定义着重文字em。定义斜体字i。定义加重语气strong。定义下标字sub。定义上标字sup。定义插入字ins。定义删除字del。

    “计算机输出”标签:定义计算机代码code定义键盘码kbd。定义计算机代码样本。samp

    定义预格式文本pre。

    引用、引用和术语定义:定义缩写abbr。

    定义地址address。

    定义文字方向bdo。

    定义长的引用blockquote。

    定义短的引用语q。定义引用、引证cite。定义一个定义项目dfn。


    <!-这个换行符->


    <!-这个分隔线符->

    • 这是无序列表ul
    • 这是无序列表ul
    1. 这是有序列表ol
    2. 这是有序列表ol

    图片显示

    文本输入样例组






    选择样例组
      复选框:
    • 篮球
    • 足球
    • 排球
      单选框:
    • 人妖
    select下拉选择框:
    按钮样例组

    表格:

    表头表头
    单元格 单元格

    下面的代码为测试文章代码,可对比观看就可知道:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <h1>这是个测试文章-文章标题</h1>
     9     <p>本篇文章列举了常用HTM的元素。</p>
    10     <p id="pp">文章段落标签<span>span</span><a href="http://www.w3school.com.cn">这是个a标签,通常用来表示链接,href属性配置链接地址</a></p>
    11     <p>文本格式化标签:<b>定义粗体文本b。</b><em>定义着重文字em。</em><i>定义斜体字i。</i><strong>定义加重语气strong。</strong><sub>定义下标字sub。</sub><sup>定义上标字sup。</sup><ins>定义插入字ins。</ins><del>定义删除字del。</del></p>
    12     <p>“计算机输出”标签:<code>定义计算机代码code</code><kbd>定义键盘码kbd。</kbd><samp>定义计算机代码样本。samp</samp><pre>定义预格式文本pre。</pre></p>
    13     <p>引用、引用和术语定义:<abbr>定义缩写abbr。</abbr><address>定义地址address。</address><bdo>定义文字方向bdo。</bdo><blockquote>定义长的引用blockquote。</blockquote><q>定义短的引用语q。</q><cite>定义引用、引证cite。</cite><dfn>定义一个定义项目dfn。</dfn></p>
    14     <br/><!-这个换行符->
    15     <hr/><!-这个分隔线符->
    16 
    17     <ul>
    18         <li>这是无序列表ul</li>
    19         <li>这是无序列表ul</li>
    20     </ul>
    21 
    22     <ol>
    23         <li>这是有序列表ol</li>
    24         <li>这是有序列表ol</li>
    25     </ol>
    26     <dl>
    27         <dt>这是个自定义列表dl</dt>
    28         <dd>具体项目</dd>
    29         <dt>Milk</dt>
    30         <dd>White cold drink</dd>
    31     </dl>
    32     <img src="pikaqiu.ico" alt="图片显示">
    33     <form>
    34 <!-- ------------------------------------------------------>
    35         <fieldset>
    36             <legend>文本输入样例组</legend>
    37             <label>文本输入框:</label><input  id='i1' type="text" value="原始字符" placeholder="这是提示信息"/><br>
    38             <label>密码框:</label><input id='i2' type="password" value="123" /><br>
    39             <label>email:</label><input type="email" value="12@qq.com"/><br>
    40             <label>多行文本输入:</label><textarea  id="i3" placeholder="这是提示信息">value </textarea><br>
    41             <label>url:</label><input type="url" value="www.test.com"/><br>
    42             <label>颜色:</label><input type="color" /><br>
    43             <label>文件:</label><input type="file" /><br>
    44 
    45         </fieldset>
    46             <!-----------------------chexkbox----------------------------->
    47         <fieldset>
    48             <legend>选择样例组</legend>
    49             <ul id="check-box">
    50                 复选框:
    51                 <li><input type="checkbox" value="1" checked="checked"/>篮球</li>
    52                 <li><input type="checkbox" value="2"/>足球</li>
    53                 <li><input type="checkbox" value="3"/>排球</li>
    54             </ul>
    55             <ul id="radio-test">
    56                 单选框:
    57                  <!--name一样才能同组互斥-->
    58                 <li><input type="radio" value='11' name="text" checked="checked"/></li>
    59                 <li><input type="radio" value='22' name="text"/></li>
    60                 <li><input type="radio" value='33' name="text"/>人妖</li>
    61             </ul>
    62             select下拉选择框:
    63             <select id="select-test">
    64                 <option value="11">北京</option>
    65                 <option value="22" selected="selected">上海</option>
    66                 <option value="33">广州</option>
    67                 <option value="44">深证</option>
    68             </select>
    69         </fieldset>
    70         <fieldset>
    71             <legend>按钮样例组</legend>
    72             <input type="button" value="普通按钮"/>
    73             <input type="submit" value="提交按钮"/>
    74             <input type="image"  src="submit.gif" alt="图像按钮"/>
    75             <input type="reset" value="重置按钮"/>
    76         </fieldset>
    77     </form>
    78     <hr/>
    79     表格:
    80 <table border="1">
    81     <tr>
    82         <th>表头</th>
    83         <th>表头</th>
    84     </tr>
    85     <tr>
    86         <td>单元格</td>
    87         <td>单元格</td>
    88     </tr>
    89 </table>
    90 </body>
    91 </html>
    View Code
  • 相关阅读:
    某一字段分组取最大(小)值所在行的数据
    【JVM】01虚拟机内存模型
    POJ 1845 Sumdiv (求某个数的所有正因子的和)
    POJ 2992 Divisors (求因子个数)
    POJ 3696 The Luckiest number (欧拉函数,好题)
    POJ 1811 Prime Test (Pollard rho 大整数分解)
    POJ 2429 GCD & LCM Inverse (Pollard rho整数分解+dfs枚举)
    POJ 1305 Fermat vs. Pythagoras (毕达哥拉斯三元组)
    POJ 2142 The Balance (解不定方程,找最小值)
    POJ 1006 Biorhythms (中国剩余定理)
  • 原文地址:https://www.cnblogs.com/tkqasn/p/5715620.html
Copyright © 2011-2022 走看看