Hello HTML

发表于 | 更新于 | 评论数： | 阅读次数：

写在开头

 又停更了一段时间,我发现静态博客的坏处是必须用自己的电脑才可以上传,不是每一天的晚上都想打开自己的电脑.
 我在想要不要把博客迁移到动态博客,但是这就意味着需要去购买服务器和域名,让我抽空去看一下有没有好看的动态博客再说吧
 我学习Java主要的还是用来做web后台开发,需要对web有一点了解,从今天开始写一些关于java web的博客,包括但不仅限于:html,js,jQuery,tomcat&servlet,xml,各类框架,还有案例.
 Let’s Go!

HTML

 学习的时候有写思维导图的习惯,但是一直没在博客里贴出来,因为HTML的内容相对来说比较简单,所以说这一节我贴一个html的思维导图(提供高清版下载),贴一些代码去更真实的体验下html代码的使用
 我也会把学习过程的软件以链接的形式贴上去(阿里云存储服务器,不会限速的(✿◡‿◡))

 废话不多说,开始吧~ 思维导图下载
  

  

html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!--不是标签，是文档声明，告诉浏览器以html5的规范来渲染文件-->
<!DOCTYPE html>
<!--网页的整体标签-->
<html>
	<!--
		网页的头部标签
		定义网页的编码格式
		网页的名称
		引入的样式
		引入的行为
	-->
	<head>
		<!--定义网页的编码格式，支持显示中文-->
		<meta charset="utf-8" />
		<!--网页的标题名称-->
		<title>cnfox 前端</title>
	</head>
	<!--网页的主体部分，页面中承载的内容全部写在body中-->
	<body>
		cnfox.github.io
		<!--
			ctrl N 新建
			ctrl S 保存
			ctrl Z 撤销
			ctrl / 注释
			shift ctrl / 注释，多行注释
		-->
		<!-- 下面是一些常用的标签 -->
		
		<h1>这是标题标签,双标签,h1-h6标题依次变小</h1>
		<p>这是一个段落标签,双标签</p>
		<hr size="1" color="pink"/><!-- 这是一个水平线标签 ,但标签,可以在标签内添加行间属性 -->
		
		<!-- 
			size属性：分割线的粗细，取值1~7的整数，值越大越明显
            color属性：分割线的颜色
                        延伸的知识点，标签属性(行间属性、功能属性，完全区分于css属性)的设置:
            (1)、设置在标签的行间，双标签设置在开标签内，单标签就在单标签内部！
            (2)、行间属性的名称要与标签名使用空格分隔
            (3)、属性与属性之间，也要使用空格隔开
            (4)、属性的语法格式：属性名=”属性值”
          -->
          <br /><!-- 这是一个换行标签 单标签-->
          <font size="3" color="pink">这是一个文字标签,可以设置大小(单位px),颜色(英语单词,十六进制代码,RGB三原色)等参数</font><br />
          <b>自带加粗特效的标签</b><br />
          <i>自带斜体效果的标签</i><br />
          <!-- 下面的是img图片标签 单标签
          	src属性：表示图片的路径地址
                        路径分为绝对路径与相对路径
                        绝对路径，比如网址链接资源，或者从本地磁盘出发的绝对路径
                        相对路径主要从当前项目工程中寻找路径
            width属性：宽度
            height属性：高度
                        以上两个属性，可以同时设计，也可以只给一个，另一个等比缩放
            alt属性：当图片破裂时，显示的文本提示，用来增强用户体验

          -->
          <img src="https://cnfox.oss-cn-beijing.aliyuncs.com/img/logo.png" alt="logo.png"/><br />
          <!-- 下面是超链接标签 
          	href属性：超链接的地址，可以是绝对路径，也可以是相对路径
            target属性：链接地址的打开方式或者打开位置，默认是_self刷新当前页面，如果设置为_blank则在新的标签页中打开
            title属性：鼠标悬停在标签上时，出现的文本提示
          -->
          <!--标签是可以这样嵌套的 -->
          <font color="pink" size="6"><a href="cnfox.github.io" target="_blank">cnfox blog </a></font><br />
          <!-- 下面是有序列表和无序 列表-->
          <ol type="i">
          	<li>这是一个有序列表</li>
          	<li>type属性可以设置序列前的标志</li>
          	<li>提供了多种展现形式</li>
          </ol>
          <ul>
          	<li>这是一个无序列表</li>
          	<li>type属性可以设置序列前的标志</li>
          	<li>提供了多种展现形式</li>
          </ul>
          <dl >
          	<dt>这是一个嵌套组合标签</dt>
          	  <dd>dl表示整体</dd>
          	  <dd>dt表示列表项标题</dd>
          	<dt>自定义序列</dt>
          	  <dd>dd表示列表内的内容</dd>
          	  <dd>--</dd>
          </dl>
	</body>
