2018学习笔记--html学习笔记之基础知识

一、通用标签

    1. <body></body>为主题标签,主要用于存放网页内容。

    属性:bgcolor 主题背景颜色

              text字体颜色

    为body添加属性时,将属性写在<body>

    例如

<body bgcolor="black" text="purple">

    效果为

    2.格式控制类:<b></b>加粗

                            <i></i>斜体

                           <u></u>下划线

                           <br>换行

                           &nbsp;空格

    前三个文字处理文字嵌套其中,后两个放在所需要的位置即可。另外,可以多层使用。

    例如

<b>伤情最是晚凉天,憔悴斯人不堪怜,</b>
<i>邀酒摧肠三杯醉,寻香惊梦五更寒。</i><br>
<u>钗头凤斜卿有泪,荼蘼花了我无缘,</u><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小楼寂寞新雨月,也难如钩也难圆。

效果为

    3.内容容器:

    ①<hi>~<h2>为标题标签

    使用方法为<h1></h1>其中的内容作为标题,1-6为标题级别,视觉上就是字体大小。

<h1>定场诗</h1>
<h2>马东</h2>
<h3>马季之子</h3>
<h4>郭德纲经常用</h4>
<h5>怎么用</h5>
<h6>用嘴说</h6>

   效果为

    ②<p></p>段落分割标签

       对其中的文字自动分为一个段落。

    ③<div></div>层标签,块状元素

       对其中的文字自动分为一个块,默认占一整行

    ④<span></span>层标签

      对其中的文字作为一个整体,不具备换行效果。一般存文字,行内元素,内容多大就占多大。

     注:<p><div><span>与css语言配合进行网页布局设计,使用之间各有区别。这三个标签互相之间可以嵌套使用,<p><div>具有换行效果,而<span>没有。<p>是处理的文字,处理为个个自然段,<div>处理为块状元素。

     演示如下  

<p></p>
<p>你说的对</p>
<p>就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以</p>
<div>还行吗,</div>
<div>可以吗,</div>
<div>就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以</div>
<!--行内元素-->
<span>可以</span>
<span>很可以</span>
<span>就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以就是可以</span>

    效果如下

   ⑤<ol></ol>有序列表,<ul></ul>无序列表

      有序列表中会自动在行的开头位置,添加序号,不同的type属性,可以有不同的序号。无序列表没有序号排列,不同的type属性可以实现不同的前标。

<!--有序列表-->
<ol type="i">
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
</ol>

<!--无序列表-->
<ul type="square">
    <li>第①行</li>
    <li>第②行</li>
    <li>第③行</li>
    <li>第④行</li> 

       显示效果为

 

三、常用标签

    1.<img>图片标签

      标签<img>y用于在网页中插入图片,重要属性的包括,src,width,height,title,alt

     ①属性src是必有的属性,src中填写有文件名称,必须填写准确,否则将会引用不到。

     ②width属性和height属性属于非必填属性,不填时保持图片的本身大小。

     ③title属性,是鼠标在图片停留时,是显示图片的标题,即title中填写的内容。

     ④alt属性,是在网络发展之初,在图片加载不成功时所显示的文字,填写在alt属性中。

     例如

<img src="马东.jpg" 
    width="100" 
    height="100" 
    title="马东啊"
    alt="这也是马东啊"/>

    

  

     2.<a>标签

    <a>主要有三个功能,插入超链接,做下载点,锚点

    ①插入超链接在href属性中填写网页地址,即可实现

    ②做为下载点时,需要在href中填写文件名,例如zip文件等等

        如果填写文件名为图片时,是显示图片而不是下载。

    ③作为锚点时,需要在href中填写标签的id,然后设置跳转的位置。

<div id="name">
            诗词歌赋
        </div>
<!--a标签-->
<!--做链接-->
    <a href="http://www.imqq.com">跳转到QQ</a>
    <a href="dh1.html">导航1</a>
    <a href="dh2.html">导航2</a>
    <a href="dh3.html">导航3</a>
<!--做下载-->
<!--可直接打开的:文本、图片、网页文件-->
    <a href="马东.jpg"></a>
    <a href="马东.zip">哈哈</a>
<!--做锚点-->
    <a href="#name">回到顶部</a>

    

