【HTML學習】——HTML常見標簽屬性和方法介紹

目錄

1、HTML分塊--------< div>

2、HTML段落--------< p>

3、HTML標題--------< h1>…< h6>

4、HTML鏈接--------< a>

1)< a href=“http://www.baidu.com”>百度< /a>（點擊百度，直接跳轉到網頁）

2)HTML鏈接中的target屬性(默認是在本頁面中跳轉_self)

3)HTML鏈接中的id屬性

5、HTML圖像-------< img>

6、HTML換行--------< br>

7、HTML水平線--------< hr>

8、HTML折行（讓連續兩行緊挨在一起）

9、HTML文本格式化

1）< b>加粗文體< /b>

2）< i>斜體< /i>

3）< sub>510下標< /sub>

4）< sup>510上標< /sup>10、HTML預格式文本

11、HTML定義縮寫--------< abbr>

12、HTML指定文本方向--------< bdo>

13、HTML新插入文本和刪除文本--------< ins>和< del>

14、HTML中的< base>(必須寫在< head>中)

15、HTML表單

1）< form>標簽，創建一個供用戶輸入的表單。

2）< input>標簽

（1）最重要的type屬性（只列了常用的幾個）。

（2）name屬性 ------規定< input>元素的名稱

（3）checked屬性------規定在頁面加載時應該被預先選定的< input>元素。

（4）alt屬性------定義圖像輸入的替代文本（只針對type=“image”）

（5）src屬性------規定顯示為提交按鈕的圖像的URL

（6）height和width屬性------規定< input>元素的高度和寬度（只針對type=“image”）

（7）value屬性------指定< input>元素value的值

3）< button>標簽

（1）type屬性------規定按鈕的類型

5）< label>標簽------為input元素定義標注（標記）

（1）for屬性------規定label與那個表單元素綁定。

15、HTML Audio/Video

1）< source>標簽

（1）src屬性------規定媒體文件的URL。

（2）type屬性------規定媒體資源的MIME類型。

2）< audio>標簽

（1）controls屬性

（2）autoplay屬性

（3）src屬性------規定媒體文件的URL。

3）< video>標簽

（1）controls屬性

（2）autoplay屬性

（3）src屬性------規定媒體文件的URL。

（4）height和width屬性------設置視頻播放器的高度和寬度。

16、HTML列表

1）< ul>標簽------創建一個無序列表（通常與li一起使用）

2）< ol>標簽------創建一個有序列表（通常與li一起使用）

3）< li>標簽------定義一個列表項

4)< dl>標簽------定義一個定義列表

5）< dt>標簽------定義一個定義定義列表中的項目。

6）< dd>標簽------頂一頂一列表中項目的描述。

轉載自：HTML常用標簽及其用法總結_sun9979的博客-CSDN博客_html標簽大全及用法1、&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; div&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;說起HTML的標簽，不得不提起的就是&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; div&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;，https://blog.csdn.net/sun9979/article/details/85217699?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164043745016780271528333%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164043745016780271528333&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-85217699.pc_search_insert_es_download&utm_term=html%E6%A0%87%E7%AD%BE%E5%A4%A7%E5%85%A8%E5%8F%8A%E7%94%A8%E6%B3%95&spm=1018.2226.3001.4187

1、HTML分塊--------< div>


說起HTML的標簽，不得不提起的就是< div>，在制作一個網頁的時候，應該先將他們劃分為許多個塊，再在這些塊中進行操作。
整個電腦能夠顯示是因為顯示屏上一個一個的小顆粒，如下寬度：1920px，高度1080px。


所以在定義< div>中width和height的像素值的時候可以以電腦的分辨率來大致估算。

?

2、HTML段落--------< p>


< p>標簽代表的是段落，連續的兩個< p>標簽中間是有間距的，不是緊挨在一起的。

1.<p style="background-color:#888">Nice!</p>
2.<p style="background-color:#888">Good!</p>
3.<p style="background-color:#888">Perfect!</p>

?

3、HTML標題--------< h1>…< h6>


默認加粗，從< h1>到< h6>，字體大小越來越小。

<h1>這是1號標題</h1>
<font size="6">這是6號字體文本</font>

<h2>這是2號標題</h2>
<font size="5">這是5號字體文本</font>

<h3>這是3號標題</h3>
<font size="4">這是4號字體文本</font>

<h4>這是4號標題</h4>
<font size="3">這是3號字體文本</font>

<h5>這是5號標題</h5>
<font size="2">這是2號字體文本</font>

