HTML+CSS CSS3 特殊的“邊線”outline

utline與border的異同：

邊框的設(shè)定在web設(shè)計(jì)中使用率非常的高，border:1px solid #00f;屬于標(biāo)準(zhǔn)的邊線寫法，也可以實(shí)現(xiàn)單方向邊線border-left:1px solid red;

1px red solid邊線

（單邊線）左邊線

在CSS標(biāo)準(zhǔn)盒模型中，邊線border是計(jì)算在容器總寬度和高度之中的，

總寬高是102*102

瀏覽器中呈現(xiàn)的總寬度和總高度102*102

但隨著web布局要求越來越高，自適應(yīng)布局應(yīng)用逐漸廣泛，橫向排布四個(gè)div 各占據(jù)四分之一的寬度，但如果某一個(gè)要有邊線border修飾，因?yàn)閎order是占據(jù)寬度的，最終會(huì)導(dǎo)致最后一個(gè)元素掉下來，因?yàn)閷?shí)際寬度大于了總寬度。

各占據(jù)四分之一的寬度

第四個(gè)元素掉了下來

outline可以實(shí)現(xiàn)和border相同的效果，標(biāo)準(zhǔn)語法也基本相同(outline:1px solid red)，也支持outline-style，outline-width，outline-color等分散屬性。

但是outline不占位，不會(huì)增加元素的寬高。

outline使用，總寬高不變還是100*100

outline標(biāo)準(zhǔn)寫法

outline缺點(diǎn)：

①不支持圓角 outline-radius:3px;

②不支持單方向outline。

不支持部分屬性

outline在文本框中的作用：

默認(rèn)的文本框input[type="text"]獲取光標(biāo)時(shí)會(huì)有邊線高亮。

文本框高亮獲取光標(biāo)（新版本之前是藍(lán)色邊線）

實(shí)際上高亮的部分為outline在起作用

.text:focus{outline: 3px solid #00f;}

使用outline:none，可以去除默認(rèn)文本框獲取光標(biāo)時(shí)出現(xiàn)的邊線

outline：none

.outline{
		/*標(biāo)準(zhǔn)寫法*/
		outline:1px solid red;
		/*單方向邊線*/
		outline-left:4px solid #000; 
	}
	.outline:focus{
		/*去除默認(rèn)邊線*/
		outline: none;
	}

outline作為一個(gè)特殊的屬性存在，在特殊的場(chǎng)景中會(huì)產(chǎn)生很棒的效果，靈活使用才能發(fā)揮出最大作用。

天小編總結(jié)一下和單元格邊線相關(guān)的技巧，個(gè)個(gè)非常實(shí)用。

1、最適合列寬

選取表格所有列，雙擊任一列的邊線就會(huì)自動(dòng)調(diào)整為最適合的列寬

2、調(diào)整為固定列寬

選取表格所有列，調(diào)整任一列，所有列的列寬也會(huì)調(diào)整為同樣大小。

3、兩列互換。

按shift不松，拖動(dòng)表格邊線，可以快速讓兩列互換。

4、快速插入空行

按shift不松，拖動(dòng)行號(hào)右下角，可以快速插入空行。

5、設(shè)置立體界面

左上粗深邊線右下淺或白邊線，可以讓界面向外突出，反之而可以產(chǎn)生凹陷效果。

6、設(shè)置細(xì)邊線

表格設(shè)置成虛線，打印出來的是超細(xì)表格線。

本文來源于互聯(lián)網(wǎng)，版權(quán)歸原作者所有。如有侵權(quán)，請(qǐng)聯(lián)系我們刪除。

當(dāng)能力還不足以撐起夢(mèng)想那就跟我們

一起來學(xué)習(xí)吧

了解課程從試聽開始！

關(guān)注微信公眾號(hào)shhengqi 回復(fù)“會(huì)計(jì)+姓名+手機(jī)號(hào)碼”即可

你可以先測(cè)試下你適不適合從事會(huì)計(jì)工作

http://m.hengqijy.com/Test.html?hqtg_gyh-mt_hqtg

TML基礎(chǔ)知識(shí)

學(xué)習(xí)目標(biāo)

能夠知道html的作用
能夠?qū)懗鰄tml的基本結(jié)構(gòu)
能夠知道單標(biāo)簽和雙標(biāo)簽的區(qū)別
知道相對(duì)路徑和絕對(duì)路徑的區(qū)別
掌握標(biāo)簽的種類
了解表格的邊線合并
了解表單中常用的表單元素標(biāo)簽
了解表單的提交方式
了解表單中action屬性的作用

