韩顺平_轻松搞定网页设计html+(DIV+CSS)+javascript视频笔记(全)

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

韩顺平html第二讲htmlheadtitle第一个网页/title/headbody!-1-fontcolor=redhelloworld/font!--使用fontcolor=red/font来调整字体颜色--/br!-2-fontsize=7color=bluehelloworld1/font!--使用fontsize=7/font来调整字体大小,但是size里面的取值是1—7--/br!-3-fontstyle=font-size:150pxcolor=yellowhelloworld2/font!--使用CSS中fontstyle=font-size:40px/font将字体调整更大--/br!-4-pfontcolor=cyan为字体更换颜色4/font/pbfontcolor=redhhhhh/font/b!-5-/body/html韩顺平html第三讲Html的超链接:例子:htmlxmlns==Content-Typecontent=text/html;charset=utf-8/title无标题文档/title/headbody!--*****************html超链接案例***************--!--*****************html超链接默认格式***************--ahref=超链接/a/br!--超链接基本格式--!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--ahref==-blank在新窗口打开/a!--超链接在新窗口下打开文件--/brahref==-self在本页面打开/a!--超链接在本页面打开文件--/brahref=mailto:yanli457352797@hotmail.com给自己写信/a/body/htmlHtml图片元素(标记):imgsrc=图片路径width=宽度height=”高度”/img案例:(网页上显示图片)htmlxmlns=无标题文档/title/headbody!--*****************图片元素***************--imgsrc=a.jpgwidth=100!--***********插入图片************--ahref==a.jpgwidth=100/a!--***********图片链接************--imgsrc===/4023121842125901437.jpgwidth=400imgsrc=a.jpgwidth=100border=10/img!--*******border表示为插入的图片加上边框********--/body/htmlTable表格:!--tableborder=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充align=表格的位置bgcolor=设置表格背景颜色/table!--**tr表示行,td表示列,tralign=设置字体对齐方式/tr***--案例:htmlxmlns=无标题文档/title/headbody******************表格,为表格添加背景****************/br!--tableborder=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小align=表格的位置bgcolor=设置表格背景颜色/table--tableborder=15height=1cellpadding=20cellspacing=0width=477align=centerbgcolor=cyantralign=centertd1/tdtd2/tdtd3/td/tr!--**tr表示行,td表示列,tralign=设置字体对齐方式/tr***--/table/body/html韩顺平html第四讲合并单元格:colspan=跨行列数roespan=跨列行数headtitle表格/title***********菜谱***********tableborder=1bordercolor=redcellspacing=0align=centerwidth=500pxcellpadding=0height=180tralign=centertdcolspan=3周一菜谱/td/trtralign=centertdrowspan=2素菜/tdtd青菜/tdtd土豆/td/trtralign=centertd豆腐/tdtd白菜/td/trtralign=centertdrowspan=2荤菜/tdtd肉丝/tdtd大虾/td/trtralign=centertd海参imgsrc=a.jpgwidth=70/img/tdtd鲍鱼/td/tr/headbody/body/html注释:tralign=center/tr在此处表示字体的对齐方式韩顺平html第五讲无序列表(html常用标记/元素-ui/li)格式:Html列表——无序列表ultype=”属性值”li列表内容/li/ulul的属性设定(常用):例如:ultyre=”square”Type=”squre”设定符号款式,其值有三种,如下,默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********htmlbodyultype=circleli1/lili1/lili1/li/ul/body/htmlHtml列表——有序列表ol称顺序列表标记oltype=”属性值”start=”起始值”li列表内容/li/ol的属性设定(常用):例如:oltype=”i”start=”4”/oltype=”i”设定数目款式的值有5种:阿拉伯数字,a小写字母,A大写字母,i小写罗马数字,I大写罗马数字************有序列表代码例子*********htmlbodyoltype=1li1/lili1/lili1/li/ololtype=1start=”5”li1/lili1/lili1/li/ol/body/htmlHtml框架标记(元素)frameset/frameFramesetframeborder=”边框大小”cols=”按照列的百分比,隔开”rows=”按照行的百分比Framename=”给frame取名”src=”html路径”noresize/frameset实例:qq.htmlhtmlbodybgcolor=blue歌词/body/htmlee.htmlhtmlbodybgcolor=red费玉清/body/htmlAll.htmlhtmlframesetcols=20%,*frameborder=100framesrc=qq.htmlnoresisename=”song”/framesrc=ee.htmlnoresisename=”jun”//frameset/html注释:all.html中不能带body标记综合案例:all.html!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN=30%,*border=0framesrc=top.htmlnoresize/framesetcols=20%,*framesrc=left.htmlborder=0noresize/!--frame元素中有一个属性,相当于给该frame取名--framesrc=right1.htmlname=right//frameset/frameset/htmltop.htmlhtmlheadtitleNewDocument/title/headbodyimgsrc=logo1.jpg/img/body/htmlLeft.htmlhtmlheadtitleNewDocument/title/headbodybgcolor=pinkahref=right1.htmltarget=right青花瓷1/a/brahref=right2.htmltarget=right青花瓷2/a/br/body/htmlRight1.htmlhtmlheadtitleNewDocument/title/headbodybgcolor=bluepright1.html/p/body/htmlRight2.htmlhtmlheadtitleNewDocument/title/headbodybgcolor=yellowpright2.html/p/body/html韩顺平html第六讲html表单form:介绍:html的表单元素,主要用于让客户输入数据,并提交给服务器语法格式:formaction=”url”method=“提交方法(get,post)默认是get方法”各种元素(输入框,下拉列表,文本域,密码框)inputtype=submitinputtype=reset/form代码:提交界面.htmlhtmlheadtitle登陆界面/title/headbodyh1登陆界面/h1formaction=ok.htmlmethod=getalign=center用户名:inputtype=textname=username//br密  码:inputtype=passwordname=pwd//brinputtype=submitvalue=登录/inputtype=resetvalue=重新填写//form/body/htmlO

1 / 67
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功