Html一天入门
一、什么是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 声明一块区域
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)有序列表和无序列表
有序:
type:列表前序标号
start:从第几个开始。
无序:
- 数据内容
- 用户管理
数据条目:
代码:
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="图片的路径"
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.超链接链接
作用: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.表格标签(重点)
作用:格式化数据
属性:
1)边框 border
2)width 宽度
3)文字与内边框的距离 cellpadding
属性:
1)align 对齐方式(文本内容)
属性:
1)width
2)height
3)colspan 列合并单元格
4)rowspan 行合并单元格
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 商品价格:2999 81 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声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频