</html>

 废话不多说,开始吧
 markdown是不支持html语言代码的自动上色嘛 ? 还是我操作的不对啊?

html表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML表格</title>
	</head>
	<body>
		
<!--表格标签的作用是什么？？？
表格的作用就是为了让数据的显示更加合理、更加鲜明。

表格也是一组嵌套的组合标签！！！
table表格的整体标签
caption 表格的标题
tr(table row) 表格的行
tr中的标签 th(table header) 表头单元格  td(table data)数据单元格

表格中的标签属性：
1、border属性，设置给table标签，让表格整体出现边框以及内部的单元格分隔线，一定要设置。但是值不能给0，可以不给值，可以给具体值，值越大，边框越粗
2、cellspacing属性，单元格与单元格之间的间隙，设置给table标签，一般给0
3、cellpadding属性，单元格与自身内容之间的间隙，设置给table标签，值视情况而定
4、width属性：宽度，设置给table，影响的是表格整体的宽度，设置给th或者td，影响的是当前单元格所在这一列的整体宽度，因为表格是默认对齐的。不能设置给tr
5、height属性：高度，设置给table，影响的是表格整体的高度，设置给tr，影响是这一行的高度，设置给th或者td，影响的是当前单元格所在行的高度
6、align属性：对齐方式，left左对齐、right右对齐、center居中对齐
设置给表格table，影响的是表格整体的位置，与表格内部的内容位置无关
设置给tr，影响的是这一行中所有单元格中内容的位置
设置给th或者td，影响的是当前这个单元格中内容的位置
7、bgcolor属性：背景颜色
设置给表格table，表格整体变色
设置给tr，这一行变色
设置给th或者td，当前单元格变色
8、rowspan属性：行合并，在想要合并的单元格第一个位置上设置rowspan，值为合并的个数，但一定要删除被合并的单元格，否则表格会错乱
9、colspan属性：列合并，在想要合并的单元格第一个位置上设置colspan，值为合并的个数，但一定要删除被合并的单元格，否则表格会错乱
-->
<table border="" cellspacing="" cellpadding="10" align="center" height="300px" width="600px" bgcolor="pink">
	<caption><h1>html表格</h1></caption>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>爱好</th>
		<th>备注</th>
	</tr>
	<tr>
		<td>cnfox</td>
		<td>Data</td>
		<td rowspan="2">Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<td>cnnull</td>
		<td>Data</td>
		<!--<td>Data</td>--> <!--rowspan合并删除的合并单元格-->
		<td>Data</td>
	</tr>
	<tr>
		<td>cncandy</td>
		<td>Data</td>
		<td colspan="2">Data</td>
		<!--<td>Data</td>--> <!--colspan合并删除的合并单元格-->
	</tr>
</table>
	</body>
</html>

html表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单</title>
	</head>
	<body>
		
<!--
	
表单的作用：收集数据、整合数据、一并提交！是连接前端页面与后台服务的窗口！！！

表单中的标签有哪些？？？
表单的整体标签 form
用于收集数据的标签有：
input
select...option
textarea
以上三个标签要想起作用，需要放置在form中，作为组合标签使用！

form标签：
action属性：表单收集完数据之后，提交的地址
method属性：表单提交数据的方式，常用的为get和post

一个完整的url路径包含的内容：
协议，主机，端口，域名，参数列表
http://127.0.0.1:8020/Day01HTML/form.html?username=%E8%80%81%E5%92%8C%E5%B0%9A
？用于分隔url主体与参数部分，而参数部分的传递格式是：
参数名=参数值&参数名=参数值！
在通过表单传递数据时，要为传递的数据设置关键字，以供后台来获取，关键字设置在表单标签中的name属性上！！！

那表单怎么收集数据呢？？？需要借助表单元素标签
1、input标签
type属性，用于标识input标签的类型
text 文本输入框
password 密码输入框，输入的内容为小黑点
radio 单选框
checkbox 复选框
file 文件上传类型
hidden 隐藏域
date 日期
button 普通按钮
reset 重置按钮
submit 提交按钮：表单真正提交的操作就是点击submit提交按钮！
name属性，设置表单提交的数据关键字，供后台使用！！！按钮不需要设置name属性，其余的想要传递数据的input元素，都需要设置name属性！！！
value属性，表单提交的数据值书写在value属性中，输入框可以不设置value，可以手动输入，但是单选框、复选框必须设置value属性的值！
placeholder属性，占位符，主要应用于输入框，来提示用户的输入内容，增强用户体验
checked属性，针对于单选框以及复选框提供了默认选中功能！

