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>
特殊字符
注釋<!-- -->
一、換行符
<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),我試了幾種方式,
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>
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。