html入門基礎(詳解）-有解無憂

html入門基礎(詳解）

一、HTML

1.HTML：是一種用于創建網頁的超文本標記語言(Hyper Text Markup Language)

“超文本”就是指頁面可以包含圖片，鏈接，甚至音樂，視頻，程式等非文字元素，
HTML語言是Web的基礎，可以說Internet是建立在HTML基礎之上的，
HTML5是新一代HTML標準，大部分瀏覽器已經支持，

二、HTML5基本結構

<!DOCTYPE html>//html5網頁宣告
<html lang="en"> //<html>元素是HTML頁面根元素
//lang屬性：宣告當前頁面的語言型別，“en"英文，”zh“中文
  <head>
    <meta charset="utf-8" />//<meta />設定網頁編碼格式位utf-8
    <title>檔案標題</title>//<title>設定檔案標題
</head>
<body>
    ....頁面內容（各種標簽）
</body>
</html>

三.基本標簽

1、div和span

<div>標簽：塊級元素，可用于組合其他HTML元素的容器
div沒有特定的含義，通常用于對檔案結構進行邏輯上的分塊
div的前后會換行

<span>標簽：

行內元素（行內元素），可用作文本的容器
span沒有特點的含義
span的前后不會換行
span示例

 <p>她有一雙 <span style="color:blue">藍色</span> 的眼睛</p>

在這里插入圖片描述

2、文本相關

標題標簽：<h1>-<h6>

<h1 align="center">歡迎光臨我的主頁</h1>
<h2 style="text-align:center;">歡迎光臨我的主頁</h2>
<h3>歡迎光臨我的主頁</h3>
<h4>歡迎光臨我的主頁</h4>
<h5>歡迎光臨我的主頁</h5>
<h6>歡迎光臨我的主頁</h6>

在這里插入圖片描述

段落標簽，換行標簽，label 標簽：

段落標簽：<p align="center/left/right"> 一段文字 </p>
換行標簽：<br> 或者 <br/>

特別提醒：不要在<p>里嵌套塊級元素，如嵌套p或div

<label> 標簽：
<label for="…"> 標簽文字 </label>

for屬性：系結一個控制元件id值，當用戶點擊label標簽內文本，就會將焦點
切換到系結的控制元件上，

<label for="username">用戶名</label>
<input type="text" id="username" />

點擊"用戶名"時，文本框將獲得焦點

在這里插入圖片描述

嵌套寫法：嵌套時可省略 for 屬性

<label> 用戶名<input type="text" /> </label>

格式標簽：部分
粗體：<b> 斜體：<i> 下劃線：<u> 洗掉線：<strike>
下標：<sub> 上標：<sup>
小號字：<small> 大號字：<big>
強調(加粗)：<strong> 強調(斜體)：<em>
突出顯示(黃色背景)：<mark>

<p><b><i> <u>歡迎光臨</u> </i></b></p>
<p>X<sup>2</sup></p>
<p><big>big文字</big></p>
<p><small>small文字</small></p>
<strong>強調的內容(粗體,語氣更強)</strong> <br>
<em>強調的內容(斜體)</em> <br>
<mark>突出顯示</mark>

運行截圖：
在這里插入圖片描述
**HTML注釋： **

3.圖片

<img src="url"width="寬度值" height="高度值"alt="說明" />

無法載入影像時顯示alt資訊
寬度值和高度值單位是像素點px

<img src="https://s3.pstatp.com/toutiao/static/img/logo.271e845.png" alt="今日
頭條" height="50px" width="200px">

運行截圖：

在這里插入圖片描述
4. 超鏈接
超鏈接標簽： <a href="url"> 鏈接文字 </a>
<a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面，

<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標，

<a href="http://www.wust.edu.cn" target="_blank" >武漢科技大學</a>

target="_blank"新開視窗打開頁面

運行截圖：

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200930082855696.png#pic_center

超鏈接的 URL，可能的值：

絕對 URL - 指向另一個站點（比如 href=“http://www.example.com/index.htm”）
相對 URL - 指向站點內的某個檔案（href=“index.htm”）
錨 URL - 指向頁面中的錨（href="#top"）
5、串列
無序串列ul

<ul>
    <li><a href="http://www.wust.edu.cn">武漢科技大學</a></li>
    <li><a href="http://www.hust.edu.cn">華中科技大學</a></li>
    <li><a href="http://www.whu.edu.cn">武漢大學</a></li>
</ul>

運行截圖：
在這里插入圖片描述

有序串列ol

默認序號從1開始

<ol start="100">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>

運行截圖：
在這里插入圖片描述

6.HTML表格
border邊框厚度，width/height表格寬度/高度
rowspan="2"表格單元橫跨兩行的表格：
colspan="2"表格單元橫跨兩列的表格

<table border="1" width="值"height="=值">
    <caption>
        <!--表格標題-->
    </caption>
    <tr>
        <th> </th> <th> </th><!--表頭行-->
    </tr>
    <tr>
        <td> </td> <td> </td><!--資料行-->
    </tr>
</table>

表格示例

<table border=1 width=600>
<caption>學生名單</caption>
<tr>
<th>學號</th> <th>姓名</th> <th>院系</th>
</tr>
<tr>
<td>2017001</td> <td>張無忌</td> <td>計算機學院</td>
</tr>
<tr>
<td>2017002</td> <td>令狐沖</td> <td>計算機學院</td>
</tr>
</table>

運行截圖：
在這里插入圖片描述

<table border=1 width=600>
    <caption>專業設定表及在校人數表</caption>
    <tr>
        <th>錄名</th> <th  colspan="4">專業人數</th>
    </tr>
    <tr>
    <th rowspan="6">計算機學院</th>
     <th colspan="4">計算機科學技術專業</th>
    </tr>
     <tr>
    <th>16級</th><th>17級</th><th>18級</th>
    <th>19級</th>
     </tr>
     <tr>
       <th>150人</th>       <th>150人</th>       <th>200人</th>       <th>220人</th>
     </tr>
      <tr>
      <th colspan="4">軟體工程專業</th>
      </tr>
     <tr> 
    <th>16級</th><th>17級</th><th>18級</th>
    <th>19級</th>
    </tr>
     <tr>
       <th>80人</th>       <th>80人</th>       <th>90人</th>       <th>90人</th>
     </tr>
     <tr>
    <th rowspan="3">外國語學院</th>
     <th colspan="4">英語專業</th>
    </tr>
      <tr> 
    <th>16級</th><th>17級</th><th>18級</th>
    <th>19級</th>
    </tr>
    <tr>
       <th>60人</th>       <th>80人</th>       <th>90人</th>       <th>90人</th>
     </tr>
</table>

在這里插入圖片描述
四、Form表單

1.表單概念

Form：為用戶輸入創建表單
其中可包含文本框，密碼框，單/復選框，串列框，按鈕，
表單常用于向指定的url提交用戶資料，

Form基本結構
url:提交后跳轉的頁面
get或post 傳送資料的方法
form元素是塊級元素，其前后會產生換行

Form基本結構

<html>
<body>
<form action="URL" method="get或post">
表單元素
…
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>
</body>
</html>

<form action="url頁面" method="get" >
用戶名：<input type="text" name="username"> <br/>
密 碼：<input type="password" name="psd" maxlength=6>
<br/>
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>

運行截圖：在這里插入圖片描述
get方法提交資料會在地址欄中顯示
get方法：跳轉頁面后用用問號"?“連接請求串
多個值(name)之間用單個”&"連接

2. Form常用元素

2.1 文本框和密碼框

 用戶名：<input type="text" name="username" value="lzm" title="提示資訊" autofocus> <br />
 密 碼：<input type="password" name="psd" maxlength="8"  placeholder="長度8個字符">

value設定初始值，
maxlength=“8” ,輸入的最大長度
placeholder=“長度8個字符”,占位提示(輸入時消失)
獲得焦點autofocus,autofocus="autofocus"簡寫

其他屬性：

只讀屬性：readonly=“readonly”
禁用屬性：disabled=“disabled”
自動填充屬性：autocomplete=“on” (配合提交按鈕)

2.2隱藏域
隱藏于在頁面中對用戶是不可見的，
目的：
收集資訊以利于表單處理
程式使用，
提交資料時，有name值的隱藏域或其value值會一并提交

2.3單選框

<form>
性別：
<label>
<input type="radio" name="sex" value="male" checked="checked"> 男
</label>
<label>
<input type="radio" name="sex" value="female"> 女
</label>
</form>

在這里插入圖片描述

套一個label的好處：點擊選項文字也可以選中
name值相同才能互斥
value=“male”，提交的實際值
checked=“checked”，設定為選中狀態

2.4復選框

復選框使用相同的name值主要是為取值方便

<form>
愛好：
<label>
<input type="checkbox" name="like" value="football">足球
</label>
<label>
<input type="checkbox" name="like" value="basketball">籃球
</label>
</form>

在這里插入圖片描述
2.5 串列框

<select id或name="名稱" size=可見行數>
<option value="值1" >內容1</option>
…
<option value="值n" >內容n</option>
</select>

單選下拉串列示例：

增加 selected=“selected” 指定默認選中項

<form>
專業：
<select name="major">
<option value="0">計算機科學與技術</option>
<option value="1" selected="selected" >軟體工程</option>
<option value="2">網路工程</option>
</select>
</form>

在這里插入圖片描述

多選串列框示例：
size=1 為下拉串列框(默認下拉串列框)
size>1 為串列框
multiple="multiple"多選（配合ctrl或shift鍵）

<form>
專業特長：<br/>
<select name="master" size=4 multiple="multiple">
<option value= "0" >.NET編程</option>
<option value= "1" >J2EE編程</option>
<option value= "2" >Java編程</option>
<option value= "3" >Android編程</option>
<option value= "4" >C語言編程</option>
</select>
</form>

在這里插入圖片描述

2.6. 檔案域

<form >
附件：<input type="file" name="myfile" accept="檔案型別">
</form>

在這里插入圖片描述

檔案型別值
預設所有檔案
image/* 影像檔案
audio/* 聲音檔案
video/* 視頻檔案
MIME_type 某個有效MIME型別，不帶引數

2.7 文本區域

<form>
簡歷：<br/>
<textarea name="intro" cols="50" rows="10">請填寫個人簡歷</textarea>
</form>

在這里插入圖片描述

2.8 提交和重置按鈕
submit按鈕與form的action屬性自動系結

<input type="submit" value="提交">
<input type="reset" value="重填">

2.9 一般按鈕
onclick事件屬性
JavaScript代碼："alert(‘你點擊了按鈕’) "

<input type="button" value="確定" onclick="alert('你點擊了按鈕') " >

在這里插入圖片描述
2.10 Button按鈕

<button type="button"> button一般按鈕 </button>
<button type="submit"> button提交按鈕 </button>
<button type="submit"> <img src="images/1.gif"> </button>
<button type="reset"> button重填按鈕 </button>

在這里插入圖片描述
2.11 日期域

<form>
<input type="date" name="mydate">
</form>

在這里插入圖片描述

2.12 區間域

<form>
成績<input type="range" min="0.0" max="100.0" step="0.5" value="60.0"
id="score" name="score" >
<span id="msg"></span>
<input type="submit" value="提交">
</form>

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/149971.html

標籤：其他

上一篇：一般公司網站的制作流程

下一篇：LeetCode | 145. Binary Tree Postorder Traversal