大家好,学习好坚持不懈。

小白今天继续为大家讲解html语言段落与标签的应用。

上一篇文章我给大家讲了HTML的入门基础,如果大家忘了可以点我重新看看,正所谓温故而知新。

可能大家按照图示操作想做一个自己的简单静态页面,发现是下图这样的显示

大家一定发现了吧,在编辑状态下正常显示的文字,为什么在网页中就成乱码了呢?

我今天就给大家揭秘这到底是什么原因造成的,以及如何解决这个问题。

网页编码设置

浏览器并不是认识我们写的html,那么我们首先就要告诉浏览器我们写的内容是什么。所以如下图所示

第一步我们要告诉浏览器,我们写的是html语言,并且标注我们使用的编码类型,编码类型写在head标签内。

这下我来给大家讲一下这些编码的作用。

<!DOCYTPE html>是告诉浏览器这个网页是试用html语言编写的,但是<!DOCTYPE>标签本身并不是html内的内容。

<meta http-equiv="content-type" content="text/html;charset=utf8"/>

http-equiv是告诉浏览器使用的文档类型,content="text/html;charset=utf是说使用编码,大家注意空格。

国内使用的编码形式主要有:utf-8,GB2312,gbk等编码

像content-type有很多种,解释如下

1.  Content-Type

  MediaType,即是Internet Media Type,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息。

[html] view plain copy
  1. 类型格式:type/subtype(;parameter)? type  

  2. 主类型,任意的字符串,如text,如果是*号代表所有;   

  3. subtype 子类型,任意的字符串,如html,如果是*号代表所有;   

  4. parameter 可选,一些参数,如Accept请求头的q参数, Content-Type的 charset参数。   

 例如: Content-Type: text/html;charset:utf-8;


 常见的媒体格式类型如下:

  •     text/html : HTML格式

  •     text/plain :纯文本格式      

  •     text/xml :  XML格式

  •     image/gif :gif图片格式    

  •     image/jpeg :jpg图片格式 

  •     image/png:png图片格式

   以application开头的媒体格式类型:

  •    application/xhtml+xml :XHTML格式

  •    application/xml     : XML数据格式

  •    application/atom+xml  :Atom XML聚合格式    

  •    application/json    : JSON数据格式

  •    application/pdf       :pdf格式  

  •    application/msword  : Word文档格式

  •    application/octet-stream : 二进制流数据(如常见的文件下载)

  •    application/x-www-form-urlencoded : <form encType=””>中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)

   另外一种常见的媒体格式是上传文件之时使用的:

  •     multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式

     以上就是我们在日常的开发中,经常会用到的若干content-type的内容格式。

2.   Spring MVC中关于关于Content-Type类型信息的使用

    首先我们来看看RequestMapping中的Class定义:

[html] view plain copy
  1. @Target({ElementType.METHOD, ElementType.TYPE})  

  2. @Retention(RetentionPolicy.RUNTIME)  

  3. @Documented  

  4. @Mapping  

  5. public @interface RequestMapping {  

  6.       String[] value() default {};  

  7.       RequestMethod[] method() default {};  

  8.       String[] params() default {};  

  9.       String[] headers() default {};  

  10.       String[] consumes() default {};  

  11.       String[] produces() default {};  

  12. }  

value:  指定请求的实际地址, 比如 /action/info之类。
method:  指定请求的method类型, GET、POST、PUT、DELETE等
consumes: 指定处理请求的提交内容类型(Content-Type),例如application/json, text/html;
produces:    指定返回的内容类型,仅当request请求头中的(Accept)类型中包含该指定类型才返回
params: 指定request中必须包含某些参数值是,才让该方法处理
headers: 指定request中必须包含某些指定的header值,才能让该方法处理请求


其中,consumes, produces使用content-typ信息进行过滤信息;headers中可以使用content-type进行过滤和判断。

3. 使用示例

  3.1 headers

