ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

HTML知识点总结

HTML知识点总结

1. 单个标签:<br /> 强制换行 图像标签 <input />用户输入标签

2. 常见标签 2.1 <div>大格子,独占一行 <span>小格子 <em>标签盒子

2.2 图像标签 a: <imgsrc="img.jpg" />指定图像 <img src="***.jpg"alt="****" />当图片显示不出来时出现一行字 <img src="src.jpg"title="****" />图片显示出来时鼠标放上去显示出一行字 b: width height border边框粗细 c: 相对路径: 下一级<img src="images/baidu.gif" /> 上一级<img src="../baidu.gif /> d: 绝对路径: 地址中用符号\

2.3 链接标签 外部:<a href="跳转目标的地址"target="目标窗口弹出方式”>文字或图像内容</a>_self表示当前页面_blank表示另起一页面 内部:网站内部之间的相互链接,直接导入内部页面名称 <a href=index.html">首页</a> 空链接:当前没确定链接目标时用#代替 下载链接:如果href里的地址是一个文件或压缩包,点击时会下载这个文件 锚点链接:点击链接时可快速定位到页面中的某个位置 例:<a href="#名字">*******</a> 找到目标标签<h3id="名字">*******</h3>

2.4 注释标签: <!-- ****** --> 快捷键Ctrl+/

2.5 表格标签:表格用于展示数据 <table> </table>定义表格 <tr> </tr>定义表格中的行 <td> </td>定义行中的单元格表头单元标签:<th></th> 里面的文本内容加粗居中显示 <tablealign=" left、right、center"border="1或空白“> </table>cellpadding表示文字与边框的距离cellspacing表示单元格之间的距离width、height表示表格的宽和高 合并单元格 跨行合并:rowspan="合并单元格个数" 目标单元格为上侧 跨列合并:colspan="合并单元格个数" 目标单元格为左侧 最后别忘删掉多余的单元格

2.6 列表标签:布局页面更加自由便捷 a:无序列表 <ul> </ul>大边框(里面只能放<li>) <li></li>列表项(没有顺序级别之分,是并列的,里面可放任何元素) b:有序列表 <ol> </ol>大边框(里面只能放<li>) <li></li>列表项(自动排序,有序号,里面可放任何元素) c:自定义列表 <dl></dl>大边框(里面只能放<dt><dd>) <dt>名词</dt> <dd>名词解释</dd>

2.7 表单标签:收集用户信息 a:表单域 <form></form> 把它范围内的表单元素信息提交给服务器 b:<inputtype=“属性值”name="****"value="****“ (cheked)maxlength="*">收集用户信息type属性设置不同的属性值用来指定不同的控件类型 单选框和复选框要有相同的name值value显示出初始的文本 可加入checked作为默认勾选 c: type的不同属性 text 文本(一行) radio单选框 checkbox复选框 submit显示提交按钮 reset重置按钮 maxlength用户规定输入字符的最大值 button点击按钮(可用于js启动脚本) d:<label>标签 <lablefor="名字">******</label> <input type="radio"id="名字"> e:<select> 定义下拉列表 <select> <option(后加selected表示默认选定)> ***</option> ...... </select> f:文本域<textarea>用于用户输入内容较多情况 <textarea> 中间可插入初始文本 </textarea>

3. 特殊字符:空格&nbsp;大于号&gt; 小于号&lt;

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进