HTML笔记

合集下载

张鹏老师html笔记整理

张鹏老师html笔记整理
<br>薄便携,搭配SonicMaster美声大师,海量存储,2秒开机,2周待机,快速响应Win8无延迟.
</font>
<br>
<font color="green" size="2"> 2013-07 </font>
<font color="grey" size="2">-推广</font>
<font color="blue" size="4">
<u>2013全新索尼
<strong>
<font color="red">笔记本电脑
</font>
</strong>旗舰索尼VAIO Pro新登场!
</font>
</u>
<br>
<font size="2">索尼
<font color="red">笔记本电脑</font>VAIO Pro-轻,薄,彰显品质.新一代超极本(TM)创新源自英特尔科技.全新索尼
设置图片高
border
数字
设置图片边框
align
left
图片靠左,文字靠右
right
图片靠右,文字靠左
top
文字垂直居上靠
middle
文字垂直居中
bottom
文字垂直居下(默认)
vspace
像素
定义图像顶部和底部的空白(垂直边距)

HTML知识点

HTML知识点

HTML基础知识一、什么HTML超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

二、HTML能干什么您可以使用HTML 来建立自己的WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

三、HTML长什么样子•<!DOCTYPE html>声明为HTML5 文档•<html>元素是HTML 页面的根元素•<head>元素包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8。

•<title>元素描述了文档的标题•<body>元素包含了可见的页面内容•<h1>元素定义一个大标题•<p>元素定义一个段落四、HTML都包含那些标签五、HTML实例1)我的第一个网页2)注释标签:对代码进行说明<!--单行注释,也可以对多行文字进行注释-->3)常用格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>:分割线<br>:换行<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调文本</strong> 4)标题标签5)列表标签6)超链接:7)分隔窗口8)块级元素和行内元素块级元素:凡是默认自动占满网页整行的元素(自动换行),称为块级元素<hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...行内元素:不能占满网页整行的元素<font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...9)表格标签tr:行;td:单元格10)表单元素:11)多行文本域。

html5笔记——section标签

html5笔记——section标签

html5笔记——section标签定义和⽤法<section> 标签定义⽂档中的节(section、区段)。

⽐如章节、页眉、页脚或⽂档中的其他部分。

注意:section 不是⼀个专⽤来做容器的标签,如果仅仅是⽤于设置样式或脚本处理,专⽤的是 divsection ⾥应该有标题(h1~6),但⽂章中推荐⽤ article 来代替⼀条简单的准则是,只有元素内容会被列在⽂档⼤纲中时,才适合⽤section元素。

section的作⽤是对页⾯上的内容进⾏分块,如各个有标题的版块、功能区或对⽂章进⾏分段,不要与有⾃⼰完整、独⽴内容的article混淆。

⼀个section通常由内容和标题组成,通常不推荐那些没有标题的内容⽤section,在这个⽹站可以检测没有标题的section,section的作⽤是对页⾯上的内容进⾏分块,如各个有标题的版块、功能区或对⽂章进⾏分段,不要与有⾃⼰完整、独⽴内容的article混淆。

使⽤<section>以下内容来⾃:<section>可以相互嵌套,在页⾯中定义了⼀个特殊的顶级区块,于是可以从<h1>开始列提纲⽽不⽤担⼼会破坏⽹页的纲要。

尽管没找到明确说明,但我个⼈认为在每⼀层<section>⾥还是仅使⽤⼀个<h1>为佳。

以Wordpress主题为例,我认为与#sidebar相对的#content部分,使⽤<section>包裹⼀堆<article>作为页⾯的主要内容并不太合适。

⽽使⽤<section>⽤在整体布局是明显错误的了。

⽽适合使⽤<section>标签的地⽅有:⽂章的评论列表,有着整齐的结构;⽂章内容的⽬录,有着⽂章内部结构纲要;侧栏widget,在中我看到了这样的设计,因为widget内容⼤都是评论列表、⽂章列表,有着清晰的结构且是独⽴完整的⼀部分;包裹⽂章中各个章节的段落,但要在编辑器完成,⽬前来看并不易⽤。

HTML5学习笔记--------》HTML5概要与新增标签!

HTML5学习笔记--------》HTML5概要与新增标签!

HTML5学习笔记--------》HTML5概要与新增标签!⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要,特别是移动互联⽹。

为了增强浏览器功能Flash被⼴泛使⽤,但安全与稳定堪忧,不适合在移动端使⽤(耗电、触摸、不开放)。

HTML5增强了浏览器的原⽣功能,符合HTML5规范的浏览器功能将更加强⼤,减少了Web应⽤对插件的依赖,让⽤户体验更好,让开发更加⽅便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很⼩,这并不符合⼀个好产品的演进规则。

1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。

它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务(Plug-in-Based Rich Internet Application,RIA),例如:AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强⽹络应⽤的标准集。

HTML5是HTML最新版本,2014年10⽉由万维⽹联盟(W3C)完成标准制定。

⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联⽹应⽤迅速发展的时候,使⽹络标准达到匹配当代的⽹络需求。

1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5,但是各个浏览器⽀持的⽅式以及语法有所差异性。

⽀持Html5的浏览器包括Firefox(⽕狐浏览器),IE9 及其更⾼版本,Chrome(⾕歌浏览器),Safari,Opera等现代浏览器。

⽀持得分:如果想了解更多请看本⽂的兼容性那⼀节的内容。

PC端(总分555分):平板(总分555分):移动(总分555分):1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现(CSS3)1.4.1. 语义特性(Class:Semantic)HTML5赋予⽹页更好的意义和结构。

HTML制作1-2课时个人笔记

HTML制作1-2课时个人笔记

HTML单机独立网页WWW 是world wide web(环球信息网)的缩写,也可简称为web,中文名为“万维网”。

