前端基础之html:day02

版权声明:原创博客,转载请注明地址 https://blog.csdn.net/eve_gf/article/details/84860611

序言:

      拖着疲惫的身躯,真的不想动,但是看着蹭蹭上涨的房价,仿佛冥冥之中又有了动力,加油吧,年轻人。

正文:

1.超链接

              超链接可以允许我们从当前文档链接到其他任意文档(或称为其他资源),也可以链接到文档的某个特定的位置。        

             <a href="http://www.baidu.com" target="_blank">百度一下</a>

       href:将要跳转的目标地址,其取值如下:

            1>id值       主要用于锚点的跳转

            2>url         主要是页面的跳转链接

            3>email      如:<a href="mailto:[email protected]"></a>    用来链接到邮箱写信界面

      target: 规定链接页面的呈现方式,其取值如下:

             _self:在当前页面打开链接页面                _blank:重新打开一个选项卡加载链接页面

            _parent:在父级页面加载链接页面              _top:在顶级页面加载链接页面

    注:_parent和_top两种方式主要用于当前页面中引入了框架页面,如页面中用了<iframe>标签

2.表格

                     

	<table align="center" border="1px" cellpadding="4px" cellspacing="0" width="400px">
		<thead></thead>
		<caption>学生信息表</caption>
		<tbody>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>张三</td>
				<td>23</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>李四</td>
				<td>22</td>
				<td>女</td>
			</tr>
		</tbody>
		<tfoot></tfoot>
	</table>

 表格通常以上述的代码实现,其中有<table>,<table>中包含<thead>、<tbody>、<tfoot>、<caption>

        <thead>:表格头        <tbody>:表格体      <tfoot>:表格尾

        <caption>:表示表格的标题信息

        <tr>:表格的行,<tr>中可以包含多个<th>、<td>

                   <th>:表格的表头单元格

                   <td>:表格的数据单元格

       align:设置表格呈现的位置,取值有left、center、right

       border:设置表格单元格边框的宽度

       cellpadding:设置内容与边框之间的距离

       cellspacing:设置边框与边框之间的距离

特殊表格中有行的合并与列的合并:

       行合并:rowspan      列合并:colspan

3.特殊标签:

    pre:以文本的默认样式显示

    hr:文本分割线

    br:换行

   sub:下标    如:log<sub>2</sub>4        效果:  {log_{2}}^{4}

   sup:上标    如:10<sup>2</sup>           效果:10^{2}

4.表单

什么是form?

form表单主要用于用户与web应用程序进行数据的交互,from通常由一个或多个表单元素组成,from表单的一些属性如下:

action:表单的提交位置

method:浏览器用来提交表单的方式

          get:通常用来提交一个轻量级的数据,表单中记录的数据将会拼接起来显示在目标地址栏中

         post:通常用来提交一个重量级的数据,表单中的数据会被封装在请求体中

name:设置表单的名称

target:浏览器在提交表单后在哪里显示回应

          _self      _blank     _top    _parent

5.表单控件 

        input
              type:
                      text:单行文本框
                      password:密码框
                      checkbox:多选框
                                        name值可以一致,可以不一致

                                      <input type="checkbox" name="name0" value="1">
                                      <input type="checkbox" name="name1" value="2">
                                      <input type="checkbox" name="name2" value="3">

                                               name=1&name=2&name=3
                                               name0=1&name1=2&name2=3

                    注:属性name的属性值作为key,属性value的属性值作为value,以key=value的形式出现在地址栏中。

                      (初学者不太容易理解的地方)
                   radio:name必须一致
                                       checked:默认选中

                  file:上传文件
                  submit:提交按钮
                             value设置按钮名称
                  reset:重置按钮
                  image:src alt
                  button:普通按钮
                  hidden:隐藏域                     

                             value: 按钮:给按钮设定名称
                                    输入框:设定当前控件默认值

                          disabled:  禁用当前控件
                          size:  控制当前文本框的宽度
                          maxlength:控制用户所输入的字符个数

filedset
        legend:设置当前模块的标题

    label标签:
        将文字和控件进行绑定

       1>     <label>
                     篮球: <input type="radio">
                </label>

       2>     <label for="one">篮球:</label>
                <input type="radio" id="one">

6.select 下拉组件
        <select name="" id="">
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
       </select>

    给select设置name属性
    属性值为
        1.option有value属性时,name属性值为value的属性值
        2.option没有value属性时,name的属性值为option元素的内容

    <select name="" id="">
        <optgroup label="标题">
            <option value="">分组元素</option>
            <option value=""></option>
            <option value=""></option>
        </optgroup>
    </select>

    select :
        size:设置下拉列表每次显示的列表选项(option)个数
        multiple:
            当前列表是否可以多选
            按住ctrl键进行多选
            布尔类型

            size,multiple:只要使用了其中的任意一个,就改变了下拉列表的默认样式;
        disabled:禁用整个下拉列表
       option:
               disabled:禁用某一个下拉元素
7.多行文本框
    <textarea name="" id="" cols="30" rows="10"></textarea>
        cols:列数
        rows:行数
        wrap:设置当前文本框是否可以换行
            off:不可以换行
            hard:将换行元素传递给服务器
            soft:不将换行元素传递给服务器

        readonly:   
            只读属性
            布尔类型

8.滚动标签
    <marquee behavior="" direction=""></marquee>

        behavior:
            当前元素滚动方式
            scroll:不停滚动
            slide:只滚动一次
            alternate:来回滚动
        direction:
            当前元素的滚动方向
            up:从下向上滚动
            down:从上向下滚动
            left:从右向左滚动
            right:从左向右滚动
        width/height:当前滚动的区域大小
        bgcolor:当前滚动区域的背景颜色
        scrolldelay:滚动延迟时间
            单位:毫秒   1000ms-->1s
        scrollamount:滚动速度
            单位:px
        loop:滚动次数
            -1:无限循环
9.html5中的新增的表单元素
    progress
        进度条
        min:进度条的最小值
        max:进度条的最大值
        value:当前进度条的当前值

    meter:
        磁盘使用量
        min/max:设置当前meter的最小值和最大值
        value:当前meter标签的所在值
        low:设置当前meter标签的最下限的值
        high:设置当前meter标签的最上限的值
        optimum:当前meter最佳值

    datalist:
        数据列表,通常配合单行文本框来使用

        城市:<input type="text" list="one">
        <datalist id="one">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">广州</option>
        </datalist>
    optgroup:对选项进行分组显示
         <select name="" id="">
            <optgroup label="北京">
                <option value="">11</option>
                <option value="">22</option>
                <option value="">33</option>
            </optgroup>
         </select>

10.新增的表单属性
    type:
        number:当前当行文本行只能输入数字
            min/max:限制用户输入的最大和最小值
            value:默认值
            step:步长,整数值
        email:电子邮箱
        url:匹配一个url,如:http://www.baidu.com
        color:调用本地的拾色器
        tel: 电话
        search:搜索框

总结:总的来说表单的知识比较重要,应该深入理解表单的传值规则与方式。

猜你喜欢

转载自blog.csdn.net/eve_gf/article/details/84860611