韩顺平+轻松搞定网页设计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:[e-mail]给自己写信/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.htmlnoresise=”noresise”name=”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/bo