HTML前端常用標(biāo)簽(復(fù)習(xí))

. HTML 初識(shí)

HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)是用來描述網(wǎng)頁的一種語言。
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

所謂超文本，有2層含義：

因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、多媒體等內(nèi)容（超越文本限制 ）
不僅如此，它還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接（超級(jí)鏈接文本 ）。

標(biāo)題標(biāo)簽       	<hx></hx>     
段落標(biāo)簽     		<p></p>
水平線標(biāo)簽			<hr />
 換行標(biāo)簽       <br/>
 無語義標(biāo)簽    <div></div>   和 <span></span>             注:這兩個(gè)標(biāo)簽在后期經(jīng)常使用

文本格式化標(biāo)簽

<b></b>和<strong></strong>		 文字加粗
<i></i>和<em></em>	               	斜體
<s></s>和<del></del>	            	加刪除線
<u></u>和<ins></ins>		            加下劃線

圖片標(biāo)簽

<img src="圖像URL" />	src  圖像路徑	圖像標(biāo)簽	<img src="圖像URL" />

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)簽的必需屬性。

屬性:

alt 文本,圖像不顯示時(shí)顯示文字<img src="" alt="">

title 文本,鼠標(biāo)懸停時(shí)顯示內(nèi)容<img src="cz.jpg" title="文本" />

width 圖像寬度<img src="cz.jpg" width="300" height="300" />

height 圖像高度<img src="cz.jpg" width="300" height="300" />

border 設(shè)置圖像邊框?qū)挾?lt;img src="cz.jpg" border="3" />

鏈接標(biāo)簽

<a href="#" target="目標(biāo)窗口的彈出方式">文本或圖像</a>

屬性：

href (鏈接地址)必須寫	用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能			1. 外部鏈接需要添加 http:// www.baidu.com 2. 內(nèi)部鏈接直接鏈接內(nèi)部頁面名稱即可比如 < a href="index.html"> 首頁 </a > 3. 如果當(dāng)時(shí)沒有確定鏈接目標(biāo)時(shí)，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接。 4. 不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
target (默認(rèn)當(dāng)前窗口打開,可新建窗口打開)	用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self為默認(rèn)值，__blank為在新窗口中打開方式。

錨點(diǎn)標(biāo)簽

id=""

錨點(diǎn)定位

通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。

使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 (找目標(biāo))

base標(biāo)簽

base 可以設(shè)置整體鏈接的打開狀態(tài)

base 寫到 <head> </head> 之間

預(yù)格式化標(biāo)簽

標(biāo)簽可定義預(yù)格式化的文本。

所謂的預(yù)格式化文本就是，按照我們預(yù)先寫好的文字格式來顯示頁面，保留空格和換行等。

表格標(biāo)簽

<table> 定義表格標(biāo)簽 <tr> 定義表格行 <td></td> 表格數(shù)據(jù) </tr> </table>	border	設(shè)置表格邊框(默認(rèn)border="0"無邊框)	<table> <tr> <td>單元格內(nèi)的文字</td> ... </tr> ... </table>
	cellspacing	設(shè)置單元格與單元格之間的空白間距 (默認(rèn)2像素)
	cellpadding	設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距 (默認(rèn)1像素)
	width	設(shè)置表格的寬度
	height	設(shè)置表格的高度
	align	設(shè)置表格在網(wǎng)頁中的水平對(duì)齊方式 (三個(gè)屬性:left左 center中 right右 )	align="center" align="right"
	caption	caption 元素定義表格標(biāo)題，通常這個(gè)標(biāo)題會(huì)被居中且顯示于表格之上。	<caption>個(gè)人信息表</caption>
	rowspan="合并單元格的個(gè)數(shù)"	跨行合并	合并的順序我們按照先上后下先左后右的順序
	colspan="合并單元格的個(gè)數(shù)"	跨列合并	<td colspan="3"> </td>
	<caption></caption>	表格標(biāo)題標(biāo)簽
	<tr></tr><td></td>	標(biāo)簽，他就像一個(gè)容器，可以容納所有的元素	<tr><td></td></tr>
	<th><td>	一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中	<th><td></td></th>
	<thead> 于定義表格的頭部。用來放標(biāo)題之類的東西。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！	以上標(biāo)簽都是放到table標(biāo)簽中。	更好的給表格劃分結(jié)構(gòu)
	<tbody> 用于定義表格的主體。放數(shù)據(jù)本體。	以上標(biāo)簽都是放到table標(biāo)簽中。
	<tfoot>放表格的腳注之類。	以上標(biāo)簽都是放到table標(biāo)簽中。

列表標(biāo)簽

