广州建设网站方案,dz网站标题,新东阳建设集团网站,WORDPRESS导购主题:WYZDG目录
1.初识网页
2.html#xff1a;超文本标记语言
2.1排版标签
标题标签
段落标签
换行标签
水平线标签
2.2文本格式化标签
2.3媒体标签
图片标签
路径
音频标签
视频标签
2.4链接标签
2.5列表标签
2.5.1无序列表
2.5.2有序列表
2.5.3自定义列表
2.6表格…目录
1.初识网页
2.html超文本标记语言
2.1排版标签
标题标签
段落标签
换行标签
水平线标签
2.2文本格式化标签
2.3媒体标签
图片标签
路径
音频标签
视频标签
2.4链接标签
2.5列表标签
2.5.1无序列表
2.5.2有序列表
2.5.3自定义列表
2.6表格标签
表格标签属性
表格标题和表头单元格标签
表格的结构标签
合并单元格
2.7表单标签
input系列标签
2.8button按钮标签
2.9select下拉菜单标签
2.10 textarea文本域标签
2.11 label标签
2.12语义化标签
2.13字符实体 1.初识网页 网页有那些部分? 文字图片音频视频超链接 网页背后计算机前端代码 前端的代码通过什么软件转换成用户所看到的界面 通过浏览器转化解析和渲染 五大浏览器IE浏览器火狐浏览器谷歌safari浏览器苹果Opera浏览器 浏览器内核渲染引擎 web标准html网页元素css页面样式JS页面交互动态效果 web标准要求页面实现结构表现行为三层分离 2.html超文本标记语言 VSCode注释快捷键ctrl/ html标签结构双标签单标签 如 br换行 hr分割线 标签的关系父子关系嵌套关系兄弟关系并列关系 2.1排版标签
标题标签 h系列标签双标签 语法h1 /h1 ....... h6 /h6 特征独占一行 段落标签 p标签双标签 语法p /p 场景新闻或文章的界面中用于分段显示 特征段落之间有间距独占一行 换行标签 语法br 作用强制换行 水平线标签 语法hr 作用页面中显示一条水平线 场景新闻页面使用 2.2文本格式化标签 场景文字加粗下划线倾斜删除线 特征不独占一行 标签说明b加粗u下划线i 倾斜s删除线strong加粗 ins下划线em倾斜del删除线
2.3媒体标签
图片标签 语法img src alt 标签的属性属性名和属性值构成 Note 属性没有先后顺序 属性名属性值效果src路径绝对路径或相对路径由路径找到对应图片alt任意内容如加载失败图片加载失败才显示alt属性对应的内容title文本内容鼠标悬停时显示的文本其他标签也适用 width height 数字px如果设置其中一个另一个会自动的等比例缩放同时设置图片可能变形
路径 绝对路径目录下的绝对位置通常从盘符开始 相对路径从当前文件开始出发找目标文件 同级./目标文件名 或者 直接目标文件名 使用场景当前文件和目标文件在同一目录中 上级../目标文件名 可以连续返回上级目录 使用场景目标文件在上一级目录中 下级目标文件在下级目录中 音频标签 语法audio src.music.mp3/audio 如audio src./music.mp3 controls autoplay loop/audio 效果找到音频music.mp3并且在网页显示播放的控件网页一打开就自动播放播放结束循环播放 Note 音频标签目前支持三种格式mp3wavogg 属性效果src由路径找到对应的音频controls显示播放的控件autoplay自动播放部分浏览器不支持loop循环播放 视频标签 语法video src./video.mp4 controls/video 如video src./basketball.mp4 controls autoplay muted/video 效果自动静音播放 Note 视频标签目前支持的格式mp4WebMogg 属性效果src由路径找到对应的视频controls显示播放的控件autoplay自动播放谷歌浏览器中配合muted实现静音播放loop循环播放
2.4链接标签 语法a href./目标网页.html超链接/a 特征不会单独占据一行 常使用br标签换行 Note a href#/a 效果#表示空链接目前不知道要跳转的地址相当于原地跳转 网站的首页面index.html 属性属性值效果href目标网页(一个.html文件)跳转到目标网页target_self_blank _self默认值在当前窗口跳转覆盖原网页 _blank在新窗口中跳转保留原网页
2.5列表标签 场景组件排列很整齐按照行的方式整齐显示内容 2.5.1无序列表 语法 ul li/li /ul 场景在网页中展示一组无顺序之分的列表 特征列表的每一项前默认显示原点标识 Note ul标签中只允许包含li标签显示无序列表的整体li标签可以包含任意内容表示无序列表的每一项用于包含每一行的内容 2.5.2有序列表 语法 ol li/li /ol 场景在网页中展示一组有顺序之分的列表 特征列表的每一项前默认显示序号标识 Note ol标签中只允许包含li标签显示有序列表的整体li标签可以包含任意内容表示有序列表的每一项用于包含每一行的内容 2.5.3自定义列表 语法 dl dt/dt dd/dd dd/dd ... .... /dl dl表示自定义列表的整体 dt表示自定义列表的主题 dd表示自定义列表针对主题的每一项内容 场景网页的底部导航使用中一个标题加很多内容 Note dd前默认显示缩进效果dl标签中默认只允许包含dt/dd标签dt/dd标签可以包含任意内容 2.6表格标签 场景在网页中以行列的单元格整齐展示数据 语法 table tr td/td td/td ... ... /tr ... ... /table table表格整体可用于包含多个trtr表格每行可用于包裹tdtd表格单元格可用于包裹内容 Note 标签的嵌套关系tabletrtd 表格标签属性
属性名属性值效果border数字 px边框宽度width数字表格宽度height数字表格高度 表格标题和表头单元格标签 场景在表格中表示整体大标题和一列小标题 Note caption标签写在table标签内部th标签书写在tr标签内部替换td标签 标签名名称说明caption表格大标题表示表格整体大标题默认在表格整体顶部居中位置显示th表头单元格表示一列小标题通常用于表格第一行默认内部文字加粗并居中显示 表格的结构标签 场景让表格的内容结构分组突出表格的不同部分头部主体底部 Note 表格结构标签内部用于包裹tr标签表格的结构标签可以省略和不加没有区别但是对于编译器的执行效率有提升快捷键缩进tab 向前缩进shifttab 标签名名称thead表格头部tbody表格主体tfoot表格底部
合并单元格 作用将水平或者垂直的单元格合并成一个单元格 分类跨行合并跨列合并 合并单元格步骤 明确合并哪几个单元格通过左上原则确定保留谁删除谁 上下合并只保留最上的删除其他 左右合并只保留最左的删除其他给保留的单元格设置跨行合并或者跨列合并 Note 只有同一个结构标签中的单元格才能合并不能跨结构标签合并不能跨thead,tbody,tfoot 属性名属性值说明rowspan合并单元格的个数跨行合并将多行的单元格垂直合并colspan合并单元格的个数跨列合并将多列的单元格水平合并 2.7表单标签 使用场景登录页面注册搜索只有这三个 input系列标签 场景在网页中显示收集用户的表单效果如登录页注册页 使用方法通过type属性的不同展示不同效果 type属性值说明text文本框用于输入单行文本password密码框用于输入密码radio单选框用于多选一checkbox多选框file文件选择用于之后上传文件submit提交按钮用于提交reset重置按钮用于重置button普通按钮默认没有功能
input系列标签文本框 场景在网页中显示输入单行文本的表单控件 type属性值text 文本框常用属性
属性名说明placeholder占位符提示用户输入文本的内容 input系列标签单选框 type属性值radio 单选框常用属性
属性名说明name分组有相同name属性值的单选框为一组一组中同时只能有一个被选中checked默认选中 input系列标签文件选择 场景在网页中显示文件选择的表单控件 type属性值file 文件选择常用属性
属性名说明multiple多文件选择 input系列标签按钮 场景在网页中显示不同功能的按钮表单控件 type属性值button 属性名说明submit提交按钮点击之后提交数据给后端服务器reset重置按钮点击之后恢复表单默认值button普通按钮默认无功能 实现以上按钮功能需要配合form标签表单域标签 form标签使用方法用form标签把表单标签一起包裹起来即可 2.8button按钮标签 场景网页中显示用户点击的按钮 submit reset button 谷歌浏览器中默认button是提交按钮 button标签是双标签更便于包含其他内容文字图片等 2.9select下拉菜单标签 场景在网页中提供多个选择项的下拉菜单表单控件 语法 select name id option value/option option value/option /select select标签下拉菜单的整体option下拉菜单的每一项 属性 selected下拉菜单的默认选中 2.10 textarea文本域标签 场景在网页中提供可输入多行文本的表单控件 属性 cols规定了文本域内可见宽度rows规定了文本域内可见长度 Note 右下角拖拽可以改变大小实际开发针对样式效果使用CSS设置 2.11 label标签 场景常用于绑定内容与表单标签的关系 方法1 使用label标签把内容包裹起来在表单标签上添加id属性在label标签的for属性中设置对应的id属性值 方法2 直接使用label标签把内容和表单标签一起包裹起来需要把label标签的for属性删除即可 2.12语义化标签 没有语义的布局标签div span div标签独占一行 span一行可以显示多个 有语义的布局标签手机端网页使用
标签名说明header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章
2.13字符实体 问题网页不认识多个空格只认识一个如何实现多个空格 方案在网页中展示特殊符号效果时需要使用字符实体代替 常见字符实体 空格nbsp;
