达内HTML资料.docx
《达内HTML资料.docx》由会员分享，可在线阅读，更多相关《达内HTML资料.docx（26页珍藏版）》请在冰豆网上搜索。
达内HTML资料
HTML
HyperTextMakeupLaguage
超文本标记语言
①HTML可以在编辑上设置数据的显示信息,但是txt文本文件不一样
②（文字+图片+视频+链接...）
③浏览器根据标示显示语言
④专注于web上传递信息
⑤是写给浏览器的语言
⑥不是汇编语言
⑦是用来设计网页的标记语言
⑧html是一个扩展性非常强的语言，可以搭载cssjs等脚本语言功能实现功能
HTTP是网络传输协议
HTML是网络传输的内容
HTMLisametadocument
Meta元数据-->
①在txt文本上显示数据,但是在HTML上显示定义了字体的颜色,但不是保存在文档数据,而是描述真实数据的显示方式的元数据
HTMListransferredbyHTTPprotocol
Whatis"超"?
⑴标记（标签或元素的形式）
①<元素名>内容
文字
②<元素名/>
③<元素名>
㈠位于尖括号内可以有属性值
属性值必须用""或者''不写也可以解析,但是不推荐
又开始必须有结束首尾一致
不区分大小写（推荐用小写）
标签不能嵌套
Web浏览器
主要功能：
①代理访问者提交请求
②作为HTML解释器和内嵌脚本程序执行器（html文档只是数据+元数据的代码片段，因为web浏览器可以于解释HTML文档，所以必须依靠浏览器才可以代理用户提交数据）
③用图形化的方式显示HTML文档（针对于网页图形界面的绘制,浏览器解析html文档中所有的标示，从而达到图形界面绘制的实现）
封闭性标示和非封闭性标示的区别是什么?
①非封闭性表示必须成对出现
属性的声明必须位于开始标记里
一个标示的属性可能不止一个，多个属性之间用空格隔开
②不需要结束标记
不能包含内容
可以设置属性
元素?
被<>尖括号之间的部分都称作元素
属性?
用来修饰元素，每个属性都有值，属性放在标示中
1.
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
为了保证兼容性，一般使用过渡性
常用标签
头部
标题栏文字将显示在浏览器标题栏
:
用于设置一些头信息
元素
元素用于定义全局信息
所有其他头元素的容器
紧跟在起始标签之后
可包含
Title
Meta
Script
Style
Link
等
头元素
</p><p>用于定义文档标题</p><p>标题元素的内容出现在浏览器顶部</p><p>没有属性</p><p>必须出现在<head>元素中</p><p>一个文档只能有一个标题元素中</p><p>头元素<meta></p><p>用于定义网页的基本信息空标记</p><p>段落元素</p><p><p>提供了结构化的文本的一种方式</p><p><p>元素中的文本会用单独的段落显示</p><p>与前后的文本都换行分开</p><p>添加一段额外的垂直空白距离，作为段落间距</p><p>常用属性:</p><p>align</p><p>换行元素<br></p><p>手动换行</p><p>分区元素<span>和<div></p><p>分区元素用于元素分组，常用于页面布局</p><p>块分区元素:</p><p><div></div></p><p>行内分区元素:</p><p><span></span></p><p>--设置同一行文字内的不同格式</p><p>行内元素和块级元素</p><p>块级元素</p><p>默认情况下，块级元素会独占一行，即元素前后都会自动换行</p><p><p><div><hn></p><p>行级元素</p><p>出现在句子中<span><a></p><p> </p><p>"htttp-equiv"指明下面要设置的属性</p><p>"content"指明该属性所要设置的内容</p><p><metahttp-equiv="refresh"content="3;url="></p><p>在3秒钟之后要刷新当前页面，刷新之后指向的网址</p><p>如果对refresh属性不填充任何内容信息的话，页面每隔三秒钟（不跳转）刷新一次</p><p><metahttp-equiv="content-type"content="text/htmlcharset=gb2312"></p><p>Content-type是发送消息头告知浏览器解释当前页面编辑的格式</p><p><metaname="keywords"content="beauty"></p><p>Keywords是专门写给浏览器看的设置关键字以及关键字的内容今后如果在浏览器上打上beauty就会自动搜索设置的跳转的网页</p><p><metaname="description"content="Thepagetoshowthemetas"></p><p>对当前网页的描述</p><p><metahttp-equiv="expires"content="0"></p><p>不要对网页进行缓存</p><p>Expires过期告知浏览器0秒就过期了，也就相当于无法进行缓存</p><p><metahtt[-equiv="prama"content="no-cache"></p><p>不要在我们的代理服务器上进行缓存</p><p><metaname="generator"content="ultraedit"></p><p>指定文件是由什么软件生成的</p><p><metaname="author"content="me"></p><p>指定作者是谁</p><p><metaname="copyright"content="donotuserthisnamewithoutmypermission"></p><p>指定版权声明指定没有我的允许不能使用该网页浏览网页的用户将不能对该网页进行保存到本地</p><p><style>定义Css格式</style></p><p><Scriptlanguage="">用于定义脚本</Script></p><p><hrnoshadecolor="#ff00ff"width="600"size="5"align="left"></p><p>Noshade没有阴影</p><p>Color设置颜色</p><p>Width设置宽度</p><p>Size大小</p><p>Align="left"左对齐</p><p> </p><p>标题字体的大小<h#></p><p>按照标题级别用黑体字显示标题内容</p><p>自动插入空行</p><p><h1>最大</p><p><h6>最小</p><p>字体设置</p><p><fontface=""size=""color="">.....</font></p><p>Face定义字体类型/宋体微软雅黑</p><p>Size1234567</p><p>Color通常可以使用预定义的名字，也可以使用数字</p><p><tt></tt>通常是打字机风格的字体</p><p><cite></cite>通常是引用方式（斜体）</p><p><em></em>强调（通常是斜体加粗）</p><p>通常改变字体用到的是CSS而不是font标签</p><p> </p><p> </p><p><i></i>斜体</p><p><b></b>黑体</p><p><u></u>下划线</p><p><s></s>中划线</p><p><blink></blink>闪烁效果</p><p><sup></sup>上标</p><p><sub></sub>下标</p><p> </p><p>特殊字符</p><p><<</p><p>>></p><p>®注册商标</p><p>&&</p><p> 空格</p><p>©copyright</p><p>™商标TM</p><p>""</p><p> </p><p>文字的布局</p><p>分段落显示</p><p><div></div><span></span>分块显示</p><p><url></url>符号列表</p><p><ol></ol>数字列表</p><p><br>换行</p><p><nobr></nobr>不换行</p><p><pre></pre>保留原有格式</p><p><marquee></marquee>跑马灯效果</p><p><blockquote></blockquote>黑体引用</p><p>其中url必须和li结合在一起使用</p><p><li>type="circle"</li>显示实心圆</p><p><li>type="square"</li>显示空心圆</p><p>如果<br></br>中间的内容足够多了，系统会自动换行，但是如果添加<nobr></nobr>再长的文字也不会换行</p><p> </p><p>对齐</p><p><h1align=“”></p><p><divalign=""></p><p><tablealign=""></p><p><hralign=""></p><p>取值：</p><p>leftrightcentertopmiddlebottom</p><p> </p><p>图片的显示</p><p><imgsrc=""align=""alt=""border=""></p><p>Src图片路径一般使用相对路径</p><p>Alt图片无法显示时显示的文字</p><p>Border边框的宽度</p><p>Align=leftrighttopmiddlebottom</p><p>图文混在一起时，用于对图片的对齐</p><p> </p><p>Bgsound</p><p>是音频标签</p><p>特点:</p><p>不能写入body里,只能写入head,有src属性可以指定属性文件</p><p>针对于flash格式的视频文件，虽然在超文本标记语言有所对应的标签,但是在浏览器上无法显示，因为flash并不是浏览器所要提供的功能.</p><p>在pluginspage元素中，如果给定一个下载插件的链接地址的话，浏览器在没有实现flash功能的前提下，会自动跳转到给定地址，下载插件</p><p><object>标签经常被使用于播放影音文件，比较常用。</p><p>特点:</p><p>通用性好，但是必须和javascript配合使用</p><p> </p><p>总复习</p><p>标记语法：</p><p>-HTML用于描述功能的符号称为"标记"比如<p><h1>等</p><p>-标记在使用时必须使用尖括号括起来，有些标记还必须成对出现</p><p>标记会导致不同的显示效果</p><p>封闭类型标记</p><p>-<标记>内容</标记></p><p>-<标记属性1=“值”属性2=“值”>内容</标记></p><p><h1>这是标题</h1></p><p><ptitile="这里有一个段落">段落1</p></p><p>封闭类型必须成对出现</p><p>如果一个应该被封闭在段落里的没有被封闭，则产生意料不到的错误</p><p>属性的声明必须位于开始标记里</p><p>一个标记可能不只有一个属性，多个属性之间用逗号间隔</p><p> </p><p>非封闭类型标记，也叫做空标记</p><p><br></p><p>不需要结束标记</p><p>不能包含内容</p><p>可以设置属性</p><p> </p><p>属性和元素</p><p>元素</p><p>每一对尖括号包围的部分,如</p><p><body></body>包围的部分就叫做body元素</p><p>属性</p><p>-用来修饰元素</p><p>-每个属性都有值</p><p>-属性都必须放在开始标记中</p><p> </p><p><body></p><p><palign="center">段落</p></p><p></body></p><p>开始标记和结束标记</p><p>Center属性</p><p>整体就叫做body元素</p><p>Html页面</p><p>文件头<head></head></p><p>文档主体部分<body></body></p><p>版本信息---</p><p><head></head>文件头</p><p><body></body>文件主体</p><p>在文档的起始启用版本信息声明指定的版本和风格--</p><p>为了让浏览器清楚文档的版本，类型和风格</p><p><head>用于为页面定义全局信息</p><p><head>里面可以跟所有其他元素的信息</p><p><head>紧跟在起始元素<html>之后</p><p>可包含</p><p>-title</p><p>-meta</p><p>-Script</p><p>-style</p><p>-link等</p><p>头元素-<title>标题元素
用于为文档定义标题
-标题元素的内容出现在浏览器顶部
-没有属性
-必须出现在
元素中
-一个文档只能有一个标题元素
我的第一个HTML页面头元素-
-元数据元素用于定义网页的基本信息
-为空标记
-常用属性:
contenthttp-equiv
我的第一个HTML页面
文本标记的作用
文本是网页上的基本成分
直接书写的文本会用浏览器默认的样式显示
包含在标记中的文本则会被显示为标记所有的样式
-特殊字符
-注释
-标题元素
-段落元素
-换行元素
-分区元素
文本与特殊字符
空格折叠
-多个空格或制表符压缩成单个空格，即只显示一个空格
-特殊字符（即空格），可以使用转义字符，也称作字符实体
The<p>element. ©2011bytarena
标题元素
标题元素往往用于文章段落的标题
~
按照字体的大小123456
段落元素
元素提供了结构化文本的一种方式
元素中的文本会用单独的段落显示
-前后的文本都换行分开
-添加一段额外的垂直空白距离，作为段落间距
-常用属性:
align
换行元素
使用
元素在任何地方创建手工换行
-和meta一样都属于空标记
Thisisa
paragraph
分区元素和-分区元素用于元素分组，常用于页面布局
-块分区元素:
行内分区元素:
--设置同一行文字内的不同格式
blue;">
first
second
一周畅销red;">榜
块级元素
-默认情况下，块级元素会独占一行，即元素前后都会自动换行
如:
行级元素
-出现在句子中，不会换行
-如:
行内元素与其他元素位于同一行，常用于分开一行中的某些文本
图像与链接
使用img元素将图像添加到页面
-空标记
必须属性:
src
常用属性:
widthheight
链接元素
使用元素创建了一个超级链接，语法如下：
文本
-href属性:
链接URL
-target属性:
目标，可取值为_blank_self等
ToGoogle
Tootherpage
URL
URL:
统一资源定位器，用来标示网络中的任何资源
-文本，图片，音视频文件，段落，或其他超文本文件
完成URL的组成
-协议，机名，路径名，文本名
URL中路径名表示方法有
-相对路径
-绝对路径
锚点
锚点是文档中某行一个记号
-用于链接到文档的第一行
定义锚点
-锚点一
链接到锚点:
在锚点名前加上#
-回到锚点一
定义锚点
returntotop使用链接导航至锚点
列表标记
列表的作用
列表时指将具有相似特征或者具有先后顺序的几行文字进行对齐排列
所有的列表都由列表类型和列表组成
-列表类型:
有序列表
和无序列表-列表项:
- ,用于指示具体的列表内容
无序列表
元素表示无序列表，用于列出页面上没有特定次序的一些项目元素中只能包含具体的列表项元素-列表中包含的每一项都必须包含起始标记
- 和结束标记
之间
有序列表
元素编写有序列表，用于列出页面上有特定次序的一些项目
元素中也只能包含列表项元素
列表的嵌套
将列表元素嵌套使用，可以创建多层列表
-常用于创建文档大纲，导航菜单等
表格
表格的作用
表格通常用来组织结构化的信息
表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起形成的
表格的数据保存在单元格里
-显示表格数据
-设置页面布局
创建表格
定义表格:
使用成对的
标记创建表行:
使用成对的
|
标记创建单元格:
使用成对的
| 标记3、常用属性
table：
border/width/height/align
td:
width/height/align（left、right、center）/valign（top、middle、bottom）
不规则表格：
td的colspan/rowspan属性，设置单元格跨列或者跨行
| 第一行，第一列 | 第二行，第二列 |
| 第二行，第一列 | 第二行，第一列 |
| 一般在中使用,替换| 表格单元中的文字居中显示，并且加粗 Frameset框架 （如果根据需求需要把窗体拆分为两个部分，左边是占用窗体30%的部分，右边是剩余的部分--需要用frameset） 主要属性: src指定在
|
达内HTML资料.docx