HTML基础知识

HTML标签

·     <q> 文本</q> -------------引用,输出界面上显示“文本”

·     <blockquote> </blockquote>  --------引用,输出界面上缩进显示“文本”

·     <br> -------换行

·     <hr> -------添加水平横线

·     &nbsp;-------空格

·     <strong> 表示更强烈的强调, 用粗体表示

·     <em> 表示强调,默认用斜体表示

·     <span>标签是没有语义的,它的作用就是为了设置单独的样式用的

·     <address> 地址</address> --------为网页添加地址信息,默认为斜体

·    <code>代码</code> ---------添加一行代码信息

·     <pre>代码</pre> ------------添加多行代码信息

·  ul-li是没有前后顺序的信息列表

<ul>

      <li></li>

      <li></li>

      ......

      <li></li>

</ul>

·  <ol>标签来制作有序列表来展示。

<ol>

      <li></li>

      <li></li>

       ......

      <li></li>

</ol>

· <table>…</table>:整个表格以<table>标记开始、</table>标记结束

        <tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

        <tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

        <td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

        <th>…</th>:表格的头部的一个单元格,表格表头

即:

<table> ---------表格

      <caption>表格上方的标题</caption>

      <tr> -------行

            <th>表头</th>

      </tr>

     <tr>

            <td>列数</td>

      </tr>

</table>

· <a href=”网址” target=”_blank”> 超链接</a>

Target=”_blank”  ----------表示在新窗口打开链接(默认可不写,在原窗口打开)

· 使用mailto在网页中链接Email地址

注:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
    例:<a href=”mailto:邮箱地址?cc=抄送地址 & bcc=密件抄送地址 & subject=邮件主题 & body=邮件内容”>发送</a>

 
· <img>标签

语法:<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。

 

·使用表单标签,与用户交互

语法:<form action=服务器文件 method=传送方式></form>
1、action :浏览者输入的数据被传送到的地方,比如一个jsp页面(save.jsp)。
2、method : 数据传送的方式(get/post)。

 

· 文本输入框、密码输入框

语法:<form>

                 <input type=”text/password” name=”名称” value=”文本”/>

          </form>
1、type:
     当type="text"时,输入框为文本输入框;
     当type="password"时, 输入框为密码输入框。
2、name:为文本框命名,以备后台程序ASP 、PHP使用。
3、value:为文本输入框设置默认值。(一般起到提示作用)
 
 

· 文本域,支持多行文本输入。当用户需要在表单中输入大段文字时,需要用到文本输入域。

语法:

<textarea rows=”行数” cols=”列数”>文本</textarea>

1、cols :多行输入域的列数。
2、rows :多行输入域的行数。
3、在<textarea></textarea>标签之间可以输入默认值。
注:这两个属性可用css样式的width和height来代替:col用width、row用height来代替

 

· 使用单选框、复选框,让用户选择

        在使用表单设计调查表时,为了减少用户的操作,可使用选择框,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:

 

语法:

 

<input type=redio/checkbox value= name=名称 checked=checked>
1、type:
   当 type="radio" 时,控件为单选框
   当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中

 
· 使用下拉列表框,节省空间

<selseted>
      <option value=”提交值”>选项</option>
      <option value=”提交值”>选项</option>

      ..........

      <option value=”提交值”>选项</option>

</selected>

 

 

 

selected="selected":设置selected="selected"属性,则该选项就被默认选中。

 

例:<form>

               <lable>爱好:</lable>
               <selected>
                          <option value=”看书”>看书</option>
                         <option value=”旅游” selected=”selected”>旅游</option>
                         <option value=”运动”>运动</option>
                         <optionvalue=”购物”>购物</option>
                </selected>
</form>

运行结果:

 

 

· 使用下拉列表框进行多选

        下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。

· 使用提交按钮submit,提交数据

语法:<input type=”submit” value=”提交”/>

-- type:只有当type值设置为submit时,按钮才有提交作用

-- value:按钮上显示的文字

· 使用重置按钮reset,重置表单信息

语法:<input type=”reset” value=”重置”/>

 

-- type:只有当type值设置为reset时,按钮才有重置作用

-- value:按钮上显示的文字

· form表单中的label标签

        label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

语法:<lable for=”控件id名称”></lable>

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同

例:<form>

 

  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章