你的位置:首页 > 网页设计

[网页设计]Html一天入门


一、什么是HTML

1.html:

HyperText Markup Language 超文本标记语言,是最基础的网页语言,而且都是由标签组成。

 

2.基本格式:

<html>
  <head>
    放置一些属性信息,辅助信息。
    引入一些外部的文件。(css,javascript)
    它里面的内容会先加载。
  </head>
  <body>
    存放真正的数据。
  </body>
</html>

 

3.注意事项
1)多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
2)想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
3)属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。

 

二、常见标签

1.排版标签

1)换行 <br/>
2)<p></p> 段落标签 在开始和结束的位置上会留一个空行。

  属性:align= 对齐方式
3)<hr /> 一条水平线
  属性:
    1)宽度:width 值像素 100px 可以写百分比 30%
    2)align= 对齐方式
    3)size 粗细
    4)color 值 red green blue RGB 三原色 (red green blue #aa55ff)

4)div 声明一块区域 <div>数据</div> css+div
5)span 声明一块区域

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>排版标签</title> 5   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6  7  </head> 8   9  <body>10    这是一首古诗。11    <hr width="300px" size="20px;" color="red"/>12    <p align="center">13    &nbsp; 静夜思<br/>14    床前明月光,<br/>15    疑是地上霜。<br/>16    举头望明月,<br/>17    低头思故乡。<br/>18    </p>19     一首非常出名的古诗。20    21    <hr/>22    <div>这是div区域1</div>23    <div>这是div区域1</div>24    <span>这是span的区域1</span>25    <span>这是span的区域2</span>26  </body>27 </html>

显示:

 

 

2.字体标签

1)<font>文本内容</font>
  属性:
    1)size 字号的大小 最大值是7 最小值是1
    2)color 颜色
    3)face 字体

2)标题标签
  <h1></h1>
  ...
  <h6></h6>
    从大到小字体缩小。

3)<B></B>粗体
4)<I></I>斜体
    标签支持嵌套

 

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>字体标签</title> 5   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6  7  </head> 8   9  <body>10    <h2>排版标签</h2>11    <font size="7">文本内容</font><br/>12    <font size="10">文本内容</font><br/>13    14    <hr/>15    16    <h1>这是一级标题</h1>17    <h2>这是二级标题</h2>18    <h3>这是三级标题</h3>19    <h4>这是四级标题</h4>20    <h5>这是五级标题</h5>21    <h6>这是六级标题</h6>22    23    <hr/>24    25    <b><i>这是粗体又是斜体</i></b>26    <I>这是斜体</I>27    28    29  </body>30 </html>

显示:

 

3.列表标签

1)dl 列表标签
  <dl>
    <dt>上层项目</dt>
    <dd>下层项目</dd>特点:自动对齐,自动缩进。
  </dl>

2)有序列表和无序列表
  有序:<ol>
    type:列表前序标号
    start:从第几个开始。
  无序:<ul>
    数据条目:<li>数据内容</li>
    <li><a href="后台的路径">用户管理</a></li>

 

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>列表标签</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9   10 11  </head>12  13  <body>14    <h3>列表标签</h3>15    <dl>16      <dt>上层项目</dt>17      <dd>下层项目</dd>18      <dd>下层项目</dd>19      <dd>下层项目</dd>20    </dl>21    22    <hr/>23    24    <h3>有序列表</h3>25    <ol type="a" start="4">26      <li>有序列表</li>27      <li>有序列表</li>28      <li>有序列表</li>29    </ol>30  31    <h3>无序列表</h3>32    <ul type="square">33      <li>无序列表</li>34      <li>无序列表</li>35      <li>无序列表</li>36    </ul>37    38  </body>39 </html>

显示:

4.图片标签

<img >
  属性:src="图片的路径"
            width 显示图片的宽度
        height 显示图片的高度
        alt 图片的说明文字/Users/apple/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/Users/.png

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>图片标签</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9   10 11  </head>12  13  <body>14    <h3>图片标签</h3>15    <img src="girl4.jpg" width="800px" height="600px" alt="啊,美女!">16    17  </body>18 </html>

显示:一个美女

 

5.超链接链接

  <a></a>
  作用:1)链接资源
        href="" 必须指定 如果href的值不指定,默认是file文件的协议。只有自己指定协议,链接资源。如果href中指定的协议,浏览器不能解析,就会调用应用程序,可以解析的程序就可以打开。
     2)定位资源
        name 名称 专业术语 锚

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>超链接标签</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9   10 11  </head>12  13  <body>14   <a href="http://www.baidu.com">百度</a><br/>15   <a href="girl4.jpg">啊,美女!</a><br/>16   <a href="mailto:xxx@sina.com">联系我们</a><br/>17   <a href="http://www.xunlei.com/moves/bxjg.rmvb">变形金刚</a><br/>18   <a href="thunder:23cwe2s@32sd==">变形金刚</a><br/>19   20   <hr/>21   22   <a name="top">顶部位置</a>23   <hr/>24   25   50年前,长沙镖子岭。26 27   四个土夫子正蹲在一个土丘上,所有人都不说话,直勾勾地盯着地上那把洛阳铲。28 29 30   <hr/>31   32   <a name="center">中间位置</a>33   <hr/>34 35 36 50年前,长沙镖子岭。37 38   四个土夫子正蹲在一个土丘上,所有人都不说话,直勾勾地盯着地上那把洛阳铲。39 40 <hr/>41   42   <a href="#top">回到顶部</a>43   <a href="#center">回到中间</a>44   <hr/>45   46  </body>47 </html>

