传智播客-张鹏-html+css课件笔记

上传人：2*** IP属地：湖北上传时间：2023-02-04 格式：PPTX 页数：69 大小：1.44MB 积分：30 举报 版权申诉

已阅读5页，还剩64页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一部分:轻松学习HTML

第二部分:Div+Css网页布局主讲：张鹏

邮箱：seo100@126.com本文摘自传智播客-张鹏老师的课件，只为大家更好学习传智播客课程，若有不当或涉及到您的利益时，请及时联系本人，本人会及时更正。轻松学习HTML第一课

HTML语言基础主讲：张鹏

邮箱：seo100@126.com网站设计师精品就业班课程体系北京传智播客教育网站设计师设计PS网页效果图设计Flash网页动画设计HtmlXhtmlDIV+CSSJavascriptJQuery制作网站设计师行业职位需求分析北京传智播客教育网站美工网站编辑网页设计师网页制作网站前端工程师FLASH动画设计师总结——职位多，选择多，机会多！网站设计师行业职位薪水北京传智播客教育目标认识什么是HTML标记的语法掌握常用的HTML标记的应用网页是用什么制作出来的HTML简介HTML（HyperTextMark-upLanguage超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。Html文档的创建方式：用html语言创建的文档手工直接编写（例如记事本）。通过图形化的HTML开发软件Dreamweaver。由Web服务器上的动态网页程序生成。HTML标记的语法html最基本的语法就是<标记符>内容</标记符>，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。如：<hrwidth=”80%”/>例如：<fontsize=”7”>文字内容

</font>HTML标记的语法HTML标记的类型：单标记与双标记一、单标记(1).<标记名称>

单一型,无属性值。如：<br/>(2).<标记名称属性=”属性值”>单一型，有属性值。如：<hrwidth=”80%”/>HTML标记的语法二、双标记(3).<标记名称>…</标记名称>

没有属性值。如：<title>…</title>(4).<标记名称属性=”属性值”>…</标记名称>

有属性值。如：<bodybgcolor=”red”>…</body><fontsize=”7”>…</font>HTML标记的语法HTML标记语法总结：1、双标记：<开始标记>内容</结束标记>2、单标记：<标记>3、标记的属性：<标记属性1=参数1

属性2=参数2…>内容</标记>说明：A、标记与属性、属性之间以空格分隔B、属性不区分先后顺序；且属性不是必需的重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标记都采用小写。html文档结构1、文档结构所有的网页文件,通常由四对标记来构成,文档的骨架，它们是：<html> <head> <title>

标题 </title> </head> <body>

正文 </body></html><html>……</html>标识网页文件的开始与结束，所有的html元素都要放在这对标记中<head>……</head>标识网页文件的头部信息，如标题、搜索引擎关键字等<title>……</title>标识网页文件的标题<body>……</body>标识网页文件的主体部分Meta标记用于定义文件信息Meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于<head></head>之间设置关键字：<metaname=”keywords”content=”value”>多个关键字内容之间可以用“，”分隔设置描述：<metaname=”description”content=”value”>设置作者：<metaname=”author”content=”作者名”>设置字符集：<metahttp-equiv=”content-type”content=”text/html;charset=gb2312”>设置页面定时跳转：<metahttp-equiv="Refresh"content="2;URL="/>（1）、注释（2）、body属性<bodybgcolor=“背景颜色”background=“背景图像”text=“文本颜色”link=“链接文本颜色”vlink=“访问过的文本颜色”alink=“激活的链接文本颜色”leftmargin=“左边界”rightmargin=“右边界”topmargin=“上边界”bottommargin=“下边界”>网页主体标记body字体修饰(1)、<font>标记语法：<fontcolor="文本颜色"size="字号"face="字体">文本</font>注：网页中的文本字体、字号一般通过CSS修饰颜色英文名称十六位进制颜色英文名称十六位进制白色White#FFFFFF黑色Black#000000红色Red#FF0000绿色Green#00FF00蓝色Blue#0000FF灰色Gray#999999(2)、字符格式功能标记加粗<b>文本</b>倾斜<i>文本</i>加强语气(加粗)<strong>文本</strong>加强语气(倾斜)<em>文本</em>下划线<u>文本</u>删除线<s>文本</s>上标<sup>文本</sup>下标<sub>文本</sub>（3）、段落标记：格式：<palign=”对齐方式“