<h6>這是6號標題</h6>
<font size="1">這是1號字體文本</font>

4、HTML鏈接--------< a>


1)< a href=“http://www.baidu.com”>百度< /a>（點擊百度，直接跳轉到網頁）


這里的百度也可以是自己放的一張圖片，點擊圖片，跳轉頁面。

2)HTML鏈接中的target屬性(默認是在本頁面中跳轉_self)

/*當涉及到在新窗口打開時，令target=_blank*/
< a href="http://www.baidu.com" target="_blank">百度< /a>

3)HTML鏈接中的id屬性


直接跳轉到id所在位置，（id前面要加#）這個例子本質就是一個書簽。

<a href="#info">跳轉到four</a>
<h1>one</h1>
<br><br><br><br><br><br>
<h2>two</h2>
<br><br><br><br><br><br>
<h3>three</h3>
<br><br><br><br><br><br>
<h4 id="info">four</h4>
<h5>five</h5>

5、HTML圖像-------< img>


< img>有兩個必要的屬性：src和alt
< img src=“11.jpg” width=“100px”
height=“200px” />（放在一個目錄下，可以直接寫圖片名字和格式）
圖片的名稱和尺寸是通過屬性的形式提供的。
提示：（1）從技術上來講，圖像并不會插入HTML頁面中，而是鏈接到HTML頁面上。 < img>標簽的作用是為被引用的圖像創建占位符。
（2）通過在< a>標簽中嵌套< img>標簽，為圖像添加到另一個文檔的鏈接。

6、HTML換行--------< br>


直接空一行。（是一個沒有關閉標簽的空標簽）

7、HTML水平線--------< hr>


創建水平線，用于分割內容。

8、HTML折行（讓連續兩行緊挨在一起）


< p>< br>< br>< /p>

9、HTML文本格式化


1）< b>加粗文體< /b>


通常標簽 < strong> 替換加粗標簽 < b> 來使用

2）< i>斜體< /i>

通常標簽 < em> 替換加粗標簽 < i> 來使用

3）< sub>510下標< /sub>

4）< sup>510上標< /sup>10、HTML預格式文本

< pre>< /pre>對空行和空格進行控制。（這個寫的就很隨意）<pre style="background-color:red;color:blue">
Nice!Good!Prefect!
</pre>

?

11、HTML定義縮寫--------< abbr>


< abbr title=“World Wide Web”>www< /abbr>
當鼠標移動到縮略詞語上時，title可用于顯示完整版本。

12、HTML指定文本方向--------< bdo>


< p>< bdo dir=“rtl”>該段落文字從右到左顯示。< /bdo>< /p>
rtl--------right to left;
ltr--------left to right;

13、HTML新插入文本和刪除文本--------< ins>和< del>


瀏覽器一般會在已刪除的文本上添加一條下劃線,而在新添加的文本下添加一條下劃線。

<p>my favorite color is <del>blue</del> <ins>red</ins>!</p>

14、HTML中的< base>(必須寫在< head>中)


< base>為頁面上的所有相對鏈接規定默認的URL（每一個文件都有默認的url,它包含的信息指出文件的位置以及瀏覽器應該怎么處理它）
就可以寫一個圖片庫，在調用的時候直接寫它的名稱就行。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<base href="D://">
</head>
<body>
<a href="11.jpg">跳轉到圖片</a>
</body>
</html>

15、HTML表單

1）< form>標簽，創建一個供用戶輸入的表單。


form標簽里一般需要添加兩個屬性，一個是action,一個是method。

action的值是一個URL，它用來規定提交表單時向何處發送表單數據。

method的值有兩個,get和post。它規定用于發送表單數據的HTTP方法。

?

2）< input>標簽


該標簽規定了用戶可以在其中輸入數據的輸入字段。
< input>元素在< form> 元素中使用，用來聲明允許用戶輸入數據的input控件。

（1）最重要的type屬性（只列了常用的幾個）。


button ： 普通按鈕
text：普通的輸入框
checkbox ： 復選框
radio：單選框
password ： 密碼輸入框（看不見輸入的內容）
submit ：提交按鈕
reset：重置按鈕
email：郵箱輸入框
url：資源地址（輸入網址）
number：數值輸入的空間（可以通過旁邊的箭頭上下浮動1）
date：就是日期選擇控件（包含年月日）
datetime-local：本地日期時間選擇控件（包含年月日幾時幾分）
tel：電話號碼
color：顏色選擇控件