四、表格标签

      1.<table></table>基础表格标签 

        所有的表格设计操作都要在table标签中实现,table的属性包括bordercolor,width,border,cellspacing,cellpadding

       ①bordercolor属性,为边框颜色填写颜色的代码可以改变边框的颜色。

       ②width属性为表格宽度,固定像素时直接填写数值,填写%时随着网页浏览器的大小随之变化。

       ③border属性为边框粗细。

       ④cellspacing单元格边距,单元格与table边框的距离。

       ⑤cellpadding单元格间距,单元格与单元格之间的距离。

<table bordercolor="red" 
            width="100%" 
            border="10" 
            cellspacing="0" 
            cellpadding="0">

显示效果为 

2.<tr></tr>:代表行

   <td></td>:代表单元格/列

   <th><th>:用来做表头

 主要属性有: width:宽度

                       height:高度

                      align:水平对齐方式

                       valign:垂直对齐方式

                       bgcolor:背景颜色

                       rowspan:rowspan=“2”  上下合并两格

                       colspan:左右合并

 注:tr标签中存在的height属性将影响整个行的宽度,当在td中的第一个属性设置了宽度时,后面的也会影响。rowspan和colspan属性出现时要注意,数好行数和列数。

 例如:

<tr>
                <td width="100" 
                    height="80" 
                    align="left" 
                    valign="bottom">姓名</td>
                <td bgcolor="brown">性别</td>
                <td>班级</td>
                <!--标题-->
            </tr>
            <tr>
                <td rowspan="2">张三</td>
                <td colspan="2"></td>
                <!--<td>0806</td>-->
                <!--内容-->
            </tr>
            <tr>
                <!--<td>李四</td>-->
                <td></td>
                <td>0806</td>
                <!--内容-->
            </tr>

 效果为:

五、表单标签

    <from></form>

   表单中的所有操作要在form中进行,在form中有几个属性,例如action,method,target。

   ①action属性,提交给哪个网络地址,或者数据库。

   ②method属性,为提交的方式,分为显性方式和隐形方式。get:显示提交,post:隐式提交。

   ③target属性,为触发了提交之后本网页的效果,_blank:在新窗口打开页面,即保留本身页面,_self:在自身的页面打开,即覆盖本页面。

举例为:

<form action="http://www.baidu.com" method="get" target="_blank"

    1.文本类

    ①文本框input,属性type固定为text,type = "text",一般为输入固定文本进行提交操作。placeholder属性为默认在文本框中显示的文字,name属性为表单名称,value为表单中的默认值。

    ②密码框input,属性type固定为password,type = "password",一般为输入密码进行提交操作,输入的内容为隐藏模式。跟文本框的name属性和value属性是一样的,文本框和密码框向网页提交时,呈现效果为name=value的形式。

   ③隐藏域input,属性type固定为hidden,type = "hidden",一般为固定的内容的提交,隐藏于后台不显示给客户。

   ④文本域<textarea></textarea>,文本域不需要input,textarea中的属性有name,rows,cols。rows:可见区域的行数,cols:可见区域的横向字符数,其提交内容不需要写在value中,写在两个标签之间就可以。

 举例:

<!--文本类-->
            账号:<input type="text" name="uid" id="" value=""  placeholder="请输入用户名" /><br>
            密码:<input type="password" name="pwd" id="" value="" placeholder="请输入密码"/><br>
          <!--隐藏域?-->
          <input type="hidden" name="" id="" value="" />
          文本域:
          <textarea name="tex" rows="20" cols="10"></textarea>

      2.按钮类,按钮类的表单同样由input标签实现

       ①提交按钮,type属性固定为submit,功能为提交,按钮的显示为value属性中填写的内容,按钮的名称为name属性中填写的内容,功能为触发提交操作,提交给form标签的action属性中的网络地址或者数据库。

       ②普通按钮,type属性固定为button。

       ③重置按钮,type属性固定为reset,功能为重置页面内的内容。

       ④图片按钮,type属性固定为inmg,功能图片作为按钮,进行提交操作,src属性中为图片名称,提交给form标签的action属性中的网络地址或者数据库。

例如:

<!--按钮类-->
        <input type="submit" name="" id="" value="提交按钮" />
        <input type="button" name="" id="" value="普通按钮" />
        <input type="reset" name="" id="" value="重置按钮" />
        <input type="image" src="马东.jpg" name="" id="" 
            value="" width="100" height="100" /><!--有提交功能-->

效果为:

以上为20180807学习内容,如果有不对地方,欢迎各位同仁批评指正。

猜你喜欢

转载自www.cnblogs.com/shmy/p/9447341.html
今日推荐