>…</p>属性名称属性值说明align left 左对齐（默认）center居中 right右对齐段落控制标记（4）、段落标题<hxalign=”对齐方式“

>…</hx>：段落标题

说明：

X取值[1~6]hx内的文本会自动加粗显示。

hx针对的对象是段落，而font针对的对象的任意文本。（5）、<br/>：换行（换行不换段）段落控制标记修饰标记(6).水平直线<hr/>属性名称

属性值

说明

size 像素绝对设置，以数字表示，属性值越大，线越粗

百分比相对设置，以%表示，属性值越大，线越粗 width 像素绝对设置，长度不会应视窗的改变而改变

百分比相对设置，长度会随着视窗宽度而改变 noshade="noshade" 实体线

特殊标记定义一个块引用：使用文本缩进

格式：<blockquote>...</blockquote>

属性名称

属性值

说明

cite url 被引用的地址居中标记<center>内容</center>(被废弃的标签)预格式化<pre></pre>显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。在HTML文档中使用特殊字符特殊字符转义码空格

版权号©©注册商标®®“"&&<<>>网页中信息的排序显示-如何实现列表的标记1、列表标记用途：

列表标记可以创建一般的无序列表、编号列表，以及定义列表三种方式。还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。[1]、无序列表<ul>…</ul>[2]、有序列表<ol>…</ol>[3]、定义列表<dl>…</dl>2、无序列表语法：<ultype=“项目符号类型”><litype=“项目符号类型”>内容1</li><li>内容2</li>…</ul><li></li>表示一个项目参数值(必须小写字母)描述disccirclesquare列表的标记3、有序列表语法：<olstart=“列表起点”

type=“项目符号类型”><li>内容1</li><li>内容2</li>…</ol>

属性名称属性值说明type1表示以1,2,3,4来表示a表示以a,b,c,d来表示A表示以A,B,C,D来表示i表示以i,ii,iii来表示I表示以I,II,III来表示列表的标记4、定义列表语法：<dl>

</dl><dl></dl>定义列表<dt></dt>表示一个项目<dd></dd>表示一个项目下的更详细的内容的解释定义列表Web上支持的图片格式GIF（图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种PNG（网络可移植格式）：该格式支持透明色，但不支持动画，颜色从几种至1670万种。图片标记<imgsrc=“图片的路径”/>图片路径□绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称□相对路径:从当前文档开始的路径如果当前文档和目标文档位置平行，则直接书写目标文档全称如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称如果当前文档所在文件夹和目标文档位置平行，则书写为../目标文档全称□根相对路径:从站点根目录开始的路径，以"/"开头属性名称属性值说明srcURL图片的路径alt文本规定图片的替代文本[图片无法显示时]title文本鼠标悬停时显示的内容width像素/百分比设置图片宽height像素/百分比设置图片高border数字设置图象边框alignleft图片靠左,文字靠右right图片靠右,文字靠左top文字垂直居上靠middle文字垂直居中bottom文字垂直居下（默认）vspace像素定义图像顶部和底部的空白（垂直边距）hspace像素定义图像左侧和右侧的空白（水平边距）轻松学习HTML第二课

表格与链接主讲：张鹏

邮箱：seo100@126.com目标表格的应用超级链接的使用网页中内容排版与定位表格表格因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的表格基本结构：

<table>...</table>-定义表格

<tr>...</tr>-定义表行

<td>...</td>-定义表列(单元格) <th>...</th>-定义标题栏(文字加粗)

