HTML extension入门笔记

合集下载

HTML网页设计基础的知识点

HTML网页设计基础的知识点HTML（Hypertext Markup Language）是一种标记语言，用于创建网页结构和内容。

在网页设计中，了解和掌握HTML的基础知识点是至关重要的。

本文将介绍一些HTML网页设计的基础知识点，帮助你更好地理解和应用HTML。

一、HTML的基本结构一个HTML网页由以下几个主要部分组成：1.<!DOCTYPE> 声明：指定HTML版本2.<html> 标签：指示文档的开始和结束3.<head> 标签：定义文档的元数据，包括标题、字符编码等4.<body> 标签：定义文档的可见内容5.其他标签：用于定义网页结构、样式和元素等二、HTML标签的使用HTML标签用于定义网页的结构和内容。

常见的HTML标签有：1.<h1> - <h6> 标签：定义标题，h1最高级别，h6最低级别2.<p> 标签：定义段落3.<a> 标签：定义超链接，链接到其他网页或内部书签4.<img> 标签：插入图片5.<div> 标签：定义文档中的一个区域或容器6.<span> 标签：定义文档中的一个行内区域或容器7.<ul> 和 <li> 标签：定义无序列表8.<ol> 和 <li> 标签：定义有序列表9.<table>、<tr>、<th> 和 <td> 标签：定义表格和表格的行、表头和单元格10.<form>、<input> 和 <button> 标签：定义表单和输入元素11.<br> 和 <hr> 标签：定义换行和水平线三、HTML属性HTML标签可以具有属性，用于进一步定义元素的行为和样式。

常见的HTML属性有：1.class 属性：为元素指定一个或多个类名，用于定义样式或JavaScript操作2.id 属性：为元素指定唯一的标识符，用于JavaScript操作或CSS 样式3.style 属性：为元素指定内联样式4.src 属性：指定图像或嵌入式内容的URL5.href 属性：指定链接的URL6.target 属性：指定链接打开的目标窗口或框架7.value 属性：定义输入元素的默认值8.type 属性：定义输入元素的类型（如文本、按钮、复选框等）四、CSS样式和HTMLCSS（Cascading Style Sheets）是用于描述网页样式和布局的样式表语言。

html学习笔记

HTML学习1.HTML 文件结构：<html>...</html><head>...</head><body>...</body>2. 基本组成部分——HTML元素属性：HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。

元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

<html><head><title>my first page</title></head><body><p align="center">This is my first homepage!</p></body></html>3. <head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

4. <meta>元素下面可以插入很多很有用的元素属性。

介绍四种–<meta name="keywords" content="study,computer">用来标记搜索引擎在搜索你的页面时所取出的关键词。

–<meta name="author" content=“wutao">用来标记文档的作者。

–<meta http-equiv=“Content-Type”content=“text/html;charset=gb2312”>用来标记你的页面的解码方式。

–<meta http-equiv=“refresh” content=“5;URL=”>用来自动刷新网页5. <body>元素表明是HTML文档的主体部分。

html入门课堂笔记

type--类型
text--文本
3.密码框
<input type="password" name="名称" size="宽度"/>
4.多行文本框
<textarea rows="行数" cols="宽度">...</textarea>
5.单选按钮
<input type="radio" name="名称" value="值" checked="checked"/>
<font size="字号" face="字体" color="颜色">...</font>
七。
1.段落
<p align="left/center/right">....</p>
<p 对齐 ="左 /居中/ 右">
2.换行
<br />
没有结束标签的标记成为空标签 ,空标记的结束方法是<标记 />
一。
HTML指的是超文本的标记语言
二。XHTML
XHTML指的是扩展的超文本标记语言 8.0-----2004
三。XML
XML指的是扩展的标记语言
四。 HTML的结构代码大部分是成对出现的
<html>
<head>
<title>标题</title> head是html的头部信息，它里头存放的是浏览器不可见的 </head> 信息，如title(标题)，style(样式)，meta等

HTML笔记（适合新手入门）

HTML笔记（适合新⼿⼊门）HTMLWeb 标准构成Web标准不是某⼀个标准，⽽是由W3C和其他标准化组织制定的⼀系列标准的集合。

主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。

