一、html网页编程语言。html之所以能展现出各种各样的效果,是浏览器的功能。html(hypertext markup language)就是描述网页长什么样子、有什么内容的一个文本。查看网页的描述内容(html)的方式:使用ie浏览器的话,在网页上点击右键,选择“查看源文件”b/s(browser/ server):浏览器-服务器,客户端只需要一个浏览器c/s(client/server):客户端必须安装对应的软件。比如:qq、msn、foxmail二、最基本的html结构 1 2 doctype html> 3 html> 4 5 head> 6 7 meta http-equiv=content-type content=text/html; charset=gb2312或utf-8或gbk /> 8 9 meta http-equiv=refresh content=10;url=http://www.leixuesong.cn />10 11 title>网页标题title>12 meta name=keywords content=php程序员,技术博客,个人博客 />13 meta name=description content=我的博客记录了linux学习,php开发与编程,web前端开发,mysql学习和教程,nosql数据库教程以及个人的人生经历和观点。 />14 link rel=stylesheet type=text/css href=main.css />15 script type=text/javascript src=http://pagead2.googlesyndication.com/pagead/show_ads.js>script>16 head>17 18 body>19 body>20 html>
三、最常用的html标签a、布局标签div标签定义文档中的分区或节(division/section),可以把文档分割为独立的、不同的部分,主要用于布局。aside标签的内容可用作文章的侧栏,html5新增标签。header标签定义页面的头部(介绍信息),html5新增标签。section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,html5新增标签。footer 标签定义文档或节的页脚,通常包含文档的作者、版权信息、使用条款链接、联系信息等等,html5新增标签。article标签规定文章独立的其他内容,比如:标题、内容、评论,html5新增标签。b、文本标签h1-h6标签可定义标题(h1最大,h6最小)p标签定义段落b/strong标签加粗em标签来表示强调的文本,斜体strong标签表示重要文本u标签下划线s标签删除线br标签表示回车换行hr标签表示水平线span标签被用来组合文档中的行内元素。blockquote标签表示块引用pre标签可定义预格式化的文本,保持原有格式的一种标签。sub标签下标,sup>标签上标 表示一个空格©表示版权符<表示c、a标签定义超链接指定页面间的跳转,链接可以指向外部链接或者页面内部id锚点,可以在当前页面打开,新开窗口。a href=指向的链接地址或者网址#id名 target=_blank|_self|_top|_parent>百度a>
超级链接a href=http://www.yahoo.com target=_self title=去美国雅虎>雅虎a>
图片超链接a href=http://www.microsoft.com>imgborder=0 src=1.jpg/>a>
相对url
相对url表示相对于当前文档的资源;
“/”表示网站根目录,“../”表示父目录;
“../../”表示父目录的父目录,“./”或者不写任何斜线表示相对于当前路径的目录
站内引用最好用相对url,这样域名改变了、目录改变了都不受影响。img src=../images/csharp1.jpg />img src=/images/csharp1.jpg />
将的target属性设定为_blank就可以在新窗口中打开超链接。
国情:国内的网站很多都是默认在新窗口中打开。target的取值范围:
_blank :在新窗口中打开
_self :在自己的窗口中打开
_parent :父窗口中打开
_top :表示在顶级窗口打开
框架名称:在指定框架中打开。锚记:用name属性为 起名字:这里是最后。这样可以通过转到平台来跳转到超链接的部分。d、多媒体标签img标签主要在网页中插入图像,可以定义图片替换文本、显示宽度和高度、是否带边框,建议等比例设置,否则图像会变形。 注意图片是链接的,不是插入的,所以如果src指向的文件不存在了,就看不了了。alt属性为图片无法显示时的显示文本,鼠标方式去也会有悬浮提示“点击查看大图”;title用来显示当鼠标放到图片上时显示的文字;border属性指定边框,border=0不显示边框;width、height属性指定图片的显示大小,如果不指定则是图片的原始大小。
img src=图片地址 alt=替换文本,图片打不开的时候显示 width=图片宽度 height=高度 border=0 />
audio标签定义声音,比如音乐或其他音频流。html5新增标签。audio src=someaudio.wav>您的浏览器不支持 audio 标签。audio>
video标签定义视频,比如电影片段或其他视频流。html5新增标签。video src=movie.ogg controls=controls>您的浏览器不支持 video 标签。video>
e、序列化标签ul和li无序列表标签。ul>li>htmlli>li>jsli>li>phpli>ul>
ol和li有序列表标签,可以使用type属性规定有序列表符号的类型。1 按数字有序排列,为默认值,(1、2、3、4);a 按小写字母有序排列,(a、b、c、d);a 按字母大写有序排列,(a、b、c、d)。i 按小写罗马字母有序,(i, ii, iii, iv);i 按小写罗马字母有序,(i, ii, iii, iv)。ol>li>htmlli>li>jsli>li>phpli>ol>
dl标签定义了定义列表(definition list),dl标签用于结合 dt(定义列表中的项目)和 dd(描述列表中的项目)。dl>dt>计算机dt>dd>用来计算的仪器 ... ...dd>dl>
f、表格标签
为表格,在内部通过创建行,
内部通过创建单元格。可以将table的border属性设为0来隐藏表格线。cellpadding内容和表格边线之间的距离cellspacing单元格之间的间距。rowspan(跨行)、colspan(跨列)进行单元格的合并,是td的属性。 1 table width=100% height=193 border=1 cellpadding=0 cellspacing=0 bordercolor=#ff0000 bgcolor=#000000 background=> 2 tr> 3 th>标题th> 4 th>标题th> 5 tr> 6 tr> 7 8 td colspan=2 nowrap=nowrap>td> 9 tr>10 tr>11 td>td>12 13 td rowspan=2> td>14 tr>15 tr>16 td height=16> td>17 tr>18 table>
g、表单标签form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码,需要提交的表单一定要放在form标签内。form id=form1 name=form1 method=post|get enctype=multipart/form-data action=提交到的地址>form>
input标签用于搜集用户信息 1 input name=username type=text maxlength=5 size=100 value=asdfasdfasfd /> 2 3 input name=pwd type=password maxlength=5 size=100 value= /> 4 5 input type=file name=file /> 6 7 input type=hidden name=country value=china /> 8 9 input type=submit name=submit value=提交 disabled=disabled />10 11 input type=reset name=submit2 value=重置 />12 13 input name=sex type=radio value=1 />男14 input name=sex type=radio value=2 checked=checked />女15 16 input name=skill type=checkbox value=1 checked=checked />php17 input name=skill type=checkbox value=2 />前端18 input name=skill type=checkbox value=2 />数据库
注:checked=”checked”可以简写成checked
label标签为input元素定义标注,如果您点击label元素文本,就会触发此input控件。
textarea标签,设置文本区内的可见行数和宽度
禁止拉伸属性:style=resize:none
textarea name=content cols=30 rows=10>大段文本输入框textarea>
button标签定义一个按钮1 2 button type=submit value=提交>提交button>3 4 button type=reset value=重置>重置button>
select标签和option标签下拉列表 1 2 select name=user> 3 option value=1>rayoption> 4 option value=2 selected=selected>raykaesooption> 5 select> 6 7 select name=user size=10 multiple=multiple> 8 option value=1>雷雪松option> 9 option value=2 selected=selected>rayoption>10 option value=3>raykaesooption>11 select>
注:selected=”selected”可简写成selected,表示选中
四、其他html事项html标签和属性是不区分大小写的,建议html标签和属性都小写,属性值必须用双引号包围。html标签都是以开始标签起始,以结束标签终止。大部分html标签都是成对出现的,称为双标签,比如:p标签、div标签,也有的html标签在开始标签中结束的标签,称为单标签,比如:hr标签、br标签。大多数 html 元素可拥有属性,文本内容都是写在开始标签与结束标签之间。html标签之间尽量缩进与换行,每行代码不要过长,方便阅读和维护。html标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签,p标签嵌套div标签。建议不使用html已经废弃的或者不赞成使用的标签,少使用table布局、iframe框架嵌套以及flash播放器。五、表格、表单实例 1 doctype html> 2 html> 3 head> 4 meta charset=utf-8> 5 meta http-equiv=x-ua-compatible content=ie=edge,chrome=1> 6 title>examplestitle> 7 meta name=description content=> 8 meta name=keywords content=> 9 link href= rel=stylesheet>10 head>11 body>12 form method=post action=1.php enctype=multipart/form-data>13 table border=1 bordercolor=#f4f4f4 width=560 align=center cellpadding=5 rules=all>14 caption>个人中心caption>15 tr bgcolor=#f9f9f9>16 td colspan=3>b>1.会员登录名和密码b>td>17 tr>18 tr>19 td align=right>用户名:td>20 td>input type=text name=username maxlength=15 disabled=disabled value=admin>td>21 td>input type=submit value=检测用户名>font color=#0e9eff size=1> 5-15位font>td>22 tr>23 tr>24 td align=right>密码:td>25 td>input type=password name=password maxlength=15>td>26 td>font color=#0e9eff size=1> 密码5-15位font>td>27 tr>28 tr>29 td align=right>确认密码:td>30 td>input type=password name=repassword maxlength=15>td>31 td>font color=#0e9eff size=1> 必须与密码一致font>td>32 tr>33 tr bgcolor=#f9f9f9>34 td colspan=3>b>2.基本信息b>td>35 tr>36 tr>37 td align=right>性别:td>38 td>input type=radio name=sex value=man checked=checked>男input type=radio name=sex value=woman>女td>39 tr>40 tr>41 td align=right>爱好:td>42 td>43 input type=checkbox name=like[] value=游戏 checked=checked />游戏44 input type=checkbox name=like[] value=杀人 />杀人45 input type=checkbox name=like[] value=放火 />放火46 input type=checkbox name=like[] value=看书 />看书br>52 td>53 td>td>54 tr>55 tr>56 td align=right>学历:td>57 td>58 select name=edu>59 option value=小学>小学option>60 option value=初中>初中option>61 option value=高中>高中option>62 option value=大学 selected=selected>大学option>63 option value=研究生>研究生option>64 select>65 td>66 td>td>67 tr>68 tr bgcolor=#f9f9f9>69 td colspan=3>b>3.自我介绍b>td>70 tr>71 tr>72 td algi=right>个性签名:td>73 td>textarea name=qianming cols=40 rows=10 style=resize:none >textarea>td>74 td>td>75 tr>76 tr>77 td align=right>上传头像:td>78 td>79 input type=file name=touxiang>80 input type=hidden name=uid value=90>81 td>82 td>td>83 tr>84 tr>85 td colspan=3 align