Git Product home page Git Product logo

htmlparser's Introduction

Android和iOS支持的html标签

由于项目需求原因，公司需要Android和iOS都支持的html解析渲染。本人基于网上两位zzhoujay和Cocoanetics大神的轮子，自己经过测试和完善整出的一个仓库。

Android使用的是 github上 zzhoujay/RichText（2.6k stars） 链接地址：https://github.com/zzhoujay/RichText

iOS使用的是 github上 Cocoanetics/DTCoreText（5.6k stars） 链接地址：https://github.com/Cocoanetics/DTCoreText

支持的所有的CSS

style里面支持的属性参照

  • text-align(支持 left center right)
  • color （支持 #ff0000）
  • background（支持 #ff0000）
  • text-decoration（支持 line-through 删除线）
  • text-indent（缩进 例如：50px）
  • font-size（例如：20px）

支持的HTML标签

  • br标签
你好<br/>我是br标签
Android iOS
image image
  • p标签 支持style（支持CSS属性：color、font-size、text-align、background-color、text-decoration、text-indent）
<p style=\"color:#ff0000; font-size:20px; text-align:right; background-color:#00FF00; text-decoration:line-through\">这是一个段落。</p><p>这是另外一个段落。</p><p style=\"text-indent:50px\">这是另外一个段落。</p>
Android iOS
image image
  • ul标签 支持style(由于Android不支持 ol iOS支持 所以就没有写)
  • li标签 支持style（支持CSS属性：color、font-size、text-align、background-color、text-decoration）
<ul><li style=\"color:#ff0000; font-size:20px; text-align:right; background-color:#00FF00; text-decoration:line-through\">Coffee</li  style=\"text-indent:50px\"><li>Milk</li></ul> <ol><li>Coffee</li><li>Milk</li></ol>
Android iOS
image image
  • div标签 支持style（支持CSS属性：color、font-size、text-align、background-color）
<div style="color:#ff0000; font-size:20px; background-color:#00FF00"><h3>这是一个在div元素中的标题</h3><p>这是一个在div元素中的文本</p></div><div style="color:#00ff00; font-size:20px; text-align:right; background-color:#FF0000">这是一个在div元素</div>
Android iOS
image image
  • span标签 支持style(color、background、text-decoration、font-size)
<span style="color:#ff0000; font-size:20px; background-color:#00FF00; text-decoration:line-through">强调文本</span>非强调文本
Android iOS
image image
  • strong标签 支持style(color、background、text-decoration、font-size)
<strong style=\"color:#ff0000; font-size:20px; background-color:#00FF00; text-decoration:line-through\">加粗文本</strong>非加粗文本
Android iOS
image image
  • b标签 支持style(color、background、text-decoration、font-size)
<b style="color:#ff0000; font-size:20px; background-color:#00FF00; text-decoration:line-through">加粗文本b标签</b>非加粗文本
Android iOS
image image
  • i标签 支持style(color、background、text-decoration、font-size)
<p>He named his car <i>The lightning</i>, The lightning because it<i  style=\"color:#ff0000; font-size:20px; background-color:#00FF00; text-decoration:line-through\"> was very fast</i>.</p>
Android iOS
image image
  • small标签 支持style(color、background、text-decoration、font-size)
<small style="color:#ff0000; background-color:#00FF00; text-decoration:line-through">这个文本比较小</small>这个文本比较小
Android iOS
image image
  • font标签 支持(color、face)(HTML5 不支持 标签。请用 CSS 代替。在 HTML 4.01 中， 元素已废弃)
<font size=\"3\" color=\"#FF0000\">这是一些文本！</font> <font size=\"2\" color=\"#0000FF\">这是一些文本！</font> <font face=\"verdana\" color=\"#00FF00\">这是一些文本！</font>
Android iOS
image image
  • blockquote标签 支持style（text-align、text-indent）
<blockquote cite=\"http://www.worldwildlife.org/who/index.html\">For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote><br/>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Android iOS
image image
  • a标签 支持style(background、text-decoration、font-size)
<a style="color:#ff0000; background-color:#00FF00; font-size:20px; text-decoration:line-through" href="http://www.w3cschool.cn">这是一个链接</a>
Android iOS
image image
  • u标签
<p>This is a <u>parragraph</u>.</p>
Android iOS
image image
  • del标签
<p>My <del>favorite color is blue</del></p>
Android iOS
image image
  • s标签
<p><s>我的车是蓝色的。</s></p><p>我的新车是银色的。</p>
Android iOS
image image
  • strike标签(HTML strike 标签 - HTML5 不支持)
<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>
Android iOS
image image
  • sup标签
<p>This text contains <sup>superscript</sup> text.</p>
Android iOS
image image
  • sub标签
<p>This text contains <sub>subscript</sub> text.</p>
Android iOS
image image
  • h1-h6标签 支持style（text-align、text-indent）
<h1>这是一个h1标题</h1><h2>这是一个h2标题</h2><h3>这是一个h3标题</h3><h4>这是一个h4标题</h4><h5>这是一个h5标题</h5><h6>这是一个h6标题</h6>
Android iOS
image image
  • img标签 支持width height
<img src="https://desk-fd.zol-img.com.cn/t_s640x530c5/g5/M00/02/05/ChMkJlbKyaGIGGNjABT85XemdQ8AALIQQI-6pcAFPz9490.jpg" width="104" height="142">
Android iOS
image image
  • code标签
  • 整体的例子1
<span style="font-size:18px">微信支付凭证</span><br/>
<div style="text-align:center">
    <span style="font-size:14px; color:grey">付款金额</span><br/>
<strong><span style="text-align:center; font-size:22px; text-align:center;">¥16.94</span></strong></div><br/>
<span style="color:grey; font-size:14px">收款方　　</span> 
<span style="font-size:16px"></span>丁少波<br/>
<span style="color:grey; font-size:14px">交易状态　</span> 
<span style="font-size:16px"></span>支付成功，对方已首款<br/><br/>
查看账单详情<br/>
Android iOS
image image

htmlparser's People

Contributors

wisdozzh avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.