15-02-14 HTML

浏览数：28 / 时间：2015年06月09日

HTML 超文本标记语言，在HTML当中存在着大量的标签，我们用HTML提供的标签，将要显示在网页中的内容包含起来，就构成了 我们的网页;

网页中有什么东西，由HTML决定，这些内容长成什么样子由CSS决定;

HTML仅仅是用来控制网页的，网页长什么样，由CSS决定;

HTML+CSS构成了我们看到的漂亮的网页;CSS控制网页内容显示的效果;

HTML+CSS做出来的是静态网页;静态网页，没有什么效果，就一个展示的功能;

JS+JQuery能使网页有动态效果;

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

HTML是不区分大小写的语言; 要将内容显示在网页上，就写在body标签中，

<p></p>段落标签;

&nbsp空格标签; 

在HTML按很多歌空格键只会有一个空格，要使空格增多，就必须加&nasp;

<h#></h#> #1-6 标题标签，h1最大;

<img src = "C:\....."  width="200px" heigth ="200px" border = "1px" alt="原来是美女呀" title="还行吧"/> 图像标签，

HTML中属性是以属性名="值"的形式;,属性与属性之间通过一个空格隔开;

<!-- 要注释的内容 --> html注释符;

alt:当图片由于某些原因显示失败的时候所显示的文本

title：当光标移动到图片上的时候显示的文本;

html元素有始有终;html可以嵌套

<hr/> 水平分割线; 

 用p标签来换行，那么行与行之间有间隙，用br来换行，行与行之间不会有间隙;

> (&gt)   <(&lt)  &(&amp)  空格（&nbsp）

属性的值建议用引号括起来;属性建议均以键值对的形式括起来,一个标签可有多个属性，用空格分开;

<font size="7" color="red" face="仿宋">1</font>  字体标签。size=7是最大的,face字体系列

<b></b>加粗  <i></i>斜体  <tt></tt>打字机类型   <u>下划线</u>    <s>删除线</s>  <sup></sup>上标  <sub></sub>下标

<pre></pre>标签相当于C#的@符号，怎么编辑，怎么打印

<marquee direction ="right"  behavior="slide" ></marquee> 用来显示元素的移动 direction向哪个方向移动，

<a href="http://www.baidu.com" target="_blank">百度</a> 超链接 href表示要链接到的地址 target打开新网页的方式 target="_blank"在新的页面上打开链接， 不加这个的话在原来页面上跳转   target="_self"在原来页面上跳转

<a></a>实现页面内部的跳转; <a name = "dingduan" href = "#diduan"></a>

通过一个页面 <a name = "diduan"   href = "a.html#dingduan“></a>  可以跳到其他页面  其实就是标签与标签之间的跳转;

<a href="mailto:[email protected]"></a>   <a></a>标签还可以发送邮件

不只文字可以超链接，图片也可以 <a href = "#"></a> 是超链接，但是不会跳转;

<body text="green" link="pink" alink="black" vlink="green"  bgcolor="pink" background="1.jpg" >  //text body中的文本颜色  link body中超链接的颜色  alink body中超链接按下时候的颜色  vlink body中超链接按过后的颜色 bgcolor body中背景颜色 background body中背景图片; </body>

<ul type = "disk"> //type指的是前面的类型 <li></li> 列表中的每一项 </ul>无序列表

<ol type = "a"> //type指的是从什么开始，默认是1开始的; <li></li> </ol>有序列表

<dl>

<dt></dt>

<dd></dd>

<dd></dd>

<dd></dd>

<dt></dt>

<dd></dd>

<dd></dd>

<dd></dd>

<dd></dd>

</dl>

<table border="1" cellspacing="0px" cellpadding="5px">

<tr>    

<td>单元格内容</td>

</tr>

<tr>   

 <td>单元格内容</td>

</tr>

</table>

cellspacing 单元格与单元格之间的距离

cellpadding 文字离边框的距离;

在<table>中行数列数要数多的；

<html>

<head>

<title></title>

</head>

<body>

<table border="1px" cellspacing="0px" cellpadding="0px" >

<tr>

<td colspan="2">学生成绩</td>

</tr>

<tr>

<td>语文</td>

<td>98</td>

</tr>

<tr>

<td>数学</td>

<td>95</td>

</tr>

</table>

</body>

</html>

单元格跨列用colspan属性来实现 

<html>

<head>

<title></title>

</head>

<body>

<table border="1px" cellspacing="0px" cellpadding="0px" height="100px" width="280">

<tr>

<td rowspan="2">张三</td>

<td>语文</td>

<td>98</td>

</tr>

<tr>

<td>数学</td>

<td>95</td>

</tr>

<tr>

<td rowspan="2">李四</td>

<td>语文</td>

<td>88</td>

</tr>

<tr>

<td>数学</td>

<td>95</td>

</tr>

</table>

</body>

</html>

单元格跨行用rowspan属性来实现

 

<html>

<head>

<title></title>

</head>

<body>

<table border="1px" cellspacing ="0px" cellspadding="0px" height ="100px" weight = "100px">

<tr>

<td><font color = "blue">手机充值，IC卡</font></td>

<td colspan="3"><font color = "blue">手机充值，IC卡</font></td>

</tr>

