中科英才-html PHP培训专家http_第1页
中科英才-html PHP培训专家http_第2页
中科英才-html PHP培训专家http_第3页
中科英才-html PHP培训专家http_第4页
中科英才-html PHP培训专家http_第5页
已阅读5页，还剩84页未读， 继续免费阅读

下载本文档

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

文档简介

英才英才－PHP培训主讲老师：大宇：PHP开发系列-LAMP实战课程HTML网页设计语言0、前言（互联网开发基础介绍）HTMLPHP基础PHP常用函数MySQL数据库PHP+MySQLPHP面

象实战项目1DIV+CSSJavascript、jQuery、AJAX实战项目2PHP高级开发PHP的MVC框架实战项目3英才－PHP培训课程提纲内容提纲：一、HTML基础概念二、HTML语法1、HTML

分类2、HTML 语法详解英才－PHP培训3HTML简介浏览HTML网页网页的编码HTML网页结构查看网页源代码英才－PHP培训41、HTML简介全称：Hypertext

Markup

Language中文名：超文本

语言互联网上的最主要的语言英才－PHP培训52、浏览HTML网页WEB页面：本地HTML页面：file:///E:/wamp/www/test.htmlIE8浏览器浏览本地HTML文件的效果Firefox浏览器浏览本地HTML文件的效果英才－PHP培训62、浏览HTML网页浏览器的兼容性问题找找看下面两个浏览器对同一个页面浏览结果有基础不同英才－PHP培训73、网页的编码<meta

charset="utf-8">本课程推荐

采用UTF-8编码格式IE：鼠标右键和查看菜单都可更改编码FireFox：只有查看菜单可更改编码英才－PHP培训84、HTML网页结构——节点树HTML节点head节点body节点xx节点yy节点zz节点其他节点其他节点其他节点其他节点其他节点英才－PHP培训94、HTML网页结构——节点树用左右尖括号定义的，即

（节点）每个页面中只能有一个<html><head><body>：描述浏览器所需的信息：页面显示的具体内容<html><head><meta

charset="UTF-8"/><title>标题</title></head><body><p>

！</p></body></html>注意：html中的空白字符（空格、换行、制表符缩进）在浏览时是无效的（多个空白字符仅作一个空白字符显示）英才－PHP培训105、查看网页源代码开放的互联网：所有的HTML页面源代码都可以通过查看源代码方式获得英才－PHP培训111.设置默认编码：UTF-8在www 下新建demo.html文件，随便写点什么（最好是汉字），用浏览器打开看看显示的效果，有没有出现乱码了？如果有乱码，请设置编码修正它。注意html文件存放

和浏览

路径浏览一下你经常看的，用查看源文件的方式，看看你平时用浏览器看到的网页，到底是由哪些源代码编写而成的。英才－PHP培训12内容提纲：一、HTML基础概念二、HTML语法英才－PHP培训13HTML语 定：在左右尖括号之间的内容，即

。由属性和内容组成。属性：

的特征，例如显示的颜色、样式等内容：

的表现主体，例如文字、

等的语义：

的语法含义<html><head><meta

charset="UTF-8"

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

bgcolor="red"><p>

！</p></body></html>body

的属性body

的内容英才－PHP培训14HTML语法中的详细讲解如下：常见的重要的头信息

<head>列表

<ul>、<ol>、<li>主体内容

<body>table表格<table>等换行

<br>超

<a>水平线

<hr>图像

<img>居中对齐

<center>form表单及控件

<form>等字体

<font>表单分组

<fieldset>段落

<p>格式化

<pre><blockquote>HTML注释语法字符控制标题文字

<h1>~<h6>英才－PHP培训15换行

<br>语义：break（换行）特征：无属性的单一o

World!<br>This

is

HTML

Page

Test英才－PHP培训16水平线

<hr>语义：horizontal

rule（水平尺）有属性设置的单一o

World!<br>This

is

HTML

Page

Test<hr>o

World!<br>This

is

HTML

Page

Test英才－PHP培训17段落

<p>语义：paragraph（段落）作用：用来将文字内容进行段落划分的注意：段落

将不保留文字内容的格式（主要是不会保留文本的换行和空格）有属性的对称标签<meta

charset="utf-8"><p>

oworld段落文字</p><p

