1、写一个显示Hello World的网页,
1 <html>
2 <body>
3 <p>Hello World</p>
4 </body>
5 </html>
2、标题
标题会自动粗体,大写其中的内容,并且带有换行效果,一般会使用<h1> 到 <h6> 分别表示不同大小的标题;h1的块头最大;
1 <h1>标题1</h1>
2 <h2>标题2</h2>
3 <h3>标题3</h3>
4 <h4>标题4</h4>
5 <h5>标题5</h5>
6 <h6>标题5</h6>
3、段落
<p>标签即表示段落,是paragraph的缩写,自带换行效果;
1 <p>段落4 </p>
2 <p>段落5 </p>
3 <p>段落6 </p>
4、粗体
<b>
<strong> 都可以用来实现粗体的效果,
1 <p>无粗体效果</p>
2 <b>b标签粗体效果</b>
3 <br/>
4 <strong>strong标签粗体效果</strong>
运行效果是
无粗体效果
b标签粗体效果
strong标签粗体效果
5、斜体
<i>和<em>都可以表示斜体效果,
1 <p>无斜体效果</p>
2
3 <i>使用 i 标签带来的斜体效果</i>
4 <br/> //表示换行
5
6 <em>使用 em 标签带来的斜体效果</em>
运行效果如下,
无斜体效果
使用 i 标签带来的斜体效果
使用 em 标签带来的斜体效果
6、预格式
用法就是<pre>
中间放上你要放的代码
</pre>
7、删除效果
用法就是,<
del
>使用del标签实现的删除效果</
del
> , del是delete的缩写。
8、下划线
<ins>即下划线标签,用法是,<
ins
>使用ins标签实现的下划线效果</
ins
>;
**************************************************************************************************************************************************
9、图像
<img> 即图像标签,需要设置其属性 src指定图像的路径,用法是
<
img
src
=
"http://how2j.cn/example.gif"
/>
10、同级目录图像 src是search的意思
如果是本地文件,只需把图片放在同一个目录下即可,src直接使用文件名,不需要/,比如
<img src="example.gif"/>
就是example和前引号中间不用加/
11、上级目录图像
图片在上级目录,则在src上加上 ../,即可访问上级目录的图片,如果是在上级目录的上级目录,则使用 ../../
<img src="../example.gif"/>
<img src="../../example.gif"/>
12、其他目录里的图像
src使用图片所在的绝对路径,并在前面加上file://
<img src="file://c:/example.gif"/>
13、设置图像大小
如果设置的大小比原图片大,则会产生失真效果,
<img width="200" height="200" src="http://how2j.cn/example.gif"/>
14、图像居中
img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签. 经常采用的手段是放在div中居中 ,但align是啥?表示在左中右的吗?
<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>
运行效果是
15、替换图片中的文字
没学会,没看懂
16、加超链接
会用到<a>
<a href="跳转到的页面地址">超链显示文本</a>,
<a href="http://www.12306.com">12306</a>
运行结果是,
17、在新的页面打开超链接
需要新增属性target
<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>
18、超链接上的提示文字
用到了title属性
效果就是鼠标放在超链接上时,会弹出提示文字,,如下
代码是
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
19、用图片作为超链接
就是在之前的格式里,把 <a href="跳转到的页面地址">超链显示文本</a>,中的超链显示文本改成图片的地址,如下,
<a href="http://www.12306.com">
<img src="http://how2j.cn/example.gif"/>
</a>
20、表格
<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格,下面是一个3行2列表格的代码,
<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>
运行结果是,
21、带边框的表格
在table里用到border属性,
方法就是在上述代码的第一行里,把<table>改为<
table
border
=
"1"
>,运行结果为,
22、设置table宽度
设置table的属性 width,px即像素的意思,比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素,
具体操作是,把第21条笔记里的第一行<
table
border
=
"1"
>
改为<
table
border
=
"1"
width
=
"200px"
>,
运行结果是,
注意,在table这一行里写的宽度width是在指定整个这个表的宽度是几,不是指定每个单元格的宽度。
23、单元格的宽度绝对值
直接看HOW2J上的原网页把,http://how2j.cn/k/html/html-table/187.html
24、列表
列表分无序列表和有序列表,分别用<ul>标签和<ol>标签表示,直接看HOW2J上的原网页把。
25、字体颜色速查手册
http://how2j.cn/k/html/html-font/644.html
26、内联框架
<iframe> 即内联框架,通过内联框架 可以实现在网页中“插入”网页,
<iframe src="http://how2j.cn/" width="600px" height="400px">
</iframe>
<
del
>使用del标签实现的删除效果</
del
>