HTML基础知识

 HTML

     超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。

  • 标签

     由左右尖括号和它们中间的字母及数字组成

  • 元素

     由起始标签和结束标签以及2个标签之间的所有文本组成

    • 元素嵌套
一个元素要完全包含另一个元素
    • 元素分类
      • 块级别元素

     块级别元素显示都是从新行开始,可以包含内联元素。

      • 内联元素
     内联元素一般在句子中,不会从新行开始,不能包含块级别元素
    • 元素特性

     在附带特性的元素起始标签内,由名称和值组成,特性值必须放置在双引号内并用等号与名称隔开。

      • 名称
     想要设置元素的特性
     希望设置特性的值
      • 分类
        • 核心特性
        • 国际化特性
        • UI事件
  • UI事件特性
     使用UI事件特性可以将事件与脚本相关联。
  • 转义字符
字符 数字实体 命名实体
" &#034 "
& &#038 &
< &#060 &lt;
> &#062 &gt;
  • 注释
<!-- 注释 -->
  • 提交方式
    • get
    • post
  • 声明
    • 文档类型声明
     DOCTYPE声明位于文档起始位置,如果有XML声明,则其位于XML声明之后。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    • XML声明
     可选项,声明必须位于文档的起始位置
<?xml version="1.0" encoding="UTF-8" ?>
  • XHTML与HTML的区别
    • 标签必须以小写字母书写
    • 特性必须以小写字母书写

 核心特性

  • id
     用于唯一标识网页内的任何元素,必须以字母开头后面可以添加任意数量的字母、数字、连字符、下划线、冒号和句号,任意两个元素的id不能相同。
  • class
     用于指定元素属于哪一类元素。
  • title
     元素的建议标题。 

 基本文本格式化

  • 空白和流
    • 空白折叠
     默认情况下多个空格、空行、制表符都只会显示为一个空格。
    • 保留空格
      • <pre>
      • &nbsp
  • hn 标题元素
     用于创建不同级别的标题
    • 标签
      • <h1>
      • <h2>
      • <h3>
      • <h4>
      • <h5>
      • <h6>
    • 大小
      • <h1>最大
      • <h4>默认与文本大小相同
      • <h6>最小
  • <p>  段落元素
     用于结构化文本,使包含的文本作为一个段落,通常在下一个段落之前插入一个新行并添加一小段额外的垂直空格。
  • <br />  换行符
     这是一个空元素,不需要起始标签和结束标签,没有内容填充,不能放置文本,只能用于块级别元素中。
  • <pre>  预先格式化文本
     在页面中以HTML文档中的格式显示,默认情况下字体以等宽字体显示

 核心元素

  • <html>  网页
     整个网页标签,位于文档声明之后。
  • <head>  网页头
     标题标签,包含了关于整个网页的信息,可以存放js代码、css代码,每个该标签都应该包含一个<title>。
    • <title>
     网页的标题,显示位于浏览器顶部,作为浏览器书签的默认名称,帮助索引网页。
    • <base>
     指定网页的基URL,当浏览器遇到相对URL时会自动将基URL与相对URL进行拼接,生成绝对URL。
    • <object>
     用于包含图像、JavaScript对象、Flash动画、MP3文件、QuickTime电影以及其他类型的文件。
    • <link>
     用于链接到外部文件。
    • <style>
     用于存放CSS样式规则。
    • <script>
     用于包含脚本。
    • <meta>
     用于存放与文档相关的信息,例如关键字和文档描述,它们对于搜索应用特别有用。
  • <body>  网页体
     正文标签

 列表元素

  • <ul> 无序列表
     用于放置项目符号列表,即无序列表,每一个项都要使用<li>元素。
  • <ol> 有序列表
     用于放置有序列表,可以更改序号的表现形式,可使用阿拉伯数字、字母或罗马数字,每一个项都要使用<li>元素。
  • <li> 项
     用于存放列表中的每一个项。
  • <dl> 定义列表
     用于定义特殊类型的列表,这种列表用于提供术语,并且术语后面跟上简短的文本定义或描述。
    • <dt>
     用于放置即将定义的术语。
    • <dd>
     用于放置术语的定义或描述。
  • 嵌套列表
     在列表中可以嵌套其他的列表。

 链接和导航

  • URL 统一资源定位符
     完整的Web地址。
  • DNS 域名服务器
     实际上所有的域名在后台都是转换成IP地址的,通过IP地址可以访问到所有Internet上的计算机,DNS中包含了运行网站的域名和对应的IP地址。
  • 目录
    • 父级目录
../
    • 根目录
