还剩21页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
前端掌握的三个模块必学Html+Css+JavaScript框架(框架)Js jQuery框架Bootstrap框架jqueryUI动画,图像处理,矢量图ps,全栈工程师前端+后台(后台)java,js知识点什么是HTML语言如何修号HTML语言如何1丸行HTML语育如何缩与HTML中的文本如何设置ITML的标黝如何使用meta标记设置HTML的属性如何使用meta标记设亶HTML页面的自动刷新如何使用HTML标记编写html页面如何使用A标记编写超链接一如何值用超铤接的锚记一如何使用A标记的Spot属性指定目标位置一如何使用irng标记显示圉片ftlK可使用纶对蹈足和相对路径一如何使用div为HTML页面IS置层如何使用span力口弓虽文本显示阳何设置HTML的表格如何设亶HTML的表格属性如何设置不规则的表格一什么是表单一为什么要编写表单如何坦兽表单的提交位兽如何ifi兽表单的捏女方式什么是超文本标记语言HTMLHyper TextMarkup Language超文本标记文本,标记多媒体(图片,视频,音频)标记语言证明没有编译anip;#38;and符号,与quot;#34;引号©copy;©标志®reg;»注册标志™trade;™商标标志-ldquo;左双引号“rdquo;“右双引号•lsquo;*做单引号’rsquo;,右单引号«laquo;«左三角双弓I号»raquo;»右三角双引号lsaquo;左三角单引号rsaquo;右三角单引号§sect;§章节标志Vpara;1J段落标志bull;•列表圆点(大)•middot;♦列表圆点(中)•...hellip;...省略号II竖线;brvbar;;断的竖线ndash;-短破折号•mdash;—长破折号•©copy;©标志II竖线,常用作菜单或导航中的分隔符middot;.胧点,有时被用来作为菜单分隔符•Tuarr;T上漪头,常用作网页”返回页面顶部”标识euro;€欧元标识•2sup2;2上标2,数学中的平方,在数字处理中常用到,例如1000fracl2;於二分之一•hearts;v心型,用来表达你的心•blockquote缩进标记•blockquote春晓•p nbsp;nbsp;vbr春民不觉晓,处处闻啼鸟,夜来风雨声,br br花落知多少vbrbr/P/block■qu oft oentsize=5color=MredH取值范围・有三种写法.颜色的英文单词三个十六进制.三原色Size17,color
12.#FFFFFF3rgb255,255,255red,green,bluevhr/-…水平线注释符号:!一注释内容一〉,列表标签2UI li显示所有的动物bodyvhl学习列表v/hlulvli老虎v/lili type=disc”狮子v/lili type=square”长颈鹿v/livli羚羊v/livli大象v/li/ul/body如果有序列表采用ol/ol排序的规则,是按照字母,罗马符号,数字Type属性A,a,l,I,标题元素3HTML标题Heading是通过hl-h6等标签进行定义的hlHello Oracle/hlh2Hello Oracle/h2h3Hello Oracle/h3h4Hello0racle/h4h5Hello Oracle/h5h6Hello Oracle/h
6.图片和超链接标签,标签4SPAN
1.HTML图像是通过img标签进行定义的img src=M alt=图片不存在“width=300px height=300px/Src:表示图片文件的路径,有两种
1、相对路径,相对于当前html页面,返回上一级目录用../
2、可以写绝对路径,制定到网络上的图片src=”Alt提示文字,如果图片路径错误,就会显示alt的内容如果图像后面紧跟文字,可以设置文字在图片的上方,下方或则中间pximg src=,image/n width=H315height=48n border=0align=bottom底部v/p
2.span标签spanthis isa fontsize=n10n color=,,redHstrongeminline/em/strong/font,spanexample.../span
3.超链接aa href=n target”_blank”百度一T/axbrxa href=”甲骨文v/aHref:链接的网址网址可以是绝对路径,如也可以是相对路径Target:表示当前超链接的网页在哪里打开常见的取值_self表示在当前网页打开.blank新开一个标签页.parent在父窗口打开块级元素和行级元素块级元素和行级元素的区别什么是块级元素和内联元素(块)元素的特点b
①lo总ck是在新行上开始;
②高度,行高以及外边距和内边距都可控制;
③宽度除非设定一个宽度100%,
④它可以填写内联元素和其他块元素元素的特点i
①nl和ine其他元素都在一行上;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素其中css的display属性能修改块元素与内联元素常见块级元素:p,pre,hl-h6,hr,uLli,ol,div行级img,span,a,br超链接什么是超链接让浏览器重新定位到网络上的别的资源的一个页面元素超链接结构文字或图片属性属性网址,相对路径和绝对路径在哪里打开(当前网页打开,默认,新开一个网页打开,父窗口打开)a v/a hreftarget:_self:_blank:.parent:.文字作为超链接1超链接ahref=l/abr超链接ahref=2/abr超链接ahref=3/abr只要是涉及的,都有相对路径和绝对路径之分,相对路径是指相对于当前文件所在的路径,绝对路径是指网络上的的完整描述.url htmlURL打开链接的窗口取值是target_blank,_self,.parent..图片超链接,2rahref=imgsrc=images/q.gifalt=//a热点区域(了解)
3.图片body(图片超链接imgsrc=alt=width=500pxheight=500pxuseMap=#mymap/mapname=mymapareashape=rectcoords=0,0,250,250href=alt=/,rareashape=rectcoords=251,251,500,500href=alt=//map属性的设置说明shape定义一个矩形区域,属性设置为矩形的左上角,右下角的坐标,各个坐标之间用逗号隔开..rect定义一个多边形区域co,ords属性设置为多边形个顶点的坐标值..poly定义了一个圆形区域,coords属性设置为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径..circle coords.锚点(书签)4锚点可以通过超链接里面.的定位到本网页或者别的网页的某个位置.,注意格式是#锚点名称,锚点定义用锚点名称”href aname=/a首先,我们在文档中对锚进行命名(创建一个书签)HTML基本的注意事项•有用的提示aname=tips”/a然后,我们在同一个文档中创建指向该锚的链接有用的提示ahref=#tips/a表格〈〉标签用于定义表格
1.tabletable常用属性用于设定表格的对齐方式用于设定表格的背景颜色•align:用于设定表格边框的宽度•bgcolor:•border:用于规定表格的宽度表示单元格之间距离•width:单元格和里面内容之间距离•cellspacing•cellpadding标签用于定义表格的行,包含一个或多个或元素
2.trvtr thtd常用属性:tr用于设定表格中行的内容对齐方式align用于设定表格中行的背景颜色bgcolor:>标签用于定义表格单元
3.tdvtd元素中的文本一般显示为正常字体且左对齐td>常用属性Vtd用于设定单元格内容的对齐方式用于设定单元格背景颜色•align:用于设定单元格的高度•bgcolor:用于设定单元格的宽度•h eight:用于设定列合并•width:用于设定行合并•colspan:•rowspan:〈〉用于定义表格标题
4.captioncap〈tion〉标签必须紧随<>标签之后,一个表格只能有一个标题通常这个标题会被居中于表格之上caption table>标签用于定义表格的表头,>内部的文本通常呈现为居中加粗文本
5.thvth表格中有两种类型的单元格v thHtml表头单元格包含表头信息标准单元格th:包含数据飞td:>标签用于定义表格的页眉
6.theadvthead>标签用于组合表格的表头内容vthead>元素应该与HTM>L和>元素结合起来使用v注th意ea:d>内部必v须tb有ody>标vt签footvthead vtr标签用于定义表格的主体
7.tbodyvtbody标签用于组合表格的主体内容tbody HTML标签用于定义表格的页脚
8.tfoot标签用于组合表格中的表注内容vtfootvtfoot,HTML表单用来填写提交数据的标签元素标签用于为用户输入创建表单form HTMLAction属性表单内容送向何处?文本域,密码框,单选框,复选框,都是input type不同来区分下拉框select按钮input type是button reset,submit表单各种控件1,下面是一个申请表样式!..填写学生基本信息.,填写学生基本信息hl/hltable,,Hformaction=tr〉姓名tdlabelfor=username/label/tdtdinputid=usernametype=text//td/trtr密码tdlabelfor=username/label/tdtdinputid=usernametype=password//td/trtr年龄tdlabel/label/tdtdinputtype=text//td/trtr性别tdlabel/labelx/td/女tdinputname=sextype=radio/97inputname=sextype=radio/td/trtr爱好tdlabel/label/tdtd篮球inputname=aihaovalue=ltype=checkbox/足球inputname=aihaotype=checkbox”/乒乓球inputname=aihaotype=checkbox”/羽毛球inputname=aihaotype=checkbox”/看电影inputname=aihaotype=checkbox//td/trtrtdselectname=id=计算机网络〈/〉optionvalue=l option计算机科学〈/〉optionvalue=2option软件工程〈/〉optionvalue=3option/select/td自我评价tdlabel/label/tdtd,textareaname=id=cols=30rows=10x/textarea/td/tr其他标签(扩展)
3.HTML5音视频标签vaudio〃〃二〃二vaudio src=controls controlsautoplay autoplay〃〃〃〃二〃/audiovideo src=images/4width=320height=240controls controls”Your browserdoes notsupportthe videotag.一般浏览器都支持播放格式/videoVideo ogg,mp4Mpeg4为什么HTML的产生HTML年代互联网就己经具备,但是大家还不能共享文件和资料?年代蒂姆一伯纳斯接受了一个任务,进入当时著名的欧洲核物理实验室目的是让各个国家核物理专家网上共享论文6080遇到问题能够都在自己单机上打开文档,但是文本文档格式不能部分设定,比如强调某部分内容等各专家之间平台可能不一样,有些文件可能不能直接识别不能为专家阅读提供方便,很多引用标注无法快速定位除了文本,还有很多需要传递共享的信息解决超文本标记语言hyper textmark language互联网机器之间通过协议共享数据,文本格式定义为或者也就是超文本,每台机器都要安装一个浏览器,大家就不管什么平台都可以共享数据,也能用浏览器读取数据并且可以通过超链接来定http htmlhtm,位彼此之间的资源,可以很轻松的在各个专家机器之间切换,后来这个发明叫万维网也就是俗称的wwwwebo发展历史(了解)HTML并未曾存在,得第一个官方版本便是由(互联网工程任务组)推出得年得之后得第一个修订版本便是此中代表,特点就是语法要
1.HTML1TML IETFHTML
2.0求更严格再后来就是无法向前兼容,之前用编写的网页如果语法不够严格,则无法正常
2.1999HTML
4.01,XHTML
1.0,X“extensible显示xml
2.0,html之后分支浏览器厂商和各走各的路另辟蹊径,一步步走到了今天的而则执着于
3.XmI2whatwg w3c,Whatwg HTML5,言归于好,标准最终纳入w3c xml
24.h5w3c与之间关系HTML W3c()是一个非营利性的负责为制定标准的机构,负责关于万维网的标准的制定,可以通过访问网址/解更多关于的内容W3C WorldWide WebConsortium HTMLW3c视频播放扩展超出w3c规定时间线播放!—播放秒到秒的视频.一,,1020z zvideo src=video/4#t=10,20controls/video!-波发给从开头到秒.-,〃
10.5videosrc=video/4#t=
10.5controls/video!一从开始播放到两个小时.一,,其他属性=/自动播放等zvideo srcvideo/4#t=,02:00:00controls/video矢量图autoplaysvg xmlns=version=l.1”illustrator pscircle ex=80cy=50r=40”/circleex=80cy=110r=40fill=red//svg走马灯vMarquee左右滚动的文字v/marquee常见属性滚动字幕的方向direction--left,right-down滚动速度,一般制定多少像素Scrollamount—…滚动次数表示无限循环Loop-1设置滚动字幕的背景颜色Bgcolor—滚动行为类型有来回滚,重复滚不重复Behavior—alernate scrollslide效果鼠标悬停停止滚动,离开继续滚动onmouseover=0onmouseout=举例代码〈nmarquee onmouseover=onmouseout=direction:Tight scrollamount=32Behavior=alternate此处是滚动图片或者文字/marqueeHtml5新增表单元素:邮箱label for=”v/labeb请输入邮箱input type=email placeholder=”/br〈范围〈/label for=”label,input type=range max=100min=l/br日期nlabel for=v/labelinput type=date/br颜色vlabel for=”v/labelMinput type=color/br搜索〈/〉label for=”label〉input type=text list=movies”/datalist id=movies”老炮儿option value=label=Topl/option寻龙诀option value=“label=Top2v/option唐人街探案option value=label=Top3v/option”恶棍天使,option value=label=Top4/option西游记option value=label=Top5v/option/datalistbr框架标签表示一个窗口Frame表示里面容纳一些窗口Frameset框架Frame!doctype htmlhtmllang=enheadHmeta charset=UTF-8,,meta name=Generator content=EditPlus®,meta name=Author content=,Mmeta name=Keywords content=meta name=Description content=titleDocument/title/head1frameset rows=20%80%frame src=hl.html7frameset cols=20%,80%,uframe src=7frame src=//frameset/frameset注意框架标签与标签互斥,要将替换为标签body bodyframeset像素,分辨率(了解)屏幕上一个点的大小,也有宽度和高度传统意义上一个像素大小应该是固定的每一台电脑,设备对应一个合理的分辨率,电脑屏幕无闪烁的那个最佳效果对应的分辨率Pixels px.分辨率单位是像素1280*768开发的网页在不同的分辨率下面可能出现失真情况,或者错乱这种情况不予处理如果开发的网页需要在不同的设备上运行,必须处理网页适配性开发的网页如何做到适应不同宽度的屏幕?1如果想要大小设备切换时候页面保持固定宽高而不错乱,最外面的容器应该设置绝对宽度(固定像素)div style=nborder:lpx solidred;width:1000px;height:300pxH.
2.如果大小切换,要求自适应布局(相对大小100%)策略一外面容器采用table策略二开发了两套网页触屏版和电脑版
3.如果做到响应式布局推特网…bootstrap框架流式布局关键技术媒体查询根据不同的设备宽度自动适应提前设置好的布局o工作原理和基础EBW HTML什么是就W是E一B个超文本信息系统,典型的一种模式就是客户端和服务器模式,提供文本,图片,视频等大量资源简单说,是网页,通过浏览器可以查看的资源WebWeb是一个很大的概念,包含网页,但更多的是非浏览器方面的应用,比如邮件,聊天软件等等Internet webp2p,基本组织形式W由EB页面构成的,后缀名是或者每页里面有(统一资源定位符)链接web htmlhtm,url〃批注[cl]:协议名称http:192,
168.
32.253:8080/批注[c2]:地址和端口号批注[c3]:资源文件,浏览器能够解这些页面用什么写的析的文件语言开发的HTML页面在哪里运行?Other
0.17%Chrome:
48.65%Microsoft InternetExplorer
31.65%浏览器Proprietary orUndetectable:
0.19%Opera:
1.63%Safari:
4.64%Fvlicrosoft Edge:
5.09%Firefox:
7.98%语法基础HTMLHTML兀素三种写法V标记〉内容V/标记〉〈标记属性1:参数1属性2=参数2内容V/标记》v标记〉V标记/HTML页面基本构成页面结构分为三部分文档声明部分,head部分,body部分HTML文档结构三部分声明部分.声明部分一告诉浏览器这个网页使用的是什么版本1H!DOCTYPE HTMLPUBLIC-//W3C//DTD HTML
4.01Transitional//EN最严格H!DOCTYPE HTMLPUBLIC-//W3C//DTD HTML
4.01Transitional//EN过渡版除了能够显示要求的元素外,还能显示出反对的元素strict strict!DOCTYPE HTMLPUBLIC-//W3C//DTD HTML
4.01Transitional//EN框架版最大特点代替了其他和一样frameset body声明部分!DOCTYPE HTMLHtml5部分更多是为了说明网页
2.Head标题,网页标题title/title-—元数据(描述数据的数据)主要是网页属性信息Meta:headH HHmeta http-equiv=Content-Type content=text/html;charset=gb2312-表示字符集,告诉浏览器用什么字符集来阅读网页meta charset=utf-8”/-常见的字符集中文,中文,国际通用,gb2313gbk utf-8iso-8859-l〈)文档头的设置titlemeta name=author content=yourname二”网页设计-为搜索引擎服务,容易被搜索到meta name=keywords content设置文件头”〉--关于网页描述信息meta name=description content=Hmeta http-equiv=refresh content=5/head部分〈
3.Body bodybgcolor=red课堂实例!DOCTYPE HTMLhtmlheadmetacharset=utf87meta name=author content=mrchi”titlehello world/title刘德华山东工商学院”〉meta name=keywords content=”/headMbody bgcolor=red刘德华惊现山东工商学院!!!vhl v/hl/body/htmlHTML标签学习排版标记(段落,注释,字体,1)PRE,HR,BR):p空格和同车会忽略,是一个块级元素如果文字有空格需要用转义字符表示HTML p标签align=center表示段落居中显示P■br换行标记空格用转义字符表示,nbsp;--1个空格案例用段落标签排版一首唐诗春晓!doctype htmlhtmllang=enheadmeta charset=UTF-8nmeta name=Generator content=EditPlus®meta name=Author content=meta name=Keywords content=meta name=Description content=titleDocument/title/headbody春晓p nbsp;nbsp;vbr春民不觉晓,br处处闻啼鸟,br夜来风雨声,vbr花落知多少br/body■vpre预定标记跟html文件里面写的效果一样春民不觉晓,处处闻啼鸟,夜来风雨声,花落知多少/pre里面的内容按照原来的格式显示出来Pre转义字符空格nbsp;此,少於号或显示标记大於号或显版gt可用於史示且它心科字符amp;quot;iff色己注册reg;版权cop%0trade;m商标其他转义字符(了解)♦spades;♦黑桃♦clubs;♦梅花♦hearts;,红桃,心♦diams;♦方块牌0loz;0菱形tdagger;t匕首tDagger;t双剑号iiexcl;j反向感叹号Ziquest反向问号llarr;-左箭头Tuarr;T上箭头trarr;-♦右笳头Jdarr;1下播头ahair左右箭头♦*crarr;回车漪头Ilccil;|左上限1rceU;]右上限[lfloor;[左下限Jrfloor;J右下限lt;#60;小于号gt;#62大于号sle;M小于等于号2ge;2大于等于号xtimes;x乘号+divide;+除号-minus;-减号±plusinn;±加/减号#ne;*不等于,号isupl;1上标12sup2;2上标23sup3;3上标3妁fracl2Vi二分之一%fracl4;%四分之一%frac34;%四分之三%opermil;%o千分率°deg;°度Jradic;J平方根00infin;00无限大0curren;口一般货币符$#36;美元符号tcent;C分£pound;£英镑¥yen;¥日元€euro;€欧元nbsp;空格。