结构标准：结构⽤于对⽹页元素进⾏整理和分类，咱们主要学的是HTML。

最重要表现标准：表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS。

⾏为标准：⾏为是指⽹页模型的定义及交互的编写，咱们主要学的是 JavascriptHTML标签分类在HTML页⾯中，带有“< >”符号的元素被称为HTML标签。

所谓标签就是放在“< >” 标签符中表⽰某个功能的编码命令，也称为HTML标签或HTML元素。

1.双标签<标签名> 内容 </标签名>该语法中“<标签名>”表⽰该标签的作⽤开始，⼀般称为“开始标签（start tag）”，“</标签名>” 表⽰该标签的作⽤结束，⼀般称为“结束标签（end tag）”。

和开始标签相⽐，结束标签只是在前⾯加了⼀个关闭符“/”。

⽐如 <body>我是⽂字 </body>2.单标签<标签名 />单标签也称空标签，是指⽤⼀个标签符号即可完整地描述某个功能的标签。

⽐如 <br />HTML标签关系标签的相互关系就分为两种：1.嵌套关系<head> <title> </title> </head>2.并列关系<head></head><body></body>⽂档类型<!DOCTYPE><!DOCTYPE html>这句话就是告诉我们使⽤哪个html版本？我们使⽤的是 html 5 的版本。

html有很多版本。

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整理笔记By:小A（我在这里虽然是把HTML标签做个简单的介绍，我想我写的很详细，即使不会，没接触过HTML的人也能够看的懂，也能够学会，还有...第一次写没有大纲，见谅！最后送给大家一句话：多抽出一分钟时间来学习,让你的生命更加精彩!）1.什么是HTML？HTML (Hyper Text Markup language)超文本标记语言，用于创建网页文档。

使用HTML标记（标签）和元素创建扩展名html 、htm2.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>●选项清单可用type参数指定项目符号。

HTML自学笔记

HTML自学笔记笔记人：田克传一、深入体验JavaScript网页编程1、HTML语言基础<body>标签的属性示例Text属性：用于设定整个网页中的文字颜色。

Link属性：用于设定一般超级链接文本的显示颜色。

Alink属性：用于设定鼠标移动到超链接上时，超链接文本的显示颜色。

Vlink属性：用于设定访问过的超链接文本的显示颜色。

Background属性：用于设定背景墙纸所用的图像文件，可以是GIF或JPEG文件的绝对或相对路径。

Bgcolor属性：用于设定背景颜色，当已设定背景墙纸时，这个属性会失去作用，除非墙纸具有透明部分。

Leftmargin属性：用于设定网页显示画面与浏览器窗口左边沿的间隙，单位为像素。

Topmargin属性：用于设定网页显示画面与浏览器窗口上边沿的间隙，单位为像素。

Class、name、id、style等属性。

注释符与特殊字符示例用<!—注释→这种格式加入注释。

<p></p> 段落标签。

（具有Align属性：center为居中，left为左对齐，right为右对齐。

） <br> 换行。

<nobr></nobr> 防止浏览器自动换行。

<blockquote></blockquote> 浏览器按缩进效果显示。

<center></center> 水平居中显示。

<marquee></marquee> 通知浏览器移动显示。

（具有属性behavior=“slide”或“scroll”或“alternate”，direction=“up”或“down”或“left”或“right”）<dl></dl> 创建普通列表。

<dt></dt> 创建列表上层的显示条目。

<dd></dd> 创建列表下层的显示条目。

HTML学习笔记

HTML学习笔记--HTML的语法详解
一.什么是HTML标记语言？
HTML是表示网页信息的符号标记语言。

二.HTML的标记和他的属性
1.HTML文档的保存格式：.html、.htm、.xhtml
2.标记和被标记的内容构建出HTML文档。

格式：<标记>内容</标记>
3.标记的属性（用来控制图像、文本等如何的显示）格式：<标记属性1=属性值属性2=属性值...>内容</标记>
三.语法不区分字母大小写
<HTML>、<Html>、<html>都是定义相同的标记，但是在编写网页的使用尽量使用小写。

四.文档注释
注释一段内容时使用""结束。

例如：

以上这篇HTML学习笔记--HTML的语法详解就是小编分享给大家的全部内容了，希望能给大家一个参考。

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

