溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這是我寫的第一篇博客！剛剛從學(xué)校踏入工作崗位，以前學(xué)習(xí)的是java，到公司之后才知道在web開(kāi)發(fā)之中還包括了前端，UI，美工，后臺(tái)，數(shù)據(jù)庫(kù)抽取，項(xiàng)目經(jīng)理等職位。前端工程師應(yīng)用HTML，CSS，AJAX等前端開(kāi)發(fā)技術(shù)進(jìn)行web前端的開(kāi)發(fā)，直接編寫向客戶進(jìn)行展示的部分的職位。想要做前端開(kāi)發(fā)首要的學(xué)習(xí)的就是HTML的編寫，通過(guò)它才能編寫出展示的頁(yè)面。
HTML語(yǔ)言的定義：超文本標(biāo)記語(yǔ)言。我自己的理解就是一些可以控制頁(yè)面元素的標(biāo)簽的集合。
一，HTML標(biāo)簽
這是一個(gè)綜述，<p></p>這既是一個(gè)標(biāo)簽一個(gè)最簡(jiǎn)單的段落標(biāo)簽，前面的是開(kāi)始標(biāo)簽，后面的結(jié)束標(biāo)簽。在html4中如果沒(méi)有結(jié)束標(biāo)簽也可以進(jìn)行完整的顯示的，但是在XHTML中以及以后的HTML5中結(jié)束標(biāo)簽是必須存在的，所以在以后的書寫過(guò)程中結(jié)束標(biāo)簽是必不可少，即使是像換行的標(biāo)簽<br/>。
二，HTML基礎(chǔ)
1，HTML的標(biāo)題和段落
<h2>-<h7>都是是用來(lái)定義標(biāo)題的文本標(biāo)簽，他們的大小粗細(xì)是順序是<h2> > <h3> > <h4>的順序來(lái)排列的。
段落標(biāo)簽是<p></p>,瀏覽器會(huì)在段落的前后自動(dòng)的加上空格。使用<p></p>插入一個(gè)空行是一個(gè)不好的習(xí)慣，要是想插入一個(gè)空行可以使用<br/>。如果想在不產(chǎn)生新的段落的情況下進(jìn)行換行也可以使用<br/>。
2，HTML的樣式
用style屬性來(lái)改變HTML元素的樣式。
style屬性的作用是提供了一種改變所有HTML樣式的通用方法。
例子：<body style="background-color:#609">
<h3 style="background-color:#0C0">this is title</h3>
<p style="background-color:#FF0"> this is a paragraph</p>
</body>
上邊的例子就是用來(lái)改變背景顏色。
第二個(gè)例子是設(shè)置文本的對(duì)齊方式
例子：<body style="background-color:#609">
<h3 style="text-align:center">this is title</h3>
<p style="background-color:#FF0"> this is a paragraph</p>
</body>
默認(rèn)的對(duì)齊方式是左對(duì)齊。
3，HTML的超鏈接和錨標(biāo)簽
HTML的超鏈接用<a>標(biāo)簽實(shí)現(xiàn)，href屬性定義的所要連接的位置或者文檔。
例子：<a href="http://www.baidu.com/" target="_blank">連接到百度</a>
上述例子中的target屬性的作用是規(guī)定鏈接打開(kāi)的位置，上面的例子就是新打開(kāi)一個(gè)頁(yè)面在其中顯示百度的主頁(yè)面。
<a>的除了可以連接到其他網(wǎng)頁(yè)外還可以連接到本網(wǎng)頁(yè)的其他位置也就是錨標(biāo)記。定位標(biāo)記：
<a name="標(biāo)記名">，跳到標(biāo)簽處的寫法：<a href="#定位標(biāo)記名">這樣就可以調(diào)到當(dāng)前頁(yè)面的指定位置。
例子：<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<p>This chapter explains ba bla bla</p>
<h3>Chapter 3</h3>
<p>This chapter explains ba bla bla</p>
<h3><a name="C4">Chapter 4</a></h3>
<p>This chapter explains ba bla bla</p>
<h3>Chapter 5</h3>
<p>This chapter explains ba bla bla</p>
當(dāng)想要直接連接到跳轉(zhuǎn)后的頁(yè)面想要的位置是也可以通過(guò)起來(lái)實(shí)現(xiàn)：
<a href="http://www.smalluv.com/somepage.html#tips">Jump to the Useful Tips Section</a>
在跳轉(zhuǎn)的頁(yè)面中會(huì)有：<a name="tips">Jump to the Useful Tips Section</a>
4，HTML表格
HTML中的表格由<table>來(lái)定義。<tr>用來(lái)定義每個(gè)表格的行，<td>用來(lái)定義每個(gè)單元格。
例子：
<table width="200" border="1">
<tr>
<td>first</td>
<td>last</td>
</tr>
<tr>
<td>第一個(gè)</td>
<td>第二個(gè)</td>
</tr>
</table>
如何設(shè)置表格的表頭？，我們可以使用<th>標(biāo)簽進(jìn)行表頭的設(shè)置。
例子：
<table border="1">
<tr>
<th>時(shí)間</th>
<th>事件</th>
</tr>
<tr>
<td>1990-09-11</td>
<td>金門事件</td>
</tr>
</table>
有的時(shí)候空的單元格的邊框不會(huì)被顯示出來(lái)（在fireFox瀏覽器中可以）；為了避免這種事件的發(fā)生，通常在空的單元格中使用占用符來(lái)使它的邊框顯示出來(lái)。
<td> </td>
其他小方法：
1，如何使表格帶標(biāo)題?
在<table>的標(biāo)簽下使用<caption>標(biāo)簽
<caption> 表格的標(biāo)題</caption>
2,如何合并單元格？在需要合并的位置加上colspan（和并列）或者rowspan（合并行）
<th rowspan="2">合并</th>
3,如何設(shè)置單元格邊距和單元格間距？
邊距：<table cellpadding="10">
間距：<table cellspacing="10">
5，HTML的列表
HTML中的列表可以分為有序列表和無(wú)序列表。
（1）無(wú)序列表：
起始于<ul> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。
例子：
<ul>
<li>Coffee</li> <li>Milk</li> </ul>
<ol>
<li>Coffee</li> <li>Milk</li> </ol>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