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

1、html網頁構成介紹

?2、HTML標簽介紹

全部的html標簽：

HTML: HyperText Markup Language | MDNhttps://developer.mozilla.org/en-US/docs/Web/HTML

一個網頁文件一般由.html結尾的文件組成，主要由不同的標簽對和內容組成，常見的html標簽可以參見文章：

原創【HTML學習】——HTML常見標簽屬性和方法介紹?https://blog.csdn.net/qq_45769063/article/details/122149454

1、html網頁構成介紹

?2、HTML標簽介紹

常見的tag如下所示

<!--html聲明-->
<!DOCTYPE html><!--HTML標簽-->
<html lang="en">
<!--head標簽，主要是設置顯示在網頁標簽頁的標題等屬性--><head><!--設置網頁標題以及字符集格式，這里設置的字符集格式為utf-8--><meta charset="UTF-8"><title>第一個網頁</title>
</head><!--網頁主體部分的內容-->
<body><!--顯示不同大小的標題，從h1-h6-->
<h1>heading one</h1>
<h2>heading two</h2>
<h3>heading two</h3>
<h4>heading three</h4>
<h5>heading four</h5>
<h6>heading five</h6><!--文本-->
<p>文本</p><!--從網頁中鏈接圖片顯示在自己的網頁中-->
<img src="https://img-blog.csdnimg.cn/20210904124537781.png" width="200" height="200"/><!--無序列表，前面加點list-->
<ul><li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li><li>list 5</li>
</ul><!--有序列表，前面加數字-->
<ol><li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li>
</ol><!--表格-->
<table><!--表頭--><thead><!--tr：table row以橫向的形式呈現--><tr><!--設置表頭信息<--><th>First name</th><th>last name</th><th>age</th><th>email</th></tr></thead><!--表格主體內容--><tbody><tr><!--設置表格數據--><td>lily</td><td>chan</td><td>12</td><td>123@qq.com</td></tr><tr><!--設置表格數據--><td>lily</td><td>chan</td><td>12</td><td>123@qq.com</td></tr><tr><!--設置表格數據--><td>lily</td><td>chan</td><td>12</td><td>123@qq.com</td></tr></tbody>
</table><!--表單，action指定處理邏輯的文件，method指定數據傳遞方式-->
<form action="form_logic.py" method="post"><!--占用一個區塊--><div><!--label--><label>first name</label><!--定義一個輸入文本框，用于用戶輸入--><input type="text" name="first name"></div><div><!--label--><label>last name</label><!--定義一個輸入文本框，用于用戶輸入--><input type="text" name="email"></div><div><!--label--><label>email</label><!--定義一個輸入文本框，用于用戶輸入--><input type="text" name="email"></div><!--提交按鈕--><input type="submit" value="Submit">
</form>
<!--按鈕-->
<button>This is a Button</button><!--給指定的字段添加解釋，當鼠標聚焦在上面字段時，會顯示解釋-->
<p><abbr title = "south college of techellge">SCUT</abbr> is a good college</p>
<!--設置下面空1000個像素-->
<div style="margin-top: 1000px"></div>
</body>
</html><!--大部分標簽對是成雙成對的，以/作為結束標志-->

?注意：

HTML：只負責編寫代碼，將控件等顯示，不負責顯示格式和網頁業務邏輯處理

CSS：負責網頁格式處理，使得網頁顯示更加地美化

業務邏輯一般是用Java/Python/js等語言編寫然后在后臺進行顯示

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

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