入门笔记（耀轩之补充版）AE是从CC2014版之后才开始支持这种新式AE脚本----HTML extensions脚本的，但是其他Adobe产品，比如AI、PS等产品在CS6的时期就开始支持了。

不管怎么说，AE开始支持这个HTML extensions脚本这件事，的确是可喜可贺的。

下面先看一下这个HTML extensions脚本的文件构造，如下图所示：下面是官方SDK里的截图：从上面的截图可以知道，HTML extensions脚本实质上就是一个文件夹。

设置HTML extensions的开发环境这个 HTML extensions脚本要想在AE里面运行呢，需要配置一个运行环境。

下面是官方提供的设置信息根据上面的截图，我们可以知道，配置这个开发环境需要做两件事：第一：将HTML extensions脚本的文件夹放置在指定的位置上，在不同的SDK版本里放置的位置略微不同（看上面的截图应该就知道了吧）其实这个 HTML extensions脚本的文件夹有三个放置路径，我将它归纳如下：1.在“..\Support Files\”目录下2.在“系统盘符:\Program Files(x86)\Common Files\Adobe\CEP\extensions\”3.在“系统盘符:\<username>\AppData\Roaming\Adobe\CEP\extensions\”第二：在注册表上添加一些注册信息。

做法如下：将下面的内容复制到一个.reg文件里，拷贝之后，执行这个.reg文件即可。

注意，Adobe CC 2014版本对应 CSXS.5，而Adobe CC 2013版本对应CSXS.4。

Windows Registry Editor Version 5.00[HKEY_CURRENT_USER\Software\Adobe\CSXS.5]"PlayerDebugMode"="1""LogLevel"="1"下面看看 HTML extensions脚本在AE里是如何调用的这个是SDK里的信息：下面是我调用HTML extensions脚本运行的截图再往下是使用截图其实， HTML extensions脚本就是由网页和一些Adobe提供的配置文件（比如manifest.xml、CSInterface-4.0.0.js）构成的。

这些网页绝大部分可以在浏览器里面运行，下面是在浏览器里运行的效果一个网页在浏览器上的运行和在Adobe产品（这里是以AE CC 2014举例）里作为 HTML extensions脚本的运行效果做一个直接比较，如下图下面就从官方的一个简单样例工程里分析，如何创建这么一个HTML extensions脚本吧。

这个是官方SDK里的样例工程---- Barebones，附件：Barebones.zip它文件夹里的文件分布如下图：以下是index.html文件里的内容<!doctype html><html><body><button id="button1">Button 1</button>这个ID资源非常重要，根据SDK里的解释，主程序会通过这个ID资源来判断这个HTML extensions脚本是不是同一个脚本，会将所有ID资源不同的HTML extensions脚本给罗列到主程序的“窗口->扩展->扩展列表”中，换言之，如果有几个HTML extensions脚本的ID接下来就是这个HTML extensions的版本号的设置了上面Host标签中名为Name的属性的值都是Adobe产品的缩写名，下图是SDK里给出的信息至于Host标签中名为Version的属性的值都是Adobe产品的版本号的范围，具体信息还得看SDK信息上面大致的意思是，如果是这种形式的话----Version="13.0"，那么就表示这个主程序的版本号必须要大于或等于13.0才可以使用在这个HTML extensions脚本如果是Version="[13.0,14.9]"，那么就表示，该HTML extensions脚本能够被版本号在13.0至14.0的范围内（包含这两个边界值）的主程序所支持如果是Version="(13.0,14.9)"，那么就表示，该HTML extensions脚本能够被版本号在13.0至14.0的范围内（不包含这两个边界值）的主程序所支持说白了，就是设定主程序的版本号限制，和数学里变量的定义域设置差不多。

对于这个标签，在接口库(CSInterface.js)里提供了下图这个解析函数。

看到这个versionRange应该就明白了吧。

下面是设置这个HTML extensions脚本的区域语言支持列表<LocaleList><Locale Code="All"/></LocaleList>其实，这个LocaleList标签的作用是用来设置一个系统语言限制的，用来指定该HTML extensions脚本能够在那些区域语言中使用，通常用“All”，表示该HTML extensions脚本不受任何区域语言限制。

