一、什么是html
HTML(HyperText Mark-up Language)即超文本标记语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、劢画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的 具体内容。
- HTML5正在成为前段最热技术
二、html语法
- html的标签要求小写
- 如果标签中有属性,则属性必须有值,且值必须被引号(单、双引号都行)引起
- 标签不能交叉嵌套
html的注释是<!-- -->,注释不能嵌套
三、head与body元素
<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义:– 对文档做整体的控制– SEO(Search Engine Optimization)的重要内容!
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。bgcolor
bgcolor属性将背景设置为颜色,它的值可以是一个十六进制数、RGB值或者一种颜色名称。
<body bgcolor="#000000">
<body bgcolor="black">
• background
background属性将背景设置为图像,它的值是你所要使用图像的URL地址。图像文件的容量尽量不要超过10K。
<body background=“./images/sky.jpg” >
bgcolor和background不能同时使用!
四、常用标签
1、文字部分
标签名 |
描述 |
p |
段落 |
h1到h6 |
标题 |
br |
换行 |
hr |
水平线 |
del |
删除文字 |
b |
粗体字 |
i |
斜体字 |
sub |
下标 |
sup |
上标 |
pre |
如实显示 |
2、图像
<img>标签的属性
– src:图像文件地址
– width:图像宽
– height:图像高
– border:图像边框
– title:表示鼠标在图片上停留时,显示一个文
字悬浮框。
– alt:用于图片没显示时,显示一个说明文字。
3、嵌入多媒体
<embed>标记用于在页面中嵌入多媒体文件,但是用户计算机上需要事先安装相应的处理程序.(一般用于IE和基于IE内核
的浏览器。火狐需要安
装插件才行。)
• html5使用video标签和audio标签
常用嵌入式文档的格式:
mp3, mid, wma, asf, swf, flv, rm, ra, ram, avi
4、超链接
<a href=“5.htm”>5.htm</a> 超链接
• 图片作为链接。
<a href="lastpage.htm">
<img border="0" src=".images
ext.gif">
</a>
• target属性(定义从什么地方打开链接地址 )
<a href="http://www.163.com/" target="_blank">163!</a>
5、列表
有序列表 (orderlist)
<ol type=I >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
无序列表 (unorderlist)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
6、表格
<table>
• <tr>行
• <th>表格头
• <td>列
– colspan=“2”跨两列
– rowspan=“2”跨两行
– align=left,right,center 对齐方式
7、表单
表单用于收集和提交用户输入的数据。表单提交后,表单中的数据会被浏览器发送到服务器,
服务器通过相关的程序获取。是客户端和服务器端交互的重要手段。是我们服务器端程序设计人员需要
重点掌握的HTML标记。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表单练习</title> </head> <body> <from action="" metion="get" enctype="application/x-www-form-urlencoded"> 用户名:<input type="text" name ="user" placeholder="请输入用户名"></br> 密码:<input type="password" name="pwd" ></br> 确认密码:<input type="password" name="pwd_copy"></br> Email:<input type="email" name="uemail" ></br> MSM:<input type="text" name="msm"></br> 天阳从哪边升起?<select> <option>东边</option> <option>西边</option> </select></br> 高级选项:<input type="checkbox" name="high_option" value="显示高级用户选项">显示高级用户选项设置</br> 安全提问:<select> <option >我的生日是什么?</option> <option>我的家在哪</option> </select></br> 回答:<input type="text" name="answer"></br> 性别:<input type="radio" name="gender" value="男">男 <input type="radio" name="gender" value="女">女</br> 生日:<input type="date" name="birthday"></br> 来自:<input type="text" name="home"></br> 主页:<input type="url" name="homepage"></br> QQ:<input type="text" name="qq"></br> ICQ:<input type="text" name="icq"></br> yahoo:<input type="text" name="yahoo"></br> </from> </body> </html