一、HTML的介紹

1. 網(wǎng)頁效果圖 -- 百度

2. html的定義

HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標(biāo)記語言。

標(biāo)記：就是標(biāo)簽, <標(biāo)簽名稱> </標(biāo)簽名稱>, 比如: <html></html>、<h1></h1>等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。

所謂超文本，有兩層含義:

因?yàn)榫W(wǎng)頁中還可以圖片、視頻、音頻等內(nèi)容(超越文本限制)
它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，與世界各地主機(jī)的網(wǎng)頁鏈接(超鏈接文本)

3. html的作用

html是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言。

二、html 的基本結(jié)構(gòu)

1. 結(jié)構(gòu)代碼

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>網(wǎng)頁標(biāo)題</title>
    </head>
    <body>
          網(wǎng)頁顯示內(nèi)容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明, 用來指定頁面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔。
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器，整個(gè)網(wǎng)頁是從<html>這里開始的，到</html>結(jié)束,也就是html文檔的開始和結(jié)束標(biāo)簽。
<head>...</head>標(biāo)簽用于定義文檔的頭部,是負(fù)責(zé)對(duì)網(wǎng)頁進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的。
<body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容。

2. 瀏覽網(wǎng)頁文件

網(wǎng)頁文件的后綴是.html或者.htm, 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁。

3. 小結(jié)

三、初始常用的 html 標(biāo)簽

1. 常用的 html 標(biāo)簽

<!-- 1、成對(duì)出現(xiàn)的標(biāo)簽：-->

<h1>h1標(biāo)題</h1>
<div>這是一個(gè)div標(biāo)簽</div>
<p>這個(gè)一個(gè)段落標(biāo)簽</p>


<!-- 2、單個(gè)出現(xiàn)的標(biāo)簽： -->
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>

<!-- 3、帶屬性的標(biāo)簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網(wǎng)</a>

<!-- 4、標(biāo)簽的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="圖片">
    <a href="http://www.baidu.com">百度網(wǎng)</a>
</div>

提示:

標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫。
根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒有標(biāo)簽內(nèi)容，比如: img標(biāo)簽

2.標(biāo)簽列表