http协议超文本传输协议用于从WWW服务器传输超文本到本地浏览器的传送协议网页首页(主页)内页(分页)内页一般为信息的载体,外爷一般为连接点HTML即超文本标记语言,或成为“多媒体文件语言”,可以标记超链接、文本样式、页面标题、插入图片或动画等多媒体元素,以此来创建Web页面HTML文件是有HTML命令组成的描述性文本,原则上可以用任何文本编辑器对其进行编辑。

一个基本的HTML文档的结构应该包括头部(Head)、主体(Body)两大部分。

头部描述浏览器所需的信息,主体包含所要页面的具体内容。

HTM超文本标记语言的标记符是通过标签(也叫标记符)来定义网页内容的。

HTML超文本标记语言表在使用过程中,所有的标签都必须用家括号括起来。

HTML中的表情大多是成对出现的,而后面的标签都是在前面标记的文字之前应加一个“/”,如<A> </A> 或<HTML> </HTML>等,在一对标签中前面表示开始后面表示结束。

HTML基本机构如下所示:<HTML><HEAD><TITLE>冬奥会中国代表队载誉归来</TITLE> (这里显示的是文档或网页标题)</HEAD><BODY>新华社北京2月28电参加****往机场迎接</BODY></HTML>其中<HTML>是最外层,表示这对标记间的内容是HTML文档,<HEAD>是头部信息<TITLE>是标题,<BODY>和</BODY>之间及就是网页文档内容。

HTML常见标签:<!-- --> :注释标记,在“<--”与“-->”之间的内容不在浏览器中显示。

HTML笔记

HTML笔记

Microsoft Jscript 提供了11 个内部(或“内置”)对象。

它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及String 对象。

Number 对象除了Math对象中可用的特殊数值属性(例如PI)外,在 Microsoft Jscript 中,Number 对象有几个其他的数值属性。

Microsoft JScript 特性- ECMAJScript 字母顺序的关键字列表编码函数escape():将非字母、数字字符转换成ASCII码求值函数eval():•事件:用户对浏览器所做的特定的动作(操作),是实现交互操作的一种机制。

事件名称适用对象意义说明Abort i mage 终止当图形尚未完全加载前Blur 失去焦点Change t/pw/ta/select 改变DragDrop window 拖曳Error img/win 错误加载文件或图形时发生错误Focus 取得焦点Move w indow 移动Reset form 重置Submit formClick/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove窗口对象的属性和方法:格式:[window.]属性[window.]方法(参数)opener.属性opener.方法(参数)self.属性self.方法(参数)parent.属性parent.方法(参数)top.属性top.方法(参数)窗口名称.属性窗口名称.方法(参数)•窗口对象的属性:document 当前文件的信息location 当前URL的信息name 窗口名称status 状态栏的临时信息defaultStatus 状态栏默认信息history 该窗口最近查阅过的网页closed 判断窗口是否关闭,返回布尔值opner open方法打开的窗口的源窗口outerHeight 窗口边界的垂直尺寸,pxouterWidth 窗口边界的水平尺寸,pxpageXOffset 网页x-position的位置pageYOffset 网页y-position的位置innerHeight 窗口内容区的垂直尺寸,pxinnerWidth 窗口内容区的水平尺寸,pxscreenX 窗口左边界的X坐标screenY 窗口上边界的Y坐标self 当前窗口top 最上方的窗口parent 当前窗口或框架的框架组frames 对应到窗口中的框架length 框架的个数locationbar 浏览器地址栏menubar 浏览器菜单栏scrollbars 浏览器滚动条statusbar 浏览器状态栏toolbar 浏览器工具栏offscreenBuffering 是否更新窗口外的区域personalbars 浏览器的个人工具栏,仅Navigator•窗口对象的方法:alert(信息字串) 弹出警告信息confirm(信息字串) 显示确认信息对话框prompt(提示字串[,默认值]) 显示提示信息,并提供可输入的字段atob(译码字串) 对base-64编码字串进行译码btoa(字串) 将进行base-64编码back() 回到历史记录的上一网页forward() 加载历史记录中的下一网页open(URL,窗口名称[,窗口规格])focus() 焦点移到该窗口blur() 窗口转成背景stop() 停止加载网页close()enableExternalCapture() 允许有框架的窗口获取事件disableExternalCapture() 关闭enableExternalCapture()captureEvents(事件类型) 捕捉窗口的特定事件routeEvent(事件) 传送已捕捉的事件handleEvent(事件) 使特定事件的处理生效releaseEvents(事件类型) 释放已获取的事件moveBy(水平点数,垂直点数) 相对定位moveTo(x坐标,y坐标) 绝对定位setResizable(true|false) 是否允许调整窗口大小resizeBy(水平点数,垂直点数) 相对调整窗口大小resizeTo(宽度,高度) 绝对调整窗口大小scroll(x坐标,y坐标) 绝对滚动窗口scrollBy(水平点数,垂直点数) 相对滚动窗口scrollTo(x坐标,y坐标) 绝对滚动窗口setInterval(表达式,毫秒)setTimeout(表达式,毫秒)clearInterval(定时器对象)clearTimeout(定时器对象)home() 进入浏览器设置的主页find([字串[,caseSensitivr,backward]]) 查找窗口中特定的字串print()setHotKeys(true|false) 激活或关闭组合键setZOptions() 设置窗口重叠时的堆栈顺序•窗口对象的事件处理程序:onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload•屏幕对象:描述屏幕的显示及颜色属性。

HTML初级知识点总结,最详细的总结

HTML初级知识点总结,最详细的总结

