HTML学习笔记

声明：笔记来自于http://how2j.cn/网站。此博客作为自己笔记所用，方便日后翻查。

一、基本元素

1. 标题：标题会自动粗体，大写其中的内容，并且带有换行效果 ，一般会使用<h1> 到 <h6> 分别表示不同大小的标题。

   <h1>标题1</h1>

   <h2>标题2</h2>

2. 段落：<p>自动换行</p>
3. 粗体：<b>、<strong>。<strong>强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容推荐使用strong。
4. 斜体：<i>和<em>。em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。
5. 预格式：<pre>。需要在网页上显示有格式的代码可用此标签。
例：

   <pre>
   
   public class HelloWorld {
   
       public static void main(String[] args) {
   
           System.out.println("Hello World");
   
       }
   }
   </pre>

    

6. 删除效果：<del>。使用del标签实现的删除效果

7. 下划线：<ins>。使用ins标签实现的下划线效果 

8. 显示图像：<img src="http://how2j.cn/example.gif"/>
   1>同级目录图像：如果是本地文件，只需把图片放在同一个目录下即可 src直接使用文件名，不需要/      
   2>上级目录图像：图片在上级目录，则在src上加上 ../，即可访问上级目录的图片 ，如果是在上级目录的上级目录，则使用 ../../      
   3>其他目录图像：rc使用图片所在的绝对路径，并在前面加上file://
   5>设置图像大小：

   <img width="200" height="200" src="http://how2j.cn/example.gif"/>

   
   6>图片居中：和<div>嵌套使用：

   <div align="center">
   
     <img src="http://how2j.cn/example.gif"/>
   
   </div>

    

9. 超链：<a>标签即用来显示超链。完整元素是 <a href="跳转到的页面地址">超链显示文本</a>
   例：<a href="http://www.12306.com">12306</a>
属性：target="_blank"：空白页打开。（还有其他属性自行尝试）
提示文字（当鼠标放在超链上的时候，就会弹出提示文字）：title="跳转到http://www.12306.com"
    

10. 使用图片作为超链：

    <a href="http://www.12306.com">
    
    <img src="http://how2j.cn/example.gif"/>
    
    </a>

     

11. 表格：<table></table >、<tr>行</tr>、<td>列</td>
    属性：
    宽度width
    table带边框border
    单元格水平对齐align
    单元格垂直对齐valign
    横跨两列，水平合并colspan
    横跨两行，垂直合并rrowspan
    背景色bgcolor
    例：

    <table>
      <tr>
          <td>1</td>
          <td>2</td>
      </tr>
     
      <tr>
          <td>3</td>
          <td>4</td>
      </tr>
     
      <tr>
          <td>a</td>
          <td>b</td>
      </tr>
     
    </table>

12. 列表
    有序列表：

    <ul>
    <li>DOTA</li>
    <li>LOL</li>
    </ul>

    无序列表：

    <ol>
    <li>地卜师</li>
    <li>卡尔</li>
    </ol>

13. 块标签、布局标签：<div> 、 <span>
     

    <img style="margin-left:50px" src="http://how2j.cn/example.gif"/>
      <br/>
     <img style="margin-left:50px" src="http://how2j.cn/example.gif"/>
     
    <div style="margin-left:100px" >
     <img src="http://how2j.cn/example.gif"/>
      <br/>
     <img src="http://how2j.cn/example.gif"/>
    </div>

    div是块元素，即自动换行 
    常见的块元素还有h1,table,p 
    span是内联元素，即不会换行 
    常见的内联元素还有img,a,b,strong

    <div>
     第一个div
    </div>
     
    <div>
     第二个div
    </div>
     
    <span>
     第一个span
    </span>
     
    <span>
     第二个span
    </span>

14. 字体：<font> font常用的属性有 color和size, 分别表示颜色和大小

    <font color="green">绿色默认大小字体</font>
    <br>
    <font color="blue" size="+2">蓝色大2号字体</font>
    <br>
    <font color="red" size="-2">红色小2号字体</font>
    
    

内联框架：<iframe>即内联框架 ,通过内联框架 可以实现在网页中“插入”网页
iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打开另一个网页
 

<iframe src="http://how2j.cn/" width="600px" height="400px">
</iframe>

 

二、表单元素
​​​​​​

1. 文本框：<input type="text"> 即表示文本框，并且只能够输入一行，如果要输入多行，使用文本域<textarea>
   <input type="password"> 即表示密码框

   <!--文本框大小-->
   <input type="text" size="10">
   <!--有初始值-->
   <input type="text" value="有初始值的文本框">
   <!--有背景文字-->
   <input type="text" placeholder="请输入账号"> 

2. 表单：action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去
    

   <!--<form method="get" action="http://how2j.cn/study/login.jsp">-->
   <form method="post" action="http://how2j.cn/study/login.jsp">
   账号：<input type="text" name="name"> <br/>
   密码：<input type="password" name="password" > <br/>
   <input type="submit" value="登陆">
   </form>

   get和post的区别 
   get 
   是form默认的提交方式 
   如果通过一个超链访问某个地址，是get方式 
   如果在地址栏直接输入某个地址，是get方式 
   提交数据会在浏览器显示出来 
   不可以用于提交二进制数据，比如上传文件 
   post 
   必须在form上通过 method="post" 显示指定 
   提交数据不会在浏览器显示出来 
   可以用于提交二进制数据，比如上传文件
    

3. 单选框

   <input type="radio" >

4. 复选框

   <input type="checkbox"> 

5. 下拉列表

   <!--使用ctrl或者shift进行多选-->
   <!--multiple复选-->
   <!--selected 默认选中-->
   <select size="2" multiple="multiple">
    <option >苍老板</option>
    <option selected="selected">高数玛利亚</option>
    <option >摇美</option>
   </select>

    

6. 文本域

   <textarea cols="30" rows="8">123456789012345678901234567890
   1234567890
   1234567890
   1234567890
   1234567890
   1234567890
   1234567890
   1234567890</textarea>
   

    

7. 普通按钮（不可提交表单）

   <input type="button" value="一个按钮">

    

8. 提交按钮（可提交表单）

   <form action="/study/login.jsp" method="get">
   账号：<input type="text" name="name"> <br/>
   密码：<input type="password" name="password" > <br/>
   <input type="submit" value="登陆">
   </form>

    

9. 重置按钮

   <input type="reset"> 

    

10. 图像提交（提交表单）

    <form action="/study/login.jsp">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password" > <br/>
    <input type="image" src="http://how2j.cn/example.gif">
    </form>

     

11. 按钮：<button></button>即按钮标签
    与<input type="button">不同的是，<button>标签功能更为丰富
    按钮标签里的内容可以是文字也可以是图像
    如果button的type=“submit” ，那么它就具备提交form的功能