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. 关于CSS Grid Layout的代码解释

    .wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...

  2. 如何成为一个伟大的 JavaScript 程序员

    这篇文章主要概述在我5年工作经验的基础上,我成为优秀JavaScript开发人员所使用的技术和资源. 当前大多数Web开发人员面临着这样一个共同的问题:他们必须在多个不同的领域领先于他人——从数据库到 ...

  3. （20）ASP.NET Core EF创建模型（必需属性和可选属性、最大长度、并发标记、阴影属性）

    1.必需和可选属性 如果实体属性可以包含null,则将其视为可选.如果属性的有效值不可以包含null,则将其视为必需属性.映射到关系数据库架构时,必需的属性将创建为不可为null的列,而可选属性则创建 ...

  4. C# 控件 RichTextBox 显示行号，并且与Panel相互联动

    我们在使用到WINFORM窗体工作中,要求RichTextBox 加入行号: 之前有看到大牛们写的,但是太复杂繁多,而且有用双TextBox进行联动,非常不错,今天我们尝试RichTextBox +P ...

  5. Vuex使用总结

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex的五个核心概念 ...

  6. Arduino学习笔记② Arduino语言基础

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  7. 在idea中添加try/catch的快捷键

    在idea中添加try/catch的快捷键ctrl+alt+t选中想被try/catch包围的语句,同时按下ctrl+alt+t,出现下图

  8. 《编写可维护的JavaScript》 笔记

    <编写可维护的JavaScript> 笔记 我的github iSAM2016 概述 本书的一开始介绍了大量的编码规范,并且给出了最佳和错误的范例,大部分在网上的编码规范看过,就不在赘述 ...

  9. CPU爆满后的无助感

    告警 晚七点刚好上地铁,握在手里的手机震动了好几下,根据震动这几下的手感已经判断出这是钉钉在告警了,十有八九就是线上的问题,通过Zabbix监控的一台线上服务器已经五分钟不可达,这应该不会是网络网络问 ...

  10. 防抖与节流 & 若每个请求必须发送，如何平滑地获取最后一个接口返回的数据

    博客地址:https://ainyi.com/79 日常浏览网页中,在进行窗口的 resize.scroll 或者重复点击某按钮发送请求,此时事件处理函数或者接口调用的频率若无限制,则会加重浏览器的负 ...