@w460461339
2016-11-16T07:11:03.000000Z
字数 6371
阅读 850
JAVA_Web
嘛,这两天进入HTML的学习了。可惜没有相应的资料,只有视频,略蛋疼= -。HTML是一门超文本语言,标签来包装数据,完成页面的设计。其不用编译,因此一般需要写一句运行一句,逐句的查看效果,从而避免最后发现错误而找不到的情况。(话术MarkDown语言是不是就是基于HTML的= - )
下面介绍HTML的基本知识,包括:
1.头标签和体标签的范围
2.怎么写注释
3.怎么写文字以及设置文字大小和文职
4.怎么写标题标签
<!--这是注释-->
<!--所有的HTML程序需要写在<html>和</html>之间-->
<html>
<!--<head></head>这两个是投标签,有一些标签只能写在这里面-->
<head>
<!--title设置显示在最上面和最小化一行的文字-->
<title>HTML EXAMPLE</title>
</head>
<!--<body></body>这是体标签,我们基本上是在体标签中操作-->
<!--HTML不区分大小写-->
<body>
<!--<font></font>写文字,规定文字大小(1~7)以及文字颜色的标签-->
<!--文字大小在1~7,颜色可以用单词获取#ffffff的方式表示-->
<font size="5" color="#ffff00">hello world</font>
<!--<br/>是换行-->
<br/>
<!--<hr/>是添加横线-->
<hr size="4" color="#000000"/>
<!--这个是标题标签,从1~6逐渐变小-->
<h1>Hello</h1>
<h6>Hello</h6>
</body>
</html>
另外,存在一些转义字符:
< <
> >
空格  
& &
列表标签用于显示如下效果:
BBBB
CCCC
DDDD
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<body>
<!--一般列表or带题目列表-->
<dl>
<dt>LIST</dt>
<dd>Text1</dd>
<dd>Text2</dd>
</dl>
<hr/>
<!--这是有序列表-->
<!--type设置前面的显示类型-->
<!--i是罗马数字,1是阿拉伯数字,a是英文字母-->
<ol type="i">
<li>Text1</li>
<li>Text2</li>
</ol>
<!--这是无序列表-->
<!--type设置前面的显示类型-->
<!--circle是空心圆,disc是实心圆(默认),square是实心方块-->
<ul type="circle">
<li>Text1</li>
<li>Text2</li>
</ul>
</body>
</html>
图像标签主要用于显示图像的。
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<body>
<!--利用绝对路径加载文件,并当鼠标移动到图片上时显示文字-->
<img src="D:\EditPlus\My HTML\day01\b.jpg" alt="Map">
<!--同一个目录下,利用相对路径加载图片-->
<img src="b.jpg" width="400" height="300">
<hr/>
<!--在html文件下级目录下加载图片-->
<img src="bb/c.jpg" width="800" height="600">
<hr size="3" color="black"/>
<!--在html文件上级目录下加载图片-->
<img src="../a.jpg" width="400" height="300">
</body>
</html>
路径分绝对路径和相对路径表示法。其中,相对路径比较复杂,情况都列在程序里,自信查看。
呃,利用列表标签和图标标签生成购物网站的案例这里就略了= -
这个很重要,能够帮我们做很多事情。
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<body>
<!--这样设置一个记录点-->
<a name="top">顶部</a>
<hr/>
<!--href后面跟的是要转到内容的地址,和之前img的src一个道理-->
<!--其他用a和/a围起来,中间的字是我们点击的对象-->
<!--此时默认是在原页面上显示,通过target更改-->
<a href="day1_01.html" target="_self">This is a Link.<a/>
<!--忘了说,hr/会自动换行-->
<hr/>
<a href="day1_02_list.html" target="_blank">This is a Link2.<a/>
<hr/>
<!--这样会打开html文件所在文件夹-->
<a href="" >This is a Link3.<a/>
<!--需要要用#来占位-->
<hr/>
<a href="#" >This is a Link4.<a/>
<hr/>
<img src="b.jpg">
<hr/>
<!--href里面必须#+之前那个name后面的内容,这样就可以点击“回到顶部”几个字后,自动跳转到name对应内容的位置-->
<a href="#top">回到顶部</a>
</body>
</html>
另外,< pre >能帮我们将在html里面写的内容格式不变的输出
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<body>
<pre>
hello
world
HTML
<pre/>
</body>
</html>
制作表格能帮助我们清晰的划分数据,其中:
<table></table>表示整个表格范围
<tr></tr>表示每一行
<td></td>或者<th></th>表示每一个单元格
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<body>
<!--table表示总的表格,tr表示每一行,td或者th表示每一个单元格-->
<!--border是显示表格边框,后面的是边框颜色-->
<!--cellspacing是单元格边框距离,0表示单元格重合-->
<table border="1" bordercolor="red" cellspacing="0" width="300" height="400" >
<!--caption是设置表格的题目,在表格之外-->
<caption>People</caption>
<!--align是设置对其方式,right(右对齐),center(居中),left(左对齐)-->
<!--可以用在tr或者td上-->
<tr align="center">
<td align="left">a</td>
<td>aa</td>
</tr>
<tr align="right">
<td>b</td>
<td>bb</td>
</tr>
<tr>
<!--th自动为该单元格设置加粗和居中效果-->
<th>hello</th>
</tr>
</table>
<hr/>
<table border="1" bordercolor="Blue" cellspacing="0" width="150" height="200">
<tr align="center">
<!--colspan合并列-->
<td colspan="3"><h3>Title</h3></td>
</tr>
<tr>
<!--rowspan合并行-->
<td rowspan="2">English</td>
<td>Hello</td>
<td>Web</td>
</tr>
<tr>
<td>Bye</td>
<td>Web</td>
</tr>
</table>
</body>
</html>
表单标签是重点,web开发中基本都会用到的重点。主要是涉及到注册界面的编写。
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<body>
<!--表单标签内容全部都用<form></form>包起来-->
<!--基本都是用input+type的形式,少部分用其他的方式-->
<!--action后面跟submit的目的地址,method是提交方式-->
<!--有get和post两种提交方式,post安全性比较高-->
<form action="day1_01.html" method="post">
<table>
<tr>
<td>Name:</td>
<!--text,基本的输入类型-->
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>Password:</td>
<!--password,密码输入类型,显示的时候全是实心圆圈-->
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>Gender:</td>
<!--radio,单选框,注意必须要写name以及name内容必须一致-->
<!--将checked设置为checked,可以设置默认选中项-->
<!--这个方式只适合在单选和复选框中-->
<td><input type="radio" name="gender" value="female" checked="checked"/>Female
<input type="radio" name="gender" value="male"/>Male</td>
</tr>
<tr>
<td>Hobbit:</td>
<!--checkbox,复选框,注意必须写name以及name内容必须一致-->
<td><input type="checkbox" name="hobbit" value="z"/>Soccer
<input type="checkbox" name="hobbit" value="bb"/>baseball
<input type="checkbox" name="hobbit" value="bab"/>basketball</td>
</tr>
<tr>
<td>File:</td>
<!--file,文件提交框-->
<td><input type="file" name="file"/></td>
</tr>
<tr>
<td>Birthday</td>
<td>
<!--<select></select>,下拉框-->
<select name="birthday">
<option value="0">Year</option>
<!--下拉框中将selected属性设置为selected可设置默认项-->
<option value="1990" selected=“selected”>1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
</td>
</tr>
<tr>
<td>Introduction:</td>
<!--<textarea></textarea>,文本域-->
<td><textarea cols="20" rows="10" name="introduction"></textarea></td>
</tr>
<tr>
<!--复习下,colspan和rowspan只能放在td中-->
<!--align设置对其方式-->
<td colspan="2" align="center">
<!--提交地址由form的action属性决定-->
<input type="submit" value="Regist"/></td>
</tr>
<tr>
<!--reset类型,表示重置表单中所用内容到初始选项-->
<td colspan="2" align="center">
<input type="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
提交:
1.提交的方式是写了input type=“submit”,并在开头的<form>内利用action属性写地址。
2.每个要提交的表单内容必须要有自定义的name属性;同时,对于单选框和复选框,name值需要相同,每个选项必须要设置value值。
get方式提交:
file:///D:/EditPlus/My%20HTML/day01/day1_01.html?name=1111&pwd=2222&gender=female&hobbit=z&file=&birthday=1990&introduction=6666
post方式提交:
file:///D:/EditPlus/My%20HTML/day01/day1_01.html
可见,post方式不会将提交内容直接显示在地址栏,安全性更高。
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<body>
<!--加粗-->
<b>666</b> <br/>
<!--下划线-->
<u>666</u> <br/>
<!--斜体-->
<i>666</i> <br/>
<!--删除线-->
<s>666</s> <br/>
<!--下标-->
3<sub>100</sub>
<!--上标-->
4<sup>200</sup>
</body>
</html>
头标签就是在< head >< /head >之间用的标签
<html>
<head>
<!--设置网页名称-->
<title>HTML EXAMPLE</title>
<!--在程序中设置标签,方便搜索(貌似该方法已经过时)-->
<meta name="keywords" content="11 22 33"/>
<!--设置3秒后自动刷新到指定页面-->
<meta http-equiv="refresh" content="3;url=day1_02_list.html"/>
<!--统一设置超链接打开方式-->
<base target="_blank"/>
</head>
<body>
</body>
</html>
用了框架标签就不能用< body >< /body >了
<html>
<head>
<title>HTML EXAMPLE</title>
</head>
<!--框架标签由<frameset></frameset>以及<frame>构成-->
<!--将页面分为上下两部分,上方80行-->
<frameset rows="80,*">
<!--在上方部分显示src对应内容-->
<frame name="top" src="day1_01.html"/>
<!--将下方划分为左右两部分,左边150列-->
<frameset cols="150,*">
<!--左右分别显示src中内容-->
<!--在day1_11_Navi.html的超链接中,将target设置为目标frame对应的name名字-->
<!--这样可以点击超链接后就可以在指定frame显示对应内容-->
<!--目前的效果就是点击左边的超链接,在右边显示对应内容-->
<frame name="left" src="day1_11_Navi.html"/>
<frame name="right" src="day1_03_pic.html"/>
</frameset>
</frameset>
</html>