HTML网页结构简述

通过HTML即可编写页面元素

Posted by catface on January 2, 2015

HTML全称

HyperText Mark-up Language:超文本标记语言.
本篇基于HTML4,后续会推出HTML5的说明.

HTML文档由四部分组成

  • 文档声明: <!DOCTYPE HTML>
  • html标签对: <html></html>
  • head标签对: <head></head>
  • body标签对: <body></body>

HTML编写规范

  • html程序以<html>开头,同时以</html>结束.
  • <html>中包含两个部分:
    • <head><title>标题信息</title>设置html相关的信息</head>
    • <body>页面上显示的内容</body>
  • html的标签不区分大小写.
  • html的标签有开始标签,也要有结束标签:<title></title>.
  • 如果想对html中的数据进行样式变化,使用标签封装数据,通过修改标签的属性和属性值实现标签内数据样式的变化[一个标签相当于容器,修改容器的属性值可以实现容器内数据样式的变化]—<font color=red>html的操作思想.
  • 个别标签没有结束标签,在标签内结束:<br/> <hr/>.

HTML常用标签

  1. 文字标签:<font></font>

    • color:字体颜色
      • 英文单词:red black green orange white yellow gray.
      • 十六进制:#fff RGB 使用工具.
    • size:字体大小
      • 使用1-7表示大小范围(超过7按7显示).
  2. 注释标签

    • java有三种:单行//...、多行/*...*/、文档/**...*/
    • html、xml一种<!-- ... -->
    • css一种:多行/% ... %/
    • js两种:单行、多行
  3. 水平线标签:<hr/>

    • color:颜色
    • size:粗细(1-7表范围)
  4. 特殊字符:

    • <:&lt;
    • >:&gt;
    • &:&amp;
    • 空格:&nbsp;
  5. 标题标签:<h1><h1/>...<h6><h6/> <caption></caption>

    • 自动换行:从1-6字体大小递减
  6. 列表标签

    • 层级列表

      1
      2
      3
      4
      5
      
        <dl--列表范围>
            <dt--上层内容>
                <dd--下层内容><dd/>
            <dt/>
        <dl/>
      
    • 有序列表

      1
      2
      3
      
        <ol type="1/a/i"--排序显示方式>
            <li><li/>
        <ol/>
      
    • 无序列表

      1
      2
      3
      
        <ul type="circle/square/disc"--排序显示方式>
            <li><li/>
        <ul/>
      
  7. 图像标签:<img src="img src">

    • wigth:图片高度
    • height:图片宽度
    • alt:图片存在,鼠标悬停显示文字;图片不存在,图片位置上显示文字
  8. 两种路径

    • 绝对路径:图片的完全路径
    • 相对路径
      • 如果图片和html文件在一个目录下,可以直接写picture.jpg
      • 如果图片在html文件所在目录的下层目录,aa/picture.jpg
      • 如果图片在html文件所在目录的上层目录,../picture.jpg
      • 如果图片在html文件所在目录的上层目录的上层目录,../../picture.jpg
  9. 超链接标签

    • funcA:链接资源

      1
      
        <a href="" target="_self/_blank/_parent/_top"--打开方式><a/>
      
    • funcB:定位资源

      • 定义位置:<a name="locationName"><a/>
      • 回到位置:<a href="#locationName"><a/>
  10. 表格标签

    1
    2
    3
    4
    5
    
    <table>
        <tr/th(居中加粗)-- align="left/center/right"--位置>
            <td-- align="left/center/right"></td>
        </tr/th>
    </table>
    
    • border:表格线(1-7)
    • bordercolor
    • borderspacing:单元格间距
    • borderpadding:数据与单元格间距
    • width:表格宽度
    • height:表格高度

      合并单元格思想:首先确定行数及每行内单元格数
      – rowspan:跨行
      – colspan:跨列

  11. 其他标签:b u i p(段落) s pre sub(下标) sup(上标) div span(行内元素)

  12. 头标签

    • title:定义文档的标题
    • base:定义默认超链接地址<base href="" target="_blank"></base>
    • meta:定义HTML文档中的元数据<meta name="keywords" content="catface, wyh">
    • link:引入外部资源文件(如css文件)
    • style:定义HTML文档的样式
    • script:加载客户端的脚本文件
  13. 框架标签:不能有body

    • frameset:页面划分方式
      • rows:上下划分
      • cols:左右划分
    • frame:具体封装的页面

表单标签

要求一:每个输入项必须有name属性
要求二:单选框、复选框、下拉框必须有value属性

  • <form>表单范围</form>
    • action:设置提交到哪个页面
    • enctype:当需上传文件,属性值改为:multipart/form-data
    • method:设置表单提交方式:get(默认)、post(提交的数据放到请求体中)

      get请求 post请求
      地址栏会携带数据 地址栏不携带数据
      安全性很低 安全性较高
      请求数据的大小有限制 请求数据的大小无限制
  • 普通输入项:<input type="text"/>
  • 密码输入项:<input type="password"/>
  • 单选输入项:<input type="radio" name=""--必须相同 checked--默认选中/>
  • 复选输入项:<input type="checkbox"/ name=""--必须相同>
  • 文件上传项:<input type="file"/>
  • 提交按钮:<input type="submit"/>
  • 提交操作使用图片:<input type="image" src="img src"/>
  • 重置按钮:<input type="reset" value=""/>
  • 隐藏项:<input type="hidden" name="hidden" value=""/>
  • 文本域:<textarea rows=""--行数 cols=""--列数></textarea>
  • 下拉选择框:不使用input便签,使用select标签

    1
    2
    3
    
      <select>
          <option></option>
      </select>
    