~/
  • <a> 链接
     利用<a>元素可以指定链接,在起始标签<a>和结束标签</a>之间的文本组成了链接的内容,用户可以浏览和点击它,此外起始标签需要附带href特性,该特性的值是所要链接的文件名。当链接是E-mail时在href特性的值开头使用“mailto:”。

 框架

     框架能够将浏览器窗口划分为多个独立的部分或窗格,每个窗格包含独立的网页,优点在于加载其中的任意页面都不需要重新加载浏览器窗口内的全部内容。
  • <frameset>
     框架集,需要替代掉<body>元素。
  • <frame>
     框架元素。
  • <noframes>
     当浏览器不支持框架时提供消息提示。
  • <iframe>
     内联框架、浮动框架,可以出现在网页的任意位置,不需要放置在<frameset>内。

 分组元素

  • <div>
     该元素主要用于块级别元素分组
  • <span>
     该元素仅用于分组内联元素

 多媒体

  • <img>
     该标签用于网站中添加图片,至少附带src和alt这两个特性,src指定图片的来源,alt指定图片的描述。在该标签外套用<a>可以使得该图片有链接的效果。
  • <map> <area>
     用于客户端的图像映射,图像映射可以为一张图片创建多个链接。
  • <object>
     用于包含图像、JavaScript对象、Flash动画、MP3文件、QuickTime电影以及其他类型的文件。
  • <param>
     该元素用于向对象传递参数,对象所需要的参数类型取决于对象的工作,例如可以为播放器提供额外的信息。
  • <embed>
     用于网页添加Flash

 短语元素

  • <em> 强调
     该元素是文档中的强调点,通常是以斜体的形式显示,但是不能希望显示斜体而使用该元素,应当是需要强调时才使用。
  • <strong> 着重强调
     该元素用于强调文本内容,强调程度强于<em>,通常以粗体显示,应当在需要强调时才使用。
  • <address> 地址
     用于包含地址文本,大多数浏览器显示为斜体。
  • <abbr> 缩写词
     用于使用缩写形式,可使用title特性存放其完整版本,如果缩写的是外语单词,可以使用XHTML中的xml:lang特性指明使用的语言种类。
  • <acronym> 首字母缩略词
     用于使用首字母缩写形式,可使用title特性存放其完整版本,如果缩写的是外语单词,可以使用XHTML中的xml:lang特性指明使用的语言种类。
  • <dfn> 特殊术语
     用于声明正在引入特殊术语,通常以斜体显示
  • <blockquote> 用于引用文本
     用于引用另一个源中的一段文本,通常是一个独立的左右缩进块,可以使用cite特性指明引用的来源,一般是指向在线文档的URL。
  • <q> 用于短引用
     在句子内添加引用,而不是将引用作为独立的缩进块,可以使用cite特性指明引用的来源,一般是指向在线文档的URL。
  • <cite> 用于引证
     用于指明引用的来源,一般是指向在线文档的URL。
  • <code> 用于代码
     用于包含任何编程代码,通常以等宽字体显示,文本中的特殊字符需要使用转义字符。
  • <kbd> 用于通过键盘输入文本
     用于告知用户输入一些文本,通常以等宽字体显示。
  • <var> 用于编程变量
     用于表面其内容是可以由用户提供的一个变量,通常以斜体显示。
  • <samp> 用于程序输出
     用于指示程序、脚本等的样本输出,通常以等宽字体显示。

 表示元素

  • <b> 加粗显示
     浏览器并不一定是使用该元素加粗文字,有的浏览器是使用算法加粗组成字体的线,该元素与<strong>的内容具有相同的效果。
  • <i> 斜体显示
     浏览器并不一定是使用该元素斜体显示的,有的浏览器是使用算法倾斜文本以模仿斜体字体。
  • <tt> 等宽字体显示
     像电传打字机打出的内容一样,每个字母都是等宽的。
  • <sup> 上标显示
     它比其他字符高出半个字符的高度,并且比其他字符要小。
  • <sub> 下标显示
     它比其他字符低半个字符的高度,并且比其他字符要小。
  • <big> 较大显示
     比周围的文本显示大一个尺寸,直到最大尺寸7。
  • <small> 较小显示
     比周围的文本显示小一个尺寸,直到最小尺寸1。
  • <hr /> 水平线
     它是一个空元素。

 表格

  • <table>
     表格标签
  • <tr>
     行标签
  • <td>
     单元格标签
  • <th>
     标题单元格,一般以粗体显示
  • <caption>
     用于表示表格主题
  • <thead>
     用于创建独立表格标题
  • <tbody>
     用于指示表格主体
  • <tfoot>
     用于创建独立脚注
  • <colgroup>
     用于对列分组
  • <col>
     用于共享样式的列
  • 表格特性
    • colspan 占据多列
    • rowspan 占据多行

 表单

  • <form>
     用于创建表单
  • <input>
    • 单行文本输入
      • type:text
    • 密码输入
      • type:password
    • 按钮
      • type: submit 提交数据
      • type: reset 重置初始值
      • type: button 用于触发客户端脚本
    • 图片
      • type:image
    • 复选框
      • type:checkbox
    • 单选按钮
      • type:radio
    • 文件选择
      • type:file
    • 隐藏域
      • type:hidden
  • <textarea>
     用于多行文本输入
  • <button>
     按钮
  • <select>
     下拉列表框
  • <option>
     下拉框选项
  • <optgroup>
     选项分组
  • <label>
     文字标签
  • <fieldset>
     表单周围创建边框
  • <legend>
     为表单边框创建主题
  • 数据发送方式
    • get
     表单数据附加在url后面
    • post
     表单数据隐藏在HTTP头里

 编辑文本元素

  • <ins>
     通常文本添加下划线显示。
  • <del>
     用于删除一些文本,通常添加删除线显示。
 

 国际化特性

  • dir
     用于指定文本在浏览器中显示的方向,从左到右还是从右到左。
含义
ltr 从左向右(默认值)
rtl 从右向左
 
  • lang
     指示文档中使用的主要语言。,有助于搜索引擎。
    • 语言
      • ar:阿拉伯语
      • en:英语
      • en-us:美国英语
      • zh:中文
  • xml:lang
     在XHTML中该特性是lang的替代特性。
posted @ 2013-08-05 22:59  M守护神  阅读(...)  评论(... 编辑 收藏