整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          零基礎(chǔ)學習HTML換行符段落標題水平線文本格式化字體鏈接錨點

          yperText Markup Language 簡稱為HTML

          HyperText: 超文本 (文本 + 圖片 + 視頻 + 音頻 + 鏈接)

          Markup Language: 標記語言

          由SGML(標準通用標記語言)發(fā)展而來,寫給瀏覽器的語言

          超文本標記語言(第一版)1993年6月(IETF制定)

          HTML 2.0——1995年11 月;HTML 3.0——1996年1 月;HTML 4.0——1997年

          W3C: World Wide Web Consortium (W3C理事會或萬維網(wǎng)聯(lián)盟)

          1.HTML元素由開始標簽和結(jié)束標簽組成。

          2.位于開始標簽和結(jié)束標簽中的文本是元素的內(nèi)容。

          3.HTML 標簽有開始必須有結(jié)束。如果是沒有內(nèi)容的標簽(空標簽),用 />來結(jié)束。

          4.標簽名不區(qū)分大小寫,但是在XHTML中標簽名必須用小寫。

          5.標簽具有屬性, 屬性用來表示標簽的性質(zhì)和特征。屬性要在開始標簽中指定。

          HTML 基本元素

          換行符 <br />

          段落 <p></p>

          標題 <h1></h1>

          水平線<hr />

          文本格式化<b>

          預格式文本<pre>

          字體<font>

          鏈接<a>

          圖像<img>

          特殊字符&nbsp;

          注釋<!-- -->

          一、換行符

          <br />

          二、段落

          <p>這是一個段落</p>

          屬性說明

          align行對齊方式(left, right, center)

          三、標題

          <h1>標題1</h1>

          <h2>標題2</h2>

          <h3>標題3</h3>

          <h4>標題4</h4>

          <h5>標題5</h5>

          <h6>標題6</h6>

          四、水平線

          <hr />

          <hr size="5" width="50%" align="center" />

          屬性說明

          size指定線的粗細(px)

          width指定線的長度(px或%)

          align行對齊方式(left, right, center)

          五、文本格式化

          <b>定義粗體文本</b>

          <i> 定義斜體文本 </i>

          <s>定義刪除文本</s> <del></del>

          <u>定義下劃線文本</u>

          <sup>定義上標字</sup>

          <sub>定義下標字</sub>

          六、<pre> 預格式文本

          <pre>標簽可以保留文字在源代碼中的格式,使得頁面中顯示的內(nèi)容和源代碼中的格式一致。如:

          <pre>

          <script>alert("這會顯示一個彈出窗口");</script>

          </pre>

          七、字體

          <font>這是一段文字</font>

          屬性說明

          size定義字體大小

          face定義字體

          color定義字體顏色

          (1)16進制的模式 #DCC123

          (2)單詞模式 red ,blue ,green ,black

          (3)RGB rgb(20,100,35) 0-255

          八、鏈接

          <a href="URL"> ~ </a>

          屬性說明

          href定義鏈接地址

          title鏈接提示信息

          target鏈接打開方式(_blank 新的空白頁,_self 當前頁,_top)

          九、郵件鏈接

          <a href="mailto:郵箱地址"> ~ </a>

          十、錨點

          錨點標簽用于使用戶"跳"到文檔的某個部分。

          <a href="#位置名"> ~ </a>

          <a name="位置名"> ~ </a>

          怎樣指定鏈接的地址

          1.外部鏈接

          <a > HTML模板網(wǎng)</a>

          2.內(nèi)部鏈接

          <a href="about.html"> 公司簡介 </a>

          、問題:textarea默認文案,想使用換行展示?

          但是使用/r/n</br>之類的都無效

          端--輸入框換行,高度自適應(yīng)

          最近項目遇到一個說小不小說大不大的問題,輸入框要自動換行,并且高度還得自適應(yīng),我試了幾種方式,

          1.input 輸入,input不能換行,上網(wǎng)查詢了說將css設(shè)為word-break: break-all; word-wrap:break-word;也是無效的。

          2.div 設(shè)置contenteditable="true"屬性,這種方法可以實現(xiàn)輸入內(nèi)容自動換行,并且自適應(yīng)高度,但是項目需要光標從邊輸入,我試過text-align:right是無效的。所以這種方式也不行。

          3.textarea,文本輸入框,想想這個應(yīng)該可以了吧,文本輸入框是可以內(nèi)容自動換行,可是高度怎么都是固定的啊。我還是沒解決。百度吧,終于找到解決辦法啦。

          最后遇到一個光標在placeholder提示文字上面,解決辦法:#textarea::-webkit-input-placeholder{ padding-right: 4px;}

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          <style>

          #textarea {

          display: block;

          margin:0 auto;

          overflow: hidden;

          width: 550px;

          font-size: 14px;

          height: 18px;

          line-height: 24px;

          padding:2px;

          text-align: right;

          }

          textarea {

          outline: 0 none;

          border-color: rgba(82, 168, 236, 0.8);

          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

          }

          </style>

          </head>

          <body>

          <textarea id="textarea" placeholder="回復內(nèi)容"></textarea>

          <script>

          var autoTextarea = function (elem, extra, maxHeight) {

          extra = extra || 0;

          var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,

          isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),

          addEvent = function (type, callback) {

          elem.addEventListener ?

          elem.addEventListener(type, callback, false) :

          elem.attachEvent('on' + type, callback);

          },

          getStyle = elem.currentStyle ? function (name) {

          var val = elem.currentStyle[name];

          if (name === 'height' && val.search(/px/i) !== 1) {

          var rect = elem.getBoundingClientRect();

          return rect.bottom - rect.top -

          parseFloat(getStyle('paddingTop')) -

          parseFloat(getStyle('paddingBottom')) + 'px';

          };

          return val;

          } : function (name) {

          return getComputedStyle(elem, null)[name];

          },

          minHeight = parseFloat(getStyle('height'));

          elem.style.resize = 'none';

          var change = function () {

          var scrollTop, height,

          padding = 0,

          style = elem.style;

          if (elem._length === elem.value.length) return;

          elem._length = elem.value.length;

          if (!isFirefox && !isOpera) {

          padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

          };

          scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

          elem.style.height = minHeight + 'px';

          if (elem.scrollHeight > minHeight) {

          if (maxHeight && elem.scrollHeight > maxHeight) {

          height = maxHeight - padding;

          style.overflowY = 'auto';

          } else {

          height = elem.scrollHeight - padding;

          style.overflowY = 'hidden';

          };

          style.height = height + extra + 'px';

          scrollTop += parseInt(style.height) - elem.currHeight;

          document.body.scrollTop = scrollTop;

          document.documentElement.scrollTop = scrollTop;

          elem.currHeight = parseInt(style.height);

          };

          };

          addEvent('propertychange', change);

          addEvent('input', change);

          addEvent('focus', change);

          change();

          };

          </script>

          <script>

          var text = document.getElementById("textarea");

          autoTextarea(text);// 調(diào)用

          </script>

          </body>

          </html>


          主站蜘蛛池模板: 久久精品无码一区二区日韩AV| 精品国产福利在线观看一区| 日本无码一区二区三区白峰美| 亚洲片一区二区三区| 欧美日本精品一区二区三区| 国产成人精品无码一区二区| 国产一区在线观看免费| 国产成人久久精品区一区二区| 精品成人一区二区三区四区| 老湿机一区午夜精品免费福利| 天天综合色一区二区三区| 69久久精品无码一区二区| 无码国产伦一区二区三区视频| 国产成人精品一区二三区在线观看| 国产精品成人一区无码| 白丝爆浆18禁一区二区三区| 国产色欲AV一区二区三区| 北岛玲在线一区二区| 精品一区二区三区在线观看l | 制服美女视频一区| 国内精品视频一区二区三区八戒| 亚洲AV噜噜一区二区三区| 日本福利一区二区| 亚洲av无码天堂一区二区三区 | 综合久久久久久中文字幕亚洲国产国产综合一区首 | 国产精品一区二区三区久久 | 视频在线观看一区二区| 日韩有码一区二区| 精品无码人妻一区二区三区不卡| 亚洲国产精品成人一区| 红桃AV一区二区三区在线无码AV | 国产一区二区三区久久| 无码乱人伦一区二区亚洲一| 亚洲一区二区久久| 天海翼一区二区三区高清视频| 色屁屁一区二区三区视频国产| 色一乱一伦一区一直爽| 亚洲AV无码一区二区乱子伦| 久久人做人爽一区二区三区| 无码日韩人妻av一区免费| 福利一区二区三区视频午夜观看|