HTML思维导图

这是一篇关于HTML思维导图的思维导图

HTML

• Web
  • web标准提出的最佳体验方案：结构 样式 行为相分离
• 标签
  • 标题标签<h1>-<h6>
  • 段落标签<p></p>
  • 强制换行<br/>
  • 格式化标签
    • 加粗 <strong></strong> <b></b
      • • 倾斜<em></em> <i><i/>
        • 删除线 <del></del> <s></s>
        • 下划线<ins></ins> <u></u
  • 特殊标签<div><span>
    • 没有语义是一个盒子 用来布局 div 是division 的缩写分割分区 一行只能放一个 大盒子 span 是跨度跨距一行可以多个小盒子
• 图像标签
  • <img src="图片.jpg/
    • src 是<img>标签的必须属性 必须写！！！！！
  • alt 替换文本
    • 图片显示不出来用文字替代 <img src="img1.jpg" alt="壁纸" />
  • titlet 提示文本
    • 鼠标放在图像上 提示的文字 <img src="img.jpg" alt="壁纸" title="壁纸" />
  • widtn 给图片设定宽度
    • <img src="img.jpg" alt="壁纸" title="壁纸" width="500" />
  • heigth 给图像设定高度
    • <img src="img.jpg" alt="壁纸" title="壁纸" width="200" heigth="100" />
  • border 给图像设定边框
    • <img src="img.jpg" alt="壁纸" title="壁纸" width="200" border="15" />
• 相对路径
  • 同一级路径<img src="images.jpg">
  • 上一级路径<img src="images/man.jpg">
  • 下一级路径<img src="../man.jpg">
  • 绝对路径\
• 超链接
  • 语法格式
    • <a href="跳转目标"target="目标窗口弹出的方式">文本或图像<a/>
  • target
    • 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面
  • 外部链接
    • <a href="http://www.qq.com" traget="_blank">腾讯</a>
  • 内部链接
    • 网页内部页面之间的相互链接 直接链接内部页面名称即可 <a href="index.html">首页</a>
  • 空链接
    • 如果当时没有确定链接目标时 <a href="#">公司</a>
  • 下载链接
    • 如果href里面地址是一个文件或者压缩包会下载这个文件下载链接：地址链接的时文件.exe 或者.zip 等压缩包形式： <a href="img.zip">下载文件</a>
  • 网页元素链接
    • <a href="http://www.baidu.com"><img src="img.jpg" /></a>
  • 锚点链接
    • <a href="#jingli ">演艺经历</a><br /> <h3 id="jingli">yyy</h3>
• 注释和字符
  • 注释标签不显示 不执行 快捷ctrl+/
  • 空格 &nbsp 小于号 &lt 大于号&gt
• 表格标签
  • 表格语法
    • <table> <tr> <td>姓名 </td> </tr> </table>
  • 表头单元格标签
    • <th></th> 表头单元格里面的文本内容加粗居中显示
  • 表格属性
    • align left、center、right 规定表格相对周围元素的对齐方式。 border 1或0 规定表格单元是否拥有边框，默认为"0"，表示没有边框 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。 cellspacing 像素值 规定单元格之间的空白，默认2像素。 width 像素值或百分比 规定表格的宽度。
  • 表格结构标签
    • <thead></thead> 标签表格的头部 内部必须有<tr>标签一般位于第一行 <tbody></tbody> 标签表格的主体区域 主要用于放数据本体 以上两个标签都是放在<table></table>里面
• 合并单元格方式
  • 子主题
  • 目标单元格
    • 跨行：最上侧单元格 跨列：最左侧单元格
  • 合并单元格三部曲
    • 1.先确定是跨行还是跨列 2.找到目标单元格写上合并方式=合并单元格数量 比如：<td colspan=“2”></td> 3.删除多余的单元格
• 列表标签
  • =
• 表单
  • 表单域
    • 包含表单元素的区域
  • 表单元素
    • <input type="属性值”/> 单标签 type属性值不同 来指定不同的控件类型
    • • <!-- reset重置按钮可以还原表单元素初始的默认状态 --> <input type="reset" value="重新设置"><br> <!-- submit点击了提交按钮，可以把表单域form 里面的表单元素里面的值提交给后台服务器 --> <input type="submit" value="免费注册">
      • <!-- tadio 是单选按钮 可以实现多选 --> <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字 name 才可以实在多选1 --> <!-- 单选按钮和复选框可以设置checked属性，当页面打开时默认选择这个按钮 --> 性别：男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女" checked="chected"><br>
  • 除type属性外
    • • 单选框和复选框name必须一样 3.chected 属性 单选按钮和复选框可以设置checked属性，当页面打开时默认选择这个按钮 4. maxlength 规定输入字段中字符的最大长度
  • <lable>标签
    • • 为input元素定义标注 <lable>绑定一个表单元素 当点击标签内文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验
      • <input type="radio" name="sex" id="nan"><label for="nan">男</label>
      • <lable>标签的for属性应当与相关元素id属性相同
  • <select>表单元素
    • 籍贯<select> <option>山东</option> <option>天津</option> </select>
    • 1，至少包含一对 2,默认选择 selected
  • textarea 文本域元素
    • 用户输入比较多的内容下 不能用文本框 可以使用文本域 <textarea>标签是用于定义多行文本输入的控件
    • <form> 今日反馈 <textarea> Pink老师，我知道这个反馈留言是textarea 来做的 </textarea> </form>
• 主题
• 图像标签属性重点 可以拥有多个属性 必须写在标签名后面 属性不分先后顺序 标签名与属性 以空格分开