HTML的基本使用

目录

• 一、标签，元素和属性
• 二、基本元素
  • 1、标题
  • 2、段落
  • 3、粗体
  • 4、斜体
  • 5、粗体+斜体
  • 6、预格式
  • 7、删除效果
  • 8、下划线
  • 9、图像
  • 10、超链
  • 11、表格
  • 12、列表
  • 13、块
  • 14、字体和颜色
  • 15、内联框架
  • 16、换行与水平线
• 三、表单元素
  • 1、文本框
  • 2、文本域
  • 3、密码框
  • 4、表单
  • 5、单选框
  • 6、复选框
  • 7、下拉列表
  • 8、普通按钮
  • 9、提交按钮
  • 10、重置按钮
  • 11、图像提交
  • login.jsp初览
  • 12、按钮
• 四、其它
  • 1、中文乱码问题
  • 2、注释

一、标签，元素和属性

1、标签：标签由开始标签和结束标签组成，例如<p>是一个开始标签，</p>是一个结束标签

2、元素：元素指的是开始标签到结束标签之间所有的代码，例如<p>HelloWord</p>

3、属性：属性是用来修饰标签的，比如设置标题居中<h1 align="center">这是一个居中标题</h1>，

其中属性名align，属性值center（用双引号括起来）

二、基本元素

1、标题

h1到h6

<h1>标题1</h1>

2、段落

在p标签中的会自动换行

<p>段落4</p>

3、粗体

strong提醒用户该文本的重要性。在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容。推荐使用strong

<b>b标签粗体效果</b>
<strong>strong标签粗体效果</strong>

4、斜体

em是Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。

<i>使用 i 标签带来的斜体效果</i>
<em>使用 em 标签带来的斜体效果</em>

5、粗体+斜体

<strong><i>同时有粗体和斜体</i></strong>

6、预格式

需要在网页上显示代码，比如java代码，就需要用到pre

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

7、删除效果

<del>使用del标签实现的删除效果</del>
<s>使用s标签实现的删除效果，但是不建议使用，因为很多浏览器不支持s标签</s>

8、下划线

<ins>使用ins标签实现的下划线效果</ins>
<u>使用u标签实现的下划线效果，但是不建议使用</u>

9、图像

同级目录：src="example.gif"

上级目录；src="../example.gif"

其他目录：file://c:/example.gif

设置大小：width="200" height="200"

图像居中：img不能够自己居中，需要放在其他能够居中的标签中实现这个效果，经常采用的手段是放在div中居中

文字替换图片：当图片存在的时候，alt是不会显示的，当图片不存在的时候，alt就会出现

<img src="https://how2j.cn/example.gif"/>

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

<img src="https://how2j.cn/example.gif" alt="这个是一个图片" />

10、超链

在新的页面打开链表：target

当鼠标放在超链上的时候，就会弹出提示文字：title

使用图片作为超链：img

<a href="http://www.12306.com">12306</a>

<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>

<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>

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

11、表格

<table>标签用于显示一个表格，<tr>表示行，<td>表示列又叫单元格
//一行两列
<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
</table>
//带边框：border
<table border="1">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
</table>
//设置table宽度：width，px即像素的意思。比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素
<table border="1" width="200px">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
</table>
//设置单元格宽度绝对值：width，第二列的宽度为总宽度-第一列的宽度
<table border="1" width="200px">
  <tr>
      <td width="50px">1</td>
      <td>2</td>
  </tr>
</table>
//设置单元格宽度相对值
<table border="1" width="200px">
  <tr>
      <td width="80%">1</td>
      <td>2</td>
  </tr>
</table>
//设置单元格水平对齐方式：align默认靠左
<table border="1" width="200px">
  <tr>
      <td align="right">a</td>
      <td>b</td>
  </tr>
</table>
//设置单元格垂直对齐方式：valign默认居中
<table border="1" width="200px">
  <tr>
      <td width="50%" valign="top" >1</td>
      <td>
             2   <br/>
             2   <br/>
             2   <br/>
      </td>
  </tr>
</table>
//水平合并：colspan
<table border="1" width="200px">
  <tr>
      <td colspan="2" >1，2</td>
  </tr>
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
</table>
//垂直合并：rowspan
<table border="1" width="200px">
  <tr>
      <td rowspan="2">1,3</td>
      <td>2</td>
  </tr> 
  <tr>
      <td>4</td>
  </tr>