属性用途<tablebgcolor=””>设置表格的背景色。<tablebackground=””>设置表格的背景图片。<tableborder=””>设置边框的宽度，若不设置此属性，则边框宽度默认为0。<tablecellpadding=””>设置表格单元格边框与其内部内容之间空间的大小。默认为2(表格边距)<tablecellspacing=””>设置表格单元格之间空间的大小。默认为2(单元格间距)<tablebordercolor=””>设置表格边框的颜色。<tablebordercolorlight=””>设置边框亮部分的颜色(当border的值大于等于1时才有用)。<tablebordercolordark=””>设置边框暗部分的颜色(当border的值大于等于1时才有用)。<tablealign=””>设置表格的对齐方式（left=左，center=居中，right=右）<tablewidth=””>设置表格的宽度，单位用绝对像素值或总宽度的百分比。表格的属性：<table><table>标签下的边框设置属性名称

属性值

说明frame void 不要显现表格的边线 above 只要显现出表格的上边线 below 只显现出表格的下边线 hsides 只显示表格的上下边线 vsides 只显现表格的左右边线 lhs 只显现表格的左边线 rhs 只显现表格的右边线 border/box 会显现出表格的所有边线rules rows 只显示出横行的格框线 cols 只显示出直行的格框线 all 显示全部格框线 groups 表示列组合水平部分 none 不显示任何格框线该属性必须在border的属性值不为0的状态下!属性用途<trwidth=””>设置行的宽度<trheight=””>设置行的高度<trbgcolor=””>设置行的背景颜色<trbackground=””>设置行的背景图片<tralign=””>设置水平对齐方式<tr

valign=””>设置垂直对齐方式[top、middle、bottom

]行的属性：<tr>属性用途<tdwidth=””>设置单元格的宽度<tdheight=””>设置单元格的高度<tdbgcolor=””>设置单元格的背景颜色<tdbackground=””>设置单元格的背景图片<tdalign=””>设置单元格的水平对齐方式<tdvalign=””>设置单元格的垂直对齐方式<tdrowspan=””>设置行合并的数目<tdcolspan=””>设置列合并的数目<tdnowarp=“nowrap”>设置在单元格中不换行列（单元格）的属性：<td>表格的结构化(1).结构化格式：<table><thead>……</thead>表头区<tbody>……</tbody>表体区………<tfoot>……</tfoot>表尾区</table>(2).直列化格式：

<colgroup>….</colgroup>属性名称

属性值

说明align left 靠左 center 靠中 right 靠右valign top 靠上 middle 靠中 bottom 靠下span 数字

直列数bgcolor 颜色

背景颜色个别直列设置格式:<col>功能完全和<colgroup>一样(3).表格的标题：<table> <caption>….</caption></table><caption>下的属性值有:属性名称属性值

说明align top 标题在表格上方 bottom 标题在表格下方超链接：HyperLink一个网站是由多个网页组成的，网页之间都是通过链接实现相互关联的。链接的概念：实现由当前文档到目标文档的一种跳转链接语法:

<ahref=链接目标title=”注释”target=”打开链接窗口的形式”>显示内容</a>

_blank在新窗口中打开

_self在自身窗口中打开(默认值)

_parent在上一级窗口中打开

_top在本窗口中打开链接的类型链接的类型:

1、内部链接：

当前文档与目标文档在同一站点内<ahref=目标文档位置及全称>

2、外部链接：

当前文档与目标文档不在同一站点内

<ahref=URL（网址）>3、E-mail链接：

并允许访问者向指定的地址发送邮件。

<ahref=mailto:电子邮件地址>

4、局部链接(锚点)：

跳转到同一网页或其他文档中的指定位置。

创建锚点：

<aname="锚点名称">显示内容</a>

链接锚点：

<ahref="#锚点名称">显示内容</a>

5、空链接：

就是没有目标端点的链接。格式<ahref="#">显示内容</a>链接的类型5、空链接：

就是没有目标端点的链接。格式<ahref="#">显示内容</a>例如：设为首页<ahref="#"onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('')">设为首页</a>添加收藏<ahref="#"onClick="javascript:window.external.addfavorite('','搜狐')">加入收藏夹</a>链接的类型6、脚本链接：

是一种特殊的链接，当单击设置脚本链接的文本或图像时，可以运行相应的JavaScript语句。

