一文搞定 换行、(硬)回车、软回车的区别
Windows系统中打开txt文档时，最下面的“Windows(CRLF)”是什么提示呢？
和这个问题有关概念的一个应用场景是：当你需要在不同操作系统平台（例如Unix和Windows）之间切换时，尤其是由一平台生成的文档在另一平台查看时，就必须搞清楚 回车”（Carriage Return, CR）和“换行”（Line Feed, LF）这两个概念之间的区别。
Windows平台中输入“Enter”输入几个符号？他们具体是什么？
为回答这个问题，从下面的实验开始。
在Windows下创建一个txt文档，输入'123456'六个数字并“回车\enter”，
保存后，查看属性，占8个字节，即输入了八个字符，则刚才的“回车/enter”一定占了两个字节！
这两个字节是啥呢？
用UltraEdit软件打开该文件，查看这是个符号的十六进制，可得：第一个符号的ASCII码为31(十六进制)，对于的符号为为数字'1'；…；第七个符号的ASCII码为 0D(十六进制)，对应的符号为CR(回车)；最后一个字符即第八个符号的ASCII码为 0A(十六进制)，对应的符号为LF (换行)。
结论：Windows下处理回车的效果是：回车换行，即两个字符(\r\n ).
Windows平台下，C语言中输出‘\n’到txt文档时，输出的是一个字符还是两个呢？
答案是：两个字符\r\n.
在Windows系统下运行下面两个程序：
程序一：
#include <stdio.h>
void main( )
{
FILE *fp;
if((fp=fopen("test.txt","w"))==NULL) {
printf("Open the test.txt file error\n");
}
for(int i=0;i<10;i++){
fprintf(fp,"test\n");
}
fclose(fp);
}
程序二：
#include <stdio.h>
void main( )
{
FILE *fp;
if((fp=fopen("test.bin","wb"))==NULL) {
printf("Open the test.bin file error\n");
}
for(int i=0;i<10;i++){
fprintf(fp,"test\n");
}
fclose(fp);
}
程序一输出文件test.txt的大小是60字节，程序二输出文件大小是50字节，用记事本打开程序一的输出没有什么问题，每行一个test. 打开程序二的输出文件test.bin时发现所有的test连成一行，test之间是一个黑色方框符号分隔。用UltraEdit-32以16进制编辑模式打开test.bin可以查看到黑色方框符号就是0A也就是\n，打开test.txt则会发现换行是\r\n，这就是两个文件大小相差10字节的原因。Unix类系统用户打开windows中的文件就会遇到这种苦恼。
为什么会有这种区别呢？
由于Unix系统是基于C语言编写的，C语言中使用\n表示换行，而在实际的文件中换行符号需要同操作系统一致，所以当我们在C中使用fopen打开一个文本文件时流实现了实际换行符与C中\n之间的转换。在Windows中当用fopen打开文本文件，然后从中读到\r\n时流会转换为\n，而当我们往文件中写入\n时流会转换为\r\n。程序一是打开文本文件，程序二打开的是二进制文件，因为流只对文本文件进行换行表示的转换，以二进制模式打开流不会做任何处理。所以当你以二进制模式打开一个文本文件时将产生错乱，你必须亲自将\r\n解释为\n,同样的问题也会出现在以文本模式打开二进制文件的情况.这也解释了为什么Unix类系统中的文件不区分文本文件和二进制文件的原因。
软回车 硬回车的区别
硬回车:enter
作用：换行的同时分隔段落；
在word中敲击Enter键产生的那个弯曲的小箭头，占两个字节。如下图所示：
软回车: Shift + Enter
作用：换行，但是并不换段，即前后两段文字在 Word 中属于同一“段”。在应用格式时能看出明显区别，体会到这一点。
软回车只占一个字节，在word中是一个向下的箭头。符如下图所示：
当我们需要将从网页上找到资料复制粘贴到word文档中时，经常看到软回车符号，这是因为软回车在网页设计中具有举足轻重的地位的：
软回车能使前后两行的行间距大幅度缩小，因为它不是段落标记，要和法定的段落标记——硬回车区别出来。硬回车的html代码是<p>..</p>，段落的内容就夹在里面，而软回车的代码很精悍：<br>。因此在网页中想用到软回车，只需切换到代码页面，键入软回车的代码即可。
小结：
最后，本篇笔记开始的那个问题就很明确了：“Windows(CRLF)”是编辑器对Windows系统下，“回车”操作符等效为“\r\n”的一个提示。其实，在windows系统中的很多编辑环境中都有很多类似的提示，你能发现哪些呢？欢迎在评论区补充...
节、分区和分割线
这些标记用于将页面分成多个部分。熟练地掌握这些标记将意味着构建出具有良好的结构和布局的页面，使其更加友好和易于阅读。
分区 - <div> </div>
div标记定义了HTML文件中的一个部分或分区。它通常包含需要组合在一起的标题、段落、表格或其他元素。通过设置<div class="">与css一起使用来设置网页某个部分的显示。
段落 - <p> </p>
p标记用来定义文本的段落，就像你在书中看到的那样，一旦文本达到屏幕边缘就会自动折到下一行。当另一个<p>标记用于开始下一个段落时，浏览器将在段落之间添加一些空白。p标记具有以下属性：
- align="" - 段落中文本的对齐方式：left, center or right
- width="" - 段落将占据页面的固定宽度或百分比，默认为100%
内联 - <span> </span>
span标记用于将内联元素组合在一起，例如句子中的几个单词，以便仅对这些单词应用css样式。span标记可以在div和p标记中使用，因为它不会创建新的块。
换行 - <br>
br标记相当于一个回车符，用于在新行开始文本。一行中的多个<br>标记将在网页上创建一个很大的垂直空间。
水平分隔线 - <hr>
hr标记通常被称为HTML行分隔符标记，创建一条通常用于视觉上分隔页面的水平线。它具有以下属性：
- width="" - 线条将占用固定宽度，默认100%宽度
- color="" - 线条颜色
- noshade - 取消3D外观，创建一条平的实线分隔线
不换行 - <nobr> </nobr>
出于某种原因，你希望文本在一条直线上继续，而不是在屏幕的边缘换行，可以使用nobr。注意：这将迫使用户向右滚动以查看行的其余部分，这是一种糟糕的设计。
例子
下面是以上标记的示例：
浏览器显示内容如下所示：
本标签: 32
- <html></html>,创建一个HTML文档;
- <head></head>,设置文档标题和其它在网页中不显示的信息;
- <title></title>,设置文档的标题;
- <h1></h1>,最大的标题;
- <pre></pre>,预先格式化文本;
- <u></u>,下划线
- <b></b>,黑体字;
- <i></i>,斜体字;
- <tt></tt>,打字机风格的字体;
- <cite></cite>,引用,通常是斜体;
- <em></em>,强调文本(通常是斜体加黑体);
- <strong></strong>,加重文本(通常是斜体加黑体);
- <font,size="",color=""></font>,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
- <BASEFONT></BASEFONT>,基准字体标记;
- <big></big>,字体加大;
- <SMALL></SMALL>,字体缩小;
- <STRIKE></STRIKE>,加删除线;
- <CODE></CODE>,程式码;
- <KBD></KBD>,键盘字;
- <SAMP></SAMP>,范例;
- <VAR></VAR>,变量;
- <BLOCKQUOTE></BLOCKQUOTE>,向右缩排;
- <DFN></DFN>,述语定义;
- <ADDRESS></ADDRESS>,地址标记;
- <sup></SUP>,上标字;
- <SUB></SUB>,下标字;
- <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
- <plaintext>...</plaintext>固定宽度字体(不执行标记符号);
- <listing>...</listing>,固定宽度小字体;
- <font,color=00ff00>...</font>字体颜色;
- <font,size=1>...</font>最小字体;
- <font,style,='font-size:100,px'>...</font>无限增大.
格式标签: 16
- <p></p>,创建一个段落;
- <p,align="">,将段落按左、中、右对齐;
- <br>,换行,插入一个回车换行符;
- <blockquote></blockquote>,从两边缩进文本;
- <dl></dl>,列表标签,定义列表;
- <dt>,定义列表标题;
- <dd>,定义列表内容;
例:
<dl>
<dt>标题1</dt>
<dd>内容11</dd>
<dd>内容12</dd>
<dt>标题2</dt>
<dd>内容21</dd>
<dd>内容22</dd>
</dl>
- <ol></ol>,列表标签,定义一个标有数字的列表;
- <ul></ul>,列表标签,定义一个标有圆点的列表;
- <li>,放在每个列表项之前; 放在<ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;
- <div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;
- <MENU>,选项清单;
- <DIR>,目录清单;
- <nobr></nobr>,强行不换行;
- <hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);
- <center></center>,水平居中.
链接标签: 7
- <a,href="URL"></a>,创建超文本链接;
- <a,href="mailtEMAIL">
- </a>,创建自动发送电子邮件的链接;
- <a,name="name"></a>,创建位于文档内部的书签;
- <a,href="#name"></a>,创建指向位于文档内部书签的链接;
- <BASE>,文档中不能被该站点辨识的其它所有链接源的URL;
- <LINK>,定义一个链接和源之间的相互关系;
链接标签注解:
target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);
rel="...",发送链接的类型;
rev="...",保存链接的类型;
accesskey="...",指定该元素的热键;
shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);
coord="...",使用像素或者长度百分比来定义形状的尺寸;
tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).
表格标签: 21
- <table></table>,创建一个表格;
- <tr></tr>,表格中的每一行;
- <td></td>,表格中一行中的每一个格子;
- <th></th>,设置表格头:通常是黑体居中文字;
- <table,cellspacing="">,设置表格格子之间空间的大小;
- <table,border="">,设置边框的宽度;
- <table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;
- <table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;
- <table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
- <tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
- <tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);
- <td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);
- <td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);
- <td,nowrap>,禁止表格格子内的内容自动断行;
- <CAPTION></CAPTION>,表格的标题;
- <COLGROUP></COLGROUP>,定义多个列为一组列;
- <TABLE></TABLE>,创建一个表格;
- <THEAD></THEAD>,定义表格的页眉;
- <COL>,定义一个列组中的列，以便对它们能够同时设置有关属性;
- <TBODY></TBODY>,定义一个表格的实体;
- <TFOOT></TFOOT>,定义一个表格的页脚;
表单标签: 18
- <form></form>,创建表单;
action="...",接收数据的服务器的URL;
method="...",HTTP的方法(get,,post),其中get是被反对使用的;
enctype="...",指定MIME(Internet媒体类型);
onsubmit="...",当提交表单时发生的内部事件;
noreset="...",在重新设置表单时发生的内部事件;
target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)
- <select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;
- <option>,设置每个表单项的内容;
- <select,name="name"></select>,创建下拉菜单;
- <textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;
- <input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;
- <input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;
- <input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;
- <input,type="submit",value="name">,创建提交(submit)按钮;
- <input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;
- <input,type="reset">,创建重置(reset)按钮;
- <BUTTON></BUTTON>,创建一个按钮;
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);
- <FIELDSET></FIELDSET>,把相互关联的控件组合成一组;
- <ISINDEX>,提示用户输入;
- <LABEL></LABEL>,为一个控件提供标签;
- <LEGEND></LEGEND>,为FIELDSET元素指定一标题;
- <SELECT></SELECT>,为用户做选择创建各个选项;
- <TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.
表单标签注解:
type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一个单选钮设置为选中的状态;
disabled="...",把控件的状态设置为不能使用;
readonly="...",只对输入密码的文本框使用;
size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;
src="...",一个图像控件的URL;
maxlength="...",指定可以输入的最多的字符数目;
alt="...",另外一种文本描述;
usemap="...",到客户端图形镜像的URL;
align="...",被反对.控制对齐方式(left,,center,,right,,justify);
tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;
onfocus="...",当元素获得焦点时发生的事件;
onblur="...",当元素失去焦点时发生的事件;
onselect="...",当元素被选中时发生的事件;
onchang="...",当元素状态被改变时发生的事件;
accept="...",允许上载的文件类型.
帧标签(框架标签): 27
- <frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;
- <frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;
- <frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;
- <frame>,定义一个帧内的单一窗或窗区域;
- <noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;
- <frame,src="URL">,规定帧内显示的HTML文档;
- <frame,name="name">,命名帧或区域以便别的帧可以指向它;
- <frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;
- <frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;
- <frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";
- <frame,noresize>,禁止用户调整一个帧的大小;
- <IFRAME></IFRAME>,创建一个内联的帧;
scr="...",定义在帧中显示的内容的来源;
frameborder="...",定义帧之间的边界(0或1);
align="...",被反对,控制对齐方式(left,,center,,right,,justify);
height="...",帧的高度,width="..."帧的宽度;
- <marquee>...</marquee>,普通卷动;
- <marquee,behavior=slide>...</marquee>,滑动;
- <marquee,behavior=scroll>...</marquee>,预设卷动;
- <marquee,behavior=alternate>...</marquee>,来回卷动;
- <marquee,direction=down>...</marquee>,向下卷动;
- <marquee,direction=up>...</marquee>,向上卷动;
- <marquee,direction=right></marquee>,向右卷动;
- <marquee,direction='left'></marquee>,向左卷动;
- <marquee,loop=2>...</marquee>,卷动次数;
- <marquee,width=180>...</marquee>,设定宽度;
- <marquee,height=30>...</marquee>,设定高度;
- <marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;
- <marquee,scrollamount=30>...</marquee>,设定卷动距离;
- <marquee,scrolldelay=300>...</marquee>,设定卷动时间;
- <img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".
文档整体属性标签: 10
- <body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;
- <body,background="">,设置背景图片;
- <body,bgsound="">,设置背景音乐;
- <body,bgproperties="fixed">,固定背景图片(IE适用);
- <body,text="">,设置文本颜色.使用名字或RGB的十六进制值;
- <body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;
- <body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;
- <body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;
- <body,topmargin="">,设置页面的上边距;
- <body,leftmargin="">,设置页面的左边距.