</table>
//背景色：bgcolor
<table border="1" width="200px">
  <tr bgcolor="gray">
      <td width="50%">1</td>
      <td>2</td>
  </tr>
</table>

12、列表

1、有序列表ol：
<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>
2、无序列表ul：
<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

13、块

块元素用于布局，本身没有任何显示效果。

其中div是块元素，会自动换行；span是内联元素，不会换行，类似的还有img,a,b,strong

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>

颜色表示

<font color="red" >用red表示红色字体</font>
<br>
<font color="#ff0000" >用#ff0000表示红色字体</font>

15、内联框架

使用<iframe>标签表示内联框架，可以实现在网页中“插入”网页

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

16、换行与水平线

<br/> 换行
<hr/> 水平线

三、表单元素

表单用于显示、收集、提交用户信息到服务器上

1、文本框

<input type="text"> 即表示文本框，并且只能够输入一行，如果要输入多行，使用文本域<textarea>。<input>标签不需要写成<input />或者开始标签和结束标签。

//默认
<input type="text">
//设置长度size
<input type="text" size="10">
//设置初始值value
<input type="text" value="有初始值的文本框">
//设置背景文字placeholder
<input type="text" placeholder="请输入账号">

2、文本域

与文本框不同的是，文本域可以有多行，并且可以有滚动条

<textarea> 即文本域
//设置宽度cols和行数rows
<textarea cols="30" rows="8">
123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
</textarea>

3、密码框

<input type="password"> 即表示密码框，输入的数据会自动显示为星号

4、表单

<form>用于向服务器提交数据，比如账号密码

//action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面
<form action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
//get:默认提交数据的方法，可以在浏览器的地址栏看到提交的参数
<form method="get" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
//post：不在地址栏显示提交的参数，如果要提交二进制数据，比如上传文件，必须采用post方式
<form method="post" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

5、单选框

<input type="radio" >表示单选框

//默认选中
单选1 <input type="radio" checked="checked" >
//分组：同一时间，只能选中一个单选框，设置name属性相同即可
<p>今天晚上做什么？</p>
学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>

6、复选框

<input type="checkbox"> 即表示复选框

<p>今天晚上做什么？</p>
学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>
双击选中所有代码

7、下拉列表

//<select> 即下拉列表  ，需要配合<option>使用
<select >
 <option >高数</option>
 <option >线代</option>
 <option >概率论</option>
</select>
//设置高度：下拉框中选项中可以看到的选项个数
<select  size="2">
。。。。。。
</select>
//设置可以多选：使用ctrl或者shift进行多选
<select size="3" multiple="multiple">
 <option >高数</option>
 <option >线代</option>
 <option >概率论</option>
</select>
//设置默认选中
<select size="3" multiple="multiple">
 <option >高数</option>
 <option selected="selected">线代</option>
 <option selected="selected">概率论</option>
</select>

8、普通按钮

<input type="button"> 即普通按钮，普通按钮不能提交

普通按钮不能提交
<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="button" value="登陆">
</form>

9、提交按钮

<input type="submit">即为提交按钮，用于提交form，把数据提交到服务端

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

10、重置按钮

<input type="reset"> 重置按钮 可以把输入框的改动复原

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

11、图像提交

<input type="image" > 即使用图像作为按钮进行form的提交

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

login.jsp初览

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>

<%
    request.setCharacterEncoding("UTF-8");
    String name = request.getParameter("name");
    String password = request.getParameter("password");

%>

您提交的账号名是 :<%=name%> <br/>
您提交的密码是 :<%=password%>
<br>
<a href="javascript:history.back()">返回</a>

12、按钮

<button></button>即按钮标签，与<input type="button">不同的是，<button>标签功能更为丰富，按钮标签里的内容可以是文字也可以是图像。

如果button的type=“submit” ，那么它就具备提交form的功能

//IE下button的type的默认值为button不具备提交功能，其他浏览器type的默认值是submit
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>

四、其它

1、中文乱码问题

浏览器设置编码方式 or 直接在html指定编码方式：GB2312或者是UTF-8。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<p>中文</p>

2、注释

html使用 <!-- -->进行注释