《阿勇java建站教程》1.4-丰富的html标签

来源:互联网 发布:我的世界java内存 编辑:程序博客网 时间:2024/04/29 12:08

1.4-丰富的html标签

    感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章! 上节内容(《阿勇java建站教程》1.3零基础建站)里初步介绍了html页面结构,在本节中,阿勇将介绍更多常用的html标签的使用。 <div></div>层标签——相信大家经常能接触到这样的内容:div+css布局。这里提到的div就是层标签,css指的是标签样式,在后续的教程中将详细解说。借着层标签,我向大家介绍一些常用的标签属性。


    <div name="divName" id="divId" class="cssClass">层内容</div>

    name属性好比为html标签起了个名字,这个名字不允许重复(对于<a>a内容</a>锚标签,name属性有特殊用途),id属性为html标签指定了唯一标识,name属性,id属性,为javaScript(javaScript和java无关)操作元素提供依据,后续将做介绍;class属性为添加css样式提供方便,一般的欲给部分html标签添加相同样式时就将这些html标签设定同一个class。
div标签在现代的页面布局中使用非常广泛,因此很受青睐。

    <a href="http://www.ya178.com">内容</a>

    <a></a>锚(超链接)标签。该标签不但能用来对同网页下的具体内容定位,也可以当超链接使用(经常)。这样的标签非常特殊,默认情况下,鼠标在网页上移动时,当箭头悬浮在该标签内容上时鼠标箭头会编程手势,提醒用户这样的文本是可点击的。超链接在大型的门户被广泛使用,在网页上点来点去是从古到今不变的操作。<a>标签里除了使用常用的属性外,它还具有的属性是href。href是告诉用户当点击了该超链接时页面将会跳转到一个怎样的“世界”。例如:href="nihao.html"——显示nihao.html网页,href="http://www.baidu.com"——显示百度首页。

    <ul></ul>,<ol><ol>

    上述两个标签是列表显示标签(两者有啥区别,不妨亲手一试!),该标签善于显示整齐排列的内容。值得注意的是每条显示内容都应该被包裹在<li></li>标签中,如:

    <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
        ... ...
    </ul>

    下面要介绍的标签是标题标签:

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    此处说的标题标签,和<title></title>不同,标题标签就像word里的标题样式,用于与文章内容区别开来。
还有一个标签,在我们日常运用中有着非常重要的地位,使用起来简洁,高效。那就是表格标签<table></table>。

    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
              ... ...
       </tr>
       <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
              ... ...
       </tr>
    </table>
    从结构上就可以清晰的辨认出<table></table>标签包行着<tr></tr>行标签,<td></td>列标签,特别说明的是表格中显示的内容只能写在列标签里,不能直接写在<tr></tr>里。这是一个组合,不能随意拆开单独用哦!

    下面说说重头戏,表单标签!网页从服务器中来,那么用户在网页上填写的数据如:注册信息。是怎么保存到服务器上的呢?充当信使角色的表单标签来了:

     <form method="post" action="地址"> 
        账户:<input type="text" name="input1"/> 
        <br/><!--换行标签-->
        密码:<input type="password" name="input2"/>
        <br/><!--换行标签-->
        <input type="hidden" name="input3"/><!--隐藏标签-->
        <input type="submit" value="注册"/><input type="reset" value="清空重写"/>
     </form>

    以上例子简单的构造了一个表单。其总<form>中举例了其特有的属性:method和action。method属性定义的是表单里的数据将以何种方式提交给服务器处理,有两种:post和get。action属性定义的是该表单将提交到服务器的入口。<form></form>标签中包含的标签都是<input/>,只有该标签中的值(value属性)在表单提交(submit)时才会被提交到服务器处理。<input/>标签根据type属性的不同显示不同的输入框,type属性取值不止所列出的这些,读者可以自己多了解了解。type属性为"submit"时该input具有提交表单的功能!

    总结:html标签远不止这些,希望读者能够多上网学习学习为日后编写美观实用的网页文件做好准备。另外,hrml5也是不错的学习内容。

本文原创写的不好的地方欢迎大家与我一起交流(微信号:zhyy22145),转载请注明出处!-《阿勇java建站教程》1.4-丰富的html标签 《阿勇java建站教程》统一交流团

http://www.ya178.com/public/detailUA-10342-1.html

原创粉丝点击