菜单

[HTML/HTML5]4 使用文本

2019年8月10日 - JavaScript

利用HTML5中的contentEditable来将多行文本自动增高,

contentEditable是由微软支付、被其余浏览器反编写翻译并投入应用的贰个大局属性。该属性的主要功效是允许用户编辑成分中的内容,所以该因素必须是能够赢得鼠标主题的要素,何况在点击鼠标后要向用户提供贰个布置符号,提醒用户该因素中的内容允许编辑。content艾德itable属性是二个布尔值属性,能够被钦赐为true或false。

而外,该属性还应该有个藏匿的inherit(承接)状态,属性为true时,成分被钦定为允许编辑;属性为false时,成分被钦命为不容许编辑;未钦点true或false时,则由inherit状态来调整,如若成分的父成分是可编写制定的,则该因素正是可编写制定的。

其他,除了content艾德itable属性外,成分还富有七个isContentEditable属性,当成分可编写制定时,该属性为true;当成分不可编辑时,该属性为false。
上边给出了贰个用到contentEditable属性的事必躬亲,当列表成分被抬高content艾德itable属性后,该因素就改成可编写制定的了,读者可自行在浏览器中对该示例举行调查。

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>    
  2. <head>    
  3. <meta charset=”UTF-8″> 
      
  4. <title>conent艾德italbe属性示例</title>    
  5. </head>    
  6. <h2>可编写制定列表</h2>    
  7. <ul contentEditable=”true”> 
      
  8. <li>列表成分1</li>    
  9. <li>列表元素2</li>    
  10. <li>列表元素3</li>    
  11. </ul>   

这段代码运转后的结果如图:
图片 1

编写本机关增高

提及多行文本框,大家立马就能想到利用textarea,使用textarea着实方便,但就是有一点点不太好,不可能自动增高,只好钦定相应的列和行的字数或许直接css给高宽。

机关增高在少数时候依然供给的,比如类似发天涯论坛的输入框,它便是三个典型,供给如此的供给:文本框有个暗许高度,输入文字越过那么些惊人后会自动增高,还要有叁个最高的尽头,超越那个界限现在就能产出垂直滚动条。

假诺应用textarea来产生这一个供给,还亟需万分js来监听文本中度的浮动来动态改造文本框的冲天,那样就很不便利了,越发是在活动端的时候就不科学了,这年就足以用上属性contenteditable了。

如:

