1_html5基础知识

【1】统一资源定位器(Uniform Resoure Locator, URL是互联网上标准资源(文件)的地址,如“http://jwc.gcu.edu.cn/uploadfile/20161011/1476171253139453.xls”。URL包含协议、服务器名称(或IP地址)、路径和文件名。在上面的例子中,“http”是协议,“jwc.gcu.edu.cn”是服务器名称,“uploadfile/20161011/”是资源在服务器上的路径,“1476171253139453.xls”是资源的文件名。

 

 【2】一个网页的基本结构如图所示(注:网页代码不区分大小写,如与等效)。

 1_html5基础知识_第1张图片

 【3文档类型声明,用DOCTYPE声明文档类型,以便验证文档是否符合文档类型定义(DTD),同时指定了浏览器关于页面使用哪个HTML版本进行编写的指令,如HTML 5中新添加的标签在HTML 4.0类型的网页中是不合法的。HTML 4.0支持的三种DOCTYPE声明分别是严格型(strict)、过渡型(transitional)和框架型(frameset)。

严格型的DTD声明:

过渡型的DTD声明:

框架型的DTD声明:

HTML5只支持一种DOCTYPE声明:

 

【4】HTML注释

注释标签用于在HTML中插入注释,注释对于HTML纠错大有帮助,可以一次注释一行HTML代码,为了兼容IE浏览器,可以使用条件注释(条件注释只能在IE下使用,因此我们可以通过条件注释来为IE添加特别的指令)。条件注释的基本格式为:

这里是正常的html代码

 

【5】HTML基础

1)HTML头部:.

2)HTML标题:.

3)HTML元信息:

   设置页面关键字

语法:

说明:name为属性名称,设置为keywords,即是设置网页的关键字属性,在content中定义具体的关键字,关键词可以不只一个。

 设置页面说明

语法:

说明:name为属性名称,设置为description,即是将元信息属性设置为页面说明,在content中定义具体的描述语言。

定义编辑工具

语法:

说明:name为属性名称,设置为generator,即是设置编辑工具,在content中定义具体的编辑工具名称。

设置作者信息

语法:

说明:name为属性名称,设置为author,即是设置作者信息,在content中定义具体的信息。

设置网页文字及语言

语法:

说明:http-equiv用于传送HTTP通信协议的标头,在content中才是具体的属性值,charset用于设置字符集的类型,html5设置为charset="utf-8"

设置网页的定时跳转

语法:

说明: refresh表示网页的刷新,在content中设置刷新的时间和刷新后的链接地址,时间和链接地址之间用分号相隔。默认情况下,跳转时间以秒为单位。

4)HTML主体:

①网页背景色:"背景颜色">

②背景图片:  "图片地址">

③文字颜色:"背景颜色">

④链接文字属性:"颜色" alink="颜色" vlink="颜色">link访问前颜色,alink访问时颜色,vlink访问后颜色

⑤边距margin:"上边距值" leftmargin="左边距值">在默认情况下,边距的值以像素为单位。

5)HTML标题:

.

.

.

.

.
.

   (n=1..6)  align="对齐方式">,对齐方式:left、center、right

6)HTML文本标记:"字体"size="字号"color="颜色">…

  字体:浏览器能找到该字体则显示;字号:绝对字号(1~7),相对字号(-4~+4)相对于3进行缩放,颜色:略

7)文本格式化标记

   粗体  标记:加粗文字加粗文字

斜体  标记:斜体文字斜体文字斜体文字

上标  标记:上标内容

下标  标记:下标内容

大字号标记:大字号内容

小字号标记:小字号内容

下划线标记:划线内容

8)HTML段落:

.

   换行标记:

不换行标记:

水平线:


"对齐方式"width="宽度"size="高度"color="颜色"noshade>

       说明:noshade加入该值水平线去掉阴影,无属性值

9)HTML常用转义字符串

特殊符号

符号代码

"

"

&

&

<

>

×

×

空格

 

§

§

©

©

®

®

【6】HTML图片处理

1)图片格式

BMP格式:Windows标准位图格式,未经过压缩,文件比较大,用于网页显示会增加用户的下载时间,不建议大量使用。

GIF格式:数据是经过可变长压缩的,支持2~256种色彩的图像,并且支持背景透明和动画,在Web开发中应用很广。但因为GIF格式只支持256种色彩,故不适合保存照片。

JPEG格式:有损压缩格式,压缩比较高,支持24bit色彩,适合保存照片。

