1、写一个显示Hello World的网页,

 <html>
<body>
<p>Hello World</p>
</body>
</html>

2、标题

标题会自动粗体,大写其中的内容,并且带有换行效果,一般会使用<h1> 到 <h6> 分别表示不同大小的标题;h1的块头最大;

 <h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题5</h6>

3、段落

<p>标签即表示段落,是paragraph的缩写,自带换行效果;

 <p>段落4 </p>
<p>段落5 </p>
<p>段落6 </p>

4、粗体

<b> 
     <strong> 都可以用来实现粗体的效果,

 <p>无粗体效果</p>
<b>b标签粗体效果</b>
<br/>
<strong>strong标签粗体效果</strong>

运行效果是

无粗体效果

            b标签粗体效果 
            strong标签粗体效果

5、斜体

  <i>和<em>都可以表示斜体效果,

 <p>无斜体效果</p>

 <i>使用 i 标签带来的斜体效果</i>
<br/> //表示换行 <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>

[笔记] HOW2J.CN网站记录的java笔记_第四部分_HTML的更多相关文章

  1. servlet(6) - servlet总结 - 小易Java笔记

    垂阅前必看: 这都是我总结的我觉得是学习servlet应该掌握的,我在学习期间也做了一个博客项目来让所学的知识得以巩固.下面就是博客项目链接.前面的servlet相关的笔记总汇,还有就是我把觉得在学习 ...

  2. 开始记录学习java的笔记

    今天开始记录学习java的笔记,加油

  3. 《大型网站系统与Java中间件》读书笔记 (中)

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾上一篇: <大型网站系统与Java中间件& ...

  4. 《大型网站系统与Java中间件》读书笔记(上)

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 这本书买了一段时间了,之前在杭州没带过去,现在读完第 ...

  5. java笔记整理

    Java 笔记整理 包含内容     Unix Java 基础, 数据库(Oracle jdbc Hibernate pl/sql), web, JSP, Struts, Ajax Spring, E ...

  6. Effective Java笔记一 创建和销毁对象

    Effective Java笔记一 创建和销毁对象 第1条 考虑用静态工厂方法代替构造器 第2条 遇到多个构造器参数时要考虑用构建器 第3条 用私有构造器或者枚举类型强化Singleton属性 第4条 ...

  7. 转 Java笔记:Java内存模型

    Java笔记:Java内存模型 2014.04.09 | Comments 1. 基本概念 <深入理解Java内存模型>详细讲解了java的内存模型,这里对其中的一些基本概念做个简单的笔记 ...

  8. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  9. Java 笔记 —— java 和 javac

    Java 笔记 -- java 和 javac h2{ color: #4ABCDE; } a{ text-decoration: none !important; } a:hover{ color: ...

随机推荐

  1. 介绍ArcGIS中各种数据的打开方法——shp(矢量文件)

    2.加载shp文件到地图控件 ShapeFile是一种矢量数据模型的计算机数据组织文件,用于在计算机上表达矢量数据的计算机文件. 加载ShapeFile文件最主要是:axMapControll控件对象 ...

  2. netty源码解解析(4.0)-25 ByteBuf内存池:PoolArena-PoolChunk

    PoolArena实现了用于高效分配和释放内存,并尽可能减少内存碎片的内存池,这个内存管理实现使用PageRun/PoolSubpage算法.分析代码之前,先熟悉一些重要的概念: page: 页,一个 ...

  3. 运用第一性原理探寻AI本质

    摘要:使用第一性原理探讨理解AI本质. 文章来源:宜信技术学院|宜信支付结算团队技术分享第二期-支付结算机器学习技术团队负责人 刘创 分享<AI与第一性原理> 分享者:宜信支付结算机器学习 ...

  4. [Luogu3070][USACO13JAN]岛游记Island Travels

    题目描述 Farmer John has taken the cows to a vacation out on the ocean! The cows are living on N (1 < ...

  5. 如何巧妙地在基于 TCP Socket 的应用中实现用户注册功能?

    通常,在基于TCP的应用中(比如我开源的GGTalk即时通信系统),当TCP连接建立之后,第一个请求就是登录请求,只有登录成功以后,服务器才会允许客户端进行其它性质的业务请求.但是,注册用户这个功能比 ...

  6. 【Labview入门】子VI的调用

    labview版本:Labview2015 Labview里面也可以向C语言等变成语言一样调用子程序,本文带你一步一步实现子VI的创建与调用. 第一步 写好程序 首先我们写个简单的加法程序: 我们的目 ...

  7. java源码解析

    String深入解析 String具有不变性的原因: String被final修饰,它不可能被继承,也就是任何对String的操作方法,都不会被继承覆写 String中保存数据的是一个char数组的v ...

  8. pytorch笔记

    Tensor slice Tensor的indices操作 以[2,3]矩阵为例,slice后可以得到任意shape的矩阵,并不是说一定会小于2行3列. import torch truths=tor ...

  9. C#开发命令执行驱动程序 之 控制标志的命令行参数

    /// <summary> /// 在cmd窗体内执行如下: /// CtrlOrderDrierApp.exe -f -t /// 返回: /// FOO /// Show Table ...

  10. 在docker中创建使用MySQL,并实现远程连接navicat

    在 docker 中使用 mysql 安装完docker之后,在命令行中输入docker images可以查看自己创建的image(安装下载docker的教程很多了,大家需要可以去查一下就可以了)这里 ...