XML/HTML Code复制内容到剪贴板

  1. <div contenteditable=”true” class=”box” id=”box” >  
  2.                
  3. </div>  
  4. <style>  
  5. .box{width:200px;max-height:100px;border:1px solid #ccc;overflow-y:auto;overflow-x:hidden;}
      
  6. </style>  

只要钦点contenteditable属性值为true,div就产生能够编写制定的了,并且会趁着剧情扩展自动增高,然后大家给div四个最大惊人,就足以兑现地点所说的需求。

http://www.bkjia.com/HTML5/1107136.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1107136.htmlTechArticle使用HTML5中的contentEditable来将多行文本自动增高,
contentEditable是由微软开拓、被其余浏览器反编写翻译并投入运用的一个大局属性。该属性的主…

4.1  协会文本

  在早已采取结构化格局将页面划分为几个重大内容区域(content
area)并丰硕相应的标题之后,就能够进一步对那些剧情区域中的文本实行集体。

4.1.1  段落

  p元素的求实职能是作为段落的三个器皿。由此,请在段落的初始处接纳P成分的开始标识<p>,在段落的最后使用完成标志</p>。

1 <div class="nurseryRhyme">
2 <p>Jack and Jill went up a hill</p>
3 <p>To fetch a pail of water</p>
4 <p>Jack fell down and broke hie croen</p>
5 <p>and Jill came tumbling after</p>
6 </div>

  在私下认可景况下p标识会在段落前或段落后各强制发生贰个空行,但它并不会自动地对文件进行缩进。

  在HTML中尚无特意表示缩进的号子,要缩进三个段落的率先行,能够在体制表中使用text-indent属性。

1 <p style="text-indent:25px">This is the first sentence in my paragraph</p>

  上面那些例子是内联样式表,它仅能影响那一个段落,能够把同样的注明增添到三个之中样式表中或叁个表面体制表中,进而影响贰个页面或任何网址中的全部段落。譬喻在样式表中增多如下宣示:

1 normalChapter p{text-indent:25px;}  /* 通过在normalChapter选择器之后放入p标记,告诉浏览器仅对页面上normalChapter部分中的那些段落才进行缩进 */

  相关的HTML代码如下:

1 <section class="normalChapter">
2 <p>This paragraph's first line will be indented</p>
3 </section>

4.1.2  换行符

  在HTML页面中,可以动用br标识来增加换行符。br标志会招致浏览器在该行上停下输出文本,并换成页面上的下一行继续输出。

1 <p>
2 Jack and Jill went up a hill<br>
3 To fetch a pail of water<br>
4 Jack fell down and broke hie croen<br>
5 and Jill came tumbling after<br>
6 </p>

  在页面代码中,按Enter或Return键就可以在浏览器显示的页面中生出换行符,唯有唯一一种意况,正是利用了pre标记。

  pre是preformat(预格式化)的简写,pre标识将完全依据输入的文本格式在浏览器上校其表现出来。

  为啥不利用pre标志来定义页面上的漫天吗?首要有以下多个原因:

  即使如此,对于突显代码示例,以至创立字符情势的Logo,pre标识依然极度管用:

 1 <pre>
 2 This text will display exactly as i type it.Watch this
 3 
 4           x   |   x   |   o
 5         --------------------
 6           x   |   x   |
 7         --------------------
 8           o   |        |  x 
 9 
10 </pre>

4.1.3  引用块

  blockquote成分用于分隔从其余源援用的内容。暗中认可意况下,该因素将同失常间对总体援用文本的左右两侧都举行缩进,别的还大概会在援用文本从前和事后分头增添二个空行。缩进的可相信数据将由浏览器来调整,由此对此不相同的浏览器,援用文本左右两侧的缩进会有所差别。  

1 <p>Hello,World!
2 <blockquote>
3 Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
4 </blockquote>
5 </p>

4.1.4  Box属性

  Web页面中的每叁个因素都带有在多个盒(box)模型之中,恐怕至少从代码角度将其视为一种盒模型。因而,通过调解框的维度就足以格式化页面上的内容,或许钦点该内容与浏览器的间距应该是不怎么。

  以往HTML5/CSS3同意大家决定浏览器怎样分解盒模型,即首先使用box-sizing属性准确地钦命相应利用哪类解释盒模型的方法。

图片 2

  (1)中度和宽窄(height and width)

  在钦赐使用哪类box-sizing属性后,恐怕还想确定该盒模型的万丈和增长幅度,最常用的心胸单位是px(像素),另一种就是%(占容器框模型的比例)。若是想钦命nav框应该攻下页面包车型地铁成套宽度,但只占页面中度的十分之二,应该选择上面代码:

1 nav{
2   box-sizing:border-box;
3   width:100%;
4   height:20%;                        
5 }

  (2)内边距(padding)

  在体制表中,能够使用padding属性在内容附近设置三个空荡荡的缓冲区域(可以分别设置一边、两侧、三边也许四边),在上边包车型地铁例证中对blockquote标志设置样式:

1 p{
2   box-sizing:border-box;
3   padding-top:25px;
4   padding-right:15px;
5   padding-bottom:20px;
6   padding-left:35px;        
7 }

  假若四条边上都采纳同样的内边距值,能够接纳火速形式简化代码:

1 p{padding:25px;}

  假诺各条边的内边距值分歧,一种越来越高效的编码格局为:

1 p{padding:25px 15px 20px 35px;}  /* 从上开始,顺时针 */

  (3)外边距(margin)

  margin属性影响框边界外界的缓冲空间,由此不会从内容框的总尺寸长减去外边距值。与padding属性同样,能够独家定义盒模型一边、两侧、三边大概四边的异地距值:

1 p{
2   box-sizing:border-box;
3   margin-top:25px;
4   margin-right:15px;    
5   margin-bottom:25px;
6   margin-left:15px;          
7 }

  假若四条边上都使用同样的外省距值,能够选拔火速格局简化代码:

1 p{margin:25px;}

  假如各条边的异乡距值分化样,一种特别飞速的编码形式为:

1 p{margin:25px 15px 20px 35px;}  /* 从上开始,顺时针 */

  (4)边框(border)

  盒模型不仅可以够包含水平边框(border),也能够满含垂直边框。能够使用边框来包围全体类别的页面成分——比方:图片或文本段落。例如:

1 <p style="border-bottom-width:1px; border-style:solid; border-color:black">

  定义边框宽度(能够行使长度单位和首要性字thin、medium或thick):

1 p{
2   border-top-width:thin;
3   border-right-width:6px;
4   border-bottom-width:thick;
5   border-left-width:4px;        
6 }

  如果四条边框宽度相等,能够应用火速格局简化代码:

1 p{border-widtn:medium;}

  定义边框样式:

1 p{border-style:solid;}

  定义边框颜色:

1 p{border-color:red;}

  边框样式的连忙方式:

1 <p style="border:1px solid red;">

4.1.5  对齐

  样式表属性text-align允许利用下列任性方式,在页面上海重机厂新对齐文本:

  例如:

1 #aboutMe{text-align:justfy;}

  相应的HTML代码:

1 <section id="aboutMe">
2     <p>Paragraph 1</p>
3     <p>Paragraph 2</p>
4     <p>Paragraph 3</p>
5 </section>

  在样式表中还能使用vertical-align属性在笔直方向上对齐文本。

4.2  标识文本

  文本级语义定义在页面上哪些选取受语义影响的文本,并非概念怎么着显示这么些文件。

  举个例子,假若您正在编写制定本段落中率先个句子的HTML代码,就应该利用dfn成分来报告浏览器应该将短语“text-level
semantics”作为一个已定义的术语优异体现。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>test</title>
 5 </head>
 6 <body>
 7     <p>
 8         <dfn>Text-level semantics</dfn>define how the affected text will be used on the page,not how it will be displayed.
 9     </p>
10 </body>
11 </html>

   这里根本介绍一下<strong>、<b>、<em>和<i>。

  就算<strong>和<b>的功力都以对文本举办加粗,<em>和<i>的效果都以对文本举办倾斜,但是两岸仍旧有所差距。

  <b>和<i>属于实体标识(物理标识),只是改动文本的体制,<b>中的b是bold粗体的缩写,<i>中的i是italic斜体的缩写。

  <strong>和<em>属于逻辑标志,是含有语义的符号,表示对展现的内容开始展览重申效果,<strong>比<em>的着重提出语气更强。

  W3C标准更赞成于接纳带有语义的号子,所以一般<strong>替代<b>来行使,<em>代替<i>来行使。

4.3  定义文本样式

4.3.1  字体名称

  在体制表中,使用font-family属性来钦定字体的名称。实际上,能够使用font-family属性来钦定你所能想到的别的字体名称,可是当用户访问你的Web网页时,除非用户的Computer已经装载了您所钦赐的字体,不然用户将不能够看出依照你设置的书体举办展示的Web页面。

  所以可在font-family属性中钦命多少个备用字体。若果浏览器不可能在拜望Computer的书体列表中找到第一种字体名称,它将追寻第二种、第三种、第三种字体名称,直到找到匹配的字体名称。

1 <p style="font-family:'gill sans','verdana','arial';"></p>

4.3.2  字体大小

  大家仍是能够运用样式表中的font-size属性来改造字体的大小。font-size的属性值能够动用关键字、相对大小以及衡量值来代表。

4.3.3  字体颜色

  样式表中的color属性能够用来设置Web页面中的任何因素的前景观,也满含文件的前景象。相应的,也能够行使background-color属性来设置Web页面中别的因素的背景观。

1 <p style="color: red; background-color: blue; ">Hello,world!</p>

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图