標(biāo)簽	描述
<!--...-->	定義注釋
<!DOCTYPE>	定義文檔類型
<a>	定義超文本鏈接
<abbr>	定義縮寫
<acronym>	定義只取首字母的縮寫，不支持HTML5
<address>	定義文檔作者或擁有者的聯(lián)系信息
<applet>	HTML5中不贊成使用。定義嵌入的 applet。
<area>	定義圖像映射內(nèi)部的區(qū)域
<article>	定義一個(gè)文章區(qū)域
<aside>	定義頁面的側(cè)邊欄內(nèi)容
<audio>	定義音頻內(nèi)容
<b>	定義文本粗體
<base>	定義頁面中所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)。
<basefont>	HTML5不支持，不贊成使用。定義頁面中文本的默認(rèn)字體、顏色或尺寸。
<bdi>	允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。
<bdo>	定義文字方向
<big>	定義大號(hào)文本，HTML5不支持
<blockquote>	定義長(zhǎng)的引用
<body>	定義文檔的主體
<br>	定義換行
<button>	定義一個(gè)點(diǎn)擊按鈕
<canvas>	定義圖形，比如圖表和其他圖像,標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形
<caption>	定義表格標(biāo)題
<center>	HTML5不支持，不贊成使用。定義居中文本。
<cite>	定義引用(citation)
<code>	定義計(jì)算機(jī)代碼文本
<col>	定義表格中一個(gè)或多個(gè)列的屬性值
<colgroup>	定義表格中供格式化的列組
<command>	定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕
<datalist>	定義選項(xiàng)列表。請(qǐng)與 input 元素配合使用該元素，來定義 input 可能的值。
<dd>	定義定義列表中項(xiàng)目的描述
<del>	定義被刪除文本
<details>	用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)
<dfn>	定義定義項(xiàng)目
<dialog>	定義對(duì)話框，比如提示框
<dir>	HTML5不支持，不贊成使用。定義目錄列表。
<div>	定義文檔中的節(jié)
<dl>	定義列表詳情
<dt>	定義列表中的項(xiàng)目
<em>	定義強(qiáng)調(diào)文本
<embed>	定義嵌入的內(nèi)容，比如插件。
<fieldset>	定義圍繞表單中元素的邊框
<figcaption>	定義<figure> 元素的標(biāo)題
<figure>	規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<font>	HTML5不支持，不贊成使用。定義文字的字體、尺寸和顏色。
<footer>	定義 section 或 document 的頁腳。
<form>	定義了HTML文檔的表單
<frame>	定義框架集的窗口或框架
<frameset>	定義框架集
<h1> to <h6>	定義 HTML 標(biāo)題
<head>	定義關(guān)于文檔的信息
<header>	定義了文檔的頭部區(qū)域
<hr>	定義水平線
<html>	定義 HTML 文檔
<i>	定義斜體字
<iframe>	定義內(nèi)聯(lián)框架
<img>	定義圖像
<input>	定義輸入控件
<ins>	定義被插入文本
<kbd>	定義鍵盤文本
<keygen>	規(guī)定用于表單的密鑰對(duì)生成器字段。
<label>	定義 input 元素的標(biāo)注
<legend>	定義 fieldset 元素的標(biāo)題。
<li>	定義列表的項(xiàng)目
<link>	定義文檔與外部資源的關(guān)系
<main>	定義文檔的主體部分。
<map>	定義圖像映射
<mark>	定義帶有記號(hào)的文本。請(qǐng)?jiān)谛枰怀鲲@示文本時(shí)使用 <em> 標(biāo)簽。
<menu>	不贊成使用。定義菜單列表。
<meta>	定義關(guān)于 HTML 文檔的元信息。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義導(dǎo)航鏈接的部分
<noframes>	定義針對(duì)不支持框架的用戶的替代內(nèi)容。HTML5不支持
<noscript>	定義針對(duì)不支持客戶端腳本的用戶的替代內(nèi)容。
<object>	定義內(nèi)嵌對(duì)象
<ol>	定義有序列表。
<optgroup>	定義選擇列表中相關(guān)選項(xiàng)的組合。
<option>	定義選擇列表中的選項(xiàng)。
<output>	定義不同類型的輸出，比如腳本的輸出。
<p>	定義段落。
<param>	定義對(duì)象的參數(shù)。
<pre>	定義預(yù)格式文本。
<progress>	定義運(yùn)行中的進(jìn)度（進(jìn)程）。
<q>	定義短的引用。
<rp>	<rp> 標(biāo)簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。
<rt>	<rt> 標(biāo)簽定義字符（中文注音或字符）的解釋或發(fā)音。
<ruby>	<ruby> 標(biāo)簽定義 ruby 注釋（中文注音或字符）。
<s>	不贊成使用。定義加刪除線的文本。
<samp>	定義計(jì)算機(jī)代碼樣本。
<script>	定義客戶端腳本。
<section>	<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
<select>	定義選擇列表（下拉列表）。
<small>	定義小號(hào)文本。
<source>	<source> 標(biāo)簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<span>	定義文檔中的節(jié)。
<strike>	HTML5不支持，不贊成使用。定義加刪除線文本。
<strong>	定義強(qiáng)調(diào)文本。
<style>	定義文檔的樣式信息。
<sub>	定義下標(biāo)文本。
<summary>	<summary> 標(biāo)簽包含 details 元素的標(biāo)題，"details" 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息。
<sup>	定義上標(biāo)文本。
<table>	定義表格。
<tbody>	定義表格中的主體內(nèi)容。
<td>	定義表格中的單元。
<textarea>	定義多行的文本輸入控件。
<tfoot>	定義表格中的表注內(nèi)容（腳注）。
<th>	定義表格中的表頭單元格。
<thead>	定義表格中的表頭內(nèi)容。
<time>	定義日期或時(shí)間，或者兩者。
<template>	定義在頁面加載時(shí)隱藏的一些內(nèi)容。
<title>	定義文檔的標(biāo)題。
<tr>	定義表格中的行。
<track>	<track> 標(biāo)簽為諸如 video 元素之類的媒介規(guī)定外部文本軌道。
<tt>	定義打字機(jī)文本。
<u>	不贊成使用。定義下劃線文本。
<ul>	定義無序列表。
<var>	定義文本的變量部分。
<video>	<video> 標(biāo)簽定義視頻，比如電影片段或其他視頻流。
<wbr>	規(guī)定在文本中的何處適合添加換行符。

