1. 程式人生 > >HTML基礎:

HTML基礎:

兩個 註釋 eth alt Language sta 屬性設置 水平分隔 get

HTML是英文HyperText Markup Language的縮寫,即超級文本標記語言,是用於描述網頁文檔的一種標記語言。
HTMl是目前網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。
HTML的註釋方法 :<!-- html註釋 -->
CSS的註釋方法:/* css註釋*/
JS的註釋方法:// js的單行註釋方式 /* js的多行註釋方式*/

一. HTML概述

<!DOCTYPE html>
<html>
  <head>
  <title></title>
  <meta charset="utf-8">
</head>
<body>

<h1>標題標簽</h1>
<h2>加粗換行</h2>
<h3>字號大小改變</h3>
<h4>我是越來越小的</h4>
<h5>我是越來越小的</h5>
<h6>我是越來越小的</h6>

</body>
</html>

二. HTML頁面標簽

標題是通過 <h1>-<h6> ,自帶換行

這些元素實現的效果都是可以疊加的。

空格:不換行單個空格 &nbsp;,兩個普通空格的寬度 &ensp;四個普通空格的寬度 &emsp;
換行標記<br/>,文檔中插入一個簡單的換行符,標記後的內容會換至下一行編輯。
水平分隔線標記<hr/>,標簽在 HTML 頁面中創建一條水平線。
段落標記標記<p>...</p>,在標記對中的內容會顯示在一個段落裏。利用此標記可以對網頁中的文字進行段落的結構定義,但不能進行段落格式的定義。
加粗標記<b>...</b>,瀏覽器將包含其中的文本加粗顯示。
強調加粗<strong>...</strong>,瀏覽器把其中的文本用於強調文本,但它強調的程度更強一些。
下劃線標記<u>...</u>,瀏覽器將包含其中的文本添加下劃線。
斜體標記<i>...</i>,瀏覽器將包含其中的文本以斜體字或者傾斜字體顯示。
強調斜體標記<em>...</em>,瀏覽器把其中的文本表示為強調的內容。
刪除線標記<del>...</del>,瀏覽器將定義文檔中已被刪除的文本。
下標標記<sub>...</sub>,標記對中的內容將會以當前文本流中字符高度的一半來顯示,但是與當9.前文本流中文字的字體和字號都是一樣的

三. HTML列表


1. 有序列表 ol

<ol type=" " start=" "> #type可選擇 1,,a,,A,,i,,I,,
<li>列表內容</li>
<li>列表內容</li>
</ol>

2.無序列表,ul標記符也包含一個常用的

<ul type="square"> #type屬性有,disc實心圓點,,circle空心圓圈,,square方形
<li>列表內容</li>
<li>列表知識</li>
<li>列表介紹</li>
</ul>

3.自定義列表 以<dl>標記開始,列表的解釋以<dd>開始,列表項目以<dt>開始,。<dd>標記只能用在<dl>標記中使用

<dl>
<dd>列表解釋</dd>
<dt>列表項目列表項目</dt>
<dt>列表項目列表項目</dt>
</dl>

四. HTML超鏈接

<a href="url" target="target-windows">鏈接標題</a>
target屬性指定用於打開鏈接的目標窗口,默認原窗口,可選blank 在新窗口打開。。

1、內部鏈接

將href屬性的URL值設置為相對路徑,即可。

2、外部鏈接

鏈接到網站外部的文件,將href屬性設置為絕對路徑 即可。<a href="https://www.baidu.com/" target="_blank">點擊去百度</a>

3、書簽鏈接 在兩個a標簽形成的鏈接,目標位置a的 href為空 有個name=“ ”屬性,觸發位置的a中href=“name值”,,這就ok了

觸發點: <a href="#a1" >跳到第一塊</a>
<br/>
目標位置:<a href="" name="a1">第一塊</a>

五. HTML圖片標簽

<img src="url" alt="替代文" width="value" height="value" border=“” title=“”/>

#src屬性為必須屬性,其他屬性為可選項。title:鼠標移上時顯示的說明文。

<img>標記並不是在網頁中插入圖像,而是從網頁上鏈接顯示一幅圖像。也可以使CSS設置某元素的背景圖像。

例如:<img src="./58e6e7f6N3407445f.jpg" alt="華為p10" border="5" title="華為p10">

六. HTML Form表單

<form name="formName" method="post/get" action="url" > 內容包括下面的所有input項 </form>

其中:name表單名稱,,method表單發送方式,,action表單處理程序提交地址。。

<input type="控件類型" name="控件名稱"/>

其中:type屬性設置控件的類型,可以是text文本框、password密碼框、button標準按鈕、checkBox復選框、radio單選按鈕、file文件筐、reset重置按鈕、image圖像域、submit提交按鈕等。

<form method="post" action="index.php">

文本框: <input type="text" name="username" placeholder="請輸入…" minlennght="6" maxlength="12" readonly/> <br/> #最後的也可disabled
密碼框: <input type="password" name="pass" placeholder="請輸入密碼!"/> <br/>
普通按鈕: <input type="button" value="普通按鈕"> <br/>
復選框: 籃球<input type="checkbox">足球<input type="checkbox">乒乓球<input type="checkbox"> <br/>
單選框: 男<input type="radio" name="ra">女<input type="radio" name="ra"> <br/> <!--name的名稱相同才能夠有單選的效果-->
文件框: <input type="file" name="file" /> <br/>
重置按鈕: <input type="reset" value="重置"> <br/>
圖像框: <input type="image" src="./image/forget.gif" width="" height=""> <br/>
提交按鈕: <input type="submit" value="註冊">

下拉列表框:<select>

<option>北京</option> #列表項標記
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
</select> <br/>

文本域:<br/> <textarea rows="5" cols="10"> </textarea>

</form>

******** ps輸入框提示信息除了密碼都可以用value,密碼框要用placeholder

HTML基礎: