关于 charset 的几种编码方式

经常遇到charset=gb2312、charset=iso-8859-1、charset=utf-8这几种编码方式,它们有什么不同,看下面的图

编码方式含义
charset=iso-8859-1西欧的编码,英文编码
charset=gb2312中文编码
charset=utf-8世界通用语言编码
charset=big5繁体中文编码
charset=euc-kr韩文编码

除此之外,还有很多其他的编码方式,其中charset=utf-8可以用到中文、韩文、日文等世界上所有语言编码上

各个国家和地区制定的不同ANSI编码标准中,都只规定了自己语言需要的“字符”,比如汉字标准(GB2312)中没有规定韩文字符怎么存储。制定的ANSI包含两层含义:

字符集:使用哪些字符,也就是哪些汉字、字母和符号会被收入标准中。

编码:规定每个字符如何存储,即用几个字节以及哪些字节来存储

在制定ANSI标准的时候,字符集编码一般都是同时制定的。

“unicode”字符集包含了各种语言使用到的“字符”。由此产生了很多“unicode”字符集编码的标准,主要分为下面三类。

  • ISO-8859-1

    最简单的编码规则,每一个字节直接作为一个unicode字符。比如,[0xD6, 0xD0] 这两个字节,通过 iso-8859-1 转化为字符串时,将直接得到 [0x00D6, 0x00D0] 两个 unicode 字符,即 “ÖД
    反之,将 unicode 字符串通过 iso-8859-1 转化为字节串时,只能正常转化 0~255 范围的字符。

  • GB2312、BIG5、Shift_JIS、ISO-8859-2

    unicode 字符串通过 ANSI 编码转化为“字节串”时,根据各自编码的规定,一个 unicode 字符可能转化成一个字节或多个字节。
    反之,将unicode字节串转化成字符串时,也可能多个字节转化成一个字符。比如,[0xD6, 0xD0] 这两个字节,通过 GB2312 转化为字符串时,将得到 [0x4E2D] 一个字符,即 ‘中’ 字。

    ANSI 编码”的特点:

    1. 这些“ANSI 编码标准”都只能处理各自语言范围之内的 unicode 字符。
    2. unicode 字符”与“转换出来的字节”之间的关系是人为规定的。
  • UTF-8,UTF-16,UnicodeBig

    与“ANSI 编码”类似的,把字符串通过 unicode 编码转化成“字节串”时,一个 unicode 字符可能转化成一个字节或多个字节。

    与“ANSI 编码”不同的是:

    1. 这些“unicode 编码”能够处理所有的 unicode 字符。
    2. unicode 字符”与“转换出来的字节”之间是可以通过计算得到的。