[html] view plain copy
  1. @RequestMapping(value = "/test", method = RequestMethod.GET, headers="Referer=http://www.ifeng.com/")    

  2. public void testHeaders(@PathVariable String ownerId, @PathVariable String petId) {        

  3.   // implementation omitted    

  4. }   

  这里的Headers里面可以匹配所有Header里面可以出现的信息,不局限在Referer信息。


  示例2

[html] view plain copy
  1. @RequestMapping(value = "/response/ContentType", headers = "Accept=application/json")    

  2. public void response2(HttpServletResponse response) throws IOException {    

  3.     //表示响应的内容区数据的媒体类型为json格式,且编码为utf-8(客户端应该以utf-8解码)    

  4.     response.setContentType("application/json;charset=utf-8");    

  5.     //写出响应体内容    

  6.     String jsonData = "{"username":"zhang", "password":"123"}";    

  7.     response.getWriter().write(jsonData);    

  8. }    

服务器根据请求头“Accept=application/json”生产json数据。


当你有如下Accept头,将遵守如下规则进行应用:
①Accept:text/html,application/xml,application/json
      将按照如下顺序进行produces的匹配 ①text/html ②application/xml ③application/json
②Accept:application/xml;q=0.5,application/json;q=0.9,text/html
      将按照如下顺序进行produces的匹配 ①text/html ②application/json ③application/xml
      参数为媒体类型的质量因子,越大则优先权越高(从0到1)
③Accept:*/*,text/*,text/html
      将按照如下顺序进行produces的匹配 ①text/html ②text/* ③*/*


即匹配规则为:最明确的优先匹配。

段落与标签

标题标签:<h1></h1>~,<h6></h6>

段落标签:<p></p>

align对齐属性:left(左对齐)right(右对齐)center(居中对齐)justify(对行进行伸展,每行都有相同的长度

换行标签:<br/>

先来讲标题标签,我们在html里面输入标题可以看到如下效果

标题有自适应显示。

下来我们来讲段落标签与align对齐属性

首先讲段落标签<p></P>,如下图所示

大家可能已经注意到了。每段文件直接是有间隔的,但是文字并没有像咱们用world一样前面预留两格,也没有对齐之类,这下就要用到align对齐属性了,演示如下图

大家掌握段落标签之后注意最后一段话,最后一段并没有显示,原文应该是如下的:

亲贤臣,远小人,此先汉所以兴隆也;

亲小人,远贤臣,此后汉所以倾颓也。

先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。

侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。

臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。

先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。

后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。

这才是网页所展示的正确的文字换行,那么如何实现这种效果呢,我们这时就需要<br/>标签(br只是在结构上换行,没有段落功能),如下图所示

现在该讲如何让文字前面跟world一样加入空格,我们在代码页面敲空格是没有用的,必须用代码(&nbsp;---多次代码代表多个空格)实现这个功能,或者大家也可以用<pre></pre>(预格式化标签)标签来实现段落之间的换行和空格,如图所示

现在我们来讲讲<hr/>水平线与文字修饰标签

水平线<hr/>标签有下边几个属性,width设置水平线宽度,可以是像素或者百分比,color设置水平线颜色,align设置水平线居中对齐,noshade设置水平线无阴影。

文字斜体<i></i>,<em></em>,加粗<b></b>,<strong></strong>,下标<sub>,上标<sup>,下划线<ins>,删除线<del>,如图所示

常用特殊符号

网页经常需要展示一些特殊符号,那么这些特殊符号是如何打出来的呢?

我给大家展示一些常用符号的标签

&lt;标签显示< 小于号或显示标记

&gt;标签显示>大于号或显示标记

&reg;标签显示®已注册

&copy;标签显示©版权

&trade;标签显示™商标

&nbsp;标签显示Space不断行的空白

如下图所示

我给大家做一份符号表格,便于查询

HTML特殊符号编码大全


今天就先到这里啦,我来做一个简单的。大家看看自己是否能写出,下一次更新,我会发出我写的代码

PS:没什么窍门,多学,多记,多看代码