HTML超文本标记语言,一种规范预定义,已经定义好的各种标记,只需要我们把对应的标记放到合适的位置一. HTML基本语法与基本结构(重点)标记的使用1、标记一般成对出现,包含开始标记和结束标记2、标记可以嵌套使用,但是不能交叉使用3、标记不区分大小写属性的使用(属性控制内容的格式,额外的格式)1、书写位置在开始标记中2、格式:属性名=“属性值",多个属性之间使用空格分割3、不同的标记属性可能相同也可能不同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不冲突时,效果叠加,属性冲突时,就近原则html的基本结构〈html>-—--声明网页〈head〉———-网页的头部信息<title〉标题〈/title〉—---网页的标题</head><body〉—---网页的主体,网页内容主要展示的部分网页的主要内容</body>〈/html〉二. 文本格式的应用1、标题标记<hn>,n的取值1-6,1级标题最大效果:加粗显示,带有自动换行属性:align控制标题的对齐方式,取值left(左对齐,默认值)|center(居中)|right (右对齐)2、段落标记<p〉效果:把内容分段展示,自动换行属性:align,控制段落内容的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)3、换行符〈br /〉,单标记,不需要结束标记,换行但不分段空格符号:&nbsp;表示一个空格强制换行符:<br /〉4、水平线标记<HR />,单标记效果:水平线,默认是一个粗细为2px(像素)的线条属性:size 控制水平线的粗细,取值为整数,单位为像素(px)width 控制水平线的长度,取值可以是像素单位,也可以是百分数(相对于浏览器窗口百分比)noshade设置水平线不带有阴影,该属性不需要取值color 设置水平线的颜色,取值可以是英文的颜色值,也可以是十六进制的颜色代码align 控制水平线的对齐方式,取值left(左对齐)|center(居中,默认值)|right(右对齐)5、分节标记<div〉效果:把内容设置为一节,前后带有自动换行属性:align控制div中内容的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)6、居中标记符<center>效果:把center标记中的内容居中显示7、文本控制标记<font>效果:控制字体的各种显示样式属性:size 控制字体的大小,取值为绝对值时,1--7,数字越大字体越大,取相对值时,参考的是默认字体(3号),取值在-2-—+4之间color 控制字体的颜色face 控制字体的字体,取值可以是多个值,多个值之间使用逗号分割,取值时从左往右依次取值,找到合适的值为止,假如都不支持,使用默认格式显示8、字体的物理样式加粗:<b>斜体:〈i>下划线:〈u〉删除线:<s〉上标:<sup〉下标:〈sub>1、常用逻辑字符〈ADDRESS〉网页设计者或维护者的信息,通常显示为斜体<CITE> 表示文本属于引用,通常显示为斜体<CODE〉• 表示程序代码,通常显示为固定宽度字体<DFN> • 表示定义了的术语,通常显示为黑体或斜体〈EM> 强调某些字词,通常显示为斜体〈KBD〉表用户的键盘输入,通常显示为固定宽度字体〈SAMP> 表示文本样本,通常显示为固定宽度字体〈STRONG〉特别强调某些字词,通常显示为粗体<VAR> 表示变量,通常显示为斜体2、列表标记1、有序列表,〈ol〉,需要配合〈li>标记使用一个<li>标记对应一个选项ol的属性:type 控制列表的符号样式,取值1|A|a|i|I,默认是1start 控制列表的起始值,取值为任意的整数li的属性:type控制选项自身的符号样式,取值1|A|a|i|Ivalue控制选项本身的起始值,取值为任意整数,但是修改自身起始值之后,会对同一个列表中本选项之后的同级<li〉标记产生影响2、无序列表,<ul>,配合<li>标记使用一个<li>标记对应一个选项ul的属性:type 控制所有选项的符号样式,取值disc(实心圆,默认值)|circle(空心圆)|square(方块)li的属性:type控制选项本身的符号样式li标记用在ol中,type属性的取值跟ol的type属性取值走,用在ul中,跟着ul的type属性取值走3、定义列表,<dl〉,完成对定义列表的声明<dt>,术语标记,可以理解为类似于列表选项的标题使用〈dd>,描述标记,可以理解为类似于列表的选项使用三. 在网页中使用图片标记:〈img>,单标记,不需要结束标记属性: src 引入图片资源的路径绝对路径:资源在服务器上的位置,该位置是从盘符出发相对路径:资源在服务器上的相对位置,从网页本身出发.。

HTML笔记

HTML笔记

HTML筆記●在一個表格中增加一行:<table id=idTB><tr><td>……</td></tr></table><script>oTR=idTB.insertRow(); oTD=idTB.insertCell() ;</script> 注意的是:每格的插入是從最后的單元格開始插入,可以通過idTB.rows.length來獲得表行數。

●可先用<span id="txt"></span>在一個地方做個標記,然後引用如javascript:document.getElementById('txt').innerText='数据查询中,请稍后........';等方法可以在指定的地方輸出所想要的東西,取消的話用document.getElementById('txt').style.display = "none";來隱藏輸出的東西。

●先在一張圖的屬性中設定usemap=#mapname,然後可以用<map name=mapname><areashape=rect cords=x1,y1,x2,y2 href=”xxxx.php”target=_blank></map>來指定圖片的某個區域的熱連接。