（2）name屬性 ------規定< input>元素的名稱


它的值自己輸入（text）


（3）checked屬性------規定在頁面加載時應該被預先選定的< input>元素。

（只針對type="checkbox"或者type=“radio”）

（4）alt屬性------定義圖像輸入的替代文本（只針對type=“image”）


它的值自己輸入（text）

（5）src屬性------規定顯示為提交按鈕的圖像的URL


它的值為一個URL。

（6）height和width屬性------規定< input>元素的高度和寬度（只針對type=“image”）

（7）value屬性------指定< input>元素value的值


它的值是一個text類型。

3）< button>標簽


該標簽就是定義一個按鈕。
在< button>元素內部，可以放置內容，比如文本和圖像。這一點也是該元素與< input>元素創建的按鈕之間的不同之處。
（必須為該元素規定type屬性，因為不同瀏覽器，它的默認值不一樣）

（1）type屬性------規定按鈕的類型


它的值包括button,reset,submit三種類型。4）< select>標簽
?

< select>元素用來創建下拉列表。
< select>元素中的 < option>標簽定義了列表中的可用選項。<form>
<p>You are a
<select>
<option value="Nice">Nice</option>
<option value="Handsome">Handsome</option>
<option value="Smart">Smart</option>
</select>
boy!</p>

value屬性-----送往服務器的選項值。

5）< label>標簽------為input元素定義標注（標記）


label元素不會向用戶呈現任何特殊效果。不過，他為鼠標用戶改進了可用性。如果在label元素內帶年紀文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。


（1）for屬性------規定label與那個表單元素綁定。

<form>
<label for="Male">Male</label>
<input type="radio"  name="sex" id="Male" value="male"><br>
<label for="Female">Female</label>
<input type="radio" name="sex" id="Female" value="female"><br>
</form>

< label>標簽的for屬性應當與相關元素的id屬性相同

15、HTML Audio/Video


1）< source>標簽


該標簽為媒體元素（比如< video>和< audio>）定義媒體資源。
該標簽允許規定兩個視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

（1）src屬性------規定媒體文件的URL。


它的值就是URL

（2）type屬性------規定媒體資源的MIME類型。


它的值為MIME_type類型。

2）< audio>標簽


用來定義聲音，比如音樂或者其他音頻流。
目前只支持三種格式：mp3,wav,ogg。

?


（1）controls屬性


向用戶顯示音頻控件（比如播放/暫停按鈕）。

（2）autoplay屬性


音頻就緒后馬上播放。

（3）src屬性------規定媒體文件的URL。


它的值就是URL

3）< video>標簽


定義視頻，比如電影片段或者視頻流。
目前只支持三種視頻格式：mp4,webm,ogg。

（1）controls屬性


向用戶顯示音頻控件（比如播放/暫停按鈕）。

（2）autoplay屬性


音頻就緒后馬上播放。

（3）src屬性------規定媒體文件的URL。


它的值就是URL

（4）height和width屬性------設置視頻播放器的高度和寬度。

<video width="230px" height="200px" controls>
<source src="1.mp4" type="video/mp4">
<source src="2.ogg" type="video/ogg">
</video>

16、HTML列表


1）< ul>標簽------創建一個無序列表（通常與li一起使用）

2）< ol>標簽------創建一個有序列表（通常與li一起使用）

3）< li>標簽------定義一個列表項

<p>有序列表:</p>
<ol><li>Nice</li><li>Good</li><li>Perfect</li>
</ol><p>無序列表:</p>
<ul><li>Nice</li><li>Good</li><li>Perfect</li>
</ul>

4)< dl>標簽------定義一個定義列表

（與 < dt> （定義項目/名字）和 < dd> （描述每一個項目/名字）一起使用。）

5）< dt>標簽------定義一個定義定義列表中的項目。

6）< dd>標簽------頂一頂一列表中項目的描述。

<dl><dt>Boy:</dt><dd>Handsome and Strong</dd><dt>Girl:</dt><dd>Beautiful and Slim</dd>
</dl>


?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/255633.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/255633.shtml
英文地址，請注明出處：http://en.pswp.cn/news/255633.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

開發者應警惕的七種糟糕職業規劃錯誤

開發者應警惕的七種糟糕職業規劃錯誤

