初识前端--HTML标签和基本框架

讲在文前，大多数的学习依靠自学，手把手的教和喂可以解决一时之需，却不一定能将其转化为自己所有，所以本文大部分内容以大纲和知识点为主，辅以部分代码和图片。主要在于记录学习的过程和总结，也便于以后复习时引起思考。

文本标签

• b：加粗
• i：斜体
• u：下划线
• del：删除线
• br：回车
• hr：水平分割线
• strong：黑体加粗
• sub：字体下沉
• sup：字体上浮
• h1-h6：标题，1为最大
• pre：保留文字在代码中的格式(空格、缩进等)
• font：字体，可以选择不同的字体要素(大小、字体、颜色等)
• ：注释
• 实体字符：特殊字符的转译方式，格式 &XXXX;
• & nbsp;：空格的实体字符
• & lt;：小于号<的实体字符
• & gt;：大于号>的实体字符
• 特殊：代码中的多空格只会转译成一个空格，如果想要表示多个空格，可用 代替

#多媒体标签

• img：图片
  • src：资源所在的位置
  • alt：资源失效时的提示
  • audio：音频
  • src：资源所在的位置
  • controls：控制面板，如果不加不显示
• video：视频
  • src：资源所在的位置
  • controls：控制面板，如果不加不显示
  • embed：内嵌，音视频均可

超链接标签

• a：超链接
• herf：跳转资源，默认为空跳转回本页面
  • 如果需要引用外部资源，需要写完整：http://www.XXXX.com
• target：
  • _self：默认在当前页打开链接
  • _blank：在新窗口打开
  • _parent：在父页面打开(针对有内嵌的情况)
  • _top：在最顶层打开(针对有内嵌的情况)

特殊使用方法-锚点

• 跳转到页面内的某位置
• 使用方式：

1. 使用标签的ID进行跳转

<a id="1">

2. 使用预设值好的锚点

<a name="a1">

• 使用格式：

xxx.html#[id] / xxx.html#[name]

特殊使用方法-邮件

<a herf="mailto:[email protected]">

页面布局标签

• 列表
  • ol>li：有序列表，在每列的前面显示顺序数字
  • ul>li：无序列表，在每列的前面显示一个点
• 表格
  • table>tr(tablerow:行)>th(tablehead:头):表格头标签，内部文字居中加粗
  • table>tr>td(tabledata:表格数据):数据标签，内部文字正常显示
  • 合并单元格
    • colspan：单行内合并多列
    • rowspan：单列内合并多行
    • 拓展：多行多列的合并
      • frame：设置内框线
      • rule：设置外框线

框架（待详细学习）

div：块级元素
span：行内元素

内嵌框架

• iframe：可以把别的页面当做本页面的元素内嵌进来
  • src：资源所在的位置
  • frameborder:内嵌框架的边框
  • width:宽度
  • height:高度
  • name:给内嵌框架定义一个名字，当超链接的目标地址(target)为该名字的时候，用内嵌框架打开连接

框架集

• frameset：替换body，可将页面分割成多块
  • rows：按行分割，页面分割成上下结构
  • cols：按列分割，页面分割成左右结构
  • 分割方式：X,X,X …
    • 20%,80%：页面分为左右(或上下)，前半部分占20%，后半部分占80%
    • 2,8：前半部分占2，后半部分占8
    • 200,*：前半部分占200px
    • 20%,*：前半部分占20%
• frame：必备要素，放在frameset中，用来实际占位对应的页面
  • src：资源所在的位置
  • name：当超链接的target指向当前名字的时候，在当前frame打开超链接