HTML基礎

一.HTML入門

1. 什么是HTML

Hyper Text Markup Language（超文本標記語言）

2.HTML的發展史

3. 常用的瀏覽器

谷歌
火狐
IE

4. W3C標準

World Wide Web Consortium（萬維網聯盟）成立于1994年，Web技術領域最權威和具影響力的國際中立性技術標準機構,網址：http://www.w3.org/ http://www.chinaw3c.org/

W3C標準包括:結構化標準語言（XHTML 、XML）、表現標準語言（CSS）、行為標準（DOM、ECMAScript ）

5.編輯工具

記事本

Dreamweaver

WebStorm

Visual Studio Code

6. HTML基本結構

<!DOCTYPE html>    #  聲明
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顯示網頁的標題</title>
</head>
<body>

</body>
</html>

7.基本標簽的使用

7.1 title標簽

7.2 meta標簽

7.3 標題標簽

<h1>…</h1>  # 一級標題
<h2>…</h2>  # 二級標題
<h3>…</h3>  # 三級標題
<h4>…</h4>  # 四級標題
<h5>…</h5>  # 五級標題
<h6>…</h6>  # 六級標題

<h1>北京歡迎你</h1>

7.4 段落標簽 p

<p>北京歡迎你，有夢想誰都了不起！</p>
<p>有勇氣就會有奇跡。</p>

7.5 換行標簽

 

7.6 水平線標簽

<hr/>

7.7 字體樣式標簽

加粗：… 斜體：…

<strong>徐志摩人物簡介</strong>
<p>
   <em>1910</em>年入杭州學堂<br/>
   <em>1918</em>年赴美國克拉大學學習銀行學<br/>
</p>

7.8 圖像標簽

圖片的格式
- JPG
- PNG
- BMP
- GIF
標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顯示網頁的標題</title>
</head>
<body>
    <!-- 圖像標簽-->
    <img src="images/hetao.jpg" alt="圖片" title="鼠標懸浮" >
  	#  src：圖像地址    #  alt:圖像的替代文字   # title：鼠標懸浮提示文字
  
</body>
</html>

7.9 超鏈接

  <a >百度網址</a>
    <!--頁面間的跳轉-->
    <a href="hello.html">百度網址</a>

#  target屬性的值的區別
target="_blank" # 會打開一個新的窗口
target="_self"  # 在自己的窗口打開

8.注釋和特殊符號

8.1注釋

以結尾快捷鍵： Ctrl+/

8.2 特殊符號

9.塊元素和行內元素

塊元素 : 無論內容多少，該元素獨占一行（p、h1-h6…）
行內元素 : 內容撐開寬度，左右都是行內元素的可以排在一行(a、strong、em…)

二.列表、表格與媒體元素

1. 列表

1.1列表的定義

列表就是信息資源的一種展示形式。它可以使信息結構化和條理化，并以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的信息

1.2 列表的分類

無序列表
有序列表
定義列表

1.3 無序列表

<ul>   # 聲明無序列表
      <li>范冰冰演藏族女孩</li>
      <li>撞死兩個人后自拍</li>
      <li>詩隆甜蜜出游</li>
      <li>一線城市樓市退燒</li>   # 列表項
 </ul>

1.4 無序列表的特性

沒有順序，每個
標簽獨占一行（塊元素）
默認
標簽項前面有個實心小圓點
一般用于無序類型的列表，如導航、側邊欄新聞、有規律的圖文組合模塊等

1.5 有序列表

<ol>     # 聲明有序列表
  <li>范冰冰演藏族女孩</li>
  <li>撞死兩個人后自拍</li>
  <li>詩隆甜蜜出游</li>
  <li>一線城市樓市退燒</li>   # 列表項
</ol>

1.6 有序列表的特性

有順序，每個
標簽獨占一行（塊元素）
默認
標簽項前面有順序標記
一般用于排序類型的列表，如試卷、問卷選項等

1.7 定義列表

<dl>    # 聲明定義列表
    <dt>水果</dt>   # 列表項
    <dd>蘋果</dd>
    <dd>桃子</dd>   # 列表項的內容
    <dd>李子</dd>
</dl>

1.8 定義列表的特性

沒有順序，每個
標簽、
標簽獨占一行（塊元素）
默認沒有標記
一般用于一個標題下有一個或多個列表項的情況

1.9 列表的對比

2. 表格

2.1 表格的組成

1. 行 2. 列 3. 單元格

2.2 語法

<table border="1">  # border邊框線    
    <tr>   # 行
         <td>第1個單元格的內容</td>  #  單元格
         <td>第2個單元格的內容</td>
        ……
    </tr>
    <tr>
         <td>第1個單元格的內容</td>
         <td>第2個單元格的內容</td>
        ……
    </tr>
</table>

2.3 跨行

rowspan 屬性

 <table border="1">
        <tr>
            <td rowspan="2">單元格1</td>   #跨2行
            <td>單元格2</td>
            <td>單元格2</td>
        </tr>
        <tr>
         
            <td>單元格4</td>
            <td>單元格2</td>
        </tr>
        <tr>
            <td>單元格5</td>
            <td>單元格6</td>
            <td>單元格2</td>
        </tr>
        <tr>
            <td>單元格5</td>
            <td>單元格6</td>
            <td>單元格2</td>
        </tr>
   </table>

2.4 跨列

colspan屬性

 <tr>
      <td colspan="2">單元格2</td>  # 跨2列     
 </tr>

3. 視頻和音頻

3.1 視頻

Video 標簽

<!-- 視頻播放-->
<video src="video/video.webm" controls></video>

controls  # 提供播放、暫停音量的控件
loop      # 實現視頻的循環播放
autoplay  #  自動播放，有些瀏覽器不兼容。

3.2 音頻

audio標簽

<audio src="music/music.mp3" controls></audio>

controls  # 提供播放、暫停音量的控件

4.內聯框架

<a  target="a">百度網址</a>

<iframe src="" frameborder="1" name="a" width="400px" height="500px"></iframe>

# 注意：name屬性的值和target的值要一樣。

三.表單

登錄注冊相關的頁面

1.表單元素的語法

<form  method="post" action="result.html">  # method 提交的方式： 1.post(安全的)  2.get(不安全)
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密碼：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

2.表單元素

<input  type="text"  name="fname" value="text"/>

3. 文本框

4. 密碼框

5.單選按鈕

  <!-- 單選框   互斥:必須保證name屬性的值一樣  checked :默認選中-->
   性別：<input type="radio" name="a"  checked/>男<input type="radio" name="a" />女

6.復選框

 <!-- 復選框-->
 愛好:<input type="checkbox" name="name" id="">睡覺

7. 列表框

省份：<select name="" id="" >

  <option value="">湖北省</option>

  <option value="">山東省</option>

  <option value="">河南省</option>

  <option value="">廣東省</option>

 </select>

8.按鈕

8.1 普通按鈕

  <input type="button" value="普通按鈕">

8.2 重置按鈕

<input type="reset" value="重置">   # 會把文本框的內容清空

8.3 提交按鈕

 <input type="submit" value="提交按鈕">   # 會把文本框的數據提交到瀏覽器的地址上

9. 圖片按鈕

  <input type="image" src="images/hetao.jpg" alt="">

10. 多行文本域

textarea name="name" id="" cols="30" rows="10"></textarea>

11.文件域

上傳文件：<input type="file" name="" id="">

posted @ 2020-08-04 17:23 leon_teacher 閱讀(85) 評論(2) 收藏舉報

刷新頁面返回頂部

leon_teacher

人生如夢，即使成功不易，也不能放棄努力