align="center">段落文字内容align为段落内容的对齐方式，可取值：<br>left：左对齐（默认）<br>

center：居中对齐<br>right：右对齐</p>英才－PHP培训18要区分清楚格式化

<pre>语义：preformatted（预定义格式）作用：保留文本内容的格式化定义，和<p>段落无属性的对称<meta

charset="utf-8"><pre>段落文字内容align属性对于pre 无效</pre>英才－PHP培训19注释

<!--

...

--

>作用：用于将不需要显示在浏览器中的内容注释掉注意：被注释掉的内容，查看源代码的时候仍然可以看到；注释只是告知浏览器不需要对其进行解析工作，并没用从内容中进行删除无属性的对称

（特殊的）<meta

charset="utf-8">原始文字正文内容<!--<p>被注释掉的内容</p>-->其他的文字内容英才－PHP培训20字符控制用于控制字符文字的显示效果注意：使用时按照语义环境选择合适的<b>粗体（blod）</b><br><strong>加重（strong）</strong><br><br><em>强调（emphasized），但显示为斜体字</em><br><i>斜体（italic）</i><br><br><u>下划线（underlined)</u><br><ins>

（inserted），但表现为下划线</ins><br><br><s>删除线（strikethrough）</s><br><del>被删除的（deleted）</del><br>英才－PHP培训21标题文字

<h1>~<h6>意义：header（标题）作用：用来设置文字内容中的标题，共有6种标题，依次按照标题的层级递减，显示效果的字体大小也递减有属性对称<meta

charset="utf-8"><h1

align="left">1号标题</h1><h2

align="left">2号标题</h1><h3

align="left">3号标题</h1><h4

align="right">4号标题</h4><h5align="right">5号标题</h4><h6

align="center">6号标题</h6>英才－PHP培训22HTML中的特殊字符特殊字符不是因为

定义时用到了一些左右尖括号等特殊字符，为了在页面中能正常显示这些字符，必须将其转义为特殊字符;常见的特殊字符：<等同于<>等同于>&等同于"等同于"editplus中有专门的“特殊字符”按钮英才－PHP培训23HTML语法中的详细讲解如下：常见的重要的头信息

<head>列表

<ul>、<ol>、<li>主体内容

<body>table表格<table>等换行

<br>超

<a>水平线

<hr>图像

<img>居中对齐

<center>form表单及控件

<form>等字体

<font>表单分组

<fieldset>段落

<p>格式化

<pre><blockquote>HTML注释语法字符控制标题文字

<h1>~<h6>英才－PHP培训24列表

<ul>、<ol>、<li>作用：显示列表（一系列有关联性的项目内容）语义：ul——unordered

list（无序列表）ol——ordered

list（有序列表）li——list

item（列表项目）英文单词含义注释：list：列表ordered：有顺序的unordered：无顺序的item：项目、条目列表英才－PHP培训25列表

使用实例：新建<ul><li>空演示文稿</li><li>从默认模板新建</li><li>本地上的模板</li><li>根据设计模板</li><li>Online模板</li></ul>新建<ol><li>空演示文稿</li><li>从默认模板新建</li><li>本地上的模板</li><li>根据设计模板</li><li>Online模板</li></ol>英才－PHP培训26无序列表

<ul>属性type的取值范围：disc：实心圆（默认）circle：空心圆square：实心方块<ul

type="circle"><li>Windows平台</li><li>Apache服务器</li><li>Mysql数据库</li><li>PHP语言</li></ul>英才－PHP培训27有序列表

<ol>属性type的取值范围：1：序号为

数字1，2，3，4（默认）a：序号为a,b,c,dA：序号为A,B,C,Di：序号为小写希腊字母序号i,ii,iiiI：序号为大写希腊字母序号I,II,III<ol

type="i"><li>HTML静态页面</li><li>CSS美化布局</li><li>PHP语言</li></ol>英才－PHP培训28无序与有序列表的结合嵌套应用<ul><li>PHP课程内容<ol><li>语法知识</li><li>流程控制</li><li>面

象</li></ol></li><li>MySQL数据库</li><li>项目开发</li></ul>英才－PHP培训29英才－PHP培训课后练习001-1熟练掌握已学习的作业文件名：001-1.html表格系列（重点）表格的构成元素：行列单元格表头３×３的表格英才－PHP培训31表格系列表格系列（重点）的组成：<table>：表格外框，用来表明表格的开始与结束<tr>：行，用来设置表格的行<th>：表头单元格，用来设置表格标题行的列单元格<td>：普通单元格，用来设置表格普通行的列单元格<table