●各种媒体文件在线播放代码1.mid格式<embed src="<:FILENAME:>" type="audio/midi" hidden="false" autostart="true" loop="true"height="20" width="200"></embed>2.mp3格式<embed controller="true" width="200" height="20" src="<:FILENAME:>" border="0"pluginspage="/quicktime/download/indext.html"></embed>3.avi格式<embed src="<:FILENAME:>" border="0" width="<:WIDTH:>" height="<:HEIGHT:>"type="application/x-mplayer2"></embed>4.flash格式<embed src="<:FILENAME:>"pluginspage="/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="<:WIDTH:>" height="<:HEIGHT:>"play="true" loop="true" quality="high" scale="showall" menu="true"></embed>5.mpg格式<embed src="<:FILENAME:>" border="0" width="<:WIDTH:>" height="<:HEIGHT:>"type="application/x-mplayer2"></embed>6.mov格式<embed controller="true" width="<:WIDTH:>" height="<:HEIGHT:>" src="<:FILENAME:>"border="0" pluginspage="/quicktime/download/indext.html"></embed>7.rm格式<OBJECT>" height="<:HEIGHT:>"><PARAM NAME="CONTROLS" V ALUE="ImageWindow"><PARAM NAME="AUTOSTART" Value="true"><PARAM NAME="SRC" V ALUE="<:FILENAME:>"><embed height="<:HEIGHT:>" width="<:WIDTH:>" controls="ImageWindow"src="<:FILENAME:>?embed" type="audio/x-pn-realaudio-plugin" autostart="true" nolabels="0"autogotourl="-1"></OBJECT>8.anthware格式<object classid="CLSID:15B782AF-55D8-11D1-B477-006097098764"codebase="/pub/shockwave/cabs/authorware/awswax65.cab#version=6,5,0,66"; width="640" height="480"><param name="SRC" value="sdfs.aam"><param name="PALETTE" value="background"><param name="WINDOW" value="inPlace"><param name="BGCOLOR" value="#FFFFFF"><embed src="sdfs.aam" palette="background" window="inPlace" bgcolor="#FFFFFF"pluginspage="/shockwave/download/index.cgi?P1_Prod_Version=Shock waveAuthorware"; type="application/x-authorware-map" width="640" height="480">●<body onLoad= alert("你要写的话")>開啟网頁時彈出對話框。

HTML学习笔记——DOCTYPE和DTD,标准模式和兼容模式

HTML学习笔记——DOCTYPE和DTD,标准模式和兼容模式

HTML学习笔记——DOCTYPE和DTD,标准模式和兼容模式主要涉及知识点:HTML与XHTMLHTML与XHTML的区别DOCTYPE与DTD的概念DTD的分类以及DOCTYPE的声明⽅式标准模式(Standard Mode)和兼容模式(Quircks Mode)标准模式(Standard Mode)和兼容模式(Quircks Mode)的区别HTML与XHTMLHTML:超⽂本标记语⾔ (Hyper Text Markup Language)XHTML:可扩展超⽂本标记语⾔ (EXtensible HyperText Markup Language),是⼀种置标语⾔。

HTML是⼀种基于标准通⽤标记语⾔(SGML)的应⽤,XHTML则基于可扩展标记语⾔(XML)XHTML的⽬标是取代HTML,与HTML4.01⼏乎相同,是更严格更纯净的 HTML 版本。

HTML 和 XHTML 的区别简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合 XML 要求,XHTML 语法上要求更严谨些。

 本质上说,XHTML是⼀个过渡技术,结合了部分XML的强⼤功能及⼤多数HTML的简单特性。

建⽴XHTML的⽬的就是实现HTML向XML 的过渡。

在HTML5成为主流之前,Html4.01⼀直是⼤多数⼈使⽤的Html版本,Html5⽬标是取代HTML4.01和XHTML1.0标准,旨在提⾼⽹页性能,增加页⾯交互。

HTML与XHTML的区别XHTML 与 HTML 4.01 标准没有太多的不同。

主要的不同体现在下⾯⼏点:XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须⽤⼩写字母。

XHTML ⽂档必须拥有根元素。

DOCTYPE与DTD的概念 ⽂档类型定义(Document Type Definition)是⼀套为了进⾏程序间的数据交换⽽建⽴的关于标记符的语法规则,是HTML的验证机制。

HTML学习笔记

HTML学习笔记

HTML学习笔记王慧东2017/11/6基础知识1、html:超文本标记语言,标记:就是用来描述网页内容的一些特定符号,不是编程语言,而是一种描述性的标记语言。

2、制作html网页文件a、新建一个记事本文件,将他重命名*.htmlb、在里面输入网页的信息内容c、在要修饰的内容的两侧加html标记3、html标记的语法:标记分为两种:单标记、双标记a、<标记符>没有结束的标记---单标记<标记名称>单一型,无属性值,如<br><标记名称属性=“属性值”>单一型,有属性值,如<hr width="50%">b、<开始标记><结束标记> ---双标记<标记名称></ 标记名称>没有属性值,如<title></title><标记名称属性=“属性值”></ 标记名称>有属性值<bodybgcolor="red"></body>注意:源代码中的效果,并不是浏览器最终的效果。

4、标记与属性、属性之间以空格分隔,属性不区分先后顺序,且属性不是必须的。

5、在xhtml中,规定,所有html标记都要小写,所有标记都要有关闭html---xhtml<br>---<br />6、html文档结构所有的网页文件,通常由四对标记来构成,文档的骨架:<html>标识网页文件的开始与结束,所有html元素都要放在这对标记中<head>标识网页文件的头部信息,如标题、搜索引擎的关键字等<title>标识网页文件的标题标题</title></head><body>标识网页文件的主题部分正文</body></html>7、meta标记用于定义文件信息,对网页文件进行说明,便于搜索引擎查找。

HTML语言-学习笔记-yjddd出品

HTML语言-学习笔记-yjddd出品

