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

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>
  7.     <pre>
  8.     hello
  9.         world
  10.         HTML
  11.     <pre/>
  13.  </body>
  14. </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>
  19.     <tr align="right">
  20.         <td>b</td>
  21.         <td>bb</td>
  22.     </tr>
  24.     <tr>
  25.     <!--th自动为该单元格设置加粗和居中效果-->
  26.     <th>hello</th>
  27.     </tr>
  28.     </table>
  30.     <hr/>
  32.     <table border="1" bordercolor="Blue" cellspacing="0" width="150" height="200">
  33.     <tr align="center">
  34.     <!--colspan合并列-->
  35.     <td colspan="3"><h3>Title</h3></td>
  36.     </tr>
  37.     <tr>
  38.     <!--rowspan合并行-->
  39.     <td rowspan="2">English</td>
  40.     <td>Hello</td>
  41.     <td>Web</td>
  42.     </tr>
  43.     <tr>
  44.     <td>Bye</td>
  45.     <td>Web</td>
  46.     </tr>
  47.     </table>
  48.  </body>
  49. </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>
  74.     </table>
  75.     </form>
  77.  </body>
  78. </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>
  14.  </body>
  15. </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>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注