中文乱码问题
可以在浏览器上设置编码方式为GB2312或者在html的最前面加上编码设置
<head>
<meta http-equiv="Content-Type" content="text/html";chartset="GB2312">
</head>
HTML属性
例如<h1 align="center">居中标题</h1>，其中align=“center”就叫做属性
HTML注释
html使用进行注释
HTML基本元素
1.HTML标题：标题会自动粗体显示其中的内容，并且带有换行的效果
使用<h1>到<h6>分别表示不同大小的标题。
2.HTML段落：
<p>标签表示段落，自带换行效果
3.HTML粗体
它们都可以实现粗体效果
<b>：仅仅表示该文本是粗体的，并不暗示该段文字的重要性
<strong>：虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。
4.HTML斜体
都可以表示斜体的效果
<i>：仅仅表示该文本是斜体的，并不暗示该段文字的重要性
<em>：虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。
5.HTML预格式
有时候需要在网页上显示代码，就需要使用预格式<pre>
<p>这里是没有用预格式的情况：</p>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
<br/>
<br/>
<p>使用预格式的情况:</p>
<pre>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
效果如下：
这里是没有用预格式的情况：
public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World"); } }
使用预格式的情况:
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
6.HTML删除效果
<del>即删除标签
例如：
<p>这是没有删除效果
</p>
<del>这是删除效果</del>
效果如下：
这是没有删除效果
这是删除效果
7.HTML下划线
<ins>即下划线标签
例如：
<p>这是没有下划线效果
</p>
<ins>这是有下划线效果</ins>
效果如下：
阶段性练习1.
<h1>英雄联盟 （电子竞技类游戏）</h1>
<p><b>《英雄联盟》</b>(简称LOL)是由美国<i>Riot Games</i>开发，中国大陆地区腾讯运营的游戏
</p>
<p>
<b>《英雄联盟》</b> 除了。。。。。。。<ins>[1]</ins>
</p>
<p>
2016年1月，。。。。。。。。已突破<del>500</del> 670万
</p>
<ins>这是有下划线效果</ins>
效果如下
8.HTML图像
<img>图像标签，需要设置属性src来指定图像的路径。
如果是本地文件，只需要把图片放在同一个目录下即可，src直接使用文件名，不需要/
例如
<img src="example.gif">
如果是上级目录图像，则需要在src上加上../,即可访问上级目录的图片，如果是上级目录的上级目录，就需要使用../../
其他目录的图像，src使用图片所有的绝对路径，并且在前面加上file://
例如
<img src="file:///Users/chenyangyang/Downloads/example.gif">
设置图片的大小
例如：
<img width="200px" height="500px" src="file:///Users/chenyangyang/Downloads/example.gif">
图片居中
img不能自己居中，需要放在其他的居中标签中实现这个效果，例如h1标签，p标签等。
例如
<div align="left">
<img src="http://how2j.cn/example.gif"/>
</div>
<div align="center">
<img src="http://how2j.cn/example.gif"/>
</div>
<div align="right">
<img src="http://how2j.cn/example.gif"/>
</div>
如果图片不存在，默认会显示一个缺失图片，这样是不友好的，所以可以加上alt属性，当图片存在的时候，alt不会显示，当图片不存在的时候，alt就会出现。
例如
<img src="ile:///Users/chenyangyang/Downloads/example.gif" alt="这是一个不存在的图片">
效果如下：
9.HTML超链接
<a>标签即用于显示超链接
完整的元素是<a href="跳转到的页面的地址">超链接显示文本</a>
在新的页面中打开链接，target属性
例如
<a href="http://wwww.baidu.com" target="_blank">百度</a>
在超链接上显示提示文字，title属性
例如
<a href="http://wwww.baidu.com" target="_blank" title="跳转到百度">百度</a>
使用图片作为超链接
例如：
<a href="http://wwww.baidu.com" target="_blank" title="跳转到百度">
<img src="file:///Users/chenyangyang/Downloads/example.gif" alt="这是一个不存在的图片">
</a>
10.HTML表格
<table>标签用于显示一个表格，
<tr>表示行
<td>表示列
带边框的表格，需要设置table的border属性
例如：
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
效果如下：
设置表格的宽度
设置table的width属性，px表示像素的意思，例如屏幕的分辨率为1024X768， 那么屏幕横向就有1024个像素。
设置单元格宽度的绝对值
设置td的属性width
设置单元格宽度的相对值
设置td的属性width为百分数
设置单元格水平对齐
设置td的属性align
设置单元格垂直对齐
设置td的属性valign
横跨两列，水平合并
设置td的属性为colspan
横跨两行，垂直合并
设置td的属性rowspan
设置背景色
设置tr或者td的bgcolor属性
11.HTML列表
无序列表：
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
12.HTML中布局元素div、span
<div>：块元素，即自动换行，常见的块元素还有h1、table、p
<span>：是内联元素，即不会换行，常见的内联元素有img、a、b、strong。
这两个标签都是布局使用的，本身不会有任何显示效果。
13.HTML字体
使用<font>表示字体：常用的属性有color和size，分别表示颜色和大小。
颜色的表示方式有：
1.颜色名，如red、blue
2.颜色对应的16进制，如#ff0000就表示红色
14.内联框架
<iframe>内敛框架。
通过内敛框架，可以是现在网页中插入网页。
例如：
<iframe src="http://www.baidu.com" width="100px" height="100px"></iframe>
HTML表单元素
1.HTML文本框
<input type="text">即表示文本框，并且只能输入一行，如果要输入多行，需要使用文本域<textarea>
设置文本框的初始值
使用value属性
input type="text" value="输入框">
设置有背景文字的文本框
使用属性placeholder
input type="text" placeholder="输入框">
2.HTML密码框
<input type="password">即表示密码框，输入的数据会自动显示为星号
3.HTML表单
<form>用于向服务器提交数据。
使用method=“get”提交数据是常用的提交数据的方式，form如果没有设置method属性，默认使用get方式提交数据。使用get方式提交数据的特点是在浏览器地址栏中可以看到提交的参数。
使用method=“post”提交数据，参数不会显示在地址栏中。如果要提交纹紧致数据，例如上传文件，必须使用post方式。
3.HTML单选框
<input type="radio">
默认选中，设置属性checked
<input type="radio" checked="checked">
分组，即多个单选框在同一个分组中，同一时间只能选中一个单选框。
设置name属性相同即可。
4.HTML复选框
<input type="checkbox">
5.HTML下拉列表
<select>即表示下拉列表
需要配合<option>使用
例如
<select>
<option>苍老师</option>
<option>许老师</option>
<option>章老师</option>
</select>
设置高度
使用属性size设置高度
设置多选
使用multiple设置多选，使用ctrl或者shift进行多选
设置默认选中
对option设置selected=“selected”属性设置默认选中
6.HTML文本域
<textarea>与文本框不同的是，文本域可以有多行，并且可以使用滚动条。
设置宽度和行数
使用属性cols和rows
7.HTML普通按钮
<input type="button">为普通按钮
普通按钮不具有提交form的效果
8.HTML提交按钮
<input type="submit">为提交按钮
用于提交form，把数据提交到服务器
9.HTML重置按钮
<input type="reset">为重置按钮，可以把输入框的改动复原
10.HTML图像提交
<input type="image">使用图像最为按钮进行form提交
11.HTML按钮
<button></button>即按钮标签
与<input type="button">不同的是，<button>标签的功能更为丰富
如果button的type=“submit”，那么它就具备了提交form的功能。
网友评论