多行文本框
<text area rows=4 cols=20 name=简历 width=3000></textarea>
按钮
<input type=submit>提交</input>
<input type=reset value=重填>重填</input>
ps:针对form的内容重填;
loop 循环次数,height=100%
清单标签
1、有序标签 order list
<ol></ol>
<ol type=i start=6>
<li>孝敬父母
<li>工作任劳任愿
<li>组织能力强
</ol>
2、无序清单
<ul>
<li>
</ul>
type属性值
css层叠样式表
cascading,style,sheet;
标签<style></style>位置放置在<head></head>
属性
<style type=text/css>
td<!-- td的样式 -->
{
border-left-color:#000000;
border-right-color:#000000;
<body>标签中的属性
bgcolor 背景颜色
topmargin 顶边距
bottommargin 底边距

html代码大全,学习笔记

html代码大全,学习笔记

1.<pre></pre> 主要 写诗 散文2.<sup>左上标</sup> <sub>左下标</sub>3.相同标签优先级 从里到外!4.表格宽高最好设置成像素值,不百分比(虽网页大小而变动),不然对排版有影响5.表格的嵌套6.HTML 表单 <form name=“” actian=“” methed=“”><input type=“” name=“” value=“”></form>多行文本<form name=“form1” actian=“post ” methed=“form.asp ”><textarea name= cols 列高= rows 行高=><input type=“submit ” value=“提交”</form>/<meta name=“keywords ” contect=“人才网”<!--向搜索引擎说明你的网页的关键词--><meta name=“DEscription ” contect=“人才网”<!--告诉搜索引擎你的站点的主要内容--><meta name=“Robots ” contect=“all 丨none 丨index 丨noindex 丨follow 丨nofollowAll----文件将被检索,且页面上的链接可以被查询<meta http-equiv=“Content-Type ” contect=“text/html :charset=gb2312”><!--设置页面语言--><meta http-equiv=“Refresh ” contect=“n :url=http://”><!--设置页面刷新,跳转--><meta http-equiv=“Expires ” contect=“Mon,12 May 2001 00:21:00 GMT ””><!--设置页面过期--> <meta http-equiv= “Pragma ” contect= “no-cache ”> 设置页面不从缓存读取365”原文出处:/xiaohuaji/xhj_mulu.php 1、</html>,用来定义html 文档,一个最前,一个最后。

html笔记

html笔记

第一天HTML【教学内容】HTML基本标签◆Html介绍◆文件标签◆排版标签◆块标签◆字体标签◆清单标签◆图形标签◆链接标签◆表格标签HTML表单标签◆Form标签◆Input种类◆Select与option标签◆Textarea标签HTML框架及特殊字符◆框架标签◆其它标签与特殊字符【教学总结】【第一阶段】【学习目标】1.了解html常用标签2.掌握html中的表格标签3.理解综合案例4.掌握超链接标签【内容:html基本标签】Html介绍1.什么是html?Html是用来描述网页的一种语言。

●HTML 指的是超文本标记语言(Hyper Text Markup Language)●HTML 不是一种编程语言,而是一种标记语言 (markup language)●标记语言是一套标记标签 (markup tag)●HTML 使用标记标签来描述网页2.Html的作用?Web浏览器的作用是读取html文档,并以网页的形式显示它们。

浏览器不会显示html标签,而是使用标签来解释页面上的内容.简单说,html就是用于展示信息的。

3.Html书写规范a)Html标签HTML 标记标签通常被称为HTML 标签(HTML tag)。

●HTML 标签是由尖括号包围的关键词,比如<html>●HTML 标签通常是成对出现的,比如<b> 和</b>●标签对中的第一个标签是开始标签,第二个标签是结束标签●绝大多数的标签都具有属性,建议属性值使用引号引起。

例如:<bodytext=”red”>●大多数标签是可以嵌套的b)Html创建Html文件可以直接使用文本编辑器来创建,保存时,后缀名为html或htm整个文件是在<html>与</html>标签之间在<html>标签间有<head>与<body>子标签。

例如:c)空的html标签●没有内容的HTML 元素被称为空元素。

(完整版)HTML复习的知识点

(完整版)HTML复习的知识点

第1章:网页的分类与扩展名、WEB标准(1)网页分类:静态网页、动态(2)扩展名:Html网页: .html, .htmCSS: .cssJavascript: .js(3)web标准结构标准: html表现标准:css层叠样式表行为标准:javaScript第2章:常见的HTML标记、常用的图片格式1、HTML标记<html>< /html>:创建一个HTML文档,也称根标记。

<head>< /head>:设置文档标题和其它在网页中不显示的信息,也成为头部标记。

<title>< /title>:设置文档的标题。

<body>< /body>:用于定义HTML文档所要显示的内容,也称主题标记。

<hr />:用来定义一条水平线。

<h1>< /h1>~<h6>< /h6>:最大的标题到最小的标题。

使用align属性加以下:left:设置标题文字左对齐;center:设置标题文字居中对齐;right:设置标题文字右对齐;<p></p>:创建一个段落。

<p align="">:将段落按左、中、右对齐。

使用align属性加以下:left:设置标题文字左对齐;center:设置标题文字居中对齐;right:设置标题文字右对齐;<br />:换行,插入换行符。

<meta />:定义页面元信息标记。

<font ></font>:规定文本的字体、字体尺寸、字体颜色。

