html标记方法

快进来学HTML标记方法！作者自己学习总结的思维导图，分享给大家！HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。希望入门互联网小白能够对此有个清晰的脉络认识。快下载学习呀！

html标记

• 标记
  • <h1>-<h6>
    • 字号一级到六级
      • 字体加粗
      • 有竖直方向的垂直空白间距
      • 标记内容可以独自占一行显示
  • <p></p>段落元素
    • 有竖直方向的垂直空白间距
    • 标记的内容可以独自占一块区域显示
    • 属性：
      • align：值
        • left（左）
        • right（右）
        • center（中）
      • 设置文本在水平方向上的对齐方式
  • <hr>水平分割线
    • 属性：
      • size：设置水平分割线的高度，值是数字，单位px
      • width：设置水平分割线的宽度，值是数字，单位px或者%
      • color：颜色
      • align：对齐方式 值：
        • left（左)
        • right（右）
  • 特殊符号：
    • &nbsp; 代表一个空格 < 代表左尖括号 > 代表右尖括号 &copy; 代表圈+c &reg; 代表圈+R
  • 文本样式标记：
    • <b>加粗</b> <u>下划线</u> <s>删除</s> <i>倾斜</i> ^上标 <sub>下标</sub
  • 预格式化：保留源文档的格式 （空格或者换行）<pre></pre>
    • 属性：align值：
      • left(左)
      • right(右)
      • center(中)
  • 块分区元素：
    • <div></div>
      • 属性：align
        • left(左)
        • right(右)
        • center(中)
  • 行分区元素: <span></span>
    • 行内元素：标记的内容写出来 在一个区域显示
      • span,b,u,s,i,sup,sub
    • 块元素：标记的内容写出来独自 占一块区域显示，都具有 align的属性
      • h1,h2,h3,h4,h5,h6,p,hr,pre,div
  • <img>
    • 属性：
      • src：写路径的
      • .width：设置图片的宽度，值是数字， 单位px
      • height：设置图片的高度，值是数字， 单位px
        • 注意：改图片的宽高的时候，只需要改 其中一个值，另外一个值会跟着等比例的缩放
      • alt：当图像加载失败的时候，给用户一个提示
• 超链接 <a></a>属性：
  • href：路径 值：#
    • 锚点：#+id的值
  • target：设置打开新窗口的方式值：
    • _self:在当前窗口打开
    • _blank:在新的窗口打开
• 注释:给代码写批注写法：<!--注释的内容写到中间-->
• 表格:
  • 行包括几个单元格，列不能包括行
  • <table> <tr> <td>单元格</td> </tr> </table>
    • table的属性：
      • 1.border：设置表格的边框，值是数字， 没有单位
      • 2.width： 设置表格的宽度，值是数字， 单位是px
      • 3.height：设置表格的高度，值是数字， 单位是px
      • 4.bgcolor：设置表格的背景颜色
      • 5.align：设置表格的对齐方式值：
        • left
        • center
        • right
      • 6.cellspacing：设置单元格与单元格之间的间距， 值是数字，单位px
      • 7.cellpadding：设置单元格内容与边框线之间的距离， 值是数字，单位px
    • tr的属性：
      • align：left center right
      • valign:设置行标记里的内容在 竖直方向上的对齐方式
        • 值：top(上) middle(中) bottom(下)
      • bgcolor:设置行的背景颜色
    • td的属性：
      • width：设置单元格的宽度，值是数字，单位px
      • height：设置单元格的高度，值是数字，单位px
      • bgcolor：设置单元格的背景颜色
      • align：设置单元格的水平对齐方式
      • valign：设置单元格的竖直对齐方式 top middle bottom
      • colspan：跨列合并，值是数字， 没有单位，跨几列值就是几
      • rowspan：跨行合并，值是数字， 没有单位，跨几行值就是几
• 列表：列表类型和列表项
  • 有序列表
    • <ol> <li></li> </ol>
      • ol的属性：
        • type：值:
          • 1
          • a
          • A
          • i
          • I
    • start:值是数字， 没有单位,定义列表的编号从几开始
  • 无序列表
    • <ul> <li></li> </ul>
      • ul的属性：type：值：
        • disc：实心圆点
        • circle：句号
        • square：实心正方形
        • none：空
  • 自定义列表
    • 多用于图文混排场合
      • <dl> <dt>列表标题</dt> <dd>列表项</dd> </dl>
• 表单
  • <form></form>
    • 输入框<input>
      • 属性：type
        • text：输入文本
        • password：密码框
        • button：按钮
        • submit：提交按钮
        • reset：重置按钮
        • file：上传文件
        • radio：单选按钮
        • checkbox：复选框
    • checked：预选中
    • maxlength：设置输入框内容的最大长度
    • name：定义控件的名字
    • placeholder:占位符
    • value：写控件的值
  • 多行文本域多行文本域
    • <textarea></textarea>属性：
      • cols：设置多行文本域的列数， 值是数字，没有单位
      • rows：设置多行文本域的行数 值是数字，没有单位
      • style="resize:none" 取消拉伸效果
  • 下拉列表
    • <select> <option></option> </select>
      • select的属性：
        • size：值是数字，没有单位 当值等于1，为下拉列表 当值大于1，为滚动列表， 列表显示的项等于值的大小
        • multiple：实现多选，没有值的属性
      • option的属性：
        • selected:预选中,没有值的属性。