黑马程序员技术交流社区

标题: 技术贴 [打印本页]
作者: 许振宁    时间: 2019-7-24 16:02
标题: 技术贴
表格作用：
数据展示，让数据显示额度更整齐规范；
基本结构
一对table标签嵌套tr标签，tr标签嵌套td标签；
   table表示表格整体，tr表示行，td表示单元格（列）；
     <table>
                 <tr>
<td></td>
</tr>
     </table>
表格的常见属性：
宽：width；   高：height；    边框：border，如果设置border=0是没有边框；
对齐方式：align  取值left、center、right；设置表格在网页中的水平对齐方式；
单元格和单元格之间的距离：cellspacing
单元格内容到单元格边框的距离：cellpadding
注意：对齐方式align如果设置给table表示让整个表格的对齐方式改变，如果添加到tr身上表示当前的行tr里面的文字对齐方式改变；
如果想要某一列单元格的宽度和其他不一样我们找到该列直接在td或者th身上设置width即可；
[attach]293554[/attach]
表格表头标签th
tr嵌套th书写，默认是加粗居中显示的效果；
<tr>
      <th></th>
</tr>
表格标题标签caption
<table width="800">
         <caption>表格标题标签</caption>
              <tr>
                     <th></th>
                     <th></th>
                     <th></th>
          </tr>
  </table>
[attach]293555[/attach]
合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
注意：合并单元格的顺序：先上后下，先左后右；
合并单元格三步曲（记住）
01 先确定是跨行还是跨列；
02 根据先上后下，先左后右的原则找到目标单元格，然后书写合并方式，确定合并单元格的数量；
03 删除多余的单元格；
表格划分结构（了解）
于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：表头、正文和脚注。而这三部分分别用:
表头：thead
正文：tbody
脚注:tfoot
2、列表
无序列表、有序列表、自定义列表（项目列表）
无序列表（大重点）
结构：ul嵌套li标签；
<ul>
        <li></li>
        <li></li>
        <li></li>
</ul>
注意：01、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；
    02、无序列表的所有默认样式我们都不用，后期会用css来进行设置；
有序列表：ol嵌套li标签；
<ol>
        <li></li>
        <li></li>
        <li></li>
                </ol>
（重点）自定义列表：dl嵌套dt和dd标签；
<dl>
        <dt></dt>
        <dd></dd>
</dl>
dl表示列表整体，dt表示为描述标题，dd表示描述内容
自定义列表的使用技巧：
         01  一个dl嵌套一个dt和多个dd，相当于中国的一词多义；
         02  一个dl里面可以嵌套多对的dt和dd；
          03  一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，dd放文字；
[attach]293556[/attach]
     我们用dl做的最多的是下面的效果
[attach]293557[/attach]
注意：实际工作中我们基本上用的最多的是ul无序列表，ol有序列表基本不用，dl项目列表一般特殊效果使用；
3、表单组成：
一个完整的表单列表由：提示文本、表单、表单域（总体的提交数据的标签）组成  ；
作用：搜集用户信息表单的input控件input的常见属性
type  类型
value 默认值
name属性的作用：在存在多个input表单的时候，设置不同的name取值进行区别，一般是后台工作人员去使用；
input文本控件
所有的input控件都是通过更改type的取值不同实现不同的效果；
文本框：input的type取值为text    <input type=“text” />
可以设置value属性设置默认的值，<input type=“text”  value=“默认值” />
密码框：input的type取值为password   <input type=“password” />
单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；                  <input type="radio" name="sex">
复选按钮：type=“checkbox”，也可以设置同样的name名称，但是 不会影响多选的效果；                             <input type="checkbox" >
注意：如果想要实现单选按钮和复选按钮默认选中效果我们就需要设置对应的属性checked=“checked”
单选按钮   <input type="radio" checked="checked“  >
复选按钮   <input type="checkbox" checked="checked" >
input按钮控件
普通按钮：<input type=“button” value=“普通按钮” />  必须要自己设置value值；
提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的；
重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；
图片按钮：<input type=“image“ src=”图片路径” />   src属性必须书写查找图片路径；
标签按钮：<button>我是标签按钮</button>[attach]293558[/attach]
文件域名：<input type=“file” /> 上传文件使用；
label标签作用：
提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签；
使用方法：
方法1：用label直接包括input表单 -----
<label> 用户名： <input type=“radio” name=“usename” value=“请输入用户名”  /> </label>；
方法2：用for 属性规定 label 与哪个表单元素绑定 ----
<label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nan“ />
textarea文本域标签
双标签
文本框input和文本域textarea的区别：
input只能显示一行文本， 单标签，通过value设置默认值 ， 一般适用于用户名，昵称，密码等；
textarea可以显示多行文本，双标签，一般适用于留言板等；
select下拉列表
下拉列表的结构：一对select标签嵌套多对的option标签
        <select>
                <option></option>
                <option></option>
        </select>
如果option有selected=“selected”表示默认选中；
<select>
        <option selected="selected">北京</option>
        <option>上海</option>
</select>
关于html标签的属性说明
如果html标签的属性和属性值是一致的，那么我们在书写的时候可以只写属性不写属性值，但是我们建议都写上；
[attach]293560[/attach]
form表单域标签（重要）作用：
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
默认属性（了解）：
action=“url地址”   -----  用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式”  ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字”  设置不同的取值名称用于后台提交；
注意：一个页面中可能会出现过个form标签，我们需要用添加name属性设置不同的表单名称来区分；
<form action="" method="post" name="表单名称1"></form>
<form action="" method="post" name="表单名称2"></form>
文档查询
W3C :   http://www.w3school.com.cn/
MDN:    https://developer.mozilla.org/zh-CN/





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2