font-family:字体font-weight:字体粗细font-variant:变体font-style:字体风格font:综合设置字体样式fac:设置文字的字体size:设置文字的大小color:设置文字的颜色CSS文本外观属性:letter-spacing字间距word-spacing单词间距line-height行间距text-align:left左对齐,height右对齐,center居中对齐<img src=”url” />src:图像的路径alt:图像不能显示时的替换文本title:鼠标悬停时显示的内容width:设置图像的宽度heighr:设置图像的高度border:设置图像边框的高度vspace:设置图像顶部和底部的空白(垂直边距)hspace:设置图像左侧和右侧的空白(水平边距)用align属性:left:将图像对齐到左边right:将图像对齐到右边top:将图像的顶端和文本的第一行文字对齐,其他文字居于图像下方middle:将图像的水平中线和文本的第一行文字对齐,其他文字居于图像下方bottom:将图像的底部和文本的第一行文字对齐,其他文字居于图像下方<div ></div>区域容器标记<span></span> 行内容器标记<ul type=>定义项目符号disc:●circle:○square:■<li></li>列表项,结合<ul> 无序<ol>有序使用<ul></ul>无序列表<ol></ol>有序列表<link href=”url”rel=stylesheet type=”text/css” />引入CSS样式表文件<a href=”跳转目标”><form>创建一个表单<input type=/>text:单行文本输入框password:密码输入框radio:单选按钮checkbox:复选框button:普通按钮submit:提交按钮reset:重置按钮image:图像形式的提交按钮hidden:隐藏域file:文件域<textarea cols=”每行中的字符数”rows=”显示的行数”></textarea><select><option></option></select>下拉菜单(2)常用的图片格式:JEPG,GIF,PNG第3章:CSS样式规则、引入CSS样式、CSS基础选择器、定义CSS样式,CSS 字体样式属性、CSS文本外观样式属性、复合选择器的定义1.Css样式规则选择器{属性1:属性1值;属性2:属性2值;}例:P{ Color : red ; Border : }或h2{ font-size : 20px ; color : red ; }2、引入css样式方式(1)行内式<标记名style=” 属性1:属性1值; 属性2:属性2值”>内容</标记名>例:<h2 style = “ font-size : 20px ; color : red ; ”></h2>(2)内嵌式例:<style type=”text/css”></style>选择器{属性1:属性1值;属性2:属性2值;}(3)链入式<link href=”cssURL” rel= “stylesheet” type=”text/css”/>3、css基础选择器(1)标记选择器p{ }(2)类选择器.类名(3)id选择器#id(4)通配符选择器*{}4、复合选择器(书本P66)(1)标签指定式选择器p.speacial{ } 书本demo3-8(2)后代选择器p strong{ } 书本demo3-9(3)并集选择器p,div{ } 书本demo3-105、CSS字体属性font-family:字体font-variant:变体font-style:字体风格italic:斜体font-weight:字体粗细font:综合设置字体样式6、外观属性color:text_decoration:文本装饰underline下划线overline上划线line-through删除线text-align:水平对齐方式left左对齐right右对齐center居中对齐text-indent:首行缩进2em:2字符line-height:行间距第4章CSS盒子模型:认识盒子、边框属性内外边距属性、设置背景图像、行内元素及块元素1、认识盒子(书本p79图4-5)基础属性:width:宽height:高padding内边距四个方向值:上,右,下,左;top,right,left,bottom两个值时为上下,左右;一个值时为四边;三个值时为上,左右,下;margin: 外边距border:边框2、边框属性(1)border-style:border-width:border-color:综合:border: border-width边框宽度border-style边框样式border-color边框颜色;border:1px solid red; 四个方向都是相同的设置(2)某个方向设置border-top-style:上边框样式border-top -width:上边框宽度border-top -color:上边框颜色综合:border-top border-top-width borde-top-style border-top-color;border-top:1px solid red; 只是对上边框的设置3、背景属性(书本P95页)background-color:背景颜色background-image:背景图像背景图像平铺:background-repeat::repeat-x只沿水平方向平铺repeat-y只沿垂直方向平铺no-repeat不平铺background-position:水平垂直Left/center/right top/center/bottom20px/-10px 30px;20px center综合:4.行内元素及块元素(1)行元素:P103 <span> <img/> <a/> <input> <select>块元素:P102 <h1> <p> <div> <ul> <li> <form> (2)元素转换display:Inline: 行内元素Block:块元素Inline-block:行内块元素None:隐藏第5章列表与超链接超链接标记<a> 链接的伪类1.超链接标记<a />href:用于链接目标的url地址target: _self在原窗口打开_blank在新窗口打开border=”0”去掉图像边框P1272.链接的伪类a:link{CSS样式规则;}未访问时超链接的状态a:visited{CSS样式规则;}访问后超链接的状态a:hover{CSS样式规则;}鼠标经过、悬停时超链接的状态a:acrtive{CSS样式规则;}鼠标单击不动时超链接的状态第6章HTML表单认识表单、创建表单、input控件1、认识表单P138<input/>表单输入控件<textarea></textarea>定义多行文本框<select></select>定义一个下拉列表size指定下拉菜单的可见选项数<option>用selected属性时,当前项就为默认选中项action用于指定接收并处理表单数据的url地址method用于设置表单数据的提交方式,其取值为get和post2、创建表单<form action=”url地址” method=”提交方式” name=”表单名称” > </form> 3.input控制P143表6-2第7章浮动与定位:float属性、clear属性元素的定位属性、利用盒子模型与浮动进行页面布局1.float:left左浮动right右浮动none不浮动2.clear:清除当前元素的浮动对其后元素影响。

HTML知识点汇总

HTML知识点汇总

HTML知识点汇总第一章HTML基础知识1、HTML简介HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息。

它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。

2、HTML的标记组成HTML用于描述功能的符号称为“标记”。

标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。

如<body></body>、<p></p>等1)单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫单标记。

XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。

常见的单标记如<br />、<hr />等。

2)双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线,语法形如:<标记>内容</标记>。

例如:<p>段落</p>3)XHTML要求所有标记均为小写,且所有标记属性必须添加双引号4)标记对不能交叉3、HTML基本结构<html><head><title>网页标题</title></head><body><!--下面是网页的正文--></body></html>1)<title>标记对不能放在<body>标记对中,同理,其它表示内容的标记也不能放在<head>标记对中2)<html></html>表示HTML语言,在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。

(完整版)HTML爱淘课学习笔记

(完整版)HTML爱淘课学习笔记

爱淘课学习笔记1、html头部标记(1) 网页标题标记〈title〉</title〉;(2)meta标记meta叫做元信息标记,这个元素提供的信息不显示在页面中,一般用来定义页面的关键字、页面说明、刷新等。

meta标记不需要结束标记,一个尖括号内就是一个meta内容,在一个html页面中可以有多个meta。

