[关闭]
@w460461339 2016-11-16T07:11:03.000000Z 字数 6371 阅读 850

Web学习Day1(HTML基本语法)

JAVA_Web


嘛,这两天进入HTML的学习了。可惜没有相应的资料,只有视频,略蛋疼= -。HTML是一门超文本语言,标签来包装数据,完成页面的设计。其不用编译,因此一般需要写一句运行一句,逐句的查看效果,从而避免最后发现错误而找不到的情况。(话术MarkDown语言是不是就是基于HTML的= - )

1、认识HTML

下面介绍HTML的基本知识,包括:

1.头标签和体标签的范围
2.怎么写注释
3.怎么写文字以及设置文字大小和文职
4.怎么写标题标签
  1. <!--这是注释-->
  2. <!--所有的HTML程序需要写在<html>和</html>之间-->
  3. <html>
  4. <!--<head></head>这两个是投标签,有一些标签只能写在这里面-->
  5. <head>
  6. <!--title设置显示在最上面和最小化一行的文字-->
  7. <title>HTML EXAMPLE</title>
  8. </head>
  9. <!--<body></body>这是体标签,我们基本上是在体标签中操作-->
  10. <!--HTML不区分大小写-->
  11. <body>
  12. <!--<font></font>写文字,规定文字大小(1~7)以及文字颜色的标签-->
  13. <!--文字大小在1~7,颜色可以用单词获取#ffffff的方式表示-->
  14. <font size="5" color="#ffff00">hello world</font>
  15. <!--<br/>是换行-->
  16. <br/>
  17. <!--<hr/>是添加横线-->
  18. <hr size="4" color="#000000"/>
  19. <!--这个是标题标签,从1~6逐渐变小-->
  20. <h1>Hello</h1>
  21. <h6>Hello</h6>
  22. </body>
  23. </html>

另外,存在一些转义字符:

<       &lt 
>       &gt
空格    &nbsp
&       &amp

2、列表标签

列表标签用于显示如下效果:

    BBBB
    CCCC
    DDDD
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <body>
  6. <!--一般列表or带题目列表-->
  7. <dl>
  8. <dt>LIST</dt>
  9. <dd>Text1</dd>
  10. <dd>Text2</dd>
  11. </dl>
  12. <hr/>
  13. <!--这是有序列表-->
  14. <!--type设置前面的显示类型-->
  15. <!--i是罗马数字,1是阿拉伯数字,a是英文字母-->
  16. <ol type="i">
  17. <li>Text1</li>
  18. <li>Text2</li>
  19. </ol>
  20. <!--这是无序列表-->
  21. <!--type设置前面的显示类型-->
  22. <!--circle是空心圆,disc是实心圆(默认),square是实心方块-->
  23. <ul type="circle">
  24. <li>Text1</li>
  25. <li>Text2</li>
  26. </ul>
  27. </body>
  28. </html>

3、图像标签以及路径表示方法

图像标签主要用于显示图像的。

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <body>
  6. <!--利用绝对路径加载文件,并当鼠标移动到图片上时显示文字-->
  7. <img src="D:\EditPlus\My HTML\day01\b.jpg" alt="Map">
  8. <!--同一个目录下,利用相对路径加载图片-->
  9. <img src="b.jpg" width="400" height="300">
  10. <hr/>
  11. <!--在html文件下级目录下加载图片-->
  12. <img src="bb/c.jpg" width="800" height="600">
  13. <hr size="3" color="black"/>
  14. <!--在html文件上级目录下加载图片-->
  15. <img src="../a.jpg" width="400" height="300">
  16. </body>
  17. </html>

路径分绝对路径相对路径表示法。其中,相对路径比较复杂,情况都列在程序里,自信查看。

呃,利用列表标签和图标标签生成购物网站的案例这里就略了= -

4、超链接标签+原样输出标签

