技术贴【黑马web前端】

更新时间:2023年03月06日 11时29分54秒 来源:黑马程序员论坛

表格作用： 数据展示，让数据显示额度更整齐规范； 基本结构 一对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即可； 表格表头标签th tr嵌套th书写，默认是加粗居中显示的效果； <tr>       <th></th> </tr> 表格标题标签caption <table width="800">          <caption>表格标题标签</caption>               <tr>                      <th></th>                      <th></th>                      <th></th>           </tr>   </table> 合并单元格 跨行合并：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放文字；      我们用dl做的最多的是下面的效果 注意：实际工作中我们基本上用的最多的是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> 文件域名：<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标签的属性和属性值是一致的，那么我们在书写的时候可以只写属性不写属性值，但是我们建议都写上； 图片7.png (8.58 KB, 下载次数: 0) 下载附件  保存到相册 2019-7-24 16:02 上传 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/

推荐了解热门学科

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。




黑马程序员热门视频教程【点击播放】