<tr>

<td rowspan = "3">各种卡的总汇</td>

<td>铅笔</td>

<td>铅笔</td>

<td>铅笔</td>

</tr>

<tr>

<td>铅笔</td>

<td>铅笔</td>

<td>铅笔</td>

</tr>

<tr>

<td>铅笔</td>

<td>铅笔</td>

<td>铅笔</td>

</tr>

</table>

</body>

</html>

如果看到表格中的加粗的，可以把它的<td></td>换为<th></th>,<th>是表格的标题;

<html>

<head>

<title></title>

</head>

<body>

<table border="1px" cellspacing="0px" cellpadding="0px" height="100px" width="280">

<tr>

<th colspan="3" >学生基本情况</th>

</tr>

<tr>

<th>姓名</th>

<th>性别</th>

<th>专业</th>

</tr>

<tr>

<td>刘备</td>

<td>男</td>

<td rowspan = "3">计算器</td>

</tr>

<tr>

<td>孙尚香</td>

<td>女</td>

</tr>

<tr>

<td>诸葛亮</td>

<td>男</td>

</tr>

</table>

</body>

</html>

<table></table>的属性bgcolor border bordercolor cellspacing cellpadding width height

<td></td>的属性 align valign colspan rowspan width height bgcolor

align : left center right    控制文本在单元格中的左中右位置

valign : top middle botton    控制文本在单元格中的上中下位置

设置网页中元素的外观，我们会用CSS

在网页中使用表单的作用就是向服务器传输数据;<form></form> HTML表单是用于搜集用户输入的，HTML表单都扩在一对<form>标签中，

<form>的常用属性 action 表示提交的目标服务器 method 提交的方法get post get默认，（以url提交，就是以地址栏的方式提交） post通过报文提交;

表单里面的元素全是input标签，只不过类型不一样，

<input type ="text" name = "txtName"/>

<input type ="password" name = "txtPwd"/>

<input type ="submit" value = "提交">

<input type = "reset" value= "重置">

<fieldset>

<legend>性别</legend>

<input type ="radio" name="sex"/>男<br/>

<input type ="radio" name="sex"/>女<br/>

</fieldset>

<fieldset>

<legend>婚姻状况</legend>

<input type ="radio" name="married"/>已婚<br/>

<input type ="radio" name="married"/>未婚<br/>

</fieldset>

wiform后台拿到前面空间的对象，通过name去拿;html也是一样，要设置一个name属性; <fieldset>能分成一个一个区域;

<select>

<optgroup label="河北省">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</optgroup>

<optgroup label="河南省">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</optgroup>

<optgroup label="湖北省">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</optgroup>

<optgroup label="湖南省">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</optgroup>

</select>

<select></select>相当于combox

<input type = "file">

<textarea cols = "20" rows = "3">  </textarea> 文本域

 <html>

<head>

<title></title>

</head>

<body>

<form action="http://www.baidu.com" method="get">

<table border="1px" cellspadding = "0px"  cellspacing="0px">

<tr>

<td>用户名</td>

<td><input type="text" name="txtName"/></td>

</tr>

<tr>

<td>密码</td>

<td><input type="password" name="txtPwd"/></td>

</tr>

<tr>

<td>验证码：</td>

<td><input type = "text" name="txtJudge"/><img src="image1.jpg"></td>

</tr>

<tr>

<td></td>

<td><input type = "checkbox" name="txtRem"/>记住密码</td>

</tr>

<tr>

<td></td>

<td><input type = "submit"/><input type = "reset"/> 记住密码</td>

</tr>

</table>

</form>

</body>

</html>

给网站布局div比table更为好用;

div标签独占一行;span标签不独占一行;

<html>

<head>

<title></title>

</head>

<body>

<div style="background:red;height:50px;width:300px">我是一个div</div>

<span>哈哈哈哈</span>

</body>

</html>

一般对文本设置样式的时候一般都扔到span里面去，span标签专门修饰文本，在布局的时候用到div

<html>

<head>

<title>左边的页面</title>

</head>

<body bgcolor="pink">

<a href = "www.mop.com" target="Right">猫扑</a>

<a href = "www.dapengti.com" target="Right">打喷嚏</a>

<a href = "www.cnbeta.com" target="Right">cnbeta</a>

<a href = "www.51aspx.com" target="Right">51aspx</a>

</body>

</html>

left.html

<html>

<head>

<title>右边的页面</title>

</head>

<body bgcolor="green">

i‘m right

</body>

</html>

right.html

<html>

<head>

<title>上边的页面</title>

</head>

<body bgcolor="yellow">

i‘m top

</body>

</html>

作为框架页面的承载页面是不允许有<body>标签的，用<frameset></frameset>来代替;

 

<html>

<head>

<title></title>

</head>

<frameset rows="15%,*">  

     <frame src="top.html"  noresize="noresize"/>

        <frameset cols="30%,*">  

            <frame src="left.html"  noresize="noresize"/>   

            <frame src="right.html" name = "Right" />

        </frameset>

   </frameset>

</html>

里面的页面也可以作为承载页;

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： style com 使用 src html http si 数据 it style com 使用 src html http si 数据 it

相关文章

随机文章

您可能还喜欢

您可能还喜欢