border=1><tr><th>序号</th><th>用户名</th><th>生日</th></tr><tr><td>1</td><td>

</td><td>1965-03-26</td></tr><tr><td>2</td><td>

</td><td>1960-06-03</td></tr></table>英才－PHP培训32表格系列表格<table>的常用属性属性名属性值说明border像素表格边线宽度cellspacing像素/百分比单元格之间的距离cellpadding像素/百分比单元格内容与边线的距离width像素/百分比表格宽度height像素表格高度alignleft、center、right表格对齐位置bgcolor英文（十六进制）表格背景颜色英才－PHP培训33表格系列单元格<th>和<td>的常见属性：属性名属性值说明width像素/百分比宽度height像素/百分比高度bgcolor英文/十六进制数据格的背景颜色alignleft、center、right文字水平对齐位置valigntop、middle、bottom文字垂直对齐位置英才－PHP培训34表格系列合并单元格跨列单元格合并：colspan<table

border="1"><tr><th>序号</th><th>用户名</th><th>生日</th></tr><tr><td>1</td><td>

</td><td>1965-03-26</td></tr><tr><td>2</td><td>

</td><td>1960-06-03</td></tr><tr><td

colspan="3">共2名用户</td></tr></table>英才－PHP培训35表格系列合并单元格跨行单元格合并：rowspan<table

border="1"><tr><th>序号</th><th>用户名</th><th>生日</th><th

rowspan="3">共2名用户</th></tr><tr><td>1</td><td>

</td><td>1965-03-26</td></tr><tr><td>2</td><td>

</td><td>1960-06-03</td></tr></table>英才－PHP培训36表格系列表格的嵌套使用，注意：表格的嵌套一定要发生在单元格里<table

border=1><tr><td>1</td><td>2</td></tr><tr><td>3</td><td><table

border=1><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></table></td></tr></table>英才－PHP培训37表格系列表格的另类使用——页面布局英才－PHP培训38使用table布局的方法制作如下页面英才－PHP培训39英才－PHP培训课后练习001-2参考“关于 ”的首页（htt

），用table标签制作符合其页面布局的html设计文档HTML语法中的详细讲解如下：常见的重要的头信息

<head>列表

<ul>、<ol>、<li>主体内容

<body>table表格<table>等换行

<br>超

<a>水平线

<hr>图像

<img>居中对齐

<center>form表单及控件

<form>等字体

<font>表单分组

<fieldset>段落

<p>格式化

<pre><blockquote>HTML注释语法字符控制标题文字

<h1>~<h6>英才－PHP培训41超<a>语义：anchor（

）<a

href="ht

">

</a>href的组成相对与绝对地址页内锚超

打开的目标窗口英才－PHP培训42超

<a>1

href超

的组成基本格式：">

英才</a><a

href="特殊的href——#页内

<ahref="#">本页</a>英才－PHP培训43超<a>（2）相对与绝对地址相对地址<a

href="./contact">们</a>相对于根绝对地址的连接，在项目整体移动时，不需要再做更改，推荐使用英才首页</a><a

href="/index.php">

英才首页</a><a

href="

">完整的连接，在项目整体移动主机时，需要更新内容英才－PHP培训44超<a>（3）页内锚作用：用来快速在文档中进行位置定位的方法（特殊的

：页面

的连接）形象的比喻——书签的使用步骤：设置

：<a

name="php"></a>：<a

href="#php">本页面的2.跳转</a><a

href="other.html#php">其他页面的跳转</a>英才－PHP培训45超

<a>（4）超 打开的目标窗口属性：="_self"：原窗口打开（默认）="_blank"：新窗口打开="_parent"：上一级窗口打开（后续框架章节介绍）="页面名称"：指定在某个名称的页面窗口打开（后续框架章节介绍）实例：原窗口打开<a

href="<a

href=实例：新窗口打开连接<a

href=">

英才原窗口打开</a>="_self">

英才原窗口打开</a>="_blank">

英才新窗口打开</a>英才－PHP培训46按下列要求完成<a>页面的编写到baidu首页，在新窗口打开，