HTML标记概览

标记 类型 译名或意义 作用 备注
文件标记        
<html> 文件声明 让浏览器知道这是 HTML 文件  
<head> 开头 提供文件整体资讯  
<title> 标题 定义文件标题,将显示于浏览顶端  
<body> 本文 设计文件格式及内文所在  
排版标记        
<!--注解--> 说明标记 为文件加上说明,但不被显示  
<p> 段落标记 为字、画、表格等之间留一空白行  
<br> 换行标记 令字、画、表格等显示于下一行  
<hr> 水平线 插入一条水平线  
<center> 居中 令字、画、表格等显示于中间 反对
<pre> 预设格式 令文件按照原始码的排列方式显示  
<div> 区隔标记 设定字、画、表格等的摆放位置  
<nobr> 不折行 令文字不因太长而绕行  
<wbr> 建议折行 预设折行部位  
字体标记        
<strong> 加重语气 产生字体加粗 Bold 的效果  
<b> 粗体标记 产生字体加粗的效果  
<em> 强调标记 字体出现斜体效果  
<i> 斜体标记 字体出现斜体效果  
<tt> 打字字体 Courier字体,字母宽度相同  
<u> 加上底线 加上底线 反对
<h1> 一级标题标记 变粗变大加宽,程度与级数反比  
<h2> 二级标题标记 将字体变粗变大加宽  
<h3> 三级标题标记 将字体变粗变大加宽  
<h4> 四级标题标记 将字体变粗变大加宽  
<h5> 五级标题标记 将字体变粗变大加宽  
<h6> 六级标题标记 将字体变粗变大加宽  
<font> 字形标记 设定字形、大小、颜色 反对
<basefont> 基准字形标记 设定所有字形、大小、颜色 反对
<big> 字体加大 令字体稍为加大  
<small> 字体缩细 令字体稍为缩细  
<strike> 画线删除 为字体加一删除线 反对
<code> 程式码 字体稍为加宽如<tt>  
<kbd> 键盘字 字体稍为加宽,单一空白  
<samp> 范例 字体稍为加宽如<tt>  
<var> 变数 斜体效果  
<cite> 传记引述 斜体效果  
<blockquote> 引述文字区块 缩排字体  
<dfn> 述语定义 斜体效果  
<address> 地址标记 斜体效果  
<sub> 下标字 指数  
<sup> 下标字 下标字  
清单标记        
<ol> 顺序清单 清单项目将以数字、字母顺序排列  
<ul> 无序清单 清单项目将以圆点排列  
<li> 清单项目 每一标记标示一项清单项目  
<menu> 选单清单 清单项目将以圆点排列,如<ul> 反对
<dir> 目录清单 清单项目将以圆点排列,如<ul> 反对
<dl> 定义清单 清单分两层出现  
<dt> 定义条目 标示该项定义的标题  
<dd> 定义内容 标示定义内容  
表格标记        
<table> 表格标记 设定该表格的各项参数  
<caption> 表格标题 做成一打通列以填入表格标题  
<tr> 表格列 设定该表格的列  
<td> 表格栏 设定该表格的栏  
<th> 表格标头 相等于<TD>,但其内之字体会变粗  
表单标记        
<form> 表单标记 决定单一表单的运作模式  
<textarea> 文字区块 提供文字方盒以输入较大量文字  
<input> 输入标记 决定输入形式  
<select> 选择标记 建立 pop-up 卷动清单  
<option> 选项 每一标记标示一个选项  
图形标记        
<img> 图形标记 用以插入图形及设定图形属性  
连结标记        
<a> 连结标记 加入连结  
<base> 基准标记 可将相对 URL 转绝对及指定连结目标  
框架标记        
<frameset> 框架设定 设定框架  
<frame> 框窗设定 设定框窗  
<iframe> 页内框架 于网页中间插入框架 IE
<noframes> 不支援框架 设定当浏览器不支援框架时的提示  
影像地图        
<map> 影像地图名称 设定影像地图名称  
<area> 连结区域 设定各连结区域  
多媒体        
<bgsound> 背景声音 于背景播放声音或音乐 IE
<embed> 多媒体 加入声音、音乐或影像  
其他标记        
<marquee> 走动文字 令文字左右走动 IE
<blink> 闪烁文字 闪烁文字 NC
<isindex> 页内寻找器 可输入关键字寻找于该一页 反对
<meta> 开头定义 让浏览器知道这是 HTML 文件  
<link> 关系定义 定义该文件与其他 URL 的关系  
StyleSheet        
<style> 样式表 控制网页版面  
<span> 自订标记 独立使用或与样式表同用  

  • 表示该标记属围堵标记,即需要关闭标记如 </标记>.
  • 表示该标记属空标记,即不需要关闭标记.
  • IE 表示该标记只适用于 Internet Explorer.
  • NC 表示该标记只适用于 Netscape Communicator.
  • 反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择.
  • 弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记.
  • 表示该标记是 HTML 4.0 中新增的.