这个很重要,能够帮我们做很多事情。

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <body>
  6. <!--这样设置一个记录点-->
  7. <a name="top">顶部</a>
  8. <hr/>
  9. <!--href后面跟的是要转到内容的地址,和之前img的src一个道理-->
  10. <!--其他用a和/a围起来,中间的字是我们点击的对象-->
  11. <!--此时默认是在原页面上显示,通过target更改-->
  12. <a href="day1_01.html" target="_self">This is a Link.<a/>
  13. <!--忘了说,hr/会自动换行-->
  14. <hr/>
  15. <a href="day1_02_list.html" target="_blank">This is a Link2.<a/>
  16. <hr/>
  17. <!--这样会打开html文件所在文件夹-->
  18. <a href="" >This is a Link3.<a/>
  19. <!--需要要用#来占位-->
  20. <hr/>
  21. <a href="#" >This is a Link4.<a/>
  22. <hr/>
  23. <img src="b.jpg">
  24. <hr/>
  25. <!--href里面必须#+之前那个name后面的内容,这样就可以点击“回到顶部”几个字后,自动跳转到name对应内容的位置-->
  26. <a href="#top">回到顶部</a>
  27. </body>
  28. </html>

另外,< pre >能帮我们将在html里面写的内容格式不变的输出

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <body>
  6. <pre>
  7. hello
  8. world
  9. HTML
  10. <pre/>
  11. </body>
  12. </html>

5、表格标签

制作表格能帮助我们清晰的划分数据,其中:

<table></table>表示整个表格范围
<tr></tr>表示每一行
<td></td>或者<th></th>表示每一个单元格
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <body>
  6. <!--table表示总的表格,tr表示每一行,td或者th表示每一个单元格-->
  7. <!--border是显示表格边框,后面的是边框颜色-->
  8. <!--cellspacing是单元格边框距离,0表示单元格重合-->
  9. <table border="1" bordercolor="red" cellspacing="0" width="300" height="400" >
  10. <!--caption是设置表格的题目,在表格之外-->
  11. <caption>People</caption>
  12. <!--align是设置对其方式,right(右对齐),center(居中),left(左对齐)-->
  13. <!--可以用在tr或者td上-->
  14. <tr align="center">
  15. <td align="left">a</td>
  16. <td>aa</td>
  17. </tr>
  18. <tr align="right">
  19. <td>b</td>
  20. <td>bb</td>
  21. </tr>
  22. <tr>
  23. <!--th自动为该单元格设置加粗和居中效果-->
  24. <th>hello</th>
  25. </tr>
  26. </table>
  27. <hr/>
  28. <table border="1" bordercolor="Blue" cellspacing="0" width="150" height="200">
  29. <tr align="center">
  30. <!--colspan合并列-->
  31. <td colspan="3"><h3>Title</h3></td>
  32. </tr>
  33. <tr>
  34. <!--rowspan合并行-->
  35. <td rowspan="2">English</td>
  36. <td>Hello</td>
  37. <td>Web</td>
  38. </tr>
  39. <tr>
  40. <td>Bye</td>
  41. <td>Web</td>
  42. </tr>
  43. </table>
  44. </body>
  45. </html>

6、表单标签(Important)