meta元素的属性有两个:分别是name和http—equiv.name-—设置网页的关键字和描述信息等;设置关键字:如:<meta name=”keywords” content=”百度贴吧" >设置描述信息,如:<meta name=”description”content="这是描述信息” /〉其他的,还可以设置网页作者,如:〈meta name=”author” content=”周杰伦" / 〉http-equiv——定义网页语言的属性,当访客浏览你的网页时,浏览器会自动识别并设置网页中的语言;设置语言:<metahttp—equiv=”content-type”content=”text/html”charset=”GB2312” />(前半部分需要记忆,只需要更改charset的属性值就可以了,可以更改为中文、日文、英文等)。

设置网页在指定时间自动跳转:〈meta http—equiv=”refresh”content="5;url=http://www。

” / 〉即网页打开5秒钟之后,自动跳转到百度页面上。

2、body标签(1)body标签的属性①设置网页背景色或网页背景图body标签中用bgcolor来定义网页的背景颜色,属性值为16进制的颜色值。

直接写在body标签的尖括号里即可。

如:<body bgcolor="#FF00FF”>body标签中用background属性来定义网页的背景图,如:<body background=”1.jpg”〉(建议图片地址使用相对路径)②设置文字的颜色—-通过body标签的text属性如:<body text="#FFFF00”>我们可爱的学校〈/body〉预览网页,可发现字体的变化。

笔记一:Login.html

笔记一:Login.html

笔记⼀:Login.html作为⼀个初学者,在学习PHP中遇到不少的问题,现在开始将我们学习的所有页⾯进⾏剖解和疑问解答,⾸先是Login.html 这个页⾯全部都是静态HTML语⾔,所以没有太多的讲的,但是最重要的有⼀点,就是要注意将HTML页⾯填写的数据传到loginCheck.php中进⾏数据的处理时,需要对form标签进⾏认真的编写:<form name="f2" action="LoginCheck.php" method="post">..账号:<input type=”text” name=”name” value=””>密码:<input type=”password” name=”pw” value=””>..<.form>此处的3个标签是⼀定不能少的,第⼀个是名字,要先对它进⾏命名,然后action就是将这个表单⾥的数据提交给谁来处理,当然这⾥是提交给LoginCheck.php去处理,第三个就是method,翻译过来就是⽅法、⽅式,意思就是说将这个表单⾥的数据通过什么⽅式传送到LoginCheck.php⽹页⾥⾯去。

因为是做PHP的疑问笔记,就不对HTML进⾏解释了,这⾥的input标签中的type是指类型:包括button、checkbox、file、hidden、image、password、radio、reset、submit、text这⾥只⽤到text和password;name是指这个input的名字,value就是⽂本框中的值。

Login页⾯的笔记就到这⾥了。

实战开发时完整的代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title>login</title><meta charset="utf-8"><link href="styles/login.css" rel="stylesheet" type="text/css"></head><body><form name="f2" action="LoginCheck.php" method="post"><div id="top"><img id="logo" src="images/logo.jpg"><span id="toptext"><a>设为⾸页</a>|<a>加⼊收藏</a>|<a>关于我们</a>|<a>联系我们</a></span></div><div id="main"><div id="pic"><div id="loginBox"><b class="alphaBg">这个层⽤来显⽰背景</b><div class="loginItem"><div class="title"><p>管理员⼊⼝</p></div><div class="content"><div class="item">登录名:<br><input type="text" name="uid" class="input"></div><div class="item">密码:<br><input type="password" name="pwd" class="input"></div><div class="item"><br><input type="image" src="images/btnLogin.png"></div></div></div></div><div id="btnChange"></div></div></div><div id="bottom"><a>关于我们</a>|<a>官⽅博客</a>|<a>客户服务</a>|<a>隐私政策</a>|<a>今时代公司版权所有 © 2014-2015<a> </div></form></body></html>。

HTML5学习笔记(Color)

HTML5学习笔记(Color)

HTML学习(颜色名)HTML 文档类型HTML设定字符集:meta http-equiv=Content-TypeHTML字符集用于说明HTML页面的内容所使用的文字和语言。

HTML语言用于告诉浏览器该以什么内码、什么语言来显示网页。

错误的设置网页的字符集会导致页面出现乱码的现象。

语法:<meta http-equiv="Content-Type" content="text/html"; charset="xxx">说明:http-equiv传送HTTP通信协议的标头。

content定义网页使用的内码,其中charset定义该网页内码所使用的语言类别。

示例:<meta http-equiv="Content-Type" content="text/html"; charset="gb2312">该示例表示该网页所使用的字符集是GB2312简体中文。

以下是部分HTML字符集代码列表:gb2312 简体中文big5 繁体中文EUC_KR 韩语Shift_JIS 或EUC_JP 日语KOI8-R / Windows-1251 俄语iso-8859-1 西欧语系(荷兰语,英语,法语,德语,意大利语,挪威语,葡萄牙语,瑞士语.等十八种语言)iso-8859-2 中欧语系iso-8859-5 斯拉夫语系(保加利亚语,Byelorussian语,马其顿语,俄语,塞尔维亚语,乌克兰语等)uft-8、unicode多语言国内基本上用的是gb2312 简体中文、big5 繁体中文、uft-8多语言。

<meta charset="UTF-8"> <!-- for HTML5 --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />ZC: 注意:源码文件(?.html 等),需要保存为UTF-8编码格式的文件HTML 代码:<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ]2. $("A>B") 查找A元素下面的直接子节点例子:匹配表单中所有的子级input元素。

html做笔记

html做笔记

html做笔记如何用HTML做高效的笔记HTML是一种用于创建网页的标记语言,它可以让我们用简单的标签来定义网页的结构和样式,也可以让我们用超链接来连接不同的网页或资源。

HTML不仅可以用于制作网站,也可以用于做笔记。

用HTML做笔记有以下几个优点:- HTML笔记可以在任何浏览器中打开,不需要安装特定的软件或插件,也不需要担心格式的兼容性和转换问题。

