搜索到
1
篇与
前端学习
的结果
-
HTML基础知识——学习记录 标题标签场景：在文章页面中，都离不开标题，用来突出显示文章的主题代码：h系列标签<h1>h1标签</h1> <h2>h2标签</h2> <h3>h3标签</h3> <h4>h4标签</h4> <h5>h5标签</h5> <h6>h6标签</h6>语义：1~6级标题，重要程度依次递减特点：文字加粗文字变大，h1->h6文字逐渐减小独占一行段落标签场景：在文章页面中，用于分段显示代码： <p>内容</p>语义：段落特点：段落之间存在间隙独占一行换行标签场景：让文字强制换行显示代码： <br> 语义：换行特点：单标签让文字强制换行文本格式化标签场景：需要让文字加粗，下划线，倾斜，删除线等效果代码：|标签|详细名称|说明|bstrong加粗uins下划线iem倾斜sdel删除线语义:突出重要性强调语境图片标签-场景：在网页中显示图片代码： <img src="" alt="">特点：单标签img标签需要展示对应的效果，需要借助标签的属性进行设置属性|属性|说明|alt单图片加载失败显示alt内容title当鼠标停留在图片时，才会显示title的内容（可用于其他标签）width/height图片的宽度和高度，当只设置一项的时候，图片会等比例缩放水平线标签场景：分割不同主题内容的水平线代码： <hr> 语义：主题的分割转换特点：单标签在页面中显示一条水平线音频标签介绍场景 在页面插入音频代码 <audio src="music.mp3" controls></audio>属性|属性名|功能|src音频的路径controls显示播放的控件autoplay自动播放（部分浏览器不支持）loop循环播放注意： 视频标签目前支持三种格式：MP3，Wav，Ogg视频标签介绍场景 在页面插入音频代码 <video src="music.mp4" controls></video>属性|属性名|功能|src音频的路径controls显示播放的控件autoplay自动播放（谷歌浏览器支持需要配置muted）loop循环播放注意： 视频标签目前支持三种格式：MP4，WebM，Ogg超链接场景 点击之后，从一个页面跳到另一个页面代码 <a href="目标网页">名字</a>特点：双标签，内部可以包裹内容如果需要a标签点击后去指定页面，需要设置a标签的href属性属性属性名：target属性值：目标网页的打开方式取值功能_self默认值,在当前窗口中跳转（覆盖原网页）_blank在新窗口中跳转（保留原网页）代码：<a href="#" target="_blank">JaysonBLog</a>列表标签无序列表场景： 在网页中表示一组无顺序的列表代码：<ul> <li>内容</li> </ul>标签组成：|标签名|说明|ul表示无序列表的整体，用于包裹li标签li表示无序标签的每一项，用于包含每一行的内容 显示特点：列表的每一项前默认显示圆点 注意点：url标签中只允许包含li标签li标签可以包含任意内容 有序列表场景：在网页中表示一组有顺序的列表代码：<ol> <li>内容</li> </ol>标签组成：|标签名|说明|ol表示有序列表的整体，用于包裹li标签li表示有序列表的每一项，用于包含每一项的内容 显示特点：列表的每一项前默认显示圆点 注意点：url标签中只允许包含li标签li标签可以包含任意内容 自定义列表场景：在网页的底部导航中通常会使用自定义列表代码：<dl> <dt>主题</dt> <dd>内容</dd> <dd>内容</dd> </dl>标签组成：|标签名|说明|dl表示自定义列表的整体，用于包裹dt/dd标签dt表示自定义列表的主题dd表示自定义列表的针对主题的每一项内容 显示特点： dd前会默认缩进效果 </li> <li>注意点： <ul> <li>dl标签中只允许包含dt/dd标签</li> <li>dt标签可以包含任意内容</li> </ul> </li>表格标签场景：在网页中以行+列表的单元格的方式整齐展示和数据代码：<table> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table>基本标签：|标签名|说明|table表格整体，可用于包裹多个trtr表格每行，可用于包裹tdtd表格单元格，可用于包裹内容<dl><dt>注意点：</dt><dd>标签的嵌套关系：table > tr > td <dd></dl>表格属性场景：设置表格基本展示效果常见相关属性：代码：<table border="2" width="300" height="200">|属性名|属性值|效果|border数字边框宽度width数字表格宽度height数字表格高度<dl><dt>注意点：</dt><dd>实际开发时针对样式效果推荐用css设置<dd></dl>表格标题和表头单元格标签场景：在表格中表示整体大标题和小一列小标题代码：<table> <caption>表格标题</caption> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> </table>其他标签：|标签名|名称|说明|caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示th表头单元格表示一列小标题，通常用于表格的第一行，默认内部文字加粗并居中<dl><dt>注意点：</dt><dd>caption标签书写在table标签内部<dd><dd>th标签书写在tr标签内部<dd></dl>表格的结构标签（了解）场景：让表格的内容结构分组，突出表格的不同部分（头部，主体，底部），使语义更加清晰结构标签|标签名|名称|thead表格头部tbody表格主体tfoot表格底部<dl><dt>注意点：</dt><dd>表格结构标签内部用于包裹tr标签<dd><dd>表格结构标签可以省略<dd></dl>合并单元格-代码实现合并步骤：明确合并哪几个单元格通过左上原则，确定保留谁删除谁上下合并 --> 保留最上面的单元格，删除其他的单元格 <tr> <td>小哥哥</td> <td rowspan="2">上下合并的单元格</td> <td>小哥哥真帅气</td> </tr> <tr> <td>小姐姐</td> <td>小姐姐真漂亮</td> </tr>左右合并 --> 保留最左面的单元格，删除其他的单元格<tr> <td>总结</td> <td colspan="2">左右合并的单元格</td> </tr> 给保留的其他单元格设置：跨行合并（rowspan）跨列合并（colspan）|属性名|属性值|说明|rowspan合并单元格个数跨行合并，将多行的单元格垂直合并colspan合并单元格个数跨列合并，将多列的单元格水平合并<dl><dt>注意点：</dt><dd>只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）<dd></dl>表单标签input系列标签基本介绍场景：在网页中显示收集用户信息的表单效果标签名：inputinput标签可以通过type属性值的不同，展现的不同效果type属性值： |标签名|type属性值|类型|说明||---| |input|text|文本框|用于输入单行文本| |input|password|密码框|用于输入密码| |input|radio|单选框|用于多选一| |input|checkbox|多选框|用于多选多| |input|file|文件选择|用于上传文件| |input|submit|提交按钮|用于提交| |input|reset|重置按钮|用于重置| |input|button|普通按钮|默认无功能，之后配合js添加功能| input系列标签-文本框场景：在网页中显示输入的单行文本的表格控件type属性值：text/password代码：<input type="text/password" placeholder="显示内容">常用属性：|属性名|说明|placeholder占位符，提示用户输入的内容input系列标签-单选框场景：在网页中显示多选一的单选表单控件type属性值：radio代码： <body> <input type="radio" name="rex"> <input type="radio" name="rex"> </body常用属性：|属性名|说明|name通过name进行分组，有相同的name属性值的单选框为一组，一组中同时只能有一个被选中checked默认选中(checkbox也适用)<dl><dt>注意点：</dt><dd>name属性值对于单选框有分组功能<dd><dd>有相同的name属性值的单选框为一组，一组中只能同时有一个被选中<dd></dl>input系列标签-文件选择场景：在网页中显示文件选择的表单控件type属性：file代码：<input type="file" multiple>常用属性：|属性名|说明|multiple多文件选择input系列标签-按钮场景：在网页中显示不同功能的按钮表单控件type属性值：|标签名|type属性值|类型|说明|inputsubmit提交按钮点击之后提交数据给后端服务器inputreset重置按钮点击之后恢复表单默认值inputbutton普通按钮默认无任何功能，之后搭配js添加功能<dl><dt>注意点：</dt><dd>如果需要实现以上按钮功能，需要配合form标签使用<dd><dd>form使用方法：用form标签把表单标签一起包裹起来<dd></dl>button按钮标签场景：在网页中显示用户点击的按钮标签名：buttontype属性值（同input的按钮一样）：|标签名|type属性值|类型|说明|buttonsubmit提交按钮点击之后提交数据给后端服务器buttonreset重置按钮点击之后恢复表单默认值buttonbutton普通按钮默认无任何功能，之后搭配js添加功能<dl><dt>注意点：</dt><dd>谷歌浏览器中的button默认是提交按钮<dd><dd>button标签是双标签，便于包裹其他内容：文字，图片等<dd></dl>select下拉菜单标签场景：在网页中提供多个选择项的下拉菜单控件标签组成：select标签：下拉菜单的整体option标签：下拉菜单的每一项常见属性：selected：下拉菜单的默认选中textarea文本域标签场景：在网页中提供可输入多行文本的表单控件标签名： textrea常见属性|属性名|说明|cols规定了文本域内可见宽度rows规定了文本域内可见行数<dl><dt>注意点：</dt><dd>右下角可以拖拽改变大小<dd><dd>实际开发时针对于样式效果推荐css设置<dd></dl>label标签场景：常用于绑定内容与标签关系标签名：label使用方法①：使用label标签把内容（如文本）包裹起来在表单标签添加id属性在label标签的for属性中设置对应的id值<body> <input type="radio" name="hex" id="1"><label for="1">内容</label> <input type="radio" name="hex" id="2"><label for="2">内容</label> </body>使用方法②：直接使用label标签把内容（如：文本）和表单标签一起包裹起来需要把label标签和for标签删掉即可<body> <label> <input type="radio" name="sex">内容 </label> <hr> <label> <input type="radio" name="sex">内容 <hr> </label> </body>语义化标签没有语义化布局标签-div和span场景：实际开发网页会大量频繁使用div和span这两个没有语义的布局标签div标签：一行只显示一个（独占一行）span标签：一行可以显示多个有语义化的布局标签场景：在html5新版本中，推出了一些有语义的布局标签供开发者使用（手机端使用）标签：|标签名|语义|header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章<dl><dt>注意点：</dt><dd>以上标签显示特点和div一致，但是比div多了不同语义<dd></dl>字符实体常见字符实体场景：在网页中展示特殊符号效果时，需要使用字符实体替代结构：&英文;常见字符实体：|显示结果|描述|实体名称|" "空格 <小于号<>大于号>&和号&"引号"'撇号'(IE不支持)