的标题设为"

首页"到

首页，在本窗口打开，的标题设为"谷歌首页"到A页面底部（文3.新建A、B两个html文件，在B页面中设置件末尾）的跨页书签锚英才－PHP培训47图像

<img><img

src="spring.jpg"><img

src="spring.jpg"

/>12的属性英才－PHP培训48用于在页面中引入：<img

src="URL">属性名属性值说明srcurl路径alt字符串注释width像素/百分比宽度height像素/百分比高度border数字边框（

时也用到）alignleft、right、top、middle、bottom对齐位置英才－PHP培训49用作为超

的内容"><img

src="spring.jpg"

width="100px"></a>作为超

的内容时，默认会自动给

加上border<a

href="注意：边框无边框的：<a

href="

"><img

src="spring.jpg"

width="100px"

border="0"></a>可以通过border属性将img

的边框设置为0英才－PHP培训50HTML语法中的详细讲解如下：常见的重要的头信息

<head>排列列表 <ul>、<ol>、<li>主体内容

<body>table表格换行

<br>超水平线

<hr>图像居中对齐

<center>form表单及控件字体

<font>表单分组fieldset段落

<p>格式化

<pre><blockquote>HTML注释语法字符控制标题文字

<h1>~<h6>英才－PHP培训51表单 ——form1、表单简介2、表单的属性3、表单控件文本框、

框多选项、单选项下拉框文字区域隐藏框按钮、图像按钮文件上传英才－PHP培训52form表单是用户输入数据，与网络程序进行交互的特定区域。语法：<form><input><input></form>英才－PHP培训53表单语法结构：<form

method="..."

action="..."

><input><select><textarea></form>表单属性功能描述：method：表单提交时

的方法（POST或GET）action：表单信息提交的传输目标英才－PHP培训54表单的输入控件是用户输入数据的元素；表单输入控件常被称为“表单元素”；注意：表单本身在浏览器中并不可见，用户可见的都是控件；输入类型通常是由控件的类型——type属性定义的常见的控件类型如下：文本框、

框多选项、单选项下拉框文字区域隐藏框按钮、图像按钮文件上传英才－PHP培训55文本框：type="text"用于输入较短的字符串用户名<input

type="text"name="username">用户名<input

type="text"name="username"value="无名氏"size="10"maxlength="20"readonly>文本框的属性设置：value：文本框内的输入值size：文本框的宽度大小

maxlength：文本框可输入的最大文本长度

readonly：只读的文本框（无法输入）英才－PHP培训56框：type="password"用于输入 字符串，在浏览器中以实心圆显示已输入的字符内容属性类似文本框用户 <input

type="password"

name="passwd">用户 <input

type="password"

name="passwd"

value="123"

size="10"maxlength="20"

readonly>英才－PHP培训57请编写给定效果的用户

表单页面——register.html该表单提交给result.php处理数据英才－PHP培训58多选项框：type="checkbox"多个选项可以选择多个：<inputtype="checkbox"name="fav[]"value="1">读书；<inputtype="checkbox"name="fav[]"value="2">体育;注意：这里的name相同，而值不同，且为数组：<input

type="checkbox"name="fav[]"value="1">读书；<input

type="checkbox"name="fav[]"value="2"checked="true">体育;checked：设置选中状态的属性英才－PHP培训59单选项框：type="radio"多个选项只能选择一个：<input

type="radio"name="sex"value="m">男；<input

type="radio"name="sex"value="f"checked="checked">女；注意：这里的name相同，而值不同，不需要设置为数组了英才－PHP培训60的选项表单页面——options.html请编写该表单据英才－PHP培训61下拉框：也常称为下拉菜单独立的

（非<input>

）用来选择在设定好范围内的数据语法：<select><option></option></select>选项用option

设定城市：<select><option>合肥</option><option>

</option></select>英才－PHP培训62下拉框的属性设置：城市：<select

name="city"><option

value="hf">合肥</option><option

value="sh">

</option></select>name：下拉框控件名

value：选项的值</option>城市：<select

name="city"><option

value="hf">合肥</option><option

value="sh"

selected=“selected”></select>selected：被选中的项目英才－PHP培训63可设置多选的下拉框城市：<select

name="city[

]"size="5"

multiple

><option

