HTML base1

 

<html>
    
<head> sdfsd
    <title>
        This is a title.
    </title>
</head>

<body>
    <a name="C1"> 第一章</a>
    <h1> 字体大小1</h1>
    <h2>字体大小2</h2>

<p>    这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落,这是一个段落</p>

<hr>
</p>html里面多个空格     只算一个空格.要输出多个空格如下:&nbsp;&nbsp;&nbsp;End</p>
<br>

<!--这里是注释-->

<p>在段落中可以使用br换行<br>ok换行了</p>

<p align="center">浏览器忽略
换行。</p>

<p><del>删除</del></p>
<p><I>斜体</I></p>
<p><B>粗体</B></p>

<hr>
<p><pre>保留   空格   和
换行</pre></p>

<p>常见的字符实体&nbsp;&lt;&gt;&amp;</p>

<hr>

<p> 表格中tr表示一行,td表示一行中的某个单元格,th表示该单元格为表头(表头是粗体显示的) 表格默认情况下是没有边界的,因此需要设置边界</p>
<p bgcolor="red"> 表格中colspan和rowspan可以跨多列或者多行。<br>
    表格可以设置背景颜色或背景图片。
</p>
<table border="2" cellpadding="10" bgcolor="green">
    <caption>This is caption</caption>
    <tr bgcolor="red">
        <th>ID</th>
        <th>name</th>
        <th>score</th>
    </tr>
    <tr>
        <td>1</td>
        <td align="left">张三</td>
        <td align="right">23</td>
    </tr>
    <tr>
        <td>2</td>
        <td align="left">王麻子</td>
        <td align="right">45</td>
    </tr>
    <tr>
        <td colspan="2" align="center">SX</td>
        <td align="right">78</td>
    </tr>
</table>

<p>一个表格中的单元内可以是文字、图片、超链接、甚至是嵌套一个表格。<br>
    cellpadding这个属性设置单元格内容与单元格边界之间的距离。    
</p>

<table border="2">
    <tr>
        <td>文字</td>
        <td><a href="http://www.baidu.com">百度</a></td>
    </tr>
  <tr>
      <td>
          <table border="2">
              <tr>
                  <td>A1</td>
                  <td>A2</td>
              </tr>
              <tr>
                  <td>B1</td>
                  <td>B2</td>
              </tr>
          </table>
      </td>
      <td>sx</td>
  </tr>
</table>
    

<hr>



<a href="mailto:muhe221@126.com"> 触发电脑上的右键客户端</a>
<br>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.baidu.com" target=_blank title="fk">在新窗口中打开百度,并且含有鼠标悬停注释</a>
<br>
<a href="#C1">anchor可以指向一个html网页或图片或视频文件。同时也可以跳到某个指定的位置:如第一章</a>


<hr>
<p>HTML有三种列表形式:排序列表(Ordered List);不排序列表(Unordered List);定义列表(Definition List)。</p>


<h4>一个排序列表(Ordered List):</h4>
<ol>
  <li>布啦布啦之网页课程</li>
  <li>布啦布啦之网页代码</li>
  <li>布啦布啦之魔兽世界</li>
</ol>


<h4>排序列表,不设Type属性:</h4>
<ol>
  <li>布啦布啦之网页课程</li>
  <li>布啦布啦之网页代码</li>
  <li>布啦布啦之魔兽世界</li>
 </ol>  

<h4>排序列表,Type属性设为A:</h4>
<ol type="A">
  <li>布啦布啦之网页课程</li>
  <li>布啦布啦之网页代码</li>
  <li>布啦布啦之魔兽世界</li>
</ol>  

<h4>排序列表,Type属性设为a:</h4>
<ol type="a">
  <li>布啦布啦之网页课程</li>
  <li>布啦布啦之网页代码</li>
  <li>布啦布啦之魔兽世界</li>
</ol>  

<h4>排序列表,Type属性设为I:</h4>
<ol type="I">
  <li>布啦布啦之网页课程</li>
  <li>布啦布啦之网页代码</li>
  <li>布啦布啦之魔兽世界</li>
</ol>  

<h4>排序列表,Type属性设为i:</h4>
<ol type="i">
  <li>布啦布啦之网页课程</li>
  <li>布啦布啦之网页代码</li>
  <li>布啦布啦之魔兽世界</li>
</ol>  

<hr>


<h4>不排序列表(Unordered List):</h4>

<p>Type设为disc的列表,列表项前面的符号是圆黑点<br>
Type设为circle的列表,列表项前面的符号是空心圆<br>
Type设为square的列表,列表项前面的符号是黑方块
</p>

<ul>
  <li>布啦布啦之网页课程</li>
  <li>布啦布啦之网页代码</li>
  <li>布啦布啦之魔兽世界</li>
</ul>

<hr>

<h4>定义列表(Definition List):</h4>
<dl>
  <dt>野生动物</dt>
  <dd>所有非经人工饲养而生活于自然环境下的各种动物。</dd>
  <dt>宠物</dt>
  <dd>指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物,又称作同伴动物。</dd>
</dl>

<hr>
<h4>list的混合使用<h4>
<ul> 
    <li>桌子</li>
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
        </ul>
    </li>
    <li>电视</li>
</ul>

<hr>
<p>HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。</p>

<hr>

<h4>图片</h4>
<p>显示一个图片:<img src=""></p>

<hr>
<p>
    表单的动作属性(Action)和确认按钮
  当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
</p>

<form action="html_form_action.html" method="get">
  姓名:<input type="text" name="name"> <br>
  密码:<input type="password" name="passwd"> <br/>
  
  <input type="radio" name="sex" value="male" />Male<br/>
  <input type="radio" name="sex" value="female" />Female<br/>
  
  <input type="checkbox" name="bike" />I have a bike<br/>
  <input type="checkbox" name="car" />I have a car<br/>
  
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected="selected">Fiat</option>
    <option value="audi">Audi</option>
  </select><br/>
  
  <!--创建按钮,你可以对按钮上的文字进行自定义-->
  <input type="button" value="Hello world!"><br>

  <p>comment:</p>
  <textarea rows="10" cols="30">The cat was playing in the garden.</textarea><br>

  <!--定义域-->
  <fieldset>
      <!--legend 元素为 fieldset 元素定义标题caption-->
    <legend>健康信息:</legend>
    <form>
       <label>身高:<input type="text" /></label>
       <label>体重:<input type="text" /></label>
    </form>
  </fieldset>

  <input type="submit" value="Submit" />
</form>

</body>
</html>

 

posted @ 2015-05-29 19:10  牧 天  阅读(178)  评论(0)    收藏  举报