下面是官方SDK里的解释。

下面表面上指的是申请该HTML extensions脚本的运行时间，实质上是让这个manifest.xml和注册表上的信息匹配<RequiredRuntimeList><RequiredRuntime Name="CSXS"Version="5.0"/></RequiredRuntimeList>这个是SDK里的使用示例，大致意义是，如果这个使用的是Adobe CC 2013版，那么就这样设置---- Version="4.0"；如果这个使用的是Adobe CC 2014版，那么就这样设置----Version="5.0"。

如果想自定义网页的名称和放置路径，就修改MainPath标签的文本即可。

本人不建议修改这个网页的放置路径<MainPath>./index.html</MainPath>（改为<MainPath>./MyScript.html</MainPath>）在官方的样例工程中，提供了一个MainScript.jsx，目的是将HTML extensions脚本里与AE实现交互的代码从.html文件里提取出来，便于编写者修改与维护。

<ScriptPath>./MainScript.jsx</ScriptPath>注意，这个MainScript.jsx一般和jsx文件夹以及ext.js一同存在，这个是由该脚本文件里的内容所决定。

另外这个ScriptPath标签不是必须的，但是如果该标签存在了，那么必须在相应的位置上存在这个MainScript.jsx文件（该脚本的名称和路径必须与该标签上的文本所匹配），还有相应的设置，因为这个是配套的。

如下图所示：//下面是MainScript.jsx里的内容，主要是搜索指定文件夹里的所有后缀名为.jsx的脚本文件，并将其执行$._ext = {//Evaluate a file and catch the exception.evalFile : function(path) {try {$.evalFile(path);} catch (e) {alert("Exception:" + e);}},// Evaluate all the files in the given folderevalFiles: function(jsxFolderPath) {var folder = new Folder(jsxFolderPath);if (folder.exists) {var jsxFiles = folder.getFiles("*.jsx");for (var i = 0; i < jsxFiles.length; i++) {var jsxFile = jsxFiles[i];$._ext.evalFile(jsxFile);}}}};捕获jsx文件夹路径的函数在ext.js中定义，如下图所示：当然，在.html文件里还是要做一些处理的，如下图所示：这个onLoaded()函数的定义也在ext.js里，如下图所示：Simple script.zip数都在这个类中，正如它的名称----CSInterface（译为交互的类，唉，我的渣渣英语））扯得有点远了，言归正传，上面那个Type标签里的三个可选参数有Panel(面板)、Modeless(非模态窗口)和ModalDialog(模态窗口界面效果如下图所示：官方SDK里的依据，如下图所示：至于下方那些Size、MaxSize和MinSize标签下的子标签文本的解析函数都放在接口库里，主要就是设定该HTML extensions脚本里的默认尺寸和尺寸范围。

但是这些参数只能对Type为Modeless(非模态窗口)和ModalDialog(模态窗口)的有效，对Type为Panel(面板)的HTML extensions脚本无效。

其实，关于这个manifest.xml文件，还有不少标签没有提及，但是大部分HTML extensions脚本的manifest.xml都仅有这些内容而已，还有一些标签仅仅在SDK里提及，但是由于不是必须的，所以很少用到，如果有兴趣的话，建议将官方SDK全部仔细阅读一片。

另外，对于所有包含了List字符串的标签，其实都可以多个列举出来的，而且在一个HTML extensions脚本里能够包含多个子HTMLl extensions脚本哦。

这个是官方样例工程：CEP_HTML_Test_Extension.zip如下图所示：下面就分析一下ext.js文件吧。

其实，上面已经讲解了不少关于ext.js文件里的函数了，下面只是说说，为什么我们看到的官方样例工程，有的HTML extensions脚本运行时背景颜色是白色，有些则是和主程序一致？对于这种情况，其实是得益于ext.js里onAppThemeColorChanged(event)函数，当我们往往运行HTML extensions脚本的时候，会出现界面背景颜色先是白色，然后变成才和主程序一致，这个现象中，该脚本在运行时，初始化界面的时候调用了这个onAppThemeColorChanged()函数来刷新界面，但是由于HTML extensions脚本的执行效率的确是低了一点，所以让我们看到了这个刷新过程。