3.HTML 屬性

屬性	描述
accesskey	設(shè)置訪問元素的鍵盤快捷鍵。
class	規(guī)定元素的類名（classname）
contenteditable	規(guī)定是否可編輯元素的內(nèi)容。
contextmenu	指定一個(gè)元素的上下文菜單。當(dāng)用戶右擊該元素，出現(xiàn)上下文菜單
data-*	用于存儲(chǔ)頁面的自定義數(shù)據(jù)
dir	設(shè)置元素中內(nèi)容的文本方向。
draggable	指定某個(gè)元素是否可以拖動(dòng)
dropzone	指定是否將數(shù)據(jù)復(fù)制，移動(dòng)，或鏈接，或刪除
hidden	hidden 屬性規(guī)定對(duì)元素進(jìn)行隱藏。
id	規(guī)定元素的唯一 id
lang	設(shè)置元素中內(nèi)容的語言代碼。
spellcheck	檢測(cè)元素是否拼寫錯(cuò)誤
style	規(guī)定元素的行內(nèi)樣式（inline style）
tabindex	設(shè)置元素的 Tab 鍵控制次序。
title	規(guī)定元素的額外信息（可在工具提示中顯示）
translate	指定是否一個(gè)元素的值在頁面載入時(shí)是否需要翻譯

4.小結(jié)

學(xué)習(xí) html 語言就是學(xué)習(xí)標(biāo)簽的用法，常用的標(biāo)簽有20多個(gè)。
編寫 html 標(biāo)簽建議使用小寫
根據(jù)書寫形式，html 標(biāo)簽分為雙標(biāo)簽和單標(biāo)簽
單標(biāo)簽沒有標(biāo)簽內(nèi)容，雙標(biāo)簽可以嵌套其它標(biāo)簽和承載文本內(nèi)容

四、資源路徑

當(dāng)我們使用img標(biāo)簽顯示圖片的時(shí)候，需要指定圖片的資源路徑，比如:

<img src="images/logo.png">

這里的src屬性就是設(shè)置圖片的資源路徑的，資源路徑可以分為相對(duì)路徑和絕對(duì)路徑。

1. 相對(duì)路徑

從當(dāng)前操作 html 的文檔所在目錄算起的路徑叫做相對(duì)路徑

示例代碼:

<!-- 相對(duì)路徑方式1 -->
<img src="./images/logo.png">
<!-- 相對(duì)路徑方式2 -->
<img src="images/logo.png">

2. 絕對(duì)路徑

從根目錄算起的路徑叫做絕對(duì)路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/

示例代碼:

<!-- 絕對(duì)路徑 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都會(huì)使用相對(duì)路徑，絕對(duì)路徑的操作在其它電腦上打開會(huì)有可能出現(xiàn)資源文件找不到的問題

五、列表標(biāo)簽

1. 列表標(biāo)簽的種類

無序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

2. 無序列表

<!-- ul標(biāo)簽定義無序列表 -->
<ul>
    <!-- li標(biāo)簽定義列表項(xiàng)目 -->
    <li>列表標(biāo)題一</li>
    <li>列表標(biāo)題二</li>
    <li>列表標(biāo)題三</li>
</ul>

3. 有序列表

<!-- ol標(biāo)簽定義有序列表 -->
<ol>
    <!-- li標(biāo)簽定義列表項(xiàng)目 -->
    <li><a href="#">列表標(biāo)題一</a></li>
    <li><a href="#">列表標(biāo)題二</a></li>
    <li><a href="#">列表標(biāo)題三</a></li>
</ol>

六、表格標(biāo)簽

1. 表格的結(jié)構(gòu)

