作者：困了電視劇
專欄：《JavaEE初階》
文章分布：這是一篇關(guān)于html前端的文章，在這篇文章中我會簡單介紹一些常用的html標簽，并給出他們的應(yīng)用實例，希望對你有所幫助！
?
目錄
html常見標簽
標題標簽
段落標簽
換行標簽
格式化標簽
圖片標簽
超鏈接標簽
表格標簽
列表標簽
表單標簽
input標簽
label標簽
select標簽
textarea標簽
無語義標簽
html常見標簽
標題標簽
有六個, 從 h1 - h6. 數(shù)字越大, 則字體越小
<h1>標題標簽1</h1>
<h2>標題標簽2</h2>
<h3>標題標簽3</h3>
<h4>標題標簽4</h4>
<h5>標題標簽5</h5>
<h6>標題標簽6</h6>效果圖：
??
段落標簽
把一段比較長的文本粘貼到 html 中, 會發(fā)現(xiàn)并沒有分成段落.
1.00000，00000000000000，000000000000000000，000000000000000000000000000；<p></p>
2.000000000000000000000000000000000000000000000000000000000000000000000000000，
00000<br>00000000000000000000000000000000000運行結(jié)果：
注：
1.p 標簽之間存在一個空隙
2.當前的 p 標簽描述的段落, 前面還沒有縮進.?
3.自動根據(jù)瀏覽器寬度來決定排版.
4.html 內(nèi)容首尾處的換行, 空格均無效.
5.在 html 中文字之間輸入的多個空格只相當于一個空格.
6.html 中直接輸入換行不會真的換行, 而是相當于一個空格.
換行標簽
br 是 break 的縮寫. 表示換行
?
1.00000，00000000000000，000000000000000000，000000000000000000000000000；<p></p>
2.000000000000000000000000000000000000000000000000000000000000000000000000000，
00000<br>00000000000000000000000000000000000運行結(jié)果：
?注：
1.br 是一個單標簽(不需要結(jié)束標簽)
2.br 標簽不像 p 標簽?zāi)菢訋в幸粋€很大的空隙.
格式化標簽
加粗: strong 標簽 和 b 標簽
傾斜: em 標簽 和 i 標簽
刪除線: del 標簽 和 s 標簽
下劃線: ins 標簽 和 u 標簽
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>傾斜</em>
<i>傾斜</i>
<del>刪除線</del>
<s>刪除線</s>
<ins>下劃線</ins>
<u>下劃線</u>運行結(jié)果：
圖片標簽
img 標簽必須帶有 src 屬性. 表示圖片的路徑。
img標簽的其他屬性：
alt: 替換文本. 當文本不能正確顯示的時候, 會顯示一個替換的文字.
title: 提示文本. 鼠標放到圖片上, 就會有提示.
width/height: 控制寬度高度. 高度和寬度一般改一個就行, 另外一個會等比例縮放. 否則就會圖片失衡.
border: 邊框, 參數(shù)是寬度的像素. 但是一般使用 CSS 來設(shè)定.
圖片地址分類：
1.網(wǎng)絡(luò)地址（只要有網(wǎng)絡(luò)就行）
2.本地
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd40cd1d1-130a-4bd7-b7a4-998e6034589e%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686234548&t=2ce4e07254500286199d1792bd4e43cd"><br>
當這個圖片不存在的時候alt才會生效，他會將這個圖片的位置替換成你改的內(nèi)容，
title就是當你鼠標放上去的時候會顯示title的內(nèi)容
相對地址：<img id="flower" src="flower.JPG" title="這是一張flower的照片" alt="這是一張花的圖片" width="400px" height="400px">
超鏈接標簽
href: 必須具備, 表示點擊后會跳轉(zhuǎn)到哪個頁面.
target: 打開方式. 默認是 _self. 如果是 _blank 則用新的標簽頁打開
空鏈接: 使用 # 在 href 中占位
下載鏈接: href 對應(yīng)的路徑是一個文件. (可以使用 zip 文件）
網(wǎng)頁元素鏈接: 可以給圖片等任何元素添加鏈接（把元素放到 a 標簽中）
錨點鏈接: 可以快速定位到頁面中的某個位置
<h2>變成導(dǎo)航網(wǎng)站</h2>
超鏈接標簽 a標簽就是超鏈接標簽
<a target="_blank">baidu</a>
<a target="_blank">sogou</a>
<a href="#">啥也沒有，#用來占位</a>
表格標簽
表格標簽的相關(guān)用法：
table 標簽: 表示整個表格
tr: 表示表格的一行
td: 表示一個單元格
th: 表示表頭單元格. 會居中加粗
thead: 表格的頭部區(qū)域(注意和 th 區(qū)分, 范圍是比 th 要大的)
tbody: 表格得到主體區(qū)域.
?當一些元素相同的時候，我們也可以進行合并單元格：
跨行合并: rowspan="n"
跨列合并: colspan="n"
<table border="1" width="400px" height="200px">
<thead>
<!-- <th> -->
<th>
姓名
</th>
<th>
年齡
</th>
<th>
性別
</th>
<!-- </th> -->
</thead>
<tbody>
<tr>
<td>zhangsan</td>
<td rowspan="2">18</td>
<td>nan</td>
</tr>
<tr>
<td>lisi</td>
<!-- <td>18</td> -->
<td rowspan="2">nv</td>
</tr>
<tr>
<td colspan="2">wangwu|20</td>
<!-- <td>20</td> -->
<!-- <td>nv</td> -->
</tr>
</tbody>
</table>
?
列表標簽
主要使用來布局的. 整齊好看.
無序列表[重要] ul li ,?
有序列表[用的不多] ol li
自定義列表[重要] dl (總標簽) dt (小標題) dd (圍繞標題來說明) 上面有個小標題, 下面有幾個圍繞著標題來展開的.
?
<h3>無序列表</h3>
<ul>
<li>wqer</li>
<li>wqer</li>
<li>wqer</li>
<li>wqer</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>sdadas</li>
<li>sdadas</li>
<li>sdadas</li>
<li>sdadas</li>
<li>sdadas</li>
</ol>
<h3>自定義列表</h3>
<dl>
<dt>標題</dt>
<dd>fgasdh</dd>
<dd>fgasdh</dd>
<dd>fgasdh</dd>
<dd>fgasdh</dd>
</dl>
?
表單標簽
表單是讓用戶輸入信息的重要途徑.
分成兩個部分:
表單域: 包含表單元素的區(qū)域. 重點是 form 標簽.
表單控件: 輸入框, 提交按鈕等. 重點是 input 標簽
input標簽
各種輸入控件, 單行文本框, 按鈕, 單選框, 復(fù)選框.
type(必須有), 取值種類很多多, button, checkbox, text, file, image, password, radio 等.
name: 給 input 起了個名字. 尤其是對于 單選按鈕, 具有相同的 name 才能多選一.
value: input 中的默認值.
checked: 默認被選中. (用于單選按鈕和多選按鈕)
maxlength: 設(shè)定最大長度.
label標簽
搭配 input 使用. 點擊 label 也能選中對應(yīng)的單選/復(fù)選框, 能夠提升用戶體驗
select標簽
下拉菜單
option 中定義 selected="selected" 表示默認選中
注意! 可以給的第一個選項, 作為默認選項
textarea標簽
文本域中的內(nèi)容, 就是默認內(nèi)容, 注意, 空格也會有影響
rows 和 cols 也都不會直接使用, 都是用 css 來改的.
表單標簽
<form action="https://www.baidu.com" method="get" target="_blank">
姓名：<input type="text"><br>
密碼：<input type="password"><br>
性別：<input type="radio" name="sex">男
<input type="radio" name="sex">女<br>
愛好：<input type="checkbox">聽音樂 <input type="checkbox">打球
<input type="checkbox">游泳 <input type="checkbox">睡覺 <br>
<input type="button" value=" 普通按鈕 ">
<input type="submit" value=" 提交 ">
<input type="reset" value=" 清空 ">
<br>
頭像：<input type="file"><br>
大學(xué)：<select>
<option>beijing</option>
<option>qinghua</option>
<option>anhui</option>
</select><br>
備注：<textarea rows="7" cols="50">
</textarea>
</form>?
無語義標簽
div 標簽, division 的縮寫, 含義是 分割
span 標簽, 含義是跨度
就是兩個盒子. 用于網(wǎng)頁布局
div 是獨占一行的, 是一個大盒子.
span 不獨占一行, 是一個小盒子
無語義標簽,div是塊級模塊而span是行級模塊,模塊進行劃分可以方便根據(jù)不同的模塊進行不同的調(diào)整
<div>
<h1>這是一篇Java文章</h1>
<div>
hdfsgjkghjdghjsdfgdfgdfgffh
</div>
<div>
uyrie nrnhrnghdbgndgfh
</div>
<span style="color: red;">
dsjkfhsfhskjhfsaklsjad
</span>
<span style="color: blue;">
jsdghuierodghnfgngndisufhgureyt
</span>
</div>?
文章來源：http://www.zghlxwxcb.cn/news/detail-551637.html
?以上就是本篇博客的全部內(nèi)容，如有疏漏歡迎指正！文章來源地址http://www.zghlxwxcb.cn/news/detail-551637.html
到了這里，關(guān)于【劇前爆米花--前端三劍客】html的一些常用標簽及其實例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
