天天看點

Web自動化要懂的html基礎Html、CSS、JavaScript

Html、CSS、JavaScript

1. HTML是網頁内容的載體

首先了解HTML 是不是門程式設計語言呢? 不是,它是稱為超文本标記語言,是一種辨別性的語言。它包括一系列标簽,标記靜态網頁内容的載體。内容就是頁面上想要讓使用者浏覽的資訊,可以包含文字、圖檔、視訊等。

2. CSS樣式是什麼?

CSS樣式就用來改變網頁外觀的樣式。CSS不僅可以靜态地修飾網頁,還可以配合各種腳本語言動态地對網頁各元素進行格式化。先不用了解太多。

3. JavaScript

JavaScript是不是程式設計語言呢?是的, 是 Web 的程式設計語言,可以用來實作網頁上的特效效果,可以了解為:有動畫的、有動态互動的一般都用JavaScript來實作。

HTML結構

1. 文檔的類型聲明

<!doctype html>

  作用:告訴浏覽器目前使用的HTML版本,以便浏覽器能正确解析HTML标簽和渲染樣式。

2. 文檔的開始和結束

  1. 在文檔類型聲明之後,使用一對标簽标示文檔的開始和結束。
  2. 在HTML标簽中,包含兩對子标簽元素。
    Web自動化要懂的html基礎Html、CSS、JavaScript

标簽标示網頁的頭部資訊,包含網頁的标題,頁籤的圖示,網頁的關鍵字,作者,描述等資訊,還可以引入外部的資源檔案。

  标簽表示網頁的主體資訊,網頁展示的内容。

HTML結構标注:

Web自動化要懂的html基礎Html、CSS、JavaScript

Html的标簽的構成

  1. 标簽名:

    <html></html>

  2. 屬性:

    id,name,class,href,src

  3. 子标簽:

    <head></head><body></body>

  4. Text文本:

    注意:所有HTML的元素的構成部分都可以用來元素定位。

    作用:

    (1)更容易被搜尋引擎了解;

    (2)更容易讓螢幕閱讀器讀出網頁内容;

常用基本标簽

1) 字型标簽:

一共6個級别,預設H1字型大小最大,H6字型大小最小

Web自動化要懂的html基礎Html、CSS、JavaScript

2) 段落标簽:

其中P代表一個段落,br代表換行。

<p>
    死了都要愛<br>
    不淋漓盡緻不痛快<br>
    感情多深隻有這樣才足夠表白<br>
</p>
           
  1. 超連結标簽,經常進行定位:
<div> 
	<a href="http://www.baidu.com" target="_blank" rel="external nofollow" > 進入百度 </a> 
</div>
           

4) 圖檔标簽(img):

需要和src 屬性綁定起來使用,經常和a标簽,可以通過href屬性定位或text文本

說明:圖檔位址可以是本地位址,也可以是網頁位址

<img src="圖檔位址" width="寬度" height="高度" title="圖檔描" />
           

5) a 标簽需要 和 href屬性綁定起來使用。

定位a标簽:可以通過href屬性定位 或text文本

6) Iframe 标簽

<iframe src="http://www.baidu.com"></iframe>
           

7) Input标簽

Type類型很多:radio、checkbox、text、password、date、file等等

注意:使用者輸入一定需要name屬性,才可以正常送出屬性值value。

可參看https://www.cnblogs.com/zjx304/p/10537493.html

8)select 下拉框選擇器

綁定

<option> </option>

标簽使用

繼續閱讀