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 静夜思<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 商品价格：2999 81 </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
代码下载地址：
https://github.com/BigShow1949/02-HTML-CSS
浙公网安备 33010602011771号