文章来源

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超级有影响力的Java面试题大全文档 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节。抽象包括两个方面,一是过程抽象,二是数据抽象。 2.继承:  继承是一种联结类的层次模型,并且允许和鼓励类的重用,它提供了一种明确表述共性的方法。对象的一个新类可以从现有的类中派生,这个过程称为类继承。新类继承了原始类的特性,新类称为原始类的派生类(子类),而原始类称为新类的基类(父类)。派生类可以从它的基类那里继承方法和实例变量,并且类可以修改或增加新的方法使之更适合特殊的需要。 3.封装:  封装是把过程和数据包围起来,对数据的访问只能通过已定义的界面。面向对象计算始于这个基本概念,即现实世界可以被描绘成一系列完全自治、封装的对象,这些对象通过一个受保护的接口访问其他对象。 4. 多态性:  多态性是指允许不同类的对象对同一消息作出响应。多态性包括参数化多态性和包含多态性。多态性语言具有灵活、抽象、行为共享、代码共享的优势,很好的解决了应用程序函数同名问题。 5、String是最基本的数据类型吗?  基本数据类型包括byte、int、char、long、float、double、boolean和short。  java.lang.String类是final类型的,因此不可以继承这个类、不能修改这个类。为了提高效率节省空间,我们应该用StringBuffer类 6、int 和 Integer 有什么区别  Java 提供两种不同的类型:引用类型和原始类型(或内置类型)。Int是java的原始数据类型,Integer是java为int提供的封装类。Java为每个原始类型提供了封装类。 原始类型 封装类 boolean Boolean char Character byte Byte short Short int Integer long Long float Float double Double  引用类型和原始类型的行为完全不同,并且它们具有不同的语义。引用类型和原始类型具有不同的特征和用法,它们包括:大小和速度问题,这种类型以哪种类型的数据结构存储,当引用类型和原始类型用作某个类的实例数据时所指定的缺省值。对象引用实例变量的缺省值为 null,而原始类型实例变量的缺省值与它们的类型有关。 7、String 和StringBuffer的区别  JAVA平台提供了两个类:String和StringBuffer,它们可以储存和操作字符串,即包含多个字符的字符数据。这个String类提供了数值不可改变的字符串。而这个StringBuffer类提供的字符串进行修改。当你知道字符数据要改变的时候你就可以使用StringBuffer。典型地,你可以使用 StringBuffers来动态构造字符数据。 8、运行时异常与一般异常有何异同?  异常表示程序运行过程中可能出现的非正常状态,运行时异常表示虚拟机的通常操作中可能遇到的异常,是一种常见运行错误。java编译器要求方法必须声明抛出可能发生的非运行时异常,但是并不要求必须声明抛出未被捕获的运行时异常。 9、说出Servlet的生命周期,并说出Servlet和CGI的区别。  Servlet被服务器实例化后,容器运行其init方法,请求到达时运行其service方法,service方法自动派遣运行与请求对应的doXXX方法(doGet,doPost)等,当服务器决定将实例销毁的时候调用其destroy方法。 与cgi的区别在于servlet处于服务器进程中,它通过多线程方式运行其service方法,一个实例可以服务于多个请求,并且其实例一般不会销毁,而CGI对每个请求都产生新的进程,服务完成后就销毁,所以效率上低于servlet。 10、说出ArrayList,Vector, LinkedList的存储性能和特性  ArrayList 和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插入数据慢,Vector由于使用了synchronized方法(线程安全),通常性能上较ArrayList差,而LinkedList使用双向链表实现存储,按序号索引数据需要进行前向或后向遍历,但是插入数据时只需要记录本项的前后项即可,所以插入速度较快。 11、EJB是基于哪些技术实现的?并说出SessionBean和EntityBean的区别,StatefulBean和StatelessBean的区别。 EJB包括Ses
define(‘APPTYPEID’, 2);//应用类型 define(‘CURSCRIPT’, ‘forum’);//当前脚本 require ‘./source/class/class_core.php’;//加载核心 require ‘./source/function/function_forum.php’; $discuz = & discuz_core::instance();//实例化 使用此种方法是为了兼容PHP4 与PHP5 复制代码 这里我们进到./source/class/class_core.php 看看这个核心类 首先来分别看看这些属性 var $db = null;//存储数据库对象 var $mem = null;//存储内存缓存对象 var $session = null;////存储session var $config = array();//存储配置数组 var $var = array();//系统常用变量 var $cachelist = array();//存储缓存数组 复制代码 我们先根据属性名来标注他们要储存的东西,这些东西肯定非常有用供以后的代码去掉用的 接着往下看看构造函数 function discuz_core() {//构造方法 $this->_init_env();//初始化环境变量 $this->_init_config();//初始化配置信息 $this->_init_input();//初始化用户输入 $this->_init_output();//初始化用户输出 } 复制代码 当然到目前为止我们都还只是猜测,我们来看看具体的代码 本帖最后由 蜗牛 于 2010-6-15 17:38 编辑 function _init_env() { //设置错误报告等级 以及关闭自动转义 error_reporting(E_ERROR); if(phpversion() < ‘5.3.0′) { set_magic_quotes_runtime(0); } //设置常用常量,最主要是判断是否支持某些函数 define(‘DISCUZ_ROOT’, substr(dirname(__FILE__), 0, -12));//程序根目录 define(‘MAGIC_QUOTES_GPC’, function_exists(‘get_magic_quotes_gpc’) && get_magic_quotes_gpc());//获取是否开启了自动转义 define(‘ICONV_ENABLE’, function_exists(‘iconv’));//iconv函数是否存在 define(‘MB_ENABLE’, function_exists(‘mb_convert_encoding’));//mb_convert_encoding函数是否存在 define(‘EXT_OBGZIP’, function_exists(‘ob_gzhandler’));//ob_gzhandler函数是否存在 define(‘TIMESTAMP’, time());//得到程序执行前的时间戳 $this->timezone_set();//设置时区,但是为何在这个方法里 没有传入8这个参数以设置我们的东八区? //加载核心函数 if(!defined(‘DISCUZ_CORE_FUNCTION’) && !@include(DISCUZ_ROOT.’./source/function/function_core.php’)) { $this->error(‘function_core.php is missing’); } //得到是否是机器人 define(‘IS_ROBOT’, checkrobot()); /* 去除’GLOBALS’ => 1, ‘_GET’ => 1, ‘_POST’ => 1, ‘_REQUEST’ => 1, ‘_COOKIE’ => 1, ‘_SERVER’ => 1, ‘_ENV’ => 1, ‘_FILES’ => 1, 外的所有超级全局变量 */ foreach ($GLOBALS as $key => $value) { if (!isset($this->superglobal[$key])) { $GLOBALS[$key] = null; unset($GLOBALS[$key]); } } global $_G; $_G = array( ‘uid’ => 0,//用户ID ‘username’ => ”,//用户名 ‘adminid’ => 0,//管理员ID ‘groupid’ => 1,//用户组 ’sid’ => ”,//加密后的SID ‘formhash’ => ”,//跟提交表单有关的HASH数据 ‘timestamp’ => TIMESTAMP,//程序执行时的时间戳 ’starttime’ => dmicrotime(),//程序开始执行的时间 ‘clientip’ => $this->_get_client_ip(),//用户IP ‘referer’ => ”,//用来记录来路URL ‘charset’ => ”,//字符编码 ‘gzipcompress’ => ”, ‘authkey’ => ”,//跟加密有关的authkey ‘timenow’ => array(), ‘PHP_SELF’ => ”,//请求的URL ’siteurl’ => ”,//站点地址 ’siteroot’ => ”,//站点根目录 ‘config’ => array(),//配置信息 ’setting’ => array(),//设置信息 ‘member’ => array(),//用户有关信息 ‘group’ => array(),//用户组信息 ‘cookie’ => array(),//cookie信息 ’style’ => array(),//风格信息 ‘cache’ => array(),//缓存数组 ’session’ => array(),//session信息 ‘lang’ => array(),//语言包 ‘my_app’ => array(), ‘my_userapp’ => array(), ‘fid’ => 0,//论坛版块ID ‘tid’ => 0,//帖子ID ‘forum’ => array(), ‘rssauth’ => ”, ‘home’ => array(), ’space’ => array(), ‘block’ => array(), ‘article’ => array(), ‘action’ => array( ‘action’ => APPTYPEID, ‘fid’ => 0, ‘tid’ => 0, ) ); //得到所执行的脚本 比如index.php $_G['PHP_SELF'] = htmlspecialchars($_SERVER['SCRIPT_NAME'] ? $_SERVER['SCRIPT_NAME'] : $_SERVER['PHP_SELF']); //当前脚本 比如forum $_G['basescript'] = CURSCRIPT; //站点地址 $_G['siteurl'] = htmlspecialchars(‘http://’.$_SERVER['HTTP_HOST'].preg_replace(“/\/+(api)?\/*$/i”, ”, substr($_G['PHP_SELF'], 0, strrpos($_G['PHP_SELF'], ‘/’))).’/'); //站点目录 $_G['siteroot'] = substr($_G['PHP_SELF'], 0, -strlen(basename($_G['PHP_SELF']))); //将数据存在$var属性中 $this->var = & $_G; } 复制代码 我们从上面的代码可以看出_init_env()的作用是用来初始化程序的执行环境的,其中包含 1:得到一些环境信息,就是那段define 常量设置语句 2:得到一些常用常量: DISCUZ_ROOT 程序根目录 TIMESTAMP 程序执行时间戳 IS_ROBOT是否为机器人 3:最重要的是初始化一个全局数组(这里说并不是超级全局变量)$_G数组与 $this->var属性,其中$_G数组是供外部代码掉用的,而$this->var是类内部掉用的(这个只是猜测) 这个函数得到了一些重要信息 DISCUZ_ROOT 程序根目录 TIMESTAMP 程序执行时间戳 IS_ROBOT是否为机器人 $_G[‘timestamp’]程序执行时间 $_G[‘starttime’]程序开始执行时间 $_G[‘clientip’]访问者IP $_G['PHP_SELF']执行的脚本名称 例如index.php $_G['basescript'] 当前脚本例如forum 这个是在入口处定义的 $_G['siteurl']站点地址 $_G['siteroot'];程序根目录,这个跟DISCUZ_ROOT的区别是, DISCUZ_ROOT是绝对路径,$_G['siteroot'];是相对站点跟目录的 相对路径 本帖最后由 蜗牛 于 2010-6-15 18:01 编辑 function _init_config() { $_config = array();//初始化配置数组 @include DISCUZ_ROOT.’./config/config_global.php’;//加载配置文件 if(empty($_config)) {//配置文件不存在则提示出错 error(‘config_notfound’); } //得到加密用的密钥 $_config['security']['authkey'] = empty($_config['security']['authkey']) ? md5($_config['cookie']['cookiepre'].$_config['db'][1]['dbname']) : ($_config['security']['authkey']); //将配置信息存在config属性中 $this->config = & $_config; //是否开启debug模式 if(empty($this->config['debug']) || !file_exists(libfile(‘function/debug’))) { define(‘DISCUZ_DEBUG’, false); } elseif($this->config['debug'] === 1 || $this->config['debug'] === 2 || !empty($_REQUEST['debug']) && $_REQUEST['debug'] === $this->config['debug']) { define(‘DISCUZ_DEBUG’, true); if($this->config['debug'] == 2) { error_reporting(E_ALL); } } else { define(‘DISCUZ_DEBUG’, false); } $GLOBALS['_G']['config'] = & $this->config; $GLOBALS['_G']['authkey'] = md5($this->config['security']['authkey'].$_SERVER['HTTP_USER_AGENT']); //静态文件目录 define(‘STATICURL’, !empty($this->config['output']['staticurl']) ? $this->config['output']['staticurl'] : ’static/’); } 这个方法做了下面几件事: 1:设置加密密钥 2:是否开启debug模式 3:将配置文件/config/config_global.php中的数据存在$this->config 属性与$_G['config']中 得到有用的数据是 1:$_G['authkey'] 全局加密密钥 2:STATICURL 静态文件目录 同时我们知道如何开启DiscuzX的debug模式 1:在配置文件/config/config_global.php中设置$_config['debug']=1或者$_config['debug']=2 如果为2就直接开启debug模式否则让DISCUZ_DEBUG常量为true,还有中方法是通过POST或者GET方式传递一个debug参数进去,并且这个参数与$_config['debug']的值一样。 当然这些所有的前提是source\function\function_debug.php文件要存在,但是官方下的程序里面并没有这个文件,也许这个是官方自己用来测试的吧 function _init_input() {//输入信息初始化 //防止注入变量 if (isset($_GET['GLOBALS']) ||isset($_POST['GLOBALS']) || isset($_COOKIE['GLOBALS']) || isset($_FILES['GLOBALS'])) { error(‘request_tainting’); } //是否开启rewrite if(!empty($_GET['rewrite'])) { $query_string = ‘?mod=’; $param = explode(‘-’, $_GET['rewrite']); $query_string .= $_GET['mod'] = $param[0]; array_shift($param); $paramc = count($param); for($i = 0;$i < $paramc;$i+=2) { $_REQUEST[$param[$i]] = $_GET[$param[$i]] = $param[$i + 1]; $query_string .= ‘&’.$param[$i].’=’.$param[$i + 1]; } $_SERVER['QUERY_STRING'] = $query_string; unset($param, $paramc, $query_string); } //如果没有开启自动转义 则将GPCF自动转义 if(!MAGIC_QUOTES_GPC) { $_GET = daddslashes($_GET); $_POST = daddslashes($_POST); $_COOKIE = daddslashes($_COOKIE); $_FILES = daddslashes($_FILES); } /*将cookie中加上了前缀的数据 去掉前缀存在$this->var['cookie']数组中*/ $prelength = strlen($this->config['cookie']['cookiepre']); foreach($_COOKIE as $key => $val) { if(substr($key, 0, $prelength) == $this->config['cookie']['cookiepre']) { $this->var['cookie'][substr($key, $prelength)] = $val; } } //是否开启diy $_GET['diy'] = empty($_GET['diy']) ? ” : $_GET['diy']; //将所有POST,GET来的数据存在$this->var['gp_'.$k]中 foreach(array_merge($_POST, $_GET) as $k => $v) { $this->var['gp_'.$k] = $v; } //mod方法,DX根据不同的MOD来掉用不同的文件,例如forum.php中require DISCUZ_ROOT.’./source/module/forum/forum_’.$mod.’.php’; $this->var['mod'] = empty($this->var['gp_mod']) ? ” : htmlspecialchars($this->var['gp_mod']); //是否是AJAX掉用的 $this->var['inajax'] = empty($this->var['gp_inajax']) ? 0 : ($_SERVER['REQUEST_METHOD'] == ‘GET’ && $_SERVER['HTTP_X_REQUESTED_WITH'] == ‘XMLHttpRequest’ || $_SERVER['REQUEST_METHOD'] == ‘POST’ ? 1 : 0); //页码 $this->var['page'] = empty($this->var['gp_page']) ? 1 : max(1, intval($this->var['gp_page'])); //用户登录后的COOKIE信息 $this->var['sid'] = $this->var['cookie']['sid'] = isset($this->var['cookie']['sid']) ? htmlspecialchars($this->var['cookie']['sid']) : ”; } 复制代码 从上面代码可以看出这个方法做了下面几件事 1:实现GPC机制,对用户提交来的数据进行自动转义 2:防止变量注入 3:启用rewrite机制后的 网址分发 4:设置COOKIE 5:将所有GET以及POST来的数据存在$this->var['gp_'.$k]中 得到的有用数据为: 1:$this->var['cookie']中存有所有COOKIE信息 2:$_GET['diy'],是否启用DIY 3:$this->var['gp_'.$k] 存有所有用户POST GET来的数据 4:$this->var['mod'],掉用哪个模块 5:$this->var['inajax']是否是AJAX掉用该页面 6:$this->var['page']页码 7:$this->var['sid'] 用户的登录验证信息 function _init_output() { //防止用户提交恶意的URL地址?疑问 为何不放在_init_input里面 if($this->config['security']['urlxssdefend'] && !empty($_SERVER['REQUEST_URI'])) { $temp = urldecode($_SERVER['REQUEST_URI']); if(strpos($temp, ‘<’) !== false || strpos($temp, ‘”‘) !== false) { error(‘request_tainting’); } } //是否开启GZIP压缩,并且不是通过AJAX掉用的并且掉用的模型不是attachment(也就是说不是附件)并且压缩函数存在 if($this->config['output']['gzip'] && empty($this->var['gp_inajax']) && $this->var['gp_mod'] != ‘attachment’ && EXT_OBGZIP) { ob_start(‘ob_gzhandler’); setglobal(‘gzipcompress’, true); } else { ob_start(); setglobal(‘gzipcompress’, false); } //是否强制输出头部信息,这里最主要是强制按照一定编码输出 if($this->config['output']['forceheader']) { @header(‘Content-Type: text/html; charset=’.$this->config['output']['charset']); } //设置$_G['charset'];为配置文件中的字符编码 setglobal(‘charset’, $this->config['output']['charset']); //设置字符编码 define(‘CHARSET’, $this->config['output']['charset']); } 复制代码 这个方法我就不多说了,他最主要是开启GZIP压缩,以及防止用户提交而已的URL,但是为什么 if($this->config['security']['urlxssdefend'] && !empty($_SERVER['REQUEST_URI'])) { $temp = urldecode($_SERVER['REQUEST_URI']); if(strpos($temp, ‘<’) !== false || strpos($temp, ‘”‘) !== false) { error(‘request_tainting’); } } 复制代码 这段代码不放在_init_input里面呢? 好了,经过实例化class_core.php 核心类之后程序所做的动作就已经读完了,这里最重要的是得到了一些有用的数据以供后面使用,最最重要的就是 $_G数组与$this->var属性 下面来看看都有哪些内容 常量: DISCUZ_ROOT 程序根目录 TIMESTAMP 程序执行时间戳 IS_ROBOT是否为机器人 STATICURL 静态文件目录 DISCUZ_DEBUG 是否开启DEBUG模式 CHARSET字符编码 $_G数组 $_G[‘timestamp’]程序执行时间 $_G[‘starttime’]程序开始执行时间 $_G[‘clientip’]访问者IP $_G['PHP_SELF']执行的脚本名称 例如index.php $_G['basescript'] 当前脚本例如forum 这个是在入口处定义的 $_G['siteurl']站点地址 $_G['siteroot'];程序根目录,这个跟DISCUZ_ROOT的区别是, DISCUZ_ROOT是绝对路径,$_G['siteroot'];是相对站点跟目录的 相对路径 $_G['authkey']全局加密密钥 $_G['charset'] 输出的编码(在配置文件中定义) $_G['cookie']中存有cookie数组 $_G['gp_'.$k]中存有所有的POST以及GET来的数据 $_G['gp_'.$k] 存有所有用户POST GET来的数据 $_G['mod'],掉用哪个模块 $_G['inajax']是否是AJAX掉用该页面 $_G['page']页码 $_G['sid'] 用户的登录验证信息 $_G['config']=$this->config=配置文件/config/config_global.php中的数据 $_GET['diy'],是否启用DIY 这里注意了$_G=&this->var 看完这个实例化之后,就是最重要的 $discuz->init();了
HTML + JavaScript + Ajax + CSS 赵旭 [email protected] HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问服务器端的一种程序 :如 :桌面版QQ,... ... 2、B / S 结构 Browser / Server Browser :浏览器 特点:通过 浏览器 就能访问服务器端的一种程序 如 :网页版百度,网页版 QQ,网页版 京东,... ... 3、WEB 1、什么是WEB WEB,是基于Internet上的一种应用程序(网页应用程序) WEB页面,简称WEB页(网页),就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 :也是文本,但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : 普通字符 b 超文本 b : 加粗显示文本 标记 :超文本的表现形式 普通文本 a : a 超文本 a : 语言 :具备一定的语法规范 HTML 也具备自己的语法规范 WEB页面(HTML页面)就是由 HTML 语言来进行开发的 ,以 .html 或 .htm 进行结尾的文件 开发 & 运行网页的工具: 1、记事本 2、浏览器 2、HTML 的基础语法 1、标记语法 HTML中用于描述功能的符号称为"标记" 标记在使用时,用尖括号 "",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:内容 Demo : 1、创建 p 标记 --... 2、创建 div 标记 -- 3、创建 header 标记 -- <header></header> 2、非封闭类型的标记 也称为 "单标记" 语法: 或 Demo : 1、创建 br 标记 -- 2、创建 hr 标记 -- 3、创建 img 标记 -- 4、创建 input 标记 -- <input/> 2、标记(元素)的嵌套 在一对标记中,允许出现另外一对(一个)标记 注意:嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 <body> 这是一段测试文本 </body> 3、标记的属性 1、什么是属性 用来修饰标记的效果的内容,就是属性 2、语法 1、属性必须声明在开始标记中 2、属性与标记名称之间,用 空格 隔开 3、属性的值 与 属性之间 使用 "=" 连接 4、一个元素允许有多属性,多属性间,排名不分先后,中间用 空格 隔开即可 Demo : 1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div 四大标准属性: 1、id :定义元素在页面中独一无二的名称 2、title :鼠标悬停在元素上时,体现的文字 3、class :引用 类选择器时使用(CSS中) 4、style :定义 内联方式方式使用(CSS中) 4、注释 语法:<!-- --> 注意: 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C :Word Wide Web Consortium (万维网联盟) 1、HTML文档的组成 1、文档类型声明 告知浏览器当前的HTML文档用的是哪个版本 在网页的最顶端 2、由一对 html 根标记,来表示页面的开始与结束 Demo : 1、在 htdoc 中,创建一个网页 01-first.html 文件 创建一个 记事本,将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html 根标记 2、<html> 标记 包含两对子元素 1、<head></head> 包含的子元素(2对) 1、<title>网页的标题</title> 2、<meta charset="utf-8"/> -- 能正常显示中文 2、<body></body> 属性: 1、text ,取值是一个颜色值(red,green,blue...) 2、bgcolor ,取值也是一个颜色值 Demo : 在刚才的 Demo 基础上 1、在 <html>中 增加 <head> 和 <body> 2、为网页指定标题 - 我的第一个HTML文档 3、指定网页的字符编码格式为 utf-8 4、在 body 中 输出一句话 "我的第一HTML页面" 5、设置 body text为red,bgcolor为yellow 3、文本 1、特殊文本的实现 页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、  表示一个空格 2、< 表示 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面中 输出以下内容 The element. ©2017 By Tarena The <p> element.     © By Tarena 2、文本样式相关标记 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标 Demo : 这是一段包含 ,粗体,斜体,下划线,删除线,上标,下标的文本内容 将以上文本内,对应文字的特殊效果,用标记体现出来 3、标题元素 以 醒目 的方式表现出文本 语法: 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 属性: 1、align 文本的水平对齐方式 取值:left / center / right 4、段落元素 语法: 属性:align : left / center / right Demo : 1、在 02-text.html 中,增加以下内容 1、用 段落标记表示 :The first paragraph 2、用 段落标记表示 :The second paragraph ,文本表现为 右对齐 5、换行元素 6、分割线元素 作用:在页面中表现为一条直线 语法: 属性: 1、size 尺寸,以 px 为单位的数值 2、width 宽度,以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo : 02-text.html 中 增加一根水平线,size为5px,宽度为50%,居中对齐,颜色为红色(red) 7、预格式化 作用:保留源文档中的回车 和 空格 的作用 8、分区元素 1、块分区元素 语法: 作用:布局 2、行内分区元素 语法: 作用:设置同一行文字内的不同样式 9、行内元素 与 块级元素 按照元素们的表现形式来分类,分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:包裹文本,并处理文本的表现形式 2、块级元素 每个元素独占一行显示的,称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用:布局 注意: 1、p标记不能嵌套其它的块级元素 2、行内元素中 最好 不要嵌套块级元素 4、图像 和 链接 1、URL 目录结构 : 目录 ,保存文件的文件夹名称 多个文件夹之间的关系,就是目录结构 1、什么是 URL URL (Uniform Resource Locator),统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 中的表现形式 共三种表现形式: 1、绝对路径 特点:从文件所在的最高级目录处开始查找资源文件所经过的路径,就是绝对路径 使用场合:当想访问互联网上的资源时,只能用绝对路径 完整的绝对路径分四部分: 1、协议名 http 2、域名(主机名,IP地址) www.codeboy.com 3、目录路径 img/header 4、文件名 logo.png http://www.codeboy.com/img/header/logo.png img/header/logo.png 2、相对路径(重点) 场合:使用本机文件时使用 什么是相对路径: 从当前文件位置处开始查找资源文件所经过的路径,就是相对路径 1、同目录,直接用 2、子目录,先进入 3、父目录,先返回 3、根相对路径 路径形式是以 / 作为开始的。 / : 表示的是服务器的根路径 2、图像 1、图像格式 WEB中支持的图像格式 1、*.jpg 2、*.gif(动图) 3、*.png(透明) 2、图像的语法 标记: 属性: 1、src :指定要显示图像的 URL 2、width :图像的宽度 3、height :图像的高度 4、title :鼠标悬停时,要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法 标记:内容 属性: 1、href : 要链接的HTML页面URL 2、target : 目标,指定新网页的打开形式 取值: 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接,内容为 :学子商城,点击时,在自身标签页中 打开 http://www.codeboy.com 2、创建一个超链接,内容为 :学子商城的LOGO,点击时,在新标签页中打开 http://www.codeboy.com 2、链接的四种表现形式 1、点击操作时,完成资源下载的操作 链接的资源为 zip / rar 时则为下载操作 下载 2、电子邮件链接 联系我们 前提 : 必须在计算机中安装并配置好至少一个邮件客户端的信息 3、返回页面顶部的空连接 返回顶部 4、执行Javascript代码片段 执行JS 3、锚点 1、作用 锚点用于在网页中的某个位置处做个记号,允许从其他位置处跳转到记号位置处 2、使用方式 1、定义锚点 1、使用 a 标记的 name 属性允许定义锚点 xxxx 2、任何标记的 id 属性定义锚点 2、链接到锚点 链接到锚点 链接到锚点 5、表格 1、表格 1、表格的作用 按照一定的格式来显示数据的 表格是由 单元格(列),行 来组成的 2、表格的语法 1、标记 1、 : 表示一个表格 2、 : 表示表格中的一行 3、 : 表行中的一列(单元格) : 行/列 标题 (加粗,水平居中) 4、 : 表格的标题 该元素必须添加在 之下,所有的tr之上 2、常用属性 1、table 1、width 2、height 3、align 设置表格的对齐方式 , left / center / right 4、border 边框宽度,取值以 px 为单位的数值 5、bgcolor 6、cellspacing :单元格外边距(单元格与单元格 或 单元格与表格之间的距离) 7、cellpadding : 单元格内边距(单元格与内容之间的距离) 2、tr 1、align 控制当前行内容的水平对齐方式 2、valign 控制当前行内容的垂直对齐方式 top / middle / bottom 3、bgcolor 3、td / th 1、align 2、valign 3、width 4、height 5、colspan :跨列 6、rowspan :跨行 Demo : 在 刚才的表格基础上,增加以下内容 1、为表格增加边框 1px 2、为表格增加尺寸 400 * 400 3、为表格增加单元格内边距 5px 4、为第四行 增加属性 ,内容水平居中对齐 3、表格的复杂应用 1、行分组 允许将若干行划分到一个组中,以便实现统一管理 1、表头行分组 允许将第一行的内容单独分到表头行分组中 2、表尾行分组 允许将最后一行的内容单独分到表尾行分组中 3、表主体行分组 2、不规则表格创建 通过 td 的跨行 和 跨列来实现不规则的表格 1、跨列 从指定单元格位置处开始,横向向右,合并掉几个单元格(包含自己),被合并掉的单元格,要删除 2、跨行 从指定单元格位置处开始,纵向向下,合并掉几个单元格(包含自己),被合并掉的单元格,要删除 3、表格的嵌套 被嵌套的所有的内容,只能放在 td 中 2、列表 1、作用 按照一定的格式显示数据 2、列表的分类 & 语法 1、列表的组成 由列表类型 以及 列表项 来组成 2、分类 & 语法 1、有序列表 --> Order List 允许包含若干列表项: --> List Item 2、无序列表 --> Unorder List 允许包含若干列表项: 3、属性 1、ol 1、type 1 、按数字方式排列,默认值 a 、按小写英文方式排列 A 、按大写英文方式排列 i 、按小写罗马数字排列 I 、按大写罗马数字排列 2、start 指定标识从 几 开始显示 2、ul 1、type 1、disc,实心圆,默认值 2、circle,空心圆 3、square,实心矩形 4、none 3、列表的嵌套 被嵌套的内容只能放在 li 中 Demo : 1、声明一个列表在 html 中(有序),包含两个列表项,显示 两部小说的名字 2、在两个列表项中,再各嵌套一个无序列表,各写3-4个小说中的主角 3、定义列表 1、作用 以一种特殊的结构来排列数据 通常用语对一类事物/名词 的解释上面 2、语法 :声明一个定义列表 :声明要解释的事物名称 或 名词 :对上述名词或事物解释的内容 3、常用场合 图文混排 3、结构标记 1、结构标记的作用 搭建网页的结构(布局),用于替代 div,最大的优点是提升了标记的"语义性" 2、结构标记详解 1、<header></header> 作用:表示网页 或 某块内容的头部 2、 作用:表示网页中的 导航内容 3、 作用:表示网页主体内容中的某一部分 4、 作用:出现在文字描述性比较强的场合:一则新闻,论坛中的帖子,微博信息,博客的信息 5、 作用:表示网页中,或某部分内容的 边栏信息 6、 作用:表示网页中尾部的信息 4、表单(难点) 1、表单的作用 用于收集用户的信息并提交给服务器 表单主体是由两部分组成的 1、表单元素 收集信息,并提交给服务器 2、表单控件 用于与用户交互的一些元素:文本框,密码框 2、表单元素(难点) 标记:<form></form> 注意:只有放在 <form></form> 里面的表单控件的值,才能提交给服务器 属性: 1、action 提交给服务器处理程序的地址 (动作) 2、method 提交方式,以什么样的方式把数据交给服务器 1、get 特点: 1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上) 2、安全性很低 3、提交数据最大限制为 2KB 4、向服务器要数据时可以使用 2、post 特点: 1、以隐式的方式将数据传递给服务器 2、安全性很高 3、不限制提交数据的大小 4、要提交数据给服务器处理时使用 3、... ... 3、enctype 作用:指定表单数据进行编码的方式 取值: 1、application/x-www-form-urlencoded 默认值,允许将任意类型的文本提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 不对任何数据进行编码和传输 Demo : 1、创建 05-form.html 2、声明一个表单元素 form 3、指定提交地址为 login.php,提交方式为 get,编码方式为默认 3、表单控件 表单元素分类: 1、input元素 2、textarea 多行文本域 3、select 和 option 选项框 4、其它元素 5、新input元素 详解 : 1、input元素 里面会包含若干个不同的表单控件 标记 :<input> 属性 : 1、type 根据不同的type属性值,可以创建不同的input元素 2、name 定义表单控件的名称,主要提交给服务器使用的 注意:如果不声明name属性的话,元素则无法提交给服务器 3、value 定义当前控件的值,主要提交给服务器使用的 4、disabled 禁用控件,无值的属性 <input disabled> 2、文本框 与 密码框 文本框:<input type="text"> 密码框:<input type="password"> 具备除以上四个属性外,还具备以下几个独立属性: 1、maxlength 限制输入的字符数,取值为数字 2、readonly 只读,无值属性 Q : readonly 和 disabled 的区别 1、readonly ,是只读的意思,是允许提交给服务器,不让用户改数据而已 2、disabled , 是禁用的意思,不仅不让用户改数据,而且还不能提交给服务器 3、placeholder 占位符,即默认显示在文本框用于给用户提示的文字 3、按钮 1、提交按钮 作用:将表单提交给服务器 标记:<input type="submit" value="显示的文本"> 2、重置按钮 作用:将表单恢复到初始化的状态 标记:<input type="reset" value="显示的文本"> 3、普通按钮 作用:通过 JS 自定义功能 标记:<input type="button" value="显示的文本"> 4、显示的内容 属性: 1、type :submit / reset / button 4、单选按钮 和 复选框 单选按钮:<input type="radio"> 复选框:<input type="checkbox"> 属性: 1、name 设置名称,并用于分组,一组单选按钮 或 复选框的名称必须相同 2、value 必须设置 3、checked 默认被选中,无值属性 5、隐藏域 和 文件选择框 1、隐藏域 <input type="hidden" name="" value=""> 想提交给服务器,但不想给用户看的数据,可以放在隐藏域中 2、文件选择框 <input type="file" name=""> 注意: 1、form的 method 属性值必须为 post 2、form的 enctype属性值必须为 multipart/form-data http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=bingbing http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3 http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789 1、表单 1、form ... 2、input ... 3、textarea 控件 标记:<textarea></textarea> 属性: 1、name 定义名称,提交给服务器使用 2、cols 指定文本域的列数,变相指定宽 3、rows 指定文本域的行数,变相指定高 4、readonly 只读 Demo : 创建 01-form.html 文件 创建一个 多行文本域,列数为 50,行数为 5,名称为 intro 4、选项框 1、标记 表示 下拉列表 或 滚动列表 列表中的内容,允许出现多个 2、属性 1、 1、name :控件的名称 2、size :默认显示选项的数量,默认为1,为下拉列表,如果取值>1的话,则为滚动列表 3、multiple 设置多选,无值的属性 2、 1、value :选项的值,提交给服务器用 2、selected :默认被选中 5、其它标记 1、label 元素 作用:关联文本与表单控件的,点击文本时就如同点击表单控件一样 标记:文本 属性: 1、for 指定要关联的表单控件的ID值 2、为控件分组 分组标题 分组中的内容 3、浮动框架 1、作用 将其他页面导入到当前页面中来 2、语法 标记:<iframe></iframe> 属性: 1、src 要引入的页面的url 2、frameborder 指定浮动框架的边框,默认为1,则显示边框 不需要边框则设置为 0 3、width 4、height 练习: 创建一个 02-iframe 的网页,将 01-form.html 页面引入进来 ,适当调整宽度,高度,边框 6、新input元素 (HTML5) 1、电子邮件类型 作用:提交时会验证数据是否符合Email的规范 标记:<input type="email"> 2、搜索类型 作用:在文本框的基础上,提供了快速清除操作 标记:<input type="search"> 3、URL类型 作用:提交时会验证数据是否符合Web站点的URL规范(绝对路径) 标记:<input type="url"> 4、电话号码类型 作用:在移动端设备中,能展开 拨号键盘,在PC中无效 标记:<input type="tel"> 5、数字类型 作用:只能让用户输入 或 选择数字 标记:<input type="number"> 属性: 1、min :当前控件接受的最小值 2、max :当前控件接受的最大值 3、step :微调数字时每次变化的长度,默认为1 6、范围类型 作用:提供一个滑块,让用户选择数字 标记:<input type="range"> 属性: 1、min :当前控件的最小值 2、max :当前控件的最大值 3、value :设定初始值 7、颜色类型 作用:提供一个颜色拾取控件 语法:<input type="color"> 8、日期类型 作用:提供一个日期输入控件 标记:<input type="date"> 9、周类型 作用:提供一个日期控件,用于选取周 标记:<input type="week"> 10、月份类型 作用:选取月份控件 标记:<input type="month"> =============================

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值