2021-07-21

最新推荐文章于 2021-07-29 21:37:06 发布

止乔

最新推荐文章于 2021-07-29 21:37:06 发布

阅读量65

点赞数

本文链接：https://blog.csdn.net/zhi_qiao/article/details/118965631

版权

HTML5基操

用个记事本都可以写，写完改后缀名.txt为.html即可或者有条件的用vscode，效果更佳

中文问题

因为html可能显示中文会有乱码，所以做如下调整

<head>
<meta charset="UTF-8">
</head>

标题

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

会显示从大（1）到小（6）的标题

段落

段落1
段落2
段落3
 
<p>段落4 </p>
<p>段落5 </p>
<p>段落6 </p>

在p标签中的文本会自动换行，不在p标签中的，不会自动换行
在这里插入图片描述

字体

粗体

也就是比较粗的字体
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong

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

斜体

也就是字面意思的斜着的字体
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性

em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。常常用于引入新的术语的时候使用。

<p>无斜体效果</p>
<i>使用 i 标签带来的斜体效果</i>
<br/>
<em>使用 em 标签带来的斜体效果</em>

预格式

有时候，需要在网页上显示代码，比如java代码

就需要用到pre
它会完全显示你所要展示的内容的完全体，包括空格和空行

<pre>
this
is
</pre>

删除效果

~~说白了就是像这样子给你的字体添加了删除线的效果~~

<del>
</del>

下划线

使用ins标签实现的下划线效果

<ins>
</ins>

显示图像

即图像标签
需要设置其属性 src指定图像的路径

<img src="https://i-blog.csdnimg.cn/blog_migrate/9e6ba7eee76e2b77b71402d70cc7561b.gif"/>

1. 如果是本地文件，只需把图片放在同一个目录下即可 src直接使用文件名，不需要/ 2. 片在上级目录，则在src上加上 ../，即可访问上级目录的图片如果是在上级目录的上级目录，则使用 ../../ 3. src使用图片所在的绝对路径，并在前面加上file:// ### 设置图像大小

<img width="200" height="200" src="https://i-blog.csdnimg.cn/blog_migrate/9e6ba7eee76e2b77b71402d70cc7561b.gif"/>

在img的元素后面加参数width=“xxx” height="xxx"即可

图像的位置

<div align="left">//左边
  <img src="https://i-blog.csdnimg.cn/blog_migrate/9e6ba7eee76e2b77b71402d70cc7561b.gif"/>
</div>
 
<div align="center"> //中间
  <img src="https://i-blog.csdnimg.cn/blog_migrate/9e6ba7eee76e2b77b71402d70cc7561b.gif"/>
</div>
 
<div align="right"> //右边
  <img src="https://i-blog.csdnimg.cn/blog_migrate/9e6ba7eee76e2b77b71402d70cc7561b.gif"/>
</div>

在img元素的前面设置align参数，其可以设置为left center right

超链接

超链显示文本

<a href="跳转到的页面地址">超链显示文本</a>

表格

<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格

<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>

1	2
3	4
a	b

列表

列表格的意思，分为有序和无序

<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

DOTA
LOL

<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>

地卜师
卡尔

分块

div
span
这两种标签都是布局用的
这种标签本身没有任何显示效果
通常是用来结合css进行页面布局
div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong

字体

因为现在大部分做页面的都用css了，字体元素基本宣告退役了
元素：font

<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>

绿色默认大小字体

蓝色大2号字体

红色小2号字体

内联框架

iframe即内联框架

通过内联框架可以实现在网页中“插入”网页

<iframe src="https://how2j.cn/" width="600px" height="400px">
</iframe>

不过现在也基本不用了，甚至很多浏览器都不支持了

止乔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