Java學(xué)習(xí)：來認(rèn)識一下HTML中的標(biāo)簽~

么現(xiàn)在咱們

就進(jìn)入JavaE部分了~

HTML、CSS和JS又被稱為“前端三劍客”~雖然Java主要是做后臺服務(wù)端開發(fā)的，但是畢竟是要和前端合作,的多少要了解一下~~總之技多不壓身~多學(xué)一點(diǎn)東西總歸是好的~嗯~咱們開始今天的內(nèi)容吧~

HTML

什么是HTML？

HTML 全稱是 Hyper Text Markup Language:超文本標(biāo)記語言。超文本意味著功能比普通文本更加強(qiáng)大。標(biāo)記語言則是：使用一組標(biāo)簽對內(nèi)容進(jìn)行描述的一門語言(注意：它不是編程語言)

HTML的語法和規(guī)范

1）HTML文件都是以.html或者.htm結(jié)尾的。建議使用.html結(jié)尾。

2）HTML文件分為頭部分(<head></head>)和體部分(<body></body>)

3）HTML標(biāo)簽一般是由開始標(biāo)簽和結(jié)束標(biāo)簽組成。

（大部分是成對存在的，有個別標(biāo)簽是單著的~）

4）HTML標(biāo)簽不區(qū)分大小寫，建議使用小寫。

HTML相關(guān)標(biāo)簽學(xué)習(xí)

接下來就是重頭戲了，來一起看看HTML標(biāo)簽都有什么~

標(biāo)題標(biāo)簽<hn > </hn>

n的取值從1到6逐漸變小，獨(dú)占一行加粗加黑顯示，與其他行有一定的行間距

水平線標(biāo)簽 <hr />

里面有一些屬性象顏色（color）、大小（size）等等就不詳細(xì)介紹了，伙伴們自己去摸索一下哈~

段落標(biāo)簽<p></p>

字體標(biāo)簽<font></font>

換行標(biāo)簽<br/>

其中有些屬性：

size:指定內(nèi)容的大小

color：指定內(nèi)容的顏色

face：指定內(nèi)容的字體

加粗：<b></b>

斜體：<i></i>

下劃線：<u></u>

圖片標(biāo)簽

<img />

src:指的是圖片顯示的路徑(位置)

width:指定圖片的寬度，取值可以是像素值，也可以是百分比

height：指定圖片的高度，取值可以是像素值，也可以是百分比

alt：當(dāng)圖片無法正常顯示的時候給出的提示信息(該屬性的顯示效果與瀏覽器以及瀏覽器版本有關(guān))

路徑分為兩種：

絕對路徑：

從盤符開始的到圖片位置的完整描述：

類似~C:\Program Files\Img.jpg

相對路徑：

①同一級：直接寫文件名稱或者./文件名稱

②上一級：../文件名稱

③下一級：寫上目錄名稱/文件名稱

列表標(biāo)簽

有序列表：

type：可以選擇數(shù)字、字母及阿拉伯?dāng)?shù)字作為前面的序號，

start： 從哪里開始計數(shù)

reversed： 表示顛倒順序

無序列表：

type：可以選擇前面的樣式實心圓、空心圓和方塊

超鏈接標(biāo)簽

href:指定跳轉(zhuǎn)的位置

target：指定跳轉(zhuǎn)頁面顯示的位置(取值：_self 、_blank)

表格標(biāo)簽

border：邊框的寬度

width：表格的寬

height：表格的高

align：元素的位置居中、上、下、左、右

bgcolor：背景色

cellpadding：邊框與邊框間的距離

cellspacing：表格內(nèi)容到邊框的距離

跨行跨列操作

跨行：rowspan

跨列：colspan

今天先說這么多了

剩下的小伙伴們自己摸索吧~

拜拜~

我是萌新娜娜

立志做一個不翻車的老司機(jī)

學(xué)習(xí)Java的路上請多多指教

大家如果想要更深入了解java相關(guān)知識，私信我回復(fù)：【Java】即可知道你們想要知道的java相關(guān)問題

我們在瀏覽網(wǎng)頁的時候，看到喜歡的網(wǎng)頁，總想研究下它的代碼是怎樣寫的，值得借鑒參考來修改自己的網(wǎng)站源碼。你知道如何查看網(wǎng)頁源代碼嗎？

