純JavaScript下拉框元素是否選中及設置樣式

1）純JavaScript下拉框元素是否選中

（2）設置樣式

、表單：

網頁僅有表單才能接收用戶輸入信息、并將信息提交到服務器進行處理。

表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分：表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

二、制作規范的表單

一系列的表單對象

提交按鈕:<input type="submit" value="提交" name="sum" />

</form>

注意：表單必須要有提交按鈕,作用:當點擊提交鈕時，會自動將表單中的數據提交到表單action屬性所指定的地址進行處理.

三、定義表單對象

1.使用input標簽定義表單對象

1.1 type的類型:

text(文本框)、password(密碼框)、checkbox(復選框)、radio(單選按鈕)

submit(提交按鈕)、reset(重置按鈕)、file(文件域)、button(按鈕)、

image(圖片域：具備提交按鈕)、hidden(隱藏域)、

date(日期控件:html5新增的)、number(數字調節器:html新增的)

2.使用select標簽定義下拉列表

....

</select>

3.使用textarea定義文本域:

<textarea cols="80" rows="8">請輸入內容</textarea>

四、常用表單對象的屬性

1.文本框:

2.設置單選框和復選框的默認選中

checked="checked"屬性

3.使用selected屬性設置下拉列表的選中項

來自網絡

五、css(Cascading style sheet):級聯（層疊）樣式表。

1.作用：修飾html標簽

2.優勢：

內容與表現分離；

網頁的表現統一，容易修改；

豐富的樣式，使得頁面布局更加靈活；

減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡帶寬；

運用獨立于頁面的CSS，有利于網頁被搜索引擎收錄。

六、在html文檔添加css樣式的方法。

1.行內樣式：使用標簽的style屬性添加樣式

<標簽 style="一系列的樣式規則">

樣式規則的格式:樣式屬性:樣式屬性值;

2.內部樣式:使用style標簽定義樣式

一系的樣式選擇器(選擇器必需先定義，后引用)

</style>

注意：通常情況style標簽放在head標簽中。

2.1基本選擇器分類：類選擇器、Id選擇器、標簽選擇器

2.2使用類選擇器

定義類選擇器

.類選擇器名{一系列樣式}

引用類選擇器:使用標簽的class屬性引用類選擇器名稱

2.3使用Id選擇器

定義id選擇器

#id選擇器名{一系列樣式規則}

引用ID選擇器:使用標簽的ID屬性引用ID選擇器名稱

2.4定義標簽選擇器

標簽名稱{一系列樣式規則}

引用標簽選擇器:當使用該標簽時自動套動標簽樣式

3.外部樣式:

外部樣式是將一系列樣式選擇器定義在外部樣式文件（**.css）中

3.1在網頁使用link標簽引用外部樣式文件

七、樣式優先級（就近原則）

行內樣式>內部樣式>外部樣式

id選擇器>類選擇器>標簽選擇器

八、高級選擇器(復合選擇器)

1.層選選擇器

1.1后代選擇器

定義后代選擇器

選擇器1 選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在層次關系

1.2子選擇器

定義子選擇器

選擇器1>選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在父子關系

1.3相鄰兄弟選擇器

定義相鄰兄弟選擇器

選擇器1+選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰的

1.4通用相鄰兄弟選擇器

定義通用相鄰兄弟選擇器

選擇器1~選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰之后的所有兄弟

2.交集選擇器

定義交集選擇器

標簽選擇器類選擇器|id選擇器

使用：使用標簽的同時還引用類或者id選擇器

3.并集選擇器

定義并集選擇器

選擇器1,選擇器2

使用：使用選擇器1 或者選擇器2 都行

九、span標簽

文本標簽，由內容決定自身大小。

級元素與內聯元素的概念與區別

在HTML中，大多數元素都被定義為塊級元素或內聯元素。

塊級元素通常會獨立成行，而內聯元素會并排顯示。

在我們學過的元素中，

塊級元素如：<h> <p> <table>這些。

內聯元素如<td><a><img>

下面我們通過練習來直觀看看他們的區別。

塊級元素展示，代碼如下：

<body>
  <h1>第一個網頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級元素與內聯元素</p>
  <p>零基礎自學網頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內聯元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰斗機</a>
<img src="img/戰斗機/image3.jpg" width = "200px"/>

效果如圖：

其中，<img>標簽中的width屬性規定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對圖片的寬或高進行數值指定，那么未指定的數值會隨著指定數值進行等比例縮放！

熟知html元素是塊級還是內聯對以后進行頁面布局有一定的指導意義。

<div>與<span>標簽

為了方便開發者對頁面內容進行布局和調整，html開發者為html加入了專門的區塊元素<div></div>。

<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。

比如這個！

筆者第一個漫畫作品

如果拋開畫面內容，我們看到的是一堆對畫面進行分割的方格子。像這樣

<div></div>元素的作用就是對頁面進行了這樣的分割。

實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：

強制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區域的。

通過給<div>標簽設置不同的id屬性，可以在css文件中對不同<div>區塊中的所有信息進行統一調整樣式的操作。

這是對塊級元素整體改變樣式的方法。

但是，如果我們想對一個塊級元素中的不同文字或圖片這些內聯元素進行單獨操作怎么做呢？

html開發者為我們提供了<span></span>這樣的內聯標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：

通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。

今天的內容結束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

在線咨詢

上一篇：如何零基礎學習VBA—HTMLDOMTextNode對象
下一篇：HTML表格制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

純JavaScript下拉框元素是否選中及設置樣式

級元素與內聯元素的概念與區別

HTML完整學習目錄

您的項目需求