2019-08-19_Note_Day21

HTML - Hyper Text Markup Language 超文本標記語言


網頁的三要素:

1. Tag - 標簽 - 承載內容

1) 文本標簽

文本標簽 功能
h1- h6 標題
p 段落
title 斜體
strong 加粗
ins 下劃線
del 刪除線
sup 上標
sub 下標
<p><em>我</em>如果<strong>愛你</strong></p>
<p>絕不學<ins>攀援</ins>的凌霄花<sup>1</p>
<p>借你<del>的高枝</del>炫耀自己<sub>2</p>
<p></p>
我如果愛你<br>
絕不學癡情的鳥兒<br>
為綠蔭重復單調的歌曲<br>

2)列表標簽

列表標簽 功能
ul 無序列表
ol 有序列表
li 列表下的list item
dl 定義列表
dt 定義標題
dd 定義內容
<dl>
    <!-- definition title 定義標題 -->
    <dt>Python</dt>
    <dd>一種簡單好用的面向對象的解釋型語言</dd>
    <dd>由荷蘭人吉多·范·羅蘇母在1989年發明的標稱語言</dd>
</dl>
<h2>今天為你推薦的水果是</h2>
<!-- unordered list 無序列表-->
<ul>
    <!-- list item -->
    <li>蘋果</li>
    <li>草莓</li>
    <li>山竹</li>
</ul>
<!-- ordered list 有序列表-->
<ol>
    <!-- list item -->
    <li>蘋果</li>
    <li>草莓</li>
    <li>山竹</li>
</ol>

3) 圖片標簽<img>

        <!-- alt 圖片加載失敗的替換文字 -->
        <!-- align 圖片位置(默認居左顯示) -->
<figure>
        <img title="背景圖" width="200" src="images/1.jpg">
        <!-- figcaption 圖片標題 -->
        <figcaption>圖1. 背景圖</figcaption>
</figure>
<img align="right" width="250" title="Python" src="images/python-logo@2x.png" alt="Python">

4)超鏈接標簽<a>

a. 頁面鏈接
<a  target="_blank">百度</a>
`href` 網址
`target` 打開方式(默認在當前頁面打開,_blank在新的空白頁打開)
b. 錨點鏈接
<a name='top'></a>
<a href="#top">回頂部</a>
c. 功能鏈接
<a target="_blank" ><img border="0" src="http://wpa.qq.com/pa?p=2:123:53" alt="點擊這里給我發消息" title="點擊這里給我發消息"/></a>
<a href="mailto:123@126.com">聯系站長</a>

5)表格標簽<table>

<table>
        <!-- 表格標題 -->
        <caption>學生信息表</caption>
            <tr>
                <td width="80">學號</td>
                <td width="100">姓名</td>
                <td width="80">性別</td>
                <td width="100">生日</td>
                <td width="100">籍貫</td>
                <td width="100">語文</td>
                <td width="100">數學</td>
                <td width="100">英語</td>
            </tr>
</table>

6)表單標簽<form>

<form action="" method="post" enctype="multipart/form-data">
action: 表單處理方法
method: 表單提交方法
enctype: 文件傳輸方式
表單信息:
標簽 作用
<input type="text"> 文本信息
<input type="password"> 密碼信息
<input type="radio"> 單選框
<input type="checkbox"> 復選框
<input type="date"> 日期
<select><option></option></select> 選擇下拉框
<input type="tel"> 手機號
<input type="email"> 郵箱
<input type="file"> 文件
<input type="number"> 數字
<textarea cols="30" rows="10"></textarea> 文本域
<input type="range"> 滑動條
<input type="hidden"> 隱藏域 埋點
<input type="submit" value="提交"> 提交
<input type="reset" value="重置"> 重置

7)字符實體(實體替換符)

空格:&nbsp;

字符實體替換

2. CSS - 層疊樣式表 - 顯示

3. JavaScript - JS - 交互式行為

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HMTL初識 HTML(英文Hyper Text Markup Language的縮寫)中文譯為“超文本標簽語言”...
    小青年coder閱讀 2,369評論 0 1
  • --- 學習目標: - 了解常用瀏覽器 - 掌握WEB標準 - 理解標簽語義化 - 掌握常用的排版標簽 ...
    紅豆丁244閱讀 1,384評論 0 2
  • 第一章 1、使用瀏覽器去訪問的程序,叫網頁 2、web代碼存放在服務器 代碼分為兩種:① 運行在瀏覽器端:前端代...
    fastwe閱讀 3,441評論 0 2
  • day01-_起源和結構 結構:Xhtml xml 表現:CSS 行為:DOM ECMAScript 以上都屬于W...
    Sakura_明妃閱讀 1,229評論 0 1
  • 學習目標: 了解常用瀏覽器 掌握WEB標準 理解標簽語義化 掌握常用的排版標簽 掌握常用的文本格式化圖像鏈接等標簽...
    淡淡瘋閱讀 1,275評論 0 3