表单标签是重点,web开发中基本都会用到的重点。主要是涉及到注册界面的编写。

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <body>
  6. <!--表单标签内容全部都用<form></form>包起来-->
  7. <!--基本都是用input+type的形式,少部分用其他的方式-->
  8. <!--action后面跟submit的目的地址,method是提交方式-->
  9. <!--有get和post两种提交方式,post安全性比较高-->
  10. <form action="day1_01.html" method="post">
  11. <table>
  12. <tr>
  13. <td>Name:</td>
  14. <!--text,基本的输入类型-->
  15. <td><input type="text" name="name"/></td>
  16. </tr>
  17. <tr>
  18. <td>Password:</td>
  19. <!--password,密码输入类型,显示的时候全是实心圆圈-->
  20. <td><input type="password" name="pwd"/></td>
  21. </tr>
  22. <tr>
  23. <td>Gender:</td>
  24. <!--radio,单选框,注意必须要写name以及name内容必须一致-->
  25. <!--将checked设置为checked,可以设置默认选中项-->
  26. <!--这个方式只适合在单选和复选框中-->
  27. <td><input type="radio" name="gender" value="female" checked="checked"/>Female
  28. <input type="radio" name="gender" value="male"/>Male</td>
  29. </tr>
  30. <tr>
  31. <td>Hobbit:</td>
  32. <!--checkbox,复选框,注意必须写name以及name内容必须一致-->
  33. <td><input type="checkbox" name="hobbit" value="z"/>Soccer
  34. <input type="checkbox" name="hobbit" value="bb"/>baseball
  35. <input type="checkbox" name="hobbit" value="bab"/>basketball</td>
  36. </tr>
  37. <tr>
  38. <td>File:</td>
  39. <!--file,文件提交框-->
  40. <td><input type="file" name="file"/></td>
  41. </tr>
  42. <tr>
  43. <td>Birthday</td>
  44. <td>
  45. <!--<select></select>,下拉框-->
  46. <select name="birthday">
  47. <option value="0">Year</option>
  48. <!--下拉框中将selected属性设置为selected可设置默认项-->
  49. <option value="1990" selected=“selected”>1990</option>
  50. <option value="1991">1991</option>
  51. <option value="1992">1992</option>
  52. <option value="1993">1993</option>
  53. </select>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td>Introduction:</td>
  58. <!--<textarea></textarea>,文本域-->
  59. <td><textarea cols="20" rows="10" name="introduction"></textarea></td>
  60. </tr>
  61. <tr>
  62. <!--复习下,colspan和rowspan只能放在td中-->
  63. <!--align设置对其方式-->
  64. <td colspan="2" align="center">
  65. <!--提交地址由form的action属性决定-->
  66. <input type="submit" value="Regist"/></td>
  67. </tr>
  68. <tr>
  69. <!--reset类型,表示重置表单中所用内容到初始选项-->
  70. <td colspan="2" align="center">
  71. <input type="reset"/></td>
  72. </tr>
  73. </table>
  74. </form>
  75. </body>
  76. </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方式不会将提交内容直接显示在地址栏,安全性更高。

7、其他标签

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <body>
  6. <!--加粗-->
  7. <b>666</b> <br/>
  8. <!--下划线-->
  9. <u>666</u> <br/>
  10. <!--斜体-->
  11. <i>666</i> <br/>
  12. <!--删除线-->
  13. <s>666</s> <br/>
  14. <!--下标-->
  15. 3<sub>100</sub>
  16. <!--上标-->
  17. 4<sup>200</sup>
  18. </body>
  19. </html>

8、头标签

头标签就是在< head >< /head >之间用的标签

  1. <html>
  2. <head>
  3. <!--设置网页名称-->
  4. <title>HTML EXAMPLE</title>
  5. <!--在程序中设置标签,方便搜索(貌似该方法已经过时)-->
  6. <meta name="keywords" content="11 22 33"/>
  7. <!--设置3秒后自动刷新到指定页面-->
  8. <meta http-equiv="refresh" content="3;url=day1_02_list.html"/>
  9. <!--统一设置超链接打开方式-->
  10. <base target="_blank"/>
  11. </head>
  12. <body>
  13. </body>
  14. </html>

9、框架标签(已过时,知道就行)

用了框架标签就不能用< body >< /body >了

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. </head>
  5. <!--框架标签由<frameset></frameset>以及<frame>构成-->
  6. <!--将页面分为上下两部分,上方80行-->
  7. <frameset rows="80,*">
  8. <!--在上方部分显示src对应内容-->
  9. <frame name="top" src="day1_01.html"/>
  10. <!--将下方划分为左右两部分,左边150列-->
  11. <frameset cols="150,*">
  12. <!--左右分别显示src中内容-->
  13. <!--在day1_11_Navi.html的超链接中,将target设置为目标frame对应的name名字-->
  14. <!--这样可以点击超链接后就可以在指定frame显示对应内容-->
  15. <!--目前的效果就是点击左边的超链接,在右边显示对应内容-->
  16. <frame name="left" src="day1_11_Navi.html"/>
  17. <frame name="right" src="day1_03_pic.html"/>
  18. </frameset>
  19. </frameset>
  20. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注