那些心靈雞湯式的說辭總愛美化失敗&#xff1a;失敗是成功之母啦、失敗使人成長啦、別畏懼失敗等等。但事實上&#xff0c;這種思路在軟件開發領域也許并不適用——至少不完全適用。每位開發者在職業生涯中都不可避免會遭遇失敗&#xff0c;但為什么不從他人的經驗中汲取教訓來…
閱讀更多...
Splay模板

Splay模板

打LCT的時候發現Splay很不熟, 因此這里貼一下模板 洛谷P3369 https://www.luogu.org/problem/show?pid3369#sub /* 提一些要注意的點: 1. 注意判斷邊界, 不要訪問到空節點 2. 每一次操作或訪問完以后, 記得要splay到root 3. insert操作只要update當前節點和父親節點即可, 因為…
閱讀更多...
圖像處理與計算機視覺 基礎、經典以及最近發展

圖像處理與計算機視覺 基礎、經典以及最近發展

申明&#xff1a;本文非筆者原創&#xff0c;原文轉載自&#xff1a;http://blog.csdn.net/liuyue2046/article/details/12658441 ***************************************************************************************************************************************…
閱讀更多...
【HTML學習】——一個網頁HTML編程的構成

【HTML學習】——一個網頁HTML編程的構成

目錄 1、html網頁構成介紹 2、HTML標簽介紹 全部的html標簽&#xff1a; HTML: HyperText Markup Language | MDNhttps://developer.mozilla.org/en-US/docs/Web/HTML 一個網頁文件一般由.html結尾的文件組成&#xff0c;主要由不同的標簽對和內容組成&#xff0c;常見的html…
閱讀更多...
hbase里插入big int數據用Phoenix查看的報錯問題

hbase里插入big int數據用Phoenix查看的報錯問題

Phoenix建表create table "test_big_int"("ROW" varchar primary key,"ci"."column1" bigint) 在hbase里put數據hbase 里面進行put: put test_big_int,001,ci:column1,1 在Phoenix里進行查看&#xff08;問題出現&#xff09;第二個嘗…
閱讀更多...
機器學習：利用卷積神經網絡實現圖像風格遷移 (一)

機器學習：利用卷積神經網絡實現圖像風格遷移 (一)

相信很多人都對之前大名鼎鼎的 Prisma 早有耳聞&#xff0c;Prisma 能夠將一張普通的圖像轉換成各種藝術風格的圖像&#xff0c;今天&#xff0c;我們將要介紹一下Prisma 這款軟件背后的算法原理。就是發表于 2016 CVPR 一篇文章&#xff0c; “ Image Style Transfer Using Co…
閱讀更多...
jquery中attr和prop的區別

jquery中attr和prop的區別

在高版本的jquery引入prop方法后&#xff0c;什么時候該用prop&#xff1f;什么時候用attr&#xff1f;它們兩個之間有什么區別&#xff1f;這些問題就出現了。 關于它們兩個的區別&#xff0c;網上的答案很多。這里談談我的心得&#xff0c;我的心得很簡單&#xff1a; ?對于…
閱讀更多...
博客園自定義樣式

博客園自定義樣式

碎碎念&#xff1a; 已經很長時間沒有更新過博客了&#xff0c;分析一下&#xff0c;一個是太懶了。。。所以很久沒整理一下了。還有就是嫌棄博客園默認的博客界面真的太丑了&#xff0c;作為顏控的我真的無法忍受啊。個人比較喜歡用makedown來編寫博客&#xff0c;但是博客園自…
閱讀更多...
【CSS】——cascading stylesheets層疊式樣式表

【CSS】——cascading stylesheets層疊式樣式表

目錄 0、CSS介紹 1、CSS語句組成 2、CSS選擇器的選擇方式 1&#xff09;CSS選擇器的方式和選擇器大全&#xff1a; 2&#xff09;常見的三種方式&#xff1a; 3、添加CSS方式 1&#xff09;外部樣式表 html調用css代碼 css文件 html文件 展示 2&#xff09;內部樣式表…
閱讀更多...
四 Apache Axis2 部署 WebService

四 Apache Axis2 部署 WebService

最新版本1.7.4發布日期2016-10-21 Axis2官網下載如下文件&#xff1a; axis2-1.6.2-bin&#xff1a;二進制的axis axis2-1.6.2-docs&#xff1a;幫助文檔 axis2-1.6.2-war&#xff1a;axis.war 文件 axis2-eclipse-codegen-plugin-1.6.2&#xff1a;Eclipse axis client 插件 a…
閱讀更多...
安裝OpenCV：OpenCV 2.4.8或OpenCV 2.4.9 +VS 開發環境配置

