HTML基础内容笔记

<!--打印Hello HTML-->
<html>
  <body>
    <p>Hello HTML</p>
  </body>
</html>

中文乱码问题

<!--中文乱码问题 
可以在浏览器上设置编码方式为GB2312 
或者在html的最前面加上编码设置
这样就能告诉浏览器使用GB2312方式显示中文 
如果 GB2312不行,就用UTF-8-- >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<p>中文</p>

水平线<hr/>,标题大小,换行<br/>

<h1>标题1</h1>
<br/>
<br/>
<br/>
<!h1h2,h3代表不同大小的标题>
<h1>标题2前面有3个换行</h1>

<p>这是一个水平线,有渲染效果,但是没有文本内容</p>
<hr/>

设置居中标题

<h1 >未设置居中的标题</h1>
 
<h1 align="center">居中标题</h1>

设置注释

<!--align属性用于对齐-->
<h1 align="center">居中标题</h1>

粗体效果

<p>无粗体效果</p>
<b>b标签粗体效果</b>
<br/>
<!--一般用strong-->
<strong>strong标签粗体效果</strong>

斜体效果

<p>无斜体效果</p>
 
<i>使用 i 标签带来的斜体效果</i>
<br/>
 
<em>使用 em 标签带来的斜体效果</em>
<strong><i>同时有粗体和斜体</i></strong>

有时候,需要在网页上显示代码,比如java代码就需要用到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>

删除标签

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

下划线的标签

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

图像显示

<img src="https://how2j.cn/example.gif"/>
<!--src="文件路径"-->

<img src="example.gif"/>
<!--src="文件名"。如果是本地文件,只需把图片放在同一个目录下即可 
src直接使用文件名,不需要/ -->

<img src="example.gif"/>

<img src="https://how2j.cn/example.gif"/>
<!--src="文件路径"-->
<img src="https://how2j.cn/example.gif"/>
<img src="../example ">
<!--src="src使用图片所在的绝对路径,并在前面加上file:// ">
<img src="file://c:example.gif"/>
<!-- 如果是本地文件,只需把图片放在同一个目录下即可 
src直接使用文件名,不需要/ -->
<img width="200" height="200" src="https://how2j.cn/example.gif"/>

<div align="left">
  <!--居左-->
  <img src="https://how2j.cn/example.gif"/>
</div>
 
<div align="center">
  <!--居中-->
  <img src="https://how2j.cn/example.gif"/>
</div>
 
<div align="right">
  
  <img src="https://how2j.cn/example.gif"/>
</div>
<!--如果图片不存在,默认会显示一个缺失图片,这是不友好的 
所以可以加上alt属性。 
当图片存在的时候,alt是不会显示的 
当图片不存在的时候,alt就会出现 -->
<img src="https://how2j.cn/example_not_exist.gif" />
 
<br/>
 
<img src="https://how2j.cn/example.gif" alt="这个是一个图片" />
 
<br/>
<img src="https://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

发布了34 篇原创文章 · 获赞 6 · 访问量 4769

猜你喜欢

转载自blog.csdn.net/qq_42712280/article/details/102941921