显示:这里可以多搞一些文字

 

6.表格标签(重点)

作用:格式化数据
<table></table> 声明一个表格
  属性:
    1)边框 border
    2)width 宽度
    3)文字与内边框的距离 cellpadding

<tr></tr> 行
  属性:
    1)align 对齐方式(文本内容)

<td></td>
  属性:
    1)width
    2)height
    3)colspan 列合并单元格
    4)rowspan 行合并单元格
<th></th> 会加粗 并且会居中。
<caption> 表格的标题
colspan 合并行, rowspan合并列

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>表格标签</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9   10 11  </head>12  13  <body>14  <!-- 15    序号 姓名 性别16    1   张三  女17  -->18  19  <table border="1" width="400px" cellpadding="8" cellspacing="1">20    <caption>用户列表</caption>21    <tr>22      <th>序号</th>23      <th>姓名</th>24      <th>性别</th>25    </tr>26    <tr align="center">27      <td>1</td>28      <td>张三</td>29      <td>女</td>30    </tr>31    <tr align="center">32      <td>2</td>33      <td>李四</td>34      <td>男</td>35    </tr>36  </table>37  38  <hr/>39  40  <table border="1" width="400px" cellpadding="8" cellspacing="1">41    <caption>用户列表</caption>42    <tr>43      <th>序号</th>44      <th>姓名</th>45      <th>性别</th>46    </tr>47    <tr align="center">48      <td>1</td>49      <td>张三</td>50      <td>女</td>51    </tr>52    <tr align="center">53      <td>2</td>54      <td>李四</td>55      <td>男</td>56    </tr>57    <tr align="center">58      <td colspan="3">59        人数总计:<font color="red">2人</font>60      </td>61      <!-- <td></td>62      <td></td> -->63    </tr>64  </table>65  66  <hr/>67  68  <table border="1" width="400px" cellpadding="8" cellspacing="1">69    <tr>70      <td rowspan="3">71        <img src="bx.jpg" width="150px" height="200px">72      </td>73      <td>74        商品信息:冰箱75      </td>76    </tr>77    <tr>78      <!-- <td></td> -->79      <td>80        商品价格:299981      </td>82    </tr><tr>83      <!-- <td></td> -->84      <td>85        <img src="gwc.png">86      </td>87    </tr>88  </table>89  90  91  </body>92 </html>

显示:

 

7.表单标签(重点)

作用:可以和服务器进行交互。
输入项的内容 用户名 密码
<form></form>
  属性:action="提交的请求位置"
     method 提交方式(get和post) 如果method没有写默认是get方式提交。

      get和post区别:
      1)get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
      2)get方式安全级别较低,post级别较高。
      3)get方式数据的长度,post支持大数据。


  ** ?sex=on:
  在每个输入的标签中指定name和value name必须指定
  ?username=haha&pwd=1223&sex=nv&jishu=html

 

<input />
  属性:type 值可以指定很多的值,每一个不同的值代表的不同输入组件。

  1)type=text 文本框
  2)type=password 密码
  3)type=radio 单选按钮
    name属性
  4)type=checkbox 多选按钮
    单选和多选都有默认值:checked="checked"
  5)type=reset 重置按钮
  6)type=submit 提交按钮
  7)type=file 上传文件的输入项
  8)type=button 按钮
  9)type=image 图片(也是提交按钮,)
  10)type=hidden 隐藏标签(用户不用看到的,但是咱们开发时必须要使用的,可以把数据封装到隐藏标签中,和表单一起提交到后台)。

  选择标签
    <select></select>选择下拉框
  文本域textarea
    <textarea>文本内容</textarea>

 

8.框架标签

<frameset>

  <frame>
</frameset>

框架标签不能写在<body>的内部。body不能写在frameset的上面。

代码:

left.html:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>left.html</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10  </head>11  12  <body>13    <ul>14      <li><a href="http://www.baidu.com" target="right">百度</a></li>15      <li><a href="http://www.sina.com" target="right">新浪</a></li>16    </ul>17  </body>18 </html>

right.html:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>right.html</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9   10   <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12  </head>13  14  <body>15    <font color="green" size="7">北京欢迎您!!</font>16  17  </body>18 </html>

top.html:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>顶部logo</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9   10   <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12  </head>13  14  <body>15    <img src="../girl4.jpg" height="160"/>16    17  </body>18 </html>

09-htmldemo.html:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3  <head> 4   <title>框架标签</title> 5    6   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7   <meta http-equiv="description" content="this is my page"> 8   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9   10   <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12  </head>13  14  <frameset rows="160,*">15    <frame src="top.html" name="top">16    <frameset cols="180,*">17      <frame src="left.html" name="left">18      <frame src="right.html" name="right">19    </frameset>20  </frameset>21  22 <body>23    24  </body>25 </html>

 

 显示:注意这里的frameset