安裝OpenCV：OpenCV 2.4.8或OpenCV 2.4.9 +VS 開發環境配置

因為讀研期間的研究方向是圖像處理&#xff0c;所以淺墨這段時間閉門研究了很多OpenCV和圖像處理相關的知識與內容。眼看自己積累到一定的程度了&#xff0c;于是決定開始開設這個OpenCV系列專欄&#xff0c;總結自己所學&#xff0c;也分享知識給大家。 好了&#xff0c;這篇文…
閱讀更多...
powerdesigner中如何在自動生成建表SQL時添加模式名schema

powerdesigner中如何在自動生成建表SQL時添加模式名schema

1、在主菜單中選擇“模型”→“users and roles”→“users”&#xff0c;新增一個user&#xff0c;其中"name"字段就是要添加的模式名。 2、在新增表時&#xff0c;在表屬性的“general”頁簽中選擇"owner"&#xff0c;選擇剛才新增的user&#xff0c;即可…
閱讀更多...
spark 免密碼登錄- ssh 指定非22端口

spark 免密碼登錄- ssh 指定非22端口

vi /etc/profile在profile 文件最后一行加入命令&#xff1a; export SPARK_SSH_OPTS"-p 7315" #注&#xff1a;7315 是ssh 端口轉載于:https://www.cnblogs.com/chengjunhao/p/8336086.html
閱讀更多...
【django學習】——Django介紹和實戰（開發簡易版博客網頁）

【django學習】——Django介紹和實戰（開發簡易版博客網頁）

目錄 0、視頻鏈接 1、環境配置 2、django基本命令 1&#xff09;常見命令 2&#xff09;數據庫相關的Django命令 3、Django項目 1&#xff09;Django創建項目 2&#xff09;項目目錄介紹 3&#xff09;運行初始化的Django項目 4、Django應用 1&#xff09;Django項目和Djan…
閱讀更多...
求最大子數組03

求最大子數組03

題目: 返回一個二維整數數組中最大聯通子數組的和。 要求&#xff1a; 1. 輸入一個二維整形數組&#xff0c;數組里有正數也有負數。 求所有子數組的和的最大值。要求時間復雜度為O(n)。 2.程序要使用的數組放在一個叫 input.txt 的文件中&#xff0c; 文件格式是: 數組的行…
閱讀更多...
warning C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead.

warning C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead.

使用VS2005以上版本&#xff08;VS2005、VS2008、VS2010&#xff09;編譯在其他編譯器下正常通過的C語言程序&#xff0c;你可能會遇到類似如下的警告提示&#xff1a;引用內容 warning C4996: strcpy: This function or variable may be unsafe. Consider using strcpy_…
閱讀更多...
糾錯——【Singleton array array(0.2) cannot be considered a valid collection.】

糾錯——【Singleton array array(0.2) cannot be considered a valid collection.】

# 將數據集按照比例劃分為訓練集和測試集 def split_datas(datas,labels,random_state1,train_size0.9,test_size0.1):train_data, test_data, train_label, test_label sklearn.model_selection.train_test_split(datas,labels,random_staterandom_state,# 作用是通過隨機數來…
閱讀更多...
Android Studio 模擬器 不要皮膚，效果更好

Android Studio 模擬器 不要皮膚，效果更好

新建或者編輯虛擬機時&#xff0c;皮膚選擇“No Skin”即可&#xff0c;第二張圖片就是無皮膚的效果&#xff0c;看著更爽啊。 轉載于:https://www.cnblogs.com/toSeeMyDream/p/6265501.html
閱讀更多...
SqlServer自定義排序

SqlServer自定義排序

在實際項目中&#xff0c;有時會碰到數據庫SQL的特殊排序需求&#xff0c;舉幾個例子&#xff0c;作為參考。 1、自定義優先級 一種常見的排序需求是指定某個字段取值的優先級&#xff0c;根據指定的優先級展示排序結果。比如如下表&#xff1a; Create TABLE Fruit (id INT ID…
閱讀更多...
JAVA 筆記（三）

JAVA 筆記（三）

NullPointerException:空指針異常 原因&#xff1a;數組已經不再指向堆內存了。而你還用數組名去訪問元素。對于查找問題&#xff0c;如果找到就返回其索引值&#xff0c;如果找不到就要返回一個負數&#xff08;一般是負一&#xff09;這是必須的&#xff0c;否則如果找不到&a…
閱讀更多...
最新文章

Copyright @ 2022~2023