表格是由行和列組成，好比一個(gè)excel文件

2. 表格標(biāo)簽

<table>標(biāo)簽：表示一個(gè)表格

<tr>標(biāo)簽：表示表格中的一行

<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

示例代碼:

<table border="1" cellspacing="3">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>18</td> 
    </tr>
</table>

表格邊線合并:

border-collapse 設(shè)置表格的邊線合并，如：border-collapse:collapse;

七、表單標(biāo)簽

1. 表單的介紹

表單用于搜集不同類型的用戶輸入(用戶輸入的數(shù)據(jù))，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器。

2. 表單相關(guān)標(biāo)簽的使用

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域
<label>標(biāo)簽表示表單元素的文字標(biāo)注標(biāo)簽，定義文字標(biāo)注
<input>標(biāo)簽表示表單元素的用戶輸入標(biāo)簽，定義不同類型的用戶輸入數(shù)據(jù)方式
type屬性
type="text" 定義單行文本輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義復(fù)選框
type="file" 定義上傳文件
type="submit" 定義提交按鈕
type="reset" 定義重置按鈕
type="button" 定義一個(gè)普通按鈕
<textarea>標(biāo)簽表示表單元素的多行文本輸入框標(biāo)簽定義多行文本輸入框
<select>標(biāo)簽表示表單元素的下拉列表標(biāo)簽定義下拉列表
<option>標(biāo)簽與<select>標(biāo)簽配合，定義下拉列表中的選項(xiàng)

示例代碼:

<form>
    <p>
        <label>姓名：</label><input type="text">
    </p>
    <p>
        <label>密碼：</label><input type="password">
    </p>
    <p>
        <label>性別：</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file">
    </p>
    <p>
        <label>個(gè)人描述：</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>廣州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

3. 小結(jié)

表單標(biāo)簽是<form>標(biāo)簽
常用的表單元素標(biāo)簽有: <label>、<input>、<textarea> 、 <select>等標(biāo)簽

八、表單提交

1. 表單屬性設(shè)置

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

action屬性設(shè)置表單數(shù)據(jù)提交地址
method屬性設(shè)置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

2. 表單元素屬性設(shè)置

name屬性設(shè)置表單元素的名稱，該名稱是提交數(shù)據(jù)時(shí)的參數(shù)名
value屬性設(shè)置表單元素的值，該值是提交數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

3. 示例代碼

 <form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密碼：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性別：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>個(gè)人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">廣州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

4.小結(jié)

表單標(biāo)簽的作用就是可以把用戶輸入數(shù)據(jù)一起提交到web服務(wù)器。
表單屬性設(shè)置

action: 是設(shè)置表單數(shù)據(jù)提交地址
method: 是表單提交方式，提交方式有GET和POST

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

在線咨詢

上一篇：初學(xué)者可以跳過HTML直接學(xué)HTMl5嗎？
下一篇：DevExpress Demo示例展示：所見即所得的HTML編輯器

您的項(xiàng)目需求

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

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

HTML+CSS CSS3 特殊的“邊線”outline

utline與border的異同：

outline在文本框中的作用：

TML基礎(chǔ)知識(shí)

一、HTML的介紹

1. 網(wǎng)頁效果圖 -- 百度

2. html的定義

3. html的作用

二、html 的基本結(jié)構(gòu)

1. 結(jié)構(gòu)代碼

2. 瀏覽網(wǎng)頁文件

3. 小結(jié)

三、初始常用的 html 標(biāo)簽

1. 常用的 html 標(biāo)簽

2.標(biāo)簽列表

3.HTML 屬性

4.小結(jié)

四、資源路徑

1. 相對(duì)路徑

2. 絕對(duì)路徑

五、列表標(biāo)簽

1. 列表標(biāo)簽的種類

2. 無序列表

3. 有序列表

六、表格標(biāo)簽

1. 表格的結(jié)構(gòu)

2. 表格標(biāo)簽

七、表單標(biāo)簽

1. 表單的介紹

2. 表單相關(guān)標(biāo)簽的使用

3. 小結(jié)

八、表單提交

1. 表單屬性設(shè)置

2. 表單元素屬性設(shè)置

3. 示例代碼

4.小結(jié)

您的項(xiàng)目需求