列表(ul里面只能包含li ,li里面可以包含標(biāo)簽)	<ul><li></li></ul>	無序列表	1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。 2. <li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。 3. 無序列表會(huì)帶有自己樣式屬性，放下那個(gè)樣式，一會(huì)讓CSS來！	里面只能包含li 沒有順序，我們以后布局中最常用的列表
	<ol><li></li></ol>	有序列表	所有特性基本與ul 一致。但是實(shí)際中比無序列表用的少很多。	里面只能包含li 有順序，使用情況較少
	<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> </dl>	自定義列表		里面有2個(gè)兄弟， dt 和 dd

input控件

<input type="屬性值" value="你好">	text	單行文本輸入框
	password	密碼輸入框
	radio	單選按鈕
	checkbox	復(fù)選按鈕
	button	普通按鈕
	submit	提交按鈕
	reset	重置按鈕
	image	圖像形式的提交按鈕
	file	文本域
name	由用戶自定義	控件的名稱	用戶名:<input type="text" name=“username” />
value	由用戶自定義	input控件中的默認(rèn)問本值	用戶名:<input type="text" name="username" value="請(qǐng)輸入用戶名">
size	正整數(shù)	input控件在頁面中的顯示寬度
checked 默認(rèn)被選中	checked	定義選擇控件默認(rèn)被選中的項(xiàng)	<input type="radio" name="sex" value="女" />女
maxlength	正整數(shù)	控件允許輸入的最多字符數(shù)

<label> </label>

<label> 用戶名： <input type="radio" name="usename" value="請(qǐng)輸入用戶名"> </label>	第一種用法就是用label直接包括input表單。		當(dāng)我們鼠標(biāo)點(diǎn)擊 label標(biāo)簽里面的文字時(shí)，光標(biāo)會(huì)定位到指定的表單里面
<label for="sex">男</label> <input type="radio" name="sex" id="sex">	第二種用法 for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。		當(dāng)我們鼠標(biāo)點(diǎn)擊 label標(biāo)簽里面的文字時(shí)，光標(biāo)會(huì)定位到指定的表單里面

文本域

通過textarea控件可以輕松地創(chuàng)建多行文本輸入框.

cols="每行中的字符數(shù)" rows="顯示的行數(shù)" 我們實(shí)際開發(fā)不用

select下拉列表

<select>
<option>選項(xiàng)1</option>
<option>選項(xiàng)2</option>
<option>選項(xiàng)3</option>
...
</select>

在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。

form表單域

<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件 </form>	action 屬性值:url地址	用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
	method 屬性值:get/post	用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。
	name 屬性值:名稱	用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。

以上標(biāo)簽基本包含了前端開發(fā)所需常用標(biāo)簽.來自本人,黑馬程序員.傳智播客學(xué)習(xí)筆記.

以下是個(gè)人筆記整理,需要請(qǐng)關(guān)注私信我.

希望本人筆記能對(duì)各位有所幫助.

前端不難,難的在于東西多和雜.每天努力學(xué)習(xí)一點(diǎn)點(diǎn),不放棄.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號(hào)</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊(cè)" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

彈性布局（Flexbox）逐漸流行，越來越多人使用，因?yàn)樗鼘?CSS 布局真是太方便了。

三年前，我寫過 Flexbox 的介紹，但是有些地方寫得不清楚。今天，我看到一篇教程，才意識(shí)到一個(gè)最簡(jiǎn)單的表單，就可以解釋 Flexbox，而且內(nèi)容還很實(shí)用。

下面，你只需要10分鐘，就可以學(xué)會(huì)簡(jiǎn)單的表單布局。

一、元素

表單使用<form>元素。

上面是一個(gè)空表單。根據(jù) HTML 標(biāo)準(zhǔn)，它是一個(gè)塊級(jí)元素，默認(rèn)將占據(jù)全部寬度，但是高度為0，因?yàn)闆]有任何內(nèi)容。

二、表單控件

現(xiàn)在，加入兩個(gè)最常用的表單控件。

上面代碼中，表單包含一個(gè)輸入框（<input>）和一個(gè)按鈕（<button>）。

根據(jù)標(biāo)準(zhǔn)，這兩個(gè)控件都是行內(nèi)塊級(jí)元素（inline-block），也就是說，它們默認(rèn)并排在一行上。

在線咨詢

上一篇：Web前端開發(fā)基礎(chǔ)知識(shí)，設(shè)置網(wǎng)頁背景圖，如何在網(wǎng)頁中插入圖片
下一篇：第3天 - 16天搞定前端，html基礎(chǔ)標(biāo)簽，一點(diǎn)都不基礎(chǔ)？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML前端常用標(biāo)簽(復(fù)習(xí))

. HTML 初識(shí)

您的項(xiàng)目需求