1. 談?wù)勀銓?duì)html標(biāo)簽, 元素與屬性的理解, 并舉例說明1.HTML標(biāo)簽是由一對(duì)尖括號(hào)<>組成的。標(biāo)簽其分為“起始標(biāo)簽”和“結(jié)束標(biāo)簽”，前標(biāo)簽為<>，結(jié)束標(biāo)簽為>結(jié)束標(biāo)簽多了一個(gè)斜杠“/”。舉例所示，

• 為起始標(biāo)簽，

為結(jié)束標(biāo)簽

2.元素是有多個(gè)標(biāo)簽組成的，“起始標(biāo)簽”表示元素的開始，“結(jié)束標(biāo)簽”表示元素的結(jié)束，元素分為塊元素和行元素，

2.1 塊元素舉例如下：

實(shí)例

塊元素

塊元素

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

2.2 行元素舉例如下：

實(shí)例

行元素?一行

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

3.屬性提供了對(duì)HTML元素的描述和控制信息，對(duì)網(wǎng)頁進(jìn)行字體顏色等渲染，是網(wǎng)頁充滿更多色彩

實(shí)例

屬性

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

2. 列表有幾種, 如何定義?

HTML列表有三種

1.無序列表 (在網(wǎng)頁中定義一個(gè)無序的列表，需要自定義序列號(hào)，如果想實(shí)現(xiàn)1.2..3排序)

實(shí)例

• 1.小牛
• 2.大牛
• 3.老牛

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

2.有序列表(在網(wǎng)頁中定義一個(gè)有序的列表，不需要自定義，就會(huì)自動(dòng)實(shí)現(xiàn)1.2.3排序，大多數(shù)開發(fā)不會(huì)用到此列表)

實(shí)例

小牛

大牛

老牛

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

3.自定義列表(定義列表。

標(biāo)簽定義的題目。

標(biāo)簽是術(shù)語的解釋。一個(gè) 和

，)

實(shí)例

自定義列表

項(xiàng)目?jī)?nèi)容

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

3. 列表與表格的區(qū)別與聯(lián)系?什么時(shí)候用列表,什么時(shí)候用表格, 為什么?列表大多數(shù)用于少量的情況下，例如一列情況下

表格用于多數(shù)行或者列的情況下

對(duì)于多列且每一行之間有關(guān)聯(lián)的數(shù)據(jù)，適合用表格組織

4. 編程實(shí)現(xiàn),用列表制作你的工作計(jì)劃,要求使用三種類型全部實(shí)現(xiàn)一次:

實(shí)例

• 1.學(xué)會(huì)前端
• 2.學(xué)會(huì)php編程
• 3.學(xué)會(huì)總和實(shí)戰(zhàn)開發(fā)與分析解決問題

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

學(xué)會(huì)前端

學(xué)會(huì)php編程

學(xué)會(huì)總和實(shí)戰(zhàn)開發(fā)與分析解決問題

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

學(xué)會(huì)前端

一個(gè)月時(shí)間學(xué)會(huì)html前端結(jié)構(gòu)與寫法實(shí)現(xiàn)開發(fā)一個(gè)前端

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

5. 編程實(shí)現(xiàn)一張商品清單, 使用表格實(shí)現(xiàn),要求有行與列的合并,用到colspan, rowspan

實(shí)例

html>

表格

編號(hào)型號(hào)顏色大小數(shù)量單價(jià)金額

1iphone?x白色64G1550055002iphone?xs1650065003iphone?xs?max285008500合計(jì):420500

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

6. 編程實(shí)一張注冊(cè)表單, 要求使用到課堂上講到全部控件,并掌握所有屬性的使用場(chǎng)景與意義

實(shí)例

html>

Document

登陸

賬號(hào)：

郵箱：

密碼：

年齡

開發(fā)課程

請(qǐng)選擇

HTML5

CSS3

JavaScript

Php

Mysql

Laravel

愛好：

玩游戲

擼代碼

看電影

性別：

男生

女生

保密

注冊(cè)

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

7. 寫出總結(jié), 對(duì)于這些常用標(biāo)簽的應(yīng)用場(chǎng)景進(jìn)行分析

總結(jié)：感覺web前端標(biāo)簽太多了。也記不住，有什么好的方法記住嗎，還是熟能生巧，按照課堂上的，大概看下才能寫出來。而且容易混淆。

HTML文件由

和三部分組成，只有中內(nèi)容在網(wǎng)頁上顯示。：指定整個(gè)網(wǎng)頁的標(biāo)題，在瀏覽器最上方顯示。：主體標(biāo)簽，定義HTML文檔所要顯示的內(nèi)容。

元素分為塊級(jí)元素和行元素。超鏈接標(biāo)簽，href：目標(biāo)URL，即要跳轉(zhuǎn)的頁面URL。target：告訴瀏覽器用什么方式打開目標(biāo)頁面，target屬性如下：_blank新窗口打開，_self:在同一個(gè)頁面中顯示。JavaScript是前端唯一的腳本編程語言, 得到了所有瀏覽器的支持，JavaScript可以控制頁面元素的顯示與行業(yè), 使頁面具有交互性,提升用戶體驗(yàn)，HTML是超文本標(biāo)記語言，HTTP超文本傳輸協(xié)議，標(biāo)題標(biāo)簽

...

水平線段落表格框表格行表格列 表格標(biāo)題列(將tr中的td替換為th)，th默認(rèn)加粗且在單元格居中顯示。

form表單使用

action：表單需要提交的服務(wù)器地址

method：表單提交數(shù)據(jù)使用的方法，get/post

>>>get和post的區(qū)別

① get傳參使用URL傳遞，所有參數(shù)在地址欄可見，不安全；get傳參數(shù)據(jù)量有限。

② post傳參使用http請(qǐng)求傳遞，比較安全；post可以傳遞大量數(shù)據(jù)。

但是，get請(qǐng)求的傳輸速率比post快。

input的常用屬性

① type：設(shè)置input的輸入類型

② name：給input輸入框命名。一般情況下，name屬性必不可少。因?yàn)?#xff0c;傳遞數(shù)據(jù)時(shí)，使用name=value(輸入內(nèi)容)的形式傳遞。

③ value：input輸入框的默認(rèn)值

④ placeholder：輸入框的提示內(nèi)容。當(dāng)input有默認(rèn)的value或輸入值時(shí)，placeholder消失

下拉選擇控件 select

寫法：

option可以有N多個(gè)

option常用屬性：

value="":當(dāng)option沒有value屬性時(shí)，往后臺(tái)傳遞的是標(biāo)簽中的文字；

當(dāng)option有value屬性時(shí)，往后臺(tái)傳遞的是value屬性的值。

title="":鼠標(biāo)指上后顯示的文字。

selected="selected":默認(rèn)選中。

:用于將option標(biāo)簽進(jìn)行分組，label屬性表示分組名。

總結(jié)

以上是生活随笔為你收集整理的html设计的概念,HTML标签, 元素与列表，前端UI设计-2019.08.30的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。