PNG格式:比较新的图像格式,能够提供长度比GIF格式小30%的无损压缩图片,也支持背景透明,并且支持Alpha通道调整图像的透明度。因为PNG格式推出时间不长,不是所有的浏览器都能很好地支持PNG格式,如IE6浏览器不支持背景透明的PNG图片。

2)图片元素

①源文件:"图片地址">可绝对地址、相对地址、文件、http://网络图片

②提示文字:"图片地址"alt="提示文字">

③宽高:"图片地址"width="宽度 "height="高度">单位:像素

④边框:"图片地址"border="宽度" >单位:像素,值越大边框越宽

⑤边距:"图片地址"vspace="垂直"hspace="水平">单位:像素

⑥排列:"图片地址"align="对齐方式" >,取值:bottom、top、middle、left、center、right

3)图片超链接

①超链接:"超链接地址"> "图片地址">

②热区链接:"图片地址" usemap="#映射图片名称"/>然后定义热区图片和链接属性

            "映射图片名称">

            "热区形状"coords="热区坐标"href="链接地址">

           

【7】列表

1)有序列表

    "序号类型"start="初值">

  1. 有序列表
  2. 有序列表

说明:type:"1":数字,"a":小写字母,"A":大写字母,"i"小写罗马数字,"I":大写罗马数字

      start:0..,a..z,A..Z,ⅰ..,Ⅰ..                                               [ 3  | PAGE ]

2)无序列表

    "符号类型" >

  • 无序列表
  • 无序列表

说明:type:"Disc":●[默认值],"circle":○,"square":□                                            