value="hf">合肥</option><option

value="sh">

</option><option

value="bj">

</option><option

value="nj">

</option></select>size：下拉框的大小

multiple：下拉框为多选英才－PHP培训64下拉框的项目分组：城市：<select

name="city"><option

value="hf">合肥</option><optgroup

label="直辖市"></option></option></option><option

value="sh"><option

value="bj"><option

value="nj"></optgroup><optgroup

label="

台"></option><option

value="sh"><option

value="bj"></option></option><option

value="nj"></optgroup></select>optgroup：选项分组

label：分组名（不可被选中）英才－PHP培训65请编写 的选择表单页面——select.html该表单提交给result.php处理数据下拉菜单的数据参考内容：英才－PHP培训66文字区域：用来输入大段字符串内容独立的

：<textarea></textarea>文字内容<textarea></textarea>文字内容<textarea

name="cont"cols="50"rows="5"></textarea>文字区域属性设置：name：控件名称

cols：文字区域的宽度（列数）

rows：文字区域的高度（行数）英才－PHP培训67隐藏框：type="hidden"用于设置隐藏的数据内容，在浏览器中不显示，但控件实际仍然存在；因为隐藏，所以用户无法输入或修改数据。常用来在表单中跟随其他输入控件一起提交的敏感数据。用户

：<input

type="hidden"

name="userID"

value="123">英才－PHP培训68按钮控制了表单数据的发送、重置等动作按钮根据类型分为：（6.1）提交按钮（6.2）重置按钮（6.3）普通按钮（6.4）图像按钮英才－PHP培训69提交按钮：type="submit"点击提交按钮后，用来发送form表单数据，页面将发生跳转<input

type="submit"><input

type="submit"value="发送表单">value：按钮文字（默认不设置为“提交查询内容”）英才－PHP培训70重置按钮：type="reset"点击重置按钮后将会将form表单内的控件内容恢复默认状态<input

type="reset"><input

type="reset"value="重填">value：按钮文字（默认不设置为"重置"）英才－PHP培训71普通按钮：type="button"点击普通按钮将不会激发任何动作，通常与Javascript程序配合使用（详见JS单元课程）<input

type="button"value="激发动作">value：按钮文字（必须设置）英才－PHP培训72图像按钮：type="image"将

设为提交按钮(而不是普通按钮）<input

type="image"

src="buy.png">src：

的来源英才－PHP培训73上传

：type="file"上传本地文件到服务器端<form

enctype="multipart/form-data"><input

type="file"

name="pic"></form>name：上传控件的名称，必设置（程序需要）英才－PHP培训74请编写

的产品 的表单页面——products.html用隐藏表单设置一个发布日期（

）该表单提交给result.php处理数据注意这里的html代码显示英才－PHP培训75表单分组——fieldset、legend常用来将表单分组显示<form

method="post"

action="result.php"><fieldset><legend>个人信息</legend>...

...</fieldset><fieldset><legend>职务部门</legend>...

...</fieldset><input

type="submit"

value="保存"></form>英才－PHP培训76用表单分组 编写 页面的htm代码该表单提交给result.php处理数据英才－PHP培训77请编写如图效果的form表单（配合表格

）表单提交给result.php处理数据英才－PHP培训78框架集合<frameset>、框架<frame><frameset>的作用：在一个浏览器窗口中，同时显示多个网页，类似画中画<frame>的作用：每个框架里设定一个网页，这些网页相互独立语法：（1）框架集合的结构（2）嵌套多框架的设置（3）多框架与超（4）内嵌框架的设置<frameset><frame><frame></frameset>英才－PHP培训79框架集内有框架详细语法：<frameset

rows="..."

cols="..."

[framespacing="..."]

[frameborder="...

"]><frame

src="..."

[name="..."]><frame

src="..."

[name="..."]>...

...</frameset><frameset>的常见属性<frameset

cols="200,*"><frame

src="frame1.html"><frame

src="frame2.html"></frameset><noframes><body>不支持框架的浏览器</body></noframes>属性名属性值说明rows像素/百分比横排的多窗框设置cols像素/百分比竖排的多窗框设置framespacing像素/百分比页面与页面的边距frameborder1或0，yes或no框架的边框英才－PHP培训80frame

的属

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

温馨提示

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

最新文档

评论

0/150

提交评论