-->
<form action="" method="get">
	姓 名 :<input type="text" name="user" id="user" value="" placeholder="请输入姓名.."/><br /><br />
	密 码 :<input type="password" name="paw" id="paw" value="" placeholder="请输入密码..."/><br /><br />
	性 别 :
	    <input type="radio" name="gender" id="gender" value="男" />男
	    <input type="radio" name="genser" id="genser" value="女" />女<br /><br />
	爱 好 :
	    <input type="checkbox" name="hobby" id="hobby" value="吃饭" />吃饭
	    <input type="checkbox" name="hobby" id="hobby" value="睡觉" />睡觉
	    <input type="checkbox" name="hobby" id="hobby" value="打豆豆" />打豆豆<br /><br />
	生 日 :<input type="date" name="date" id="date" value="" /><br /><br />
	省 份:
	<select name="pro" multiple="select">
		<option value="山东省" selected="">山东省</option>
		<option value="江苏省">江苏省</option>
		<option value="安徽省">安徽省</option>
	</select><br /><br />
	备 注 :
	     <textarea name="" rows="" cols="" style="resize: none;"">此处写一些备注</textarea><br /><br />
	头 像 :<input type="file" name="file" id="file" value="" /><br /><br />
	隐 藏 :<input type="hidden" name="hidden" id="hidden" value="隐藏传输数据" /><br /><br />
	按 钮 :<input type="button" name="but" id="but" value="无功能按钮" /><br /><br />
	重 置 :<input type="reset" name="" id="" value="重置" /><br /><br />
	<input type="submit" value="提交"/>
</form>
	</body>
</html>