常用到的脚本链接：

例如：<ahref=javascript:window.open(“”)>新浪</a>

关闭窗口：输入javascript:window.close()

打开窗口：输入javascript:window.open('文件名')链接的类型轻松学习HTML第三课

表单与多媒体标记主讲：张鹏

邮箱：seo100@126.com目标掌握表单的使用学会向网页中插入多媒体元素框架与嵌入框应用将我们的信息提交给服务器-表单表单的功能表单的作用是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。客户端与服务器端进行信息交流的途径表单标记form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等。表单元素必须入在form标记内才有作用。<formaction=url(传送目标，处理表单信息的服务器端应用程序)

method=处理表单数据的方法(POST/GET)如果不写method则默认提交方式为get，name=表单名称>

表单元素</form>POST方法可以传递大量信息GET方法将值附加到请求该页的URL中。适合传递少量信息(默认方式)单行文本框<inputname=“文本框名称”type=“text”value=“初始值”size=“显示字符数”maxlength=“最多容纳字符数”readonly=”readonly”(设置为只读)disabled=“disabled”（设置为不可操作）>密码框<inputname=“文本框名称”type=“password”value=“初始值”size=“显示字符数”/>表单元素标记多行文本框<textareaname=“多行文本框名称”cols=“每行中的字符数”rows=“显示的行数”>

初始内容</textarea>表单元素标记单选框<inputname=“单选框名称”type=“radio”value=“提交值”checked=”checked”(是否被选中)/>

复选框<inputname=“复选框名称”type=“checkbox”value=“提交值”checked=”checked”(是否被选中)>

表单元素标记<label>标注内容</label>标签为input元素定义标注（标记）。<label>标签的for属性应当与相关元素的id属性相同<labelfor="man">男</label><inputtype=radioname=sexvalue=男id="man">

表单元素标记列表框(A)、菜单式<selectname=“列表框名称”><optionselected=“selected”(哪个为初始选择，就添加selected语句[只有一个])value=“提交值”>列表1</option><optionvalue=“提交值”>列表2</option>...</select>分组<optgrouplabel="分组名称"></optgroup>表单元素标记列表框例如： <selectname=“citys”> <optgrouplabel="北京"> <optionvalue=朝阳selected=“selected”>朝阳</option> <optionvalue=海淀>海淀</option> <optionvalue=东城>东城</option> </optgroup> </select>表单元素标记列表框(B)、列表式<selectname=“列表框名称”size=“显示的行数”multiple(如果允许多选，则有该命令；否则没有此命令)><optionvalue=“提交值”>列表1</option>...</select>例如： <selectname=targetsize=3multiple=“multiple”> <optionvalue=普通朋友>普通朋友</option> <optionvalue=爱人selected>爱人</option> </select>表单元素标记按钮<inputtype=“按钮类型(reset[重置表单]、submit[提交表单]、button[普通按钮])”name=“按钮名称”value=“按钮显示文本”/>图片按钮<inputname="图片按钮名称"type="image"src="图片路径"/>隐藏域<inputname=“名称”type=“hidden”value=“提交值”/>表单元素标记浏览框<inputname=“名称”type=“file”size=“显示长度”/>表单外框<fieldset>...</fieldset>定义围绕表单中元素的边框<legend>...</legend>legend元素为fieldset元素定义标题

表单元素标记FLASH动画的插入使用<embed>...</embed>标记插入FLASH动画属性

值

说明src url flash路径width 像素/百分比 flash宽度height 像素/百分比 flash高度wmode transparent 使flash背景部分透明插入多媒体元素标记插入mp3音乐：<objectalign=middleclass=OBJECTclassid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95id=MediaPlayerwidth=356height=80><paramname="ShowStatusBar"value="true"><paramname="AutoStart"value="true"><paramname="Filename"value="love.mp3"></obj

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

传智播客-张鹏-html+css课件笔记

文档简介

温馨提示

最新文档

评论

传智播客-张鹏-html+css课件笔记

文档简介

温馨提示

最新文档

评论

相关文档