最好的企业网站源码,宁波网站优化公司软件,新手怎么建立自己网站,wordpress安装完成访问不了认识 HTML HTML 是超文本标记语言 开发环境 VScode and Chrome VScode 快捷键 ctrl b隐藏侧边栏shift alt f自动整理格式shift alt 向下箭头将当前选中的内容#xff0c;复制一份并粘贴到下面! Tab键自动补全HTML骨架 VScode 快速开发技巧 Emmet 写法#xff1a…认识 HTML HTML 是超文本标记语言 开发环境 VScode and Chrome VScode 快捷键 ctrl b隐藏侧边栏shift alt f自动整理格式shift alt 向下箭头将当前选中的内容复制一份并粘贴到下面! Tab键自动补全HTML骨架 VScode 快速开发技巧 Emmet 写法代码的简写方式输入缩写 VS Code 会自动生成对应的代码 Emmet 标签结构 标签名.类名 div classbox/div 标签名#id名 div idbox/div divp div/divp/p divp divp/p/div span*3 span1/spanspan2/spanspan3/span div{今天很好} div今天很好/div基本骨架 !DOCTYPE html html langzh-CNhead.../headbody.../body /html标签分类 双标签成对出现的标签标签里面往往包含内容例如div.../div 单标签只有开始标签没有结束标签往往不用包含内容只是起到某个作用例如br HTML 注释 !-- 这是注释 --标题和段落 h1.../h1 这是标题标签h1往往只用一次用来显示重要的内容如文章标题而 h2 ~ h6 没有限制p.../p 这是段落标签段落与段落标签之间会自动有间隙水平分割线与换行 hr 这也是单标签作用是显示出一条水平分割线 br 这是单标签作用是换行因为浏览器不识别代码中的 Enter 键换行文本格式 strong.../strong 强调 em.../em 倾斜 ins.../ins 下滑线 del.../del 删除线图片 img src alt title src 图片的url必须属性 alt 图片加载失败替换文本非必须属性 title 鼠标悬停显示的文字非必须属性超链接 a href#.../a href 链接的路径必须属性 如果不知道超链接的跳转地址href属性值写#表示空链接不会跳转 target_blank 在新标签页中打开链接非必须属性音频 audio.../audio src音频的URL必须属性 当 属性名 属性值 时如 controlscontrols 时html 5 支持只显示属性名下面的属性都是这样controls (作用显示音频控制面板) loop (作用循环播放) autoplay (作用自动播放---为了提示用户体验浏览器一般会禁用自动播放功能)视频 video.../video src视频的URL必须属性 controls 显示视频控制面板 loop 循环播放 muted 静音播放 autoplay 自动播放为了提示用户体验浏览器支持在静音状态自动播放列表 概述 布局内容排列整齐的区域 [分类无序列表ul-li、有序列表ol-li、定义列表dl-dt/dd]ul:无序列表 ol:有序列表 li:列表条目dl:定义列表 dt:定义列表的标题 dd:定义列表的描述/详情无序列表 ulli.../lili.../lili.../li /ul无序列表ul-li 布局排列整齐且不需要规定顺序的区域。 ul标签里面只能包裹li标签li标签里面可以包裹任何内容有序列表 olli.../lili.../lili.../li /ol有序列表ol-li 布局排列整齐且需要规定顺序的区域。 ol标签里面只能包裹li标签li标签里面可以包裹任何内容定义列表 dldt列表标题/dtdd列表描述/详情-1/dddd列表描述/详情-2/dddd列表描述/详情-3/dd /dl定义列表dl-dt/dd dl里面只能包含dt和dd dt和dd里面可以包含任何内容表格 认识表格 tabletrth.../thth.../thth.../th/trtrtd.../tdtd.../tdtd.../td/trtrtd.../tdtd.../tdtd.../td/tr /table表格与Excel表格类似用来展示数据table 表格tr 行th 表头单元格td 内容单元格 在网页中表格默认没有边框线可以为 table 使用 border 属性可以为表格添加边框线表格结构标签了解 作用用表格结构标签把内容划分区域让表格结构更加清晰语义更清晰没有具体的显示作用 thead 表格头部 表格头部内容 tbody 表格主体 主要内容区域 tfoot 表格底部 汇总信息区域合并单元格掌握 将多个单元格合并成一个单元格以合并同类信息 步骤 1.明确合并目标 2.保留最左最上的单元格添加属性属性的取值是数字表示需要合并的单元格数量跨行合并添加属性 rowspan其值为数字如rowspan3跨列合并添加属性 colspan其值为数字如colspan2 3.删除其他单元格表单 input 标签 input 标签的不同功能 input type属性值 input 标签的 type 属性值不同则功能不同属性值说明text文本框用于输入单行文本不会实现换行password密码框radio单选框checkbox多选框file上传文件 input 标签的占位文本内容 input type... placeholder占位文本内容input 标签的单选框 input typeradio namegender 男 input typeradio namegender 女要想真正实现单选功能必须起名从而分为同一组进行选择input typeradio namegender checked 保密 -----------------或者----------------- input typeradio namegender checkedchecked 保密默认选中功能只需要添加属性 checked 即可input 标签的多选框 多选框也叫复选框 input typecheckbox checked默认选中checkedinput 标签的上传文件 input typefile multiple默认情况下文件上传表单控件只能上传一个文件添加 multiple 属性可以实现文件多选功能下拉菜单 selectoption北京/optionoption上海/optionoption selected广州/option (默认选中selected)option深圳/option /select下拉菜单select-option文本域 textarea请输入评论/textarea作用多行输入文本的表单控件label 标签 用 label 标签绑定文字和表单控件 写法一完整的写法 input typeradio namegender idmale label formale男/label input typeradio namegender idfemale label forfemale女/labellabel 标签只包裹内容不包裹表单控件 设置 label 标签的for属性值和表单控件的 id 属性值相同写法二简单粗暴法 labelinput typeradio namegender男/label labelinput typeradio namegender女/label作用两种写法效果都是一样的都起到了下面的两个作用1. 为某个标签进行了文字说明2. 增大了表单控件的点击范围点文本即可触发对应的表单控件注意支持 label 标签增大点击范围的表单控件还有————文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等按钮 button type属性值登录按钮/button属性值说明submit提交按钮点击后可以提交数据到后台如果省略 type 属性也默认使用该功能reset重置按钮点击后将表单控件恢复默认值button普通按钮默认没有功能一般配合JavaScript使用 注意因为整个表单的数据和功能都由 form 标签进行控制与管理所以 button 标签要配合 form 标签一起使用才能生效form action发送地址label账号input typetext placeholder请输入您的账号/labellabel密码input typepassword placeholder请输入长度为8的密码/labelbutton typesubmit登录/button /form布局标签 作用布局网页划分网页区域摆放内容 div 标签 div.../div独占一行俗称大盒子独占一行span 标签 span.../span不换行俗称小盒子不是独占一行字符实体 作用在网页中显示预留字符 实体名称 显示结果nbsp; 空格lt; gt;