LWJ Front-end Dev Engineer

HTML基础-1

2017-03-13
LWJ

1. 标签

  • 标题 <h1>-<h6>
  • 段落 <p>
    是块级元素,会自动在段落的前后添加空行
  • 链接 <a>
    1. href 属性中指定链接的地址 <a href="url">this is a link</a>
    2. target 属性中定义被链接的文档在何处显示。 target="_blank" 在新窗口中打开
      target="_top" 跳出框架
    3. name 属性中规定锚(anchor)的名称
      <a name="tips">tips为锚的名称,可以为任意喜欢的名字</a>
      <a href="#tips">创建指向该锚(tips)的链接</a>
      <a href="URL#tips"在其他页面中创建指向该锚的链接</a>

      

  • 表格 <table>
  • 列表  
  • 图像 <img />
    1. src 属性中指定图片地址<img src="url" />
    2. alt 属性中定义一串预备的可替换的文本
    3. align 属性中定义图像在文档中的位置bottom ,middle,top.
      left图像浮动到文本的左侧,right图像浮动到文本的右侧。
  • 水平线 <hr/>
  • 注释 <!-- this is a comment -->
  • 换行 <br />

2. 元素

HTML文档是由嵌套的HTML元素构成,元素的内容是开始标签与结束标签之间的内容。大多数HTML元素可拥有属性。

3. 属性

属性总是在HTML元素的 开始标签 中规定,以 名称-值 的形式出现。

4. 样式

style 属性用于改变HTML元素的样式。

  • background-color:背景颜色
  • font-family:字体系列
  • color:文本颜色
  • font-size:字体尺寸
  • text-align:文本的水平对齐方式
  1. 外部样式表:使用<link>标签,只能出现在 head 部分
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">

    </head>
  2. 内部样式表:单个文件需要特别样式
    <head>
    <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
    </style>

    <head>
  3. 内联样式表:特殊的样式应用到单个元素
      • <div>、<span>标签没有特定的含义,用作容器。
    • <div>是块级元素 <span>是内联元素

5. 文本格式化

文本格式化标签

  • <b> 粗体文本
  • <i> 斜体字
  • <big> 大号字
  • <small> 小号字
  • <em> 着重文字
  • <strong> 加重语气
  • <sup> 上标字
  • <sub> 下标字
  • <ins> 插入字
  • <del> 删除字

“计算机输出”标签

  • <code> 计算机代码
    code元素不保留多余的空格和换行
  • <kbd> 键盘码
  • <samp> 计算机代码样本
  • <tt> 打字机代码
  • <var> 变量
  • <pre> 预格式文本

引用和术语定义

  • <abbr> 缩写
    使用全局的title属性
  • <address> 地址
  • <bdo> 文字方向
    使用dir属性,值为ltr或rtl
  • <cite> 引用
  • <blockquote> 长的引用
  • <q> 短的引用
  • <dfn> 一个定义项目

Comments