`

###CSS

CSS引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
	<head>
<!--学习顺序:行间引用-内部引用-外部引用-->
		<meta charset="utf-8" />
		<title>CSS代码引入</title>
        <!-- 内部引用代码 -->
		<!--<style type="text/css">
			/*CSS 选择器 前端核心内容 用于通过特定的选择原则来匹配标签,并为满足匹配原则的标签设置css样式
			熟练灵活使用选择器 会节省大量的时间 以及减少代码量*/
			div{
				width: 200px ; 
				height: 200px ; 
				background-color: red;
			}
		</style>-->
        <!-- 外部引用代码 -->
		<!-- 首先创建独立的css文件 在文件中写css样式 也需要借助选择器 -->
		<!-- 想要使用外部css样式 在head内使用link链接 css样式 -->
		<!-- link标签可以使用多次 -->
		<!-- 本质上解决了样式和结构的分离  -->
		<link rel="stylesheet" type="text/css" href="css/Style.css"/>
	</head>
	<body>
		<!-- css引用方式 -->
<!-- 行间引用:在标签行间属性style 来为标签设置样式 -->
		<!-- 优点 书写简单 css样式的优先级高 -->
        <!-- 缺点 重复代码 可读性差 冗余度高 没有实现样式和结构的分离 -->
        <!-- 像素级别需加单位:px -->
  	<!--行间引用代码-->      
	<!--<div style=" width: 200px; height: 200px; background-color: dodgerblue;">cnfox是一个优秀的Blog</div>
	<div style=" width: 200px; height: 200px; background-color: dodgerblue;">cnfox是一个优秀的Blog</div>-->
	
<!-- 内部引用 -->
	    <!-- 在 head 标签内使用style标签 ;来设置样式 需要搭配选择器-->
	    <!-- 优点 样式复用 代码精简 可读性强 -->
	    <!-- 缺点 没有从本质上实现样式和结构的分离 -->
	    <!-- 内部引用代码 -->
	    <!--<div>cnfox是一个优秀的Blog</div> 
	    <div>cnfox是一个优秀的Blog</div>-->   
<!-- 外部引用  --> 
	<div id="div1">cnfox是一个优秀的Blog</div> 
	<div id="div2">cnfox是一个优秀的Blog</div>
	</body>
</html>
1
2
3
4
5
div{
		background-color: pink;
                width: 400px;
                height: 200px;
}

选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
	<head>
<!--学习顺序 标签选择器-ID选择器-类选择器-后代选择器-子代选择器-通配选择器-->
<!--优先级顺序 *<标签<类<id<后代<行间style-->
<!--  -->
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
	    /*通配选择器*/
	   /*一般用来清除系统标签的默认样式*/
	         *{
	   	
	        }
		/* 标签选择器 */
			/* 匹配原则 为这一类便签设置同样样式 div-div */
			div{
				width: 300px; 
				height: 40px;
				border: 2px pink solid;
			}
			/*区别相同标签 分别设置样式 引入ID选择器*/
			/* 匹配原则 为添加了此ID 值的便签设置样式 ID值可以重复 */
			#div1{
				color: #FFFF00;
			}
			#div2{
				color: #FFC0CB;
			}
			p{
				width: 300px;
				height: 40px;
				border: 1px red solid;
			}
			#p1{
				color: blue;
			}
			/*类选择器.(类名){}*/
			.font{
				font-size: 20px;
			}
			.font2{
				background: red;
			}
			/*后代选择器 */
			#ol1 li{
				background-color: #FFC0CB;
			}
			#ol2 li{
				background-color: aquamarine;
			}
			
		</style>
	</head>
	<body>
	<!-- ID选择器 设置ID值 ID需见名知意-->
		<div id="div1">cnfox现在进行到前端</div>
		<br />
		<div id="div2" class="font font2">前面的java内容还没有补充完</div>
	<!-- 类选择器 -->
		<!-- 需要 想要 div2 和p1拥有相同的字体大小-->
		<!-- 方法一 :div2 和p1 的ID选择器中均添加字体样式 缺点重复代码-->
		<!-- 引入类(class)选择器 匹配原则:为添加此类名的便签设置样式-->
		<!-- 添加 多个类名 第一个类名后空格添加另一个类名-->
		<p id="p1" class="font font2">这是一个p标签</p>
	<!-- 后代选择器 -->
	    <!-- 组合选择器 语法:选择器1 选择器2 选择器3 -->
	    <!-- 为满足选择器组合的路径标签设置CSS样式 -->
	    <ol id="ol1">
	    	<li></li>
	    	<li></li>
	    	<li></li>
	    </ol>
	    <ol id="ol2">
	    	<li></li>
	    	<li></li>
	    	<li></li>
	    </ol>
	    
	<!-- 子代选择器 -->
	<!--后代和子代的区别 儿子是子代 儿子孙子曾孙子...是后代-->
	    <!-- 匹配原则 为满足选择器组合的路径标签设置CSS样式-->
	    <!-- 组合选择器 语法:选择器1>选择器2 -->
	    
	</body>
</html>

边框属性和浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框文本样式 浮动</title>
		<style type="text/css">
			#div1{
				width: 500px;
				height: 500px;
				/*背景颜色*/
				background-color: pink;
				/*边框颜色*/
				border-color: #FFFF00;
				/*边框风格 实现虚线点状线*/
				border-style: solid;
				/*文本倾斜加粗*/
				/*font-style: italic;*/
				font-weight: bold;
				font-size: 20px;
				/*文本容器内居中*/
				text-align: center;
				/*文本修饰 上划线 下划线 删除线*/
				text-decoration: underline;
				/*文本间距 */
				letter-spacing: 10px;
				/*文本阴影 颜色 左右偏移(右为正) 上下偏移(左为正) 模糊度*/
				text-shadow: greenyellow 3px 4px 5px ;
			    /* 文本行高 =容器高度即为容器内居中 */
				line-height: 500px;
			}
			#big {
				background-color: black;
			}
			.fDiv {
				width: 300px;
				height: 300px;
				float: left;
			}
			#red {
				background-color: red;
			}
			#blue {
				background-color: blue;
			}
			#orange {
				background-color: orange;
			}
			#purple {
				background-color: purple;
			}
			/*清除浮动 高度为父级撑开*/
			#clearDiv {
				clear: both;
			}
			#test {
				width: 700px;
				height: 400px;
				background-color: pink;
			}

		</style>	
	</head>
	<body>
		<div id="div1">我们仍未知道那天所看见的花的名字</div>
		<div id="big">
			<div id="red" class="fDiv"></div>
			<div id="blue" class="fDiv"></div>
			<div id="clearDiv"></div>
			<div id="orange" class="fDiv"></div>
			<div id="purple" class="fDiv"></div>
		</div>
		<div id="test"></div>

		<p></p>s
	</body>
</html>

外边距 margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mar{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-left: 100px;
				margin-top: 100px;
			}
			#mar2{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-left: 100px;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="mar">
			
		</div>
		<div id="mar2">
			
		</div>
	</body>
</html>

晚安

 今天就到这里了，明天见，加油！

-------------本文结束感谢您的阅读-------------
0%