整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
所謂超文本，有2層含義：
標(biāo)題標(biāo)簽 <hx></hx>
段落標(biāo)簽 <p></p>
水平線標(biāo)簽 <hr />
換行標(biāo)簽 <br/>
無(wú)語(yǔ)義標(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" /> 該語(yǔ)法中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 (鏈接地址)必須寫(xiě) | 用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能 | 1. 外部鏈接 需要添加 http:// www.baidu.com | ||
target (默認(rèn)當(dāng)前窗口打開(kāi),可新建窗口打開(kāi)) | 用于指定鏈接頁(yè)面的打開(kāi)方式，其取值有self和blank兩種，其中_self為默認(rèn)值，__blank為在新窗口中打開(kāi)方式。 |
錨點(diǎn)標(biāo)簽
id="" | 錨點(diǎn)定位 | 通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。 | <h3 id="two">第2集</h3> | 使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 (找目標(biāo)) |
base標(biāo)簽
<base target="_blank" /> | base 可以設(shè)置整體鏈接的打開(kāi)狀態(tài) | base 寫(xiě)到 <head> </head> 之間 |
預(yù)格式化標(biāo)簽
<pre>文本</pre> | 標(biāo)簽可定義預(yù)格式化的文本。 | 所謂的預(yù)格式化文本就是 ，按照我們預(yù)先寫(xiě)好的文字格式來(lái)顯示頁(yè)面， 保留空格和換行等。 |
表格標(biāo)簽
<table> 定義表格標(biāo)簽 | border | 設(shè)置表格邊框(默認(rèn)border="0"無(wú)邊框) | <table> |
cellspacing | 設(shè)置單元格與單元格之間的空白間距 (默認(rèn)2像素) | ||
cellpadding | 設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距 (默認(rèn)1像素) | ||
width | 設(shè)置表格的寬度 | ||
height | 設(shè)置表格的高度 | ||
align | 設(shè)置表格在網(wǎng)頁(yè)中的水平對(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> 于定義表格的頭部。用來(lái)放標(biāo)題之類(lèi)的東西。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！ | 以上標(biāo)簽都是放到table標(biāo)簽中。 | 更好的給表格劃分結(jié)構(gòu) | |
<tbody> 用于定義表格的主體。放數(shù)據(jù)本體 。 | 以上標(biāo)簽都是放到table標(biāo)簽中。 | ||
<tfoot>放表格的腳注之類(lèi)。 | 以上標(biāo)簽都是放到table標(biāo)簽中。 |
列表標(biāo)簽
列表(ul里面只能包含li ,li里面可以包含標(biāo)簽) | <ul><li></li></ul> | 無(wú)序列表 | 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。 | 里面只能包含li 沒(méi)有順序，我們以后布局中最常用的列表 | ||
<ol><li></li></ol> | 有序列表 | 所有特性基本與ul 一致。 但是實(shí)際中比 無(wú)序列表 用的少很多。 | 里面只能包含li 有順序， 使用情況較少 | |||
<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)問(wèn)本值 | 用戶名:<input type="text" name="username" value="請(qǐng)輸入用戶名"> |
size | 正整數(shù) | input控件在頁(yè)面中的顯示寬度 | |
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> | 第二種用法 for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。 | 當(dāng)我們鼠標(biāo)點(diǎn)擊 label標(biāo)簽里面的文字時(shí)， 光標(biāo)會(huì)定位到指定的表單里面 |
文本域
<textarea >文本內(nèi)容</textarea> | 通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框. | cols="每行中的字符數(shù)" rows="顯示的行數(shù)" 我們實(shí)際開(kāi)發(fā)不用 | <textarea > 文本內(nèi)容</textarea> |
select下拉列表
<select> | 在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。 |
form表單域
<form action="url地址" method="提交方式" name="表單名稱"> | action 屬性值:url地址 | 用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。 |
method 屬性值:get/post | 用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。 | |
name 屬性值:名稱 | 用于指定表單的名稱，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單。 |
以上標(biāo)簽基本包含了前端開(kāi)發(fā)所需常用標(biāo)簽.來(lái)自本人,黑馬程序員.傳智播客學(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>登錄頁(yè)面</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）逐漸流行，越來(lái)越多人使用，因?yàn)樗鼘?xiě) CSS 布局真是太方便了。
三年前，我寫(xiě)過(guò) Flexbox 的介紹，但是有些地方寫(xiě)得不清楚。今天，我看到一篇教程，才意識(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)闆](méi)有任何內(nèi)容。
二、表單控件
現(xiàn)在，加入兩個(gè)最常用的表單控件。
上面代碼中，表單包含一個(gè)輸入框（<input>）和一個(gè)按鈕（<button>）。
根據(jù)標(biāo)準(zhǔn)，這兩個(gè)控件都是行內(nèi)塊級(jí)元素（inline-block），也就是說(shuō)，它們默認(rèn)并排在一行上。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
