Html一天入门

行
　　属性：
　　　　1）align 对齐方式（文本内容）

　　属性：
　　　　1）width
　　　　2）height
　　　　3）colspan 列合并单元格
　　　　4）rowspan 行合并单元格
会加粗并且会居中。

一、什么是HTML

1.html：

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

2.基本格式：

　　
　　　　放置一些属性信息，辅助信息。
　　　　引入一些外部的文件。（css，javascript）
　　　　它里面的内容会先加载。
　　
　　
　　　　存放真正的数据。
　　

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

二、常见标签

1.排版标签

1）换行

2）

段落标签在开始和结束的位置上会留一个空行。

　　属性：align= 对齐方式
3）

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

4）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         静夜思<br/>14        床前明月光，<br/>15        疑是地上霜。<br/>16        举头望明月，<br/>17        低头思故乡。<br/>18        p>19        一首非常出名的古诗。20        21        <hr/>22        <div>这是div区域1div>23        <div>这是div区域1div>24        <span>这是span的区域1span>25        <span>这是span的区域2span>26   body>27 html>

显示：

2.字体标签

1）文本内容
　　属性：
　　　　1）size 字号的大小最大值是7 最小值是1
　　　　2）color 颜色
　　　　3）face 字体

2）标题标签
　　

　　...
　　

　　　　从大到小字体缩小。

3）粗体
4）斜体
　　　　标签支持嵌套

代码：

 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 列表标签
　　

上层项目: 下层项目

2）有序列表和无序列表
　　有序：

数据内容

用户管理

代码：

 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.图片标签

　　属性：src="图片的路径" %20%20　　　　　　%20%20%20%20%20%20width%20显示图片的宽度 %20%20　　　　　　　　height%20显示图片的高度 %20%20　　　　　　　　alt%20图片的说明文字/Users/apple/Library/Containers/com.tencent.qq/Data/Library/Application%20Support/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.超链接链接

　　
　　作用：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.表格标签（重点）

作用：格式化数据

表格的标题
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   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>1td>28           <td>张三td>29           <td>女td>30       tr>31       <tr align="center">32           <td>2td>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>1td>49           <td>张三td>50           <td>女td>51       tr>52       <tr align="center">53           <td>2td>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           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           79           <td>80               商品价格：299981           td>82       tr><tr>83           84           <td>85               <img src="gwc.png">86           td>87       tr>88   table>89   90   91   body>92 html>

显示：

7.表单标签（重点）

作用：可以和服务器进行交互。
输入项的内容用户名密码

　　属性：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

　　属性：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 隐藏标签（用户不用看到的，但是咱们开发时必须要使用的，可以把数据封装到隐藏标签中，和表单一起提交到后台）。

　　选择标签
　　　　选择下拉框
　　文本域textarea
　　　　文本内容

8.框架标签

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

代码：

left.html：

 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>left.htmltitle> 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