3)目录列表

  • 列表项
  • 列表项
  • 4)定义列表

    定义条件

    定义描述

    3)菜单列表

  • 列表项
  • 列表项
  • 【8】表格

    1)创建表格:table[表格标记]、tr[行标记]、td[单元格标记]

    表格标题<\caption>

    表头<\th>

    第一行第一列 第一行第二列
    第二行第一列 第二行第二列

    2)表格属性

    ①基本:

    "宽度"height="高度"align="对齐">,对齐:left、center、right

    ②边框:

    "宽度"bordercolor="颜色"cellspacing="内框宽度"cellpadding="文字与边框距离">,border建议不大于5个像素。

    ③表格背景:

    "背景颜色"background="背景图片">

    ④表格行属性:

    "行高"align="行对齐"bordercolor="边框颜色"bgcolor="背景颜色"background="背景图片"valign="垂直对齐">,align=left、center、right;valign=top、middle、bottom。

    ⑤单元格属性:

    属性有:bgcolor、align、valign

    ⑦表体标记: 属性有:bgcolor、align、valign

    ⑧表尾标记: 属性有:bgcolor、align、valign

    【9】超链接

    1)内部链接:"链接目标"target="目标窗口打开方式">  

              -self在当前页面中打开链接

              -blank在一个全新的空白窗口中打开链接

              -top在顶层框架中打开链接,也可理解为在根框架中打开链接

              -parent在当前框架的上一层打开链接

    2)锚点链接:

    ①建立锚点:"锚点名称">…

    ②链接同一页面锚点:"#锚点名称">…

    ③链接其他页面锚点:"链接文件地址#锚点名称">…

    ④链接外部网站:"http://...... ">…

    ⑤链接E-mail:"mailto:邮件地址">…

    ⑥链接FTP:"ftp://ftp地址">…

    ⑦链接Telnet:"telnet://地址">…

    ⑧下载文件:"文件地址">…

    【10】添加多媒体

    1)滚动标记:滚动文字

    ①滚动方向:"方向">滚动文字方向:up、down、left、right

    ②滚动方式:"方式">滚动文字

    scroll循环滚动[默认]、slide只滚动一次就停止、alternate来回交替滚动

    ③滚动速度:"速度">滚动文字,速度单位:像素

    ④滚动间隔:"间隔">滚动文字,间隔单位:ms

    ⑤滚动循环:"次数">滚动文字

    ⑥滚动范围:"背景宽度"height="背景高度">滚动文字

    ⑦滚动背景颜色:"背景颜色">滚动文字

    ⑧滚动空白空间:"水平范围"vspace="垂直范围">滚动文字

    2)插入多媒体文件:"多媒体文件地址"width="宽度"height="高度">滚动文字

    3)插入背景音乐:"背景音乐地址"loop="次数">

    4)插入Java Appt:

    【11】使用框架结构

    1)框架集:

    ①水平分割:"框架窗口高度1,框架窗口高度2,…">

     说明:rows中可以取多个值,由像素值或者百分比组成。

    ②垂直分割:"框架窗口宽度1,框架窗口高度2,…">

              说明:cols中可以取多个值,由像素值或者百分比组成。                           [ 5  | PAGE ]

     

    ③嵌套分割窗口:"框架窗口高度1,框架窗口高度2,…">

    "框架窗口宽度1,框架窗口高度2,…">

    ④框架边框:"是否显示">0/no:边框隐藏,1/yes:边框显示

    ⑤边框宽度:"边框宽度">单位:像素

    ⑥边框颜色:"边框颜色">

    2)窗口:

    ①页面源文件:"页面源文件地址">

    ②页面名称:"页面源文件地址"name="页面名称">

    ③禁止调整尺寸:"页面源文件地址"name="页面名称"noresize>,noresize:加入便生效

    ④水平边距:"页面源文件地址"name="页面名称"marginwidth="水平边距">

    ⑤垂直边距:"页面源文件地址"name="页面名称"marginheight="垂直边距">

    ⑥框架滚动:< frame src="页面源文件地址"scrolling="显示滚动条">0/no:隐藏,1/yes:显示

    ⑦不支持框架标记:替换显示内容

    3)浮动框架:

    ②框架宽高:

    ③框架对齐:,left、right、middle、bottom

    ④框架滚动:

             auto默认值,整个框架在浏览器页面中左对齐

    yes总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条的位置预留

    no在任何情况下都不显示滚动条

    4)框架链接:

    5)浮动框架链接:

    【12】表单

    1)表单标记:

    ①表单提交:
    "表单处理程序">

    ②表单名称:
    "表单名称">

    ③表单传送方法:
    "传送方法">,传送方法:get、post

    ④表单编码方式:
    "编码方式">

    application/x-www-form-urlencoded:默认编码形式

    multipart/form-data:MIME编码,上传文件的表单必须选择该项

    ⑤目标显示方式:
    "目标窗口打开方式">

    _blank:将链接文件载入一个未命名的新浏览器窗口中

    _parent:将链接文件载入含有该链接框架的父框架集或父窗口中

    _self:将链接文件载入该链接所在的同一框架或窗口中

    _top:在整个浏览器窗口中载入所链接的文件,因而会删除所有框架

    2)插入表单对象

    ①文字字段text:"控件名称"type="text"value="文字字段默认取值"size="控件长度

    "maxlength="最长字符数"/>

        type用来指定插入那种表单元素,type="text"即为文字字段                           [ 6  | PAGE ]

    name文字字段名称,用于区别页面中的其他控件,名称由英文、数字、下划线组成,区分大小写

    value用来定义文本框的默认值

    size确定文本框在页面中显示的长度,以字符为单位

       maxlength设置文本框中最多可以输入的字符数

    ②密码域password:"控件名称"type="password"value="文字字段默认取值"size="控件

    的长度"maxlength="最长字符数"/>

    type用来指定插入那种表单元素,type="password "即为密码域

    value用来定义密码域的默认值,以"*"显示

    ③单选按钮:"单选按钮名称"type="radio"value="单选按钮的取值"checked/>

    ④复选框:"复选框名称"type="checkbox"value="复选框取值"checked/>

    ⑤普通按钮:"按钮名称"type="submit"value="按钮取值"onclick="处理程序"/>

    ⑥提交按钮:"按钮名称"type="submit"value="按钮取值"/>

    ⑦重置按钮:"按钮名称"type="reset"value="按钮取值"/>

    ⑧图像域:"图像域名称"type="image"src="图像路径"/>

    ⑨隐藏域:"隐藏域名称"type="hidden "value="隐藏域取值"/>

    ⑩文件域:"文件域名称"type="file" size="控件的长度"maxlength="最长字符数"/>

    3)菜单和列表

    ①下拉菜单

      <select name="下拉菜单名称">

    <option value="选项值"selected="selected">选项显示内容

    ……

    <option value="选项值">

     

    ②列表项

      <select name="列表项名称" size="显示的列表项数"multiple="multiple">

    <option value="选项值"selected="selected">选项显示内容

    ……

    <option value="选项值">

     

    4)文本域标记:="文本域名称"cols="列数" rows="行数">…

    5)id标记:"元素的标识名">

     

    你可能感兴趣的:(1_html5基础知识)

    "宽度"height="高度"align="水平"valign="垂直"bgcolor="背景颜色"bordercolor="边框颜色"background="背景图片"colspan="水平跨度列数"rowspan="垂直跨度行数"bordercolorlight="亮边框颜色" bordercolordark="暗边框颜色" >,align=left、center、right;valign=top、middle、bottom。

    ⑥表首标记: