这篇文章主要介绍“HTML怎么实现展示的文字在浏览器窗口展示的一样”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML怎么实现展示的文字在浏览器窗口展示的一样”文章能帮助大家解决问题。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、雅安服务器托管、营销软件、网站建设、磐石网站维护、网站推广。
1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格式为以下三种:.jpg(图片有损压缩,影响画质)、.png(图片无损压缩、容积大、具有透明通道)、.gif(动图)。图片路径地址分为本地图片和网络图片,本地图片中分为绝对路径(从盘符开始算起)和相对路径(从当前路径算起),相对路径属于平级关系,如果图片相对于上一级,表现形式为"../"在<img src="图片路径地址" alt="属性名" title="占位符">中,alt="属性名"是当图片无法正常展示出来时显示的文字,title="占位符"是鼠标移动到图片上展示出来的提醒文字。
2.HTML基础标签文本分为这个段落<p></p>标题h2-h7,文本随标签数字的增大而减小,标题的展示代码如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML基础标签文本</title>
7 </head>
8 <body>
9 <h2>标题1</h2>
10 <h3>标题2</h3>
11 <h4>标题3</h4>
12 <h5>标题4</h5>
13 <h6>标题5</h6>
14 <h7>标题6</h7>
15 </body>
16 </html>
在这里不得不说的是浏览器的机制:针对空格、回车、table键,只要在字符之间(何谓字符,类似<p>我是字符</p>就是在这个标签之间的文字),浏览器就会强制的转换为一个空格;如果没有在字符之间,则会直接清空,当然我们在编辑器中的排列添加的空格是为了排版的需要!如果想要排版展示的文字和在浏览器窗口展示的一样,我们应该怎么办?常见代码如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML基础标签文本</title>
7 </head>
8 <body>
9 换行<br>
10 <hr>下划线 11 空格 <!--字符实体-->
12 文本格式化标签: 13 <strong>文本加粗</strong>
14 <em>斜体</em>
15 <del>删除线</del>
16 </body>
17 </html>
3.html基础标签超链接,常见形式为<a href="#">文本</a>,在href="#"里面,这个#可以替换为任何网址,如果不写就为空,用#表示。点击链接的文本,链接的网址打开形式分为当前窗口和新窗口打开,展示代码为<a href="http://www.dhnblog.com/" target="_blank">新窗口打开</a>,<a href="http://www.dhnblog.com/" target="_self">当前窗口打开</a>,还有我们常说的书签标记:锚点展示代码形式如下
View Code
<a name="br">1</a> <a href="#br">68点击跳转1</a>或者也可以这样写:<a id="br">1</a><a href="#br">68点击跳转1</a>,除此之外,默认的<a href="#">点击返回顶部</a>
View Code
4.html基础标签列表分为无序列表,有序列表,自定义列表,字面意思理解就是有无顺序的区别,代码展示形式如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>html基础标签列表</title>
7 </head>
8 <body>
9 <!-- 无线列表type="circle"定义列表前展示的样式,现在基本用的是style="list-style: ;"-->
10 <ul type="circle">
11 <li>1</li>
12 <li>2</li>
13 <li>3</li>
14 <li>4</li>
15 </ul>
16 <!-- 有序列表 -->
17 <ol style="list-style: square;">
18 <li>1</li>
19 <li>2</li>
20 <li>3</li>
21 <li>4</li>
22 </ol>
23 <!-- 自定义列表 -->
24 <dl>
25 <dt>
26 <dd>文本</dd>
27 </dt>
28 </dl>
29 </body>
30 </html>
5.html基础标签表格<table>包含若干行<tr>,行里面包含若干个单元格,单元格的标题是<th>内容为<td>,在表格中最重要的2个是合并行或者列,而colspan=""代表的是单元格可横跨列数rowspan=""代表的是可横跨行数,展示代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>html基础标签</title>
7 </head>
8 <body>
9 <table border="1"><!--边框为1px-->
10 <caption>colspan列数 rowspan行数</caption><!--表格头部标题-->
11 <tr>
12 <th rowspan="4">部门</th>
13 <th>姓名</th>
14 <th>性别</th>
15 <th>工资</th>
16 </tr>
17 <tr>
18 <td>小明</td>
19 <td>男</td>
20 <td>1W</td>
21 </tr>
22 <tr>
23 <td>小林</td>
24 <td>男</td>
25 <td>1W</td>
26 </tr>
27 <tr>
28 <td>小影</td>
29 <td>女</td>
30 <td>1W</td>
31 </tr>
32 <tr>
33 <td colspan="3">工资合计</td>
34 <td>3W</td>
35 </tr>
36 </table>
37 </body>
38 </html>
关于“HTML怎么实现展示的文字在浏览器窗口展示的一样”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
文章名称:HTML怎么实现展示的文字在浏览器窗口展示的一样
转载来于:https://www.cdcxhl.com/article14/poojde.html
成都网站建设公司_创新互联,为您提供网站建设、云服务器、域名注册、建站公司、网站设计公司、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联