HTML基本标签2

回顾

HTML\CSS\JavaScript

  • HTML负责结构
  • CSS负责样式
  • JavaScript负责逻辑

HTML基础

  • 标签/元素 单标签/双标签
  • 属性
  • 注释
  • 格式

结构标签

  • DTD声明 <!doctype html>
  • html标签 双
  • head标签 双
  • body标签 双 bgcolor background link alink vlink text

头部标签

  • title 双 标题
  • meta 单 name/content http-equiv/content charset
    • 字符集编码
    • 页面刷新/跳转
    • 关键字/描述
  • link 单 href/rel

格式标签

  • br 单 换行
  • hr 单 分隔线 width/size/noshade/align
  • pre 双 原样输出
  • p 双 段落
  • hn 双 标题
  • center 双 居中(不建议)

HTML实体

  • &nbsp; 空格
  • &lt; <
  • &gt >
  • &quot “ 引号
  • &copy © 版权
  • &yen ¥
  • &times; ×
  • &divide; ÷
  • &reg; ®

列表标签

  • ul 双 无序列表 属性 type(disc(默认)/square/circle)
  • li 双 列表项 属性 type 值同上
  • ol 双 有序列表 属性 reversed(降序) type(1/a/A/I) start(值数字)
  • dl 双 定义列表
  • dt 双 列表项目的标题
  • dd 双 列表项目的描述

文本标签(双)

  • em 强调 表现为斜体
  • strong 强调 表现为加粗
  • cite 引证，距离 书名 电影名
  • dfn 定义项目
  • kbd 键盘按键
  • abbr 定义缩写 配合title
  • bdo 配合 dir属性(ltr, rtl) 改变文字书写方向
  • code 定义代码
  • var 定义变量
  • del 已经删除的 删除线
  • ins 当前的 下划线
  • sup 上标文字
  • sub 下标文字
  • q 引用 短
  • blockquote 引用 长
  • address 定义地址
  • b 加粗 强调
  • i 斜体 科学专业术语
  • u 下划线 定义与其他文本不同风格的文本

超链接

URL

  • 统一资源定位符
  • 万维网的每一个文件都有一个URL

a标签

  • href 值 URL
  • target 新网页从哪个窗口打开 _self / _blank
  • title 提示
  • download 下载 H5自增

路径

  • 相对路径 ./ (下级目录) ../(上级目录) ../../(上上级目录)
  • 绝对路径 URL

锚点

  • <a name="锚点的名字"></a>

  • 使用超链接 # 跳转到指定锚点

      例子：
  <a name="mao1">...</a>
  <a href="#mao1">...</a>

图像

img标签 属性

  • src
  • alt 图片无法显示时显示的文字
  • title
  • border 值 数字
  • width 图片宽度
  • height 图片高度
  • usemap

常见的图片格式

  • jpg/jpeg
  • gif
  • png

图片热点 图片映射

  • map id/name

  • area shape(circle rect poly) href title target ...

      例子：
  <body>
  	<img src="img/sun.gif" alt="" usemap="mymap">
  
  	<map name="mymap" id="mymap">
  		<area shape="rect" coords="100,100,200,200" href="http://www.taobao.com" alt="">
  		<area shape="circle" coords="500,250, 100" href="http://www.jd.com" alt="">
  	</map>
  </body>
posted @ 2017-07-24 19:10  blue星期天  阅读(142)  评论(0)  编辑  收藏  举报