- HTML笔记可以利用超链接来组织和管理笔记,可以实现跨文件、跨网页、跨平台的链接,也可以实现本页的锚点链接,方便快速跳转和查找。

- HTML笔记可以利用CSS和JavaScript来美化和增强笔记,可以自定义笔记的颜色、字体、布局、动画等,也可以添加一些交互和功能,如搜索、排序、筛选、折叠等。

那么,如何用HTML做高效的笔记呢?以下是一些基本的步骤和技巧:1. 准备工具。

要用HTML做笔记,我们需要一个文本编辑器和一个浏览器。

文本编辑器可以用任何能够编辑纯文本的软件,如记事本、VSCode、Sublime Text等,浏览器可以用任何能够解析HTML 的软件,如Chrome、Firefox、Edge等。

另外,我们还可以安装一些扩展或插件,来帮助我们更方便地编辑和查看HTML,如Emmet、Live Server、Highlighter等。

2. 创建文件。

要用HTML做笔记,我们需要创建一个以.html 为后缀的文件,这个文件就是我们的笔记文件。

我们可以给这个文件起一个有意义的名字,如html_note.html,然后用文本编辑器打开这个文件,开始编辑我们的笔记内容。

3. 编写结构。

要用HTML做笔记,我们需要遵循HTML的基本语法,用一对一对的标签来定义我们的笔记内容。

一个最简单的HTML文件的结构如下:html<html><head><title>我的HTML笔记</title></head><body><!-- 这里是我的笔记内容 --></body></html>4. 编写样式。

HTML知识点

HTML知识点

W3shool一1、WWW的全文为World Wide Web,译为全球信息网,简称3w或者Web,中文名称为万维网。

www是一种分布式客户服务系统www制定一套标准①超文本传输协议(HTTP)②统一的资源定位(URL)2、在Internet上,通常使用的发布语言是HTML(HyperText Markup Language)。

二单独标签标签与标签之间是可以互相嵌套的。

在源代码中不区分大小写。

代码中以<!--开始和以-->结束的代码为注释代码,便于网页阅读1、Body中的属性有:页面文字颜色text背景颜色bgcolor背景图片background上边距属性topmargin左边距属性leftmargin2、换行控制标记<br/>3、分段控制标记<p>段落文字</p>或<p>段落文字<p>有属性align,可选right,left(默认),center。

4、预格式化标记<pre>段落文字</pre>5、缩进标记<blockquote>段落文字</blockquote>6、居中对齐<center>居中文字</center>7、插入水平线<hr><hr>的属性有align,size,width,color和noshade(是否有阴影)。

,center。

10、字体标记标签<font>标签所限制的文字</font><font>的属性有face,size,color。

Face设定文字字体,其属性为字体名称。

Size设定文字大小,取值1-7,默认值3。

Color设定文字颜色,可以用#nnnnnn,也可以采用颜色名称。

11、基本字号标记:设置基本的文字属性<basefont>,单个标记对于字号,<font size=+n>…</font>或<font size=-n>…</font>将受到这个基本字号的影响。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

HTML笔记
3.9
<link>只连接css文件
ASCII 16进制表示
euc-kr 韩文
<meta name属性用于搜索引擎的搜索>
<p>段落效果不能叠加
<br>换行效果可以叠加
<dody>属性bgproperties=FIXED 画面固定,文字滚动
属性margin 页面的余白leftmargin左右都余白
绝对路径\
相对路径/
../ 上一级文件夹 ./ 当前文件夹
锚点:<a name="x"></a> <a href="#x"></a>
跳转到另一个页面的某个地方:<a href="URL#name"> ... </a> <a name="name"> ... </a> <li>圆点标记
<hr>标尺线
<h1></h1> <h2></h2> <h6></h6> 标题1、2、3 属性align=center 居中效果
开一个新的(浏览器)窗口在<a>标记中加入属性target="页面(窗口)名称"
<image src="URL"> 插入图片
3.10
<hr size="高度" width="宽度" noshade align=布局color="">
<div>层
<ul></ul>无序列表中间加<li>圆点标记可以嵌套-
<ol></ol>有序列表可嵌套
3.11
<img src="URL"> 图像aling=right/left 这2个属性只操作图像本身。

align=top/center/bottom/middle 这4个属性操作图像旁的文字。

<br clear=all>保留指定的一行在图片旁边,其余的换到新的一行。

<img vspace纵向hspace横向border边框width图像宽height图像高>
客户端图象映射图:
<img src="url" usemap="#name">
<map name="name"> <area shape="形状" href="url" coords="坐标"> </map>
表格<table></table> border
一行<tr></tr>
表头<th></th> css不能改<th> 禁用!
单元格<td></td>
合并单元格rowspan纵向colspan横向
3.12
<table cellspacing表元间隙cellpadding表元内部空白设置bordercolor表格边框颜色
align=left/center/>
<tr/td align=left/center/right表格文字的布局valign=middle/top/bottom/baseline垂直布局>
<caption标题(不建议使用)align valign>
<table/td/tr bgcolor背景颜色background背景图片(不用于<tr>)>
表格边框色彩的亮度控制<table bordercolorlight=# bordercolordark=#>
按行分组
<thead> ... </thead> <tbody> ... </tbody> <tfoot> ... </tfoot>
按列分组
<colgroup align=left/right/center>
列的属性控制
<col align=left/right/center span=#>
<table frame框架=box/above上/below下/hside上下/vside左右/lhs左/rhs右/void不显rules分隔线=group/rows/cols/none>
3.15
<form action="url"(2k大小的限制)method="get/post"> get明文传送,不安全容量小,效率高。

post安全
<input type=text/password/checkbox/radio/image/hidden/submit/reset/button/file>
单选钮,必须有2个以上,否则不能选。

size属性只对text/password有用。

多个radio 只能写一个checked。

相关文档
最新文档