JavaEE
鸿蒙应用开发
集成电路应用开发
人工智能开发
AI+Linux云计算运维
Python+大数据开发
跨境电商
AI+设计
软件测试
新媒体+短视频
HTML&JS+前端
更新时间:2019年07月26日 10时54分03秒 来源:黑马程序员论坛
|
第一HTML中的常用排版标签 1、排版标签 1）标题标签 h 标签语义： 作为标题使用，并且依据重要性递减 2）段落标签 p 标签语义：可以把 HTML 文档分割为若干段落 3）水平线标签 hr 标签语义: 使得文档结构清晰，层次分明。<hr/>是单标签。 4）换行标签 br 标签语义: 使段落中的某段文本强制换行显示。 5）div 和 span 这两个没有语义，他们的方法和特点是: div标签 用来布局的，但是现在一行只能放一个div span标签 用来布局的，一行上可以放好多个span 2、文本格式化标签 加粗标签： <b>单纯的加粗</b> <strong>语义化强调</strong> 倾斜标签： <i>单纯的加粗</i> <em>语义化强调</em> 删除线标签： <s>单纯的加粗</s> <del>语义化强调</del> 下划线标签： <u>单纯的加粗</u> <ins>语义化强调</ins> 3、图片标签 1) img标签,单标签，<img />,必须配合src属性将图片引入html页面，<img src=“图片路径” /> 2) src 属性值 --- url 图像路径 alt 属性值 --- 自定义文本 图像不能正常显示的时候替换文本； title 属性值 --- 自定义文本 鼠标移入图片显示提示文本； width 属性值--- 自定义数值 设置图片的宽度； height 属性值 --- 自定义数值 设置图片的高度； 4、超链接a a标签，双标签 <ahref=”链接路径”></a> href用于指定链接目标的url路径地址，必不可少的； target用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank 5、代码注释 html注释：<!-- 注释内容 --> css注释：/* 注释内容 */ 快捷键：Ctrl+？ 添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的 第二html的基本结构: <!DOCTYPEhtml> <htmllang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 其中<!DOCTYPE html>让浏览器用H5的标准来解析代码， 语言：lang="en" 当前网页所在国家的语言，一般en表示英文，zh-CN 表示中文 字符集：<meta charset="UTF-8"> 用来对我们书写的字符进行对应国家文字的编译 常用的字符编码：Gb2312简体中文 BIG5 繁体中文 GBK 全部中文（包括简体和繁体中文）最重要：（UTF-8）：全世界所有国家需要用到的字符 head 标签里面的内容是给浏览器解析的，用户只能看到title标题； body 标签里面的内容是给用户看的； 第三 HTML标签关系 嵌套关系 --- 父子级关系；并列关系 --- 兄弟关系 第四 表格 1）基本结构 一对table标签嵌套tr标签，tr标签嵌套td标签； table表示表格整体，tr表示行，td表示单元格（列）； <table> <tr> <td></td> </tr> </table> 2）表格的常见属性： 宽：width； 高：height； 边框：border，如果设置border=0是没有边框； 对齐方式：align 取值left、center、right；设置表格在网页中的水平对齐方式； 单元格和单元格之间的距离：cellspacing 单元格内容到单元格边框的距离：cellpadding 3）表格表头标签th tr嵌套th书写，默认是加粗居中显示的效果； <tr> <th></th> </tr> 4）表格标题标签caption <tablewidth="800"> <caption>表格标题标签</caption> <tr> <th></th> <th></th> <th></th> </tr> </table> 第五 列表 1）无序列表 结构：ul嵌套li标签； <ul> <li></li> <li></li> <li></li> </ul> 2）有序列表：ol嵌套li标签； <ol> <li></li> <li></li> <li></li> </ol> 3）自定义列表：dl嵌套dt和dd标签； <dl> <dt></dt> <dd></dd> </dl> 第五 表单 1）表单的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进行设置归为一类； <inputtype="radio" name="sex"> 复选按钮：type=“checkbox”，也可以设置同样的name名称，但是 不会影响多选的效果； <inputtype="checkbox" > 注意：如果想要实现单选按钮和复选按钮默认选中效果我们就需要设置对应的属性checked=“checked” 单选按钮 <inputtype="radio" checked="checked“ > 复选按钮 <inputtype="checkbox" checked="checked" > input按钮控件 普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值； 提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的； 重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的； 图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径； 标签按钮：<button>我是标签按钮</button>file:///C:/Users/Arwin/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg 文件域名：<input type=“file” /> 上传文件使用； 2）label标签 作用： 提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签； 使用方法： 方法1：用label直接包括input表单 ----- <label>用户名：<input type=“radio” name=“usename” value=“请输入用户名” /> </label>； 方法2：用for 属性规定 label 与哪个表单元素绑定 ---- <labelfor=“nan”>男</label> <input type=“radio” name=“sex” id=“nan“ /> 3)textarea文本域标签 双标签 文本框input和文本域textarea的区别： input只能显示一行文本，单标签，通过value设置默认值 ， 一般适用于用户名，昵称，密码等； textarea可以显示多行文本，双标签，一般适用于留言板等； 4)select下拉列表 下拉列表的结构：一对select标签嵌套多对的option标签 <select> <option></option> <option></option> </select> 如果option有selected=“selected”表示默认选中； <select> <optionselected="selected">北京</option> <option>上海</option> </select> 5) form表单域标签（重要） 作用： 在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。 |
推荐了解热门学科
| java培训 | Python人工智能 | Web前端培训 | PHP培训 |
| 区块链培训 | 影视制作培训 | C++培训 | 产品经理培训 |
| UI设计培训 | 新媒体培训 | 产品经理培训 | Linux运维 |
| 大数据培训 | 智能机器人软件开发 |
传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。
传智播客从未停止思考
传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”
中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。
何为中高级程序员课程?
传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。
黑马程序员热门视频教程【点击播放】
| Python入门教程完整版（懂中文就能学会） | 零起点打开Java世界的大门 |
| C++| 匠心之作 从0到1入门学编程 | PHP|零基础入门开发者编程核心技术 |
| Web前端入门教程_Web前端html+css+JavaScript | 软件测试入门到精通 |