@w460461339 2016-11-15T23:11:03.000000Z 字数 6371 阅读 1136

Web学习Day1（HTML基本语法）

JAVA_Web

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

1、认识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>

另外，存在一些转义字符：

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

2、列表标签

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

    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>

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

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

<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>

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

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

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

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

<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>

5、表格标签

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

<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>

6、表单标签（Important）

表单标签是重点，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方式不会将提交内容直接显示在地址栏，安全性更高。

7、其他标签

<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>

8、头标签

头标签就是在< 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>

9、框架标签（已过时，知道就行）

用了框架标签就不能用< 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>