标题标记，#=1,2,3,4,5,6，定义了6级标题，每级标题的字体大小依次递减，
属性align设定对齐方式：center：居中；left：左对齐（默认）；right：右对齐
黑体标记
斜体标记
加重文本标记（通常是斜体加黑体）
字体标记：size属性，设置字体大小，取值从1到7；color属性，设计字体颜色，使用名字常量或RGB的十六进制值，face属性，设计字体字型，例如“宋体”、“楷体”等
段落标记：属性align指定对齐方式。
水平分隔线标记：属性width设置线的长度（单位像素），size设置线的粗细（单位像素），color设置线的颜色，align设置对齐方式
插入一个回车换行符
列表标签分两类：有序标签和无序标签。
（1）有序列表标记：
格式：
…………..
其中，属性type指定列表项前的项目编号的样式，其取值：
“1”：编号为阿拉伯数字（默认值）；
“a”：小写英文字母；
“A”：大写英文字母；
“i”：小写罗马数字；
“I”：为大写罗马数字。
（2）无序列表标记：
格式：
其中：
属性TYPE指定列表项前的项目符号的样式，其取值为
disc：实心圆点（默认值）；
circle：空心圆点；
square：实心方块。
超链接标签:
图片标记:
属性src：指定图像源的URL路径
alt：替代文本；
height：图片的高度；
width：图片的宽度。
例：
alt="请点击该图片"> 定时刷新或跳转： 1）定时自刷新： 基本语法： （2）定时自动跳转： 该语句表示，页面3秒后自动转到搜狐主页。 注意：上述标签一般放在head标签中。 表格： 表格由行、列、单元格组成，一个表格是由 （1）基本语法： …… 表格属性（ 属性 用途 width 表格宽度 cellpadding 边距 height 表格高度 cellspacing 间距 align 表格水平对齐方式 bgcolor 表格背景颜色 border 表格边框厚度 background 表格背景图像 HTML表单标签与表单设计： 表单是由文本框、密码框、多行文本框、单选、复选框、下拉菜单/列表、按钮、文件域、隐藏域等各种表单元素及其标记组成的。 表单使用 标记主要有六个属性： type，name，size，value，maxlength，check。 type主要有10种类型：增加 名称 格式 文本域 maxlength=""size=""value=""> size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数 密码域 size=""maxlength=""value=""> 当用户输入密码时，区域内将会显示“*”号代替用户输入的内容 单选按钮 checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时，设置相同的name值 复选框 checked属性用来设置该复选框默认状态是否被选中，当有多个复选框时，可设置相同的name值，也可以设置不同的name值 提交按钮 将表单内容提交给服务器的按钮 取消按钮 将表单内容全部清楚，重新填写的按钮 图像按钮 image 使用图像代替submit按钮，图像的源文件名由src属性指定 文件域 上传文件 隐藏域 用户不能在其中输入信息，用来预设某些要传递的信息 下拉列表框： 在表单中，通过 多行文本框 rows设置输入域的行数， cols设置输入域的列数， wrap设置是否自动换行。 HTML框架标签与框架设计： 框架将浏览器窗口分割为几个窗口 1.窗口的分割与设置 分割框架的语法结构： 或者cols="宽度1,宽度2…"> … 2.子窗口的设置 name="子窗口名称"scrolling="yes或no或auto"> 3.target属性 在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。 target属性使用格式： target="显示目标网页的子窗口名字">超链接文字 补充一些标记 (4) (5)特殊字符： <：<×：×>：>§：§&：&：©“："：®空格： （或用全角空格）：™(6)定义列表，常用于解释名词 。。。 (7)body标签的属性 bgcolor=“#xxxxxx”：背景颜色 background=“背景图片” text=“文本颜色” link：链接字体颜色 vlink：访问过后的链接字体颜色 alink：设定鼠标正在单击链接时的颜色 topmargin,leftmargin:body距浏览器边界的距离。 内部链接：链接至同一个web应用下的其他文件，使用相对地址。 书签链接：链接至一个文件的某个位置处。 建立书签： 链接至同一文件时，文件名可以省略。 例：书签例子 外部链接 脚本链接 javascript:javascript函数或语句。 空链接 “#” (9)链接标签的target属性的取值： _blank：链接在新窗口中显示 _parent：链接在父窗口中显示，用在框架中。 _self：链接在自身窗口中显示，它是target的默认值。 框架名称：链接在指定名字的框架中显示，用在框架中。 _top：链接在顶层窗口中显示，将忽略所有框架。 (10)图像地图：将图像划分成不同区域进行链接设置 由于热区坐标比较复杂难于控制，一般需要借助可视化软件进行设置。 (11)除了表格设计标签外，还有些标签表示表格结构，如： :表头 可对它们的显示格式单独进行设置。 它们常用属性如：bgcolor，align，valign等。 (12)内部框架iframe： 可以在一个页面定义一个区域用于显示另一个页面内容，同frame有相似之处。 name=“框架名称”scrolling=“auto|yes|no“ frameborder=“0|1”> 例：frame和iframe (13)网页元素分组 内容1 内容2 (14)层标记：用来命名网页中特定内容，经常和css，javascript结合实现网页布局和一些动态效果。 层标签 和 层的属性 id,left,top,width,height,visibility,background,bgcolor,z-index,overflow,clip,display (15)滚动字幕 behavior=“scroll|slide|alternate" scrollamount=“文字每次移动的长度（像素）” loop=“循环次数”bgcolor=“背景颜色" width=“宽度”height=“高度” hspace=“距周围水平距离”vspace=“距周围垂直距离” οnmοuseοver="this.stop()"οnmοuseοut="this.start()“ > 要滚动的文字 (16)多媒体标记 背景音乐： loop设置为-1，可循环播放。 添加多媒体文件(音频，视频，flash等) hidden=“是否隐藏播放面板”autostart=“是否自动播放”/> 说明：有时考虑到兼容性，添加多媒体文件时还使用object标签，并将embed标签嵌入其中，object标签可通过可视化软件生成，不再详述。 (17)基底网址标记：设置相对链接地址的基底地址及打开方式。 (18)元信息标记：用于定义页面元信息，也就是指定一些name-value对。该标记也写在head标记内。包含属性： name：用于指定元信息名称，可随意指定。 content：用于指定元信息的值。 例1：教材中的页面定时刷新，跳转。 例2：禁用页面缓存： content=“text/html;charset=UTF-8”/> 例4：设置页面关键字，描述,作者等。 关于HTML5 目前HTML已经升级到HTML5版本(2010年)，HTML5是近十年来Web开发标准最巨大的飞跃。和以前版本不同，HTML5不仅用来表示Web内容，而且在HTML5上，视频、音频、图像、动画以及同计算机的交互都被标准化了。 （要说明的是，测试HTML5实例，要安装支持HTML5的浏览器，如新版本的IE(IE9以上)，FireFox，谷歌浏览器等。） 同HTML4比较，HTML5语法发生了较大变化，新增和废除了一些标签和属性，提供简单而强大的HTML5API，以浏览器原生能力替代复杂的JavaScript代码，减少了对外部插件的需求。 例如： (1)为了使文档更加清晰，容易阅读，增加了很多新的结构元素。 (2)吸纳了WEBFORM2.0的标准，大大强化了表单元素的功能，使表单的开发更快捷、方便。 (4)提供音频、视频标准接口，播放它们不再需要安装插件。 (5)提供canvas元素，可以在页面上绘制图形图像。 (6)改善了cookie存储机制，提供WebStorage存储机制及本地数据库功能。 (7)提供API支持离线应用程序开发。 (8)使用WebWorker实现Web平台上的多线程处理功能。 HTML5实例 （1）基本结构 (2)表单元素 请输入姓名 （3）多媒体标签 (4)利用canvas元素绘图 CSS的处理思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分—“对象”，“属性”和“值”组成的。 在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（Selector）。 定义选择器的基本语法： selector{属性:属性值;属性:属性值;………} （1）CSS选择器分为3种类型： 标记选择器，通过HTML标签定义选择器。 类别选择器，使用class定义选择器。 ID选择器，使用id定义选择器。 （2）属性和值被冒号分开，属性之间用分号间隔，并由花括号包围。例如： p{background-color:blue;color:red}//定义标记p选择器 .cs1{font-family:华文行楷;font-size:15px}//定义类别选择器.csl #cs2{color:yellow}//定义ID选择器#cs2 （1）标记选择器——通过HTML标签定义样式表 标签名{属性:值;属性:值;属性:值;……} （2）类别选择器——使用class定义样式表 格式1：标签名.类名{属性:值;属性:值;属性:值;……} 格式2：.类名{属性:值;属性:值;属性:值;……} （3）ID选择器——使用id定义样式表 #id名称{属性:值;属性:值;属性:值;……} 在HTML中使用CSS的方法有4种方式：行内式、内嵌式、链接式、导入式。 （1）行内式：利用style属性直接为元素设置样式。 text-decoration:underline;">正文内容1 font-style:italic;">正文内容2 （2）内嵌式： 需要先定义有关的选择器，然后再使用。利用标签对，将样式定义在 p{color:#0000FF;text-decoration:underline;font-weight:bold; font-size:25px;} .info{font-size:12px;color:red;} 这是第1行正文内容…… （3）链接式： 将定义好的CSS单独放到一个以.css为扩展名的文件中，在 标签链接到网页的格式： type="text/css" rel="stylesheet"> 例如：首先定义一个sheet_x.css文档： h2{color:#0000FF;} p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;} 其次，在HTML中使用： 这是正文内容1…… （4）导入式： 该方式与链接式方法类似，只是通过import导入到页面中。 import导入格式为： @importurl(*.css文件路径); Css的继承特性、层叠特性： 继承特性： 子标记自动继承父标记的属性设置。 层叠特性： 当属性设置冲突时优先级遵循以下原则： (1)行内>内嵌>链接 (2)id>类别>标记 (3)同级的，后面的值会覆盖前面的。 CSS常用属性： 主要有字体属性、颜色属性、背景属性、文本段落属性等。 属性名 属性含义 属性值 font-family 字体 字体类型（如“宋体”） font-size: 字体大小（字号） 取值单位：pt（点数），例“12pt” font-style 字体风格 normal（普通，默认值），italic斜体，oblique中间状态 font-weight 字体加粗 normal（普通，默认值），bold（一般加粗），bolder（重加粗），lighter（轻加粗），number:100-900之间的加粗 font 字体复合属性 用来简化css代码，可以取值以上所有属性值，之间用空格分开 2．颜色和背景属性： color 颜色 （颜色值是英文名称或16进制RGB值）例，red为#ff0000） background-color 背景颜色 同color属性 background-image 背景图像 none:不用背景；url：图像地址 background-position 背景图片位置 top，left，right，bottom，center等 背景复合属性 简化css代码，可取值以上所有属性值，之间用空格分开 3．文本段落属性： text-decoration 文字修饰 none,underline:下划线,overline:上划线,line-through:删除线,blink：文字闪烁 vertical-align 垂直对齐 baseline:默认的垂直对齐方式，super文字的上标，sub文字的下标，top垂直靠上，text-top使元素和上级元素的字体向上对齐，middle垂直居中对齐，text-bottom使元素和上级元素的字体向下对齐 text-align 水平对齐 left,right,center,justify:两段对齐 text-indent 文本缩进 缩进值（长度或百分比 line-height 文本行高 行高值（长度，倍数，百分比） white-space 处理空白 normal将连续的多个空格合并,nowrap强制在同一行内显示所有文本，直到文本结束或者遇到 伪类选择器： 除了标签、类、id选择器外，还有一种特殊的选择器，可以为特定网页元素(如链接)的特定状态(如active，hover等)设置样式。 常用伪类选择符： a:link,a:visited,a:hover,a:active 选择器的复合： 选择器除了单独使用外，还可以进行复合，常见的复合选择器有：交集选择器、并集选择器、后代选择器。 (1)交集选择器： 由两个选择器直接连接构成，其结果是两个选择器定义的元素的交集。 第一个选择器必须是标记选择器,第二个必须是类别选择器或id选择器。两个选择器间不能有空格，必须连续书写。 普通段落文本（蓝色） (2)并集选择器： 多个选择器通过逗号连接，表示多个选择器共用一种样式。如： h1,h2,h3,h4,h5,p{color:blue;font-size:15px;} (3)后代选择器： 外层选择器写在前面，内层选择器写在后面，中间用空格分隔。表示嵌套在外层元素的内层元素使用样式。可以多层嵌套。 嵌套使用CSS（红色）标记的方法 注意：这里的后代不仅限于直接后代，也会影响到各级后代，如果只想 影响直接后代，可以使用子选择器：选择器之间用>分隔。 补充几组属性： 除了书上字体、背景、段落属性外，再补充几组属性，它们与CSS的盒子模型有关： 边距属性：Margin 可直接使用margin一次定义四个方向的边距： 如：margin{10px}:上右下左均为10。 margin{5px10px}：上下为5，左右为10 margin{5px10px15px}:上5，左右10，下15 margin{5px10px15px20px}:上5，右10，左15，下20 填充属性：Padding： 可直接使用padding一次定义四个方向的填充。 边框属性（Border）： 可直接使用border一次定义边框的粗细，颜色，样式。 图文混排： 项目符号和编号： 注意display,visibility的区别。 注意： border-collapseCSS属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。 例：border-collapse:collapse; border-collapse:separate; JavaScript代码可以直接嵌套在HTML网页中( （2）另一种是链接外部JavaScript文件： JavaScript的事件： 在浏览器中网页与客户的交互都是通过“事件”引发的，当一个事件发生时，例如“用户单击某个按钮”，浏览器认为在这个按钮上发生了一个click事件，然后根据该按钮所定义的事件处理函数，执行相应的JavaScript脚本。 事件 事件处理函数名 何时触发 blur onBlur 元素或窗口本身失去焦点时触发 change onChange 当表单元素获取焦点，且内容值发生改变时触发 click onClick 单击鼠标左键时触发 focus onFocus 任何元素或窗口本身获得焦点时触发 keydown onKeydown 键盘键被按下时触发，如果一直按着某键，则会不断触发 load onLoad 页面载入后，在window对象上触发；所有框架都载入后，在框架集上触发； select onSelect 选中文本时触发 submit onSubmit 单击提交按钮时，在 setInterval("time.innerHTML=newDate().toLocaleString()+'星期'+'日一二三四五六'.charAt(newDate().getDay())",1000); 3延迟执行某段代码，如让网页3秒钟后转到 4四种网页对话框： （1）window.alert(“”) （2）window.confirm(“”), （3）window.prompt(“”,””) 跳转前弹出确认对话框。 （4） window.showModalDialog(url,argument,"dialogTop:40px;dialogLeft:1000px;dialogWidth:300px;dialogHeight:300px;status:no;"); 5利用javascript进行表单数据有效性验证 6控制文字加粗，倾斜(两种方法) 例一： 例二： 7求圆的周长、面积 8两数的加减乘除 9猜数程序：网页产生一个0-200的随机整数，让用户去猜，网页给出”偏大“、”偏小“或”猜中“的提示。 10复选框全选，取消全选 11年月日级联菜单 html标签 个人整理HTML全部标签总集，及用法： HTML全部标签简介： div： div是一个容器标签，所以它后面必须有一个，比如 div的全称就是division，有时候我们也习惯叫图层，在html中，div有很多属性，正是这些属性的组成才会形成美观的板块，可以深入了解一下CSS+DIV。 innerHTML、innerText和outerHTML、outerText的区别： innerHTML设置或获取位于对象起始和结束标签内的HTML outerHTML设置或获取对象及其内容的HTML形式 innerText设置或获取位于对象起始和结束标签内的文本 outerText设置(包括标签)或获取(不包括标签)对象的文本 innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。 简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于： 1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。 2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。 对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来： console.log('innerHTML:'+test1.innerHTML); console.log('outerHTML:'+test1.outerHTML); console.log('innerText:'+test1.innerText); console.log('outerText:'+test1.outerText); 控制台下效果： innerText和outerText在获取时是相同效果都是获取 那么对于获取来说的结构图： 对于设置对象： innerHTMl在设置对象文本内容的时候，有插入标签，是直接把字体大小，颜色，斜体，下划线这些样式显现出来。 outerHTML跟innerHTMl效果一样，也是直接把字体大小，颜色，斜体，下划线这些样式显现出来。 innerText跟outerText显示结果是直接把""里的内容包括标签原封不动的设置显示出来（只操作文本，不对样式做任何操作）。 正则表达式 什么是正则表达式： 正则表达式本身就是一种语言，这在其它语言是通用的。 正则表达式(regularexpression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。 str.indexOf(‘abc’);//精确匹配只能匹配字符串“abc” 正则表达式//模糊匹配 Wherename=’zhangsan’;//精确匹配 Wherenamelike‘zhang%’;//姓名以zhang开始的字符串 为什么使用正则表达式： 2）手机号 3）银行卡号 4）采集器 186lO659839 5）中奖信息186****9839 6）屏蔽特殊词汇 正则表达式'^[a-zA-Z0-9''-'\s]{1,30}$'代表什么意思： [A-z]等于[a-zA-Z]表示匹配所有大小写字母 0-9表示数字 "-'都是表示本义字符,匹配这三个符号 \s匹配非换行的所有空白字符 以上全部在[]中代表匹配以上所有内容 然后{1,30}代表匹配1次到30次,最少1次 头尾的^和$代表匹配一个完整的字符串,如果这个字符串中出现任何一个不是[]中内容的字符这个字符串就无法匹配 最后^$匹配的定义可以是单行的也可以是多行的,这需要靠正则的选项判断、 正则表达式\w并不完全等于[A-Za-z0-9]： 一般大家在书本上还是网上资料正则表达式中\w都被介绍为匹配任何单词字符,包括字母和下划线，等效于[A-Za-z0-9]。 今天偶然间发现会员注册中出现了一个恶作剧账号"аdmin",注意到那个а了没那是一个俄文字母,在会员注册过滤中使用\w验证并不能防止。 也就是说\w包括了英文字母以及俄文字母等，在会员注册这块我们肯定不希望类同的账号出现，要不然很容易造成会员间的误会。所以改为^[A-Za-z0-9\u4E00-\u9FA5-]{2,16}$验证，只允许数字、26个英文字母大小写、中文及其组合。 用正则表达式将前后空格用空字符串替代:replace(/(^\s*)|(\s*$)/g,"")： ^表示字符串必须以后面的规则开头,在这里就是说字符串必须以\s*开头. \s是空格的意思,*表示有0个或多个 \s*就是有0个或多个空格 (^\s*)表示的就是以0个空格或者多个空格开头 |表示或的意思,也就是满足|左边的也成立,满足|右面的也成立. \s*同上 $的意思是字符串必须以前面的规则结尾 (\s*$)的意思就是,以0个空格或者多个空格结尾 /.../g是正则表达式的属性,表示全文匹配,而不是找到一个就停止. 所以这个正则表达式替换的就是前导空格和后导空格 因为有前导空格,就说明以0个或多个空格开头,满足正则表达式中|前面的条件:(^\s*) 而如果有后导空格,就说明以0个或多个空格结尾,满足正则表达式中|后面的条件:(\s*$)、
、 或 标记来定义的，分别表示表格、表格行、单元格。 列名一 列名二 …...数据一 数据二 …...属性）：
姓名 语文 数学 张三 李四 98 43 王晓彬 78 成大才 94 :右缩进
CSS标题1
对象全称及缩写说明：