網(wǎng)頁源代碼是什么？

網(wǎng)站源碼，也稱源代碼，源程序，是指未編譯的文本代碼或一個網(wǎng)站的全部源碼文件，是一系列人類可讀的計算機(jī)語言指令。通過瀏覽器或服務(wù)器翻譯后才是用戶最終看到的效果。

網(wǎng)站源碼可分為兩種，一種是動態(tài)源碼，如ASP，PHP，JSP，.NET等，另一種是靜態(tài)源碼如HTML等。網(wǎng)頁源代碼是指網(wǎng)頁的html代碼，這里可以將CSS代碼也稱為CSS源代碼。

如何查看網(wǎng)站源代碼？

今天飛飛主要和你們分享三種方法查看網(wǎng)頁源代碼，希望可以幫助到你們！

1、鼠標(biāo)查看源代碼

任意打開一個網(wǎng)頁，鼠標(biāo)右擊會看到“查看網(wǎng)頁源代碼”，這個網(wǎng)頁的源代碼就出現(xiàn)在你眼前了。

網(wǎng)頁源代碼查看竟然有這么多方法！你都知道嗎？

2、快捷鍵Ctrl+U查看源碼

為了方便快捷，小伙伴們可以使用快捷鍵Ctrl+U來查看源碼，同樣可以實現(xiàn)。

補(bǔ)充：

想要看一個頁面的局部樣式，可以鼠標(biāo)右鍵，點(diǎn)擊審查元素。還可以用快捷鍵F12或者快捷鍵Ctrl+Shift+I調(diào)用或者關(guān)閉開發(fā)者工具，以此來查看源代碼。

3、網(wǎng)頁地址欄前面加上入view-source:

也可以在你想要查看的網(wǎng)頁地址欄前面加上入view-source:

比如：view-source:https://www.idc02.com/就可以查看馳網(wǎng)官網(wǎng)源代碼文件。

感謝您的閱讀，加個關(guān)注不迷路~

、垂直對齊

如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現(xiàn)在，利用CSS3的Transform，可以很優(yōu)雅的解決這個困惑：

.verticalcenter{
 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
}

2、伸展一個元素到窗口高度

在具體場景中，你可能想要將一個元素伸展到窗口高度，基本元素的調(diào)整只能調(diào)整容器的大小,因此要使一個元素伸展到窗口高度，我們需要伸展頂層元素：html和body:

html,
body {
 height: 100%;
}

然后將100%應(yīng)用到任何元素的高：

div { height: 100%;}

3、基于文件格式使用不同的樣式

為了更容易知道鏈接的目標(biāo)，有時你想讓一些鏈接看起來和其它的不同。下面的片段在文本鏈接前添加一個圖標(biāo)，對不同的資源使用不同的圖標(biāo)或圖片：

a[href^="http://"]{
 padding-right: 20px;
 background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
 padding-right: 20px;
 background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
 padding-right: 20px;
 background: url(pdf.png) no-repeat center right;
}

4、創(chuàng)建跨瀏覽器的圖像灰度

灰度有時看起來簡約和優(yōu)雅，能為網(wǎng)站呈現(xiàn)更深層次的色調(diào)。在示例中，我們將對一個SVG圖像添加灰度過濾：

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
 <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter></svg>

為了跨瀏覽器，會用到filter屬性：

img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */}

5、背景漸變動畫

CSS中最具誘惑的一個功能是能添加動畫效果，除了漸變，你可以給背景色、透明度、元素大小添加動畫。目前，你不能為漸變添加動畫，但下面的代碼可能有幫助。它通過改變背景位置，讓它看起來有動畫效果。

button {
 background-image: linear-gradient(#5187c4, #1c2f45);
 background-size: auto 200%;
 background-position: 0 100%;
 transition: background-position 0.5s;
} 
button:hover {
 background-position: 0 0;
}

6、CSS：表格列寬自適用

對于表格，當(dāng)談到調(diào)整列寬時，是比較痛苦的。然后，這里有一個可以使用的技巧：給td元素添加 white-space: nowrap;能讓文本正確的換行

td { white-space: nowrap;}

213126486編號：悟空

7、只在一邊或兩邊顯示盒子陰影

如果你要一個盒陰影，試試這個技巧，能為任一邊添加陰影。為了實現(xiàn)這個，首先定義一個有具體寬高的盒子，然后正確定位:after偽類。實現(xiàn)底邊陰影的代碼如下：

.box-shadow {
 background-color: #FF8020;
 width: 160px;
 height: 90px;
 margin-top: -45px;
 margin-left: -80px;
 position: absolute;
 top: 50%;
 left: 50%;
}
.box-shadow:after {
 content: "";
 width: 150px;
 height: 1px;
 margin-top: 88px;
 margin-left: -75px;
 display: block;
 position: absolute;
 left: 50%;
 z-index: -1;
 -webkit-box-shadow: 0px 0px 8px 2px #000000;
 -moz-box-shadow: 0px 0px 8px 2px #000000;
 box-shadow: 0px 0px 8px 2px #000000;
}

8、包裹長文本

如果你碰到一個比自身容器長的文本，這個技巧對你很有用。在這個示例中，默認(rèn)時，不管容器的寬度，文本都將水平填充。

簡單的CSS代碼就能在容器中調(diào)整文本：

pre { white-space: pre-line; word-wrap: break-word;}

9、制造模糊文本

想要讓文本模糊？可以使用color透明和text-shadow實現(xiàn)。

.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}

10、用CSS動畫實現(xiàn)省略號動畫

這個片段將幫助你制造一個ellipsis的動畫，對于簡單的加載狀態(tài)是很有用的，而不用去使用gif圖像。

.loading:after {
 overflow: hidden;
 display: inline-block;
 vertical-align: bottom;
 animation: ellipsis 2s infinite;
 content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
 from {
 width: 2px;
 }
 to {
 width: 15px;
 }
}

11、樣式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 outline: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

12、典型的CSS清除浮動

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

13、新版清除浮動（2011）

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

14、跨瀏覽器的透明

.transparent { filter: alpha(opacity=50); /* internet explorer */
 -khtml-opacity: 0.5; /* khtml, old safari */
 -moz-opacity: 0.5; /* mozilla, netscape */
 opacity: 0.5; /* fx, safari, opera */}

15、CSS引用模板

blockquote {
 background: #f9f9f9;
 border-left: 10px solid #ccc;
 margin: 1.5em 10px;
 padding: .5em 10px;
 quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
 color: #ccc;
 content: open-quote;
 font-size: 4em;
 line-height: .1em;
 margin-right: .25em;
 vertical-align: -.4em;
}
blockquote p {
 display: inline;
}

16、個性圓角

#container {
 -webkit-border-radius: 4px 3px 6px 10px;
 -moz-border-radius: 4px 3px 6px 10px;
 -o-border-radius: 4px 3px 6px 10px;
 border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
 -webkit-border-top-left-radius: 4px;
 -webkit-border-top-right-radius: 3px;
 -webkit-border-bottom-right-radius: 6px;
 -webkit-border-bottom-left-radius: 10px;
 -moz-border-radius-topleft: 4px;
 -moz-border-radius-topright: 3px;
 -moz-border-radius-bottomright: 6px;
 -moz-border-radius-bottomleft: 10px;
}

17、自定義文本選擇

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

18、為logo隱藏H1

h1 {
 text-indent: -9999px;
 margin: 0 auto;
 width: 320px;
 height: 85px;
 background: transparent url("images/logo.png") no-repeat scroll;
}

19、圖片邊框偏光

img.polaroid {
 background:#000; /*Change this to a background image or remove*/
 border:solid #fff;
 border-width:6px 6px 20px 6px;
 box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
 -webkit-box-shadow:1px 1px 5px #333;
 -moz-box-shadow:1px 1px 5px #333;
 height:200px; /*Set to height of your image or desired div*/
 width:200px; /*Set to width of your image or desired div*/
}

20、錨鏈接偽類

在線咨詢

上一篇：HTML Unicode（UTF-8）參考手冊
下一篇：我用HTML5工具，做了一個支付寶9.9版的原型

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Java學(xué)習(xí)：來認(rèn)識一下HTML中的標(biāo)簽~

您的項目需求