HTML前端

時間 2019-11-18

標籤 html 前端欄目 HTML 简体版

原文原文鏈接

1.<html>內容</html>

解釋：HTML文檔的文檔標記，也成爲HTML開始標記
功能：這對標記分別位於網頁的最前端和最後端
        <html>在最前段表示網頁的開始
        </html>在最後端表示網頁的結束

功能及解釋

2.<head>內容</head>

解釋：HTML文件頭標記，也稱爲HTML頭信息標記
功能：用來包含文件的基本信息，好比網頁的標題、關鍵字，在<head></head>內能夠放<title></title>、<meta>、<style type="text/css"></style>等標記
注意：在<head></head>標記內的內容不會再瀏覽器中顯示

功能及解釋

3.<title>內容</title>

解釋：HTML文件標題標記
功能：網頁的主題，顯示在瀏覽器的窗口的左上邊
注意：網頁的標題不能太長，要短小精悍，能具體反應頁面的內容，<time></time>標記中，不能包含其餘標記

功能及解釋

4.<body>內容</body>

解釋：HTML文檔的主體標記
功能：<body>...</body>是網頁的主體部分，在此標記之間能夠包含如<p></p>、<h1></h1>、<br>、<hr>等等標記，正是由這些內容組成了咱們所看見的網頁

body標記的常見屬性：
            1.bgcolor:設置背景顏色  <body bgcolor="red"></body>
            2.text 設置文本顏色 <body text="green"></body>
            3.link 設置鏈接顏色  <body link="blue"></body>
            4.vlink 已經訪問了連接顏色 <body vlink="yellow"></body>
            5.alink 正在被點擊的連接顏色 <body alink="red"></body>

功能及解釋

5.<meta>內容</meta>

解釋： 頁面的元信息（meta-information）
功能：踢過有關頁面的元信息，好比針對搜索引擎和更新頻度的描述和關鍵詞。
必須的屬性： content 值：some_text 定義name屬性相關的元信息
常見的屬性： 1.常見的name屬性：（1.author, 2.keywords,3.descriptior,4.others）把content屬性關聯到一個名稱。
                好比描繪出網頁的關鍵詞：<meta name="keywords" content="關鍵詞">
注意meta標記必須放在head元素裏面

功能及解釋

6.字符實體：

1.什麼是字符實體？好比咱們想在網頁上面顯示一個"<"小於符號，可是"<" 在HTML中是文檔標記的開始語言
若是咱們直接使用"<"會出差錯，因此咱們就會一些實體名稱來代替！css

7.文本標記

　　 a.）hn 標題標記，共有6個級別， n的範圍1~6，不一樣級別對應顯示大小不一樣的標題，h1最大，h6最小html

　　 b）font 字體設置標記，設置字體的格式，三個經常使用屬性：前端

                                                1.size（字體大小）<font size="3">
                                                2.color(顏色) <font face="微軟雅黑">
                                                3.b 粗字體標記
                                                4.i 協字體標記
                                                5.sub 文字下標字體標記
                                                6.sup 文字上標字體標記
                                                7.tt 打印機字體標記
                                                8.cite 引用方式的字體，一般是斜體
                                                9.em 表示強調， 一般顯示爲斜體字
                                                10.strong 表示強調，一般顯示爲粗體字
                                                11.small 小型字體標記
                                                12.big 大型字體標記
                                                13.u 下劃線字體標記

8.超連接

　　1.基本語法：java

<a href="" target="打開方式" name="頁面錨點名稱"> 連接文字或者圖片</a>

　　2.屬性：python

a）href屬性：連接的地址，連接的地址能夠是一個網頁，也能夠是一個視頻，圖片，音樂
b）target屬性：
            1.做用：定義超連接的打開方式
            2.屬性值：
                @）_bank ：在一個新的窗口中打開連接
                @）_seif(默認值)：在當前窗口中打開連接
                @）_parent:在父窗口中打開頁面（框架中使用較多）
                @）_top: 在頂層窗口中打開文件（框架中使用較多）
            3.name屬性：指定頁面的錨點名

9.表單

　　a）表單標記<form>c++

        <form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容
        基本格式：<form action="服務器端地址（接受表單內容地址）" name="表單名稱" method="psot|get"></form>

        經常使用屬性：1.name 表單名稱
                  2.method 傳送數據的方式，分爲post和get兩種方式
                              get方式 不具備保密性
                              post方式 把內容一塊兒封裝到http協議裏面發送到服務器處理

                  3.action 若是URL地址爲空則使用當前文檔的URL地址，若是表單中不須要使用action屬性也要知道屬性爲no
                  4.enctype 設置表單的資料的編碼方式
                  5.target 和超連接的屬於相似，用來指定目標窗口

　　b）文本域和密碼 <input>標記web

　　　　　<input> 標記沒有結束標記c#

　　　　 1.基本語法：<input type="" name="" value="" size="" maxlength="">
        2. 屬性介紹：
            1.type屬性：type屬性有兩個值
                    1.text 當type="text"時， <input>表示一個文本輸入域
                    2.password 當type="password"時，<input> 表示一個密碼輸入域
            2.name屬性  定義控件的名稱
            3.value 屬性 初始化值，打開瀏覽器時，文本框中的內容
            4.size屬性 設置控件的長度
            5.maxlength屬性： 輸入框中最大容許輸入的字符數
        3.提交，重置，普通按鈕
            1.提交按鈕 ：當<input type="submit"> 時，爲提交按鈕
            2.重置按鈕 ：當<input type="reset" > 時，爲重置按鈕
            3.普通按鈕 ：當<input type="button"> 時，爲普通按鈕
        4.單選框和複選框 
            1.單選按鈕： 當<input type="radio" > 時，爲單選按鈕
            2.複選框： 當<input type="checkbox"> 時，爲複選框
            3.注意：單選框和複選框均可以使用"cheked" 屬性來設置默認選中項
        5.隱藏域 ： 當<input type="hidden" > 時， 爲隱藏表單域
        6.多行文本域：
            1.用法，使用<textarea>標記能夠實現一個，可以輸入多行文本的區域
            2.語法格式：<textarea name="name" rows="value" cols="value" value="value">...</textarea>
            3.rows屬性和cols屬性分別用來指定，顯示的行數和列數，單位是字符個數

        7.菜單下拉列表域  <select></select>標記
            1.語法標記：
                <select name="opt" size="" multiple="">
                    <option value="1" >選項1</option>
                    <option value="2" selected="">選項1</option>
                    。
                    。
                </select>
            2.屬性
            3.option標記
                <option>標記用來指定列表中的一個選項，須要放在<select></select>之間
                值：
                    1.value 給選項賦值，指定傳送到服務器上面的值
                    2. select 指定默認的選項

小案例：

寫個註冊網頁後端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            div{
                width: 600px;
                height: 700px;
                background-color:#f7b497 ;
                border-style: solid;
                margin-top: 30px;
            }
            .div1{
                border-style: solid;
            }
            /*body{
                background-image: url(C:\Users\lan\Desktop\html\HTML_demo\2.jpg);
            }*/
        </style>
    </head>
    <body>
        <center>
            <div class="div1">
                <h1><center>welcome to my private web</center></h1>
        <form method="post" action="http://www.sogou.com/web">
            <center>
            <p>郵箱 &nbsp; <input type="text" name="query"></p>
            <p>用戶名&nbsp;<input type="text" name="email"><br/></p>
            <p>密碼 &nbsp; <input type="password" name="pwd"></p>
            <p>確認密碼<input type="password" name="pwd"></p>
            驗證碼。。。
            <p>選擇語言種類(問題1多選)</p>
            <p>
                python<input type="checkbox" nname="hobby" value="1">
                java<input type="checkbox" nname="hobby" value="2">
                c<input type="checkbox" nname="hobby" value="3">
                c#<input type="checkbox" nname="hobby" value="4">
                c++<input type="checkbox" nname="hobby" value="5">
            </p>
            <p>單選
                男<input type="radio" name="sex" value="1" />
                女<input type="radio" name="sex" value="2" />
            </p>
            <p>下拉菜單
                <select name="menu">
                    <option value="1">董事長</option>
                    <option value="2">助理</option>
                    <option value="3">CEO</option>
                    <option value="4">CTO</option>
                    <option value="5">總監</option>
                    <option value="6">經理</option>
                    <option value="7" selected="selected">職員</option>
                </select>
                
            </p>
            <p>備註
                <textarea name="qq" rows="10" cols="55">
                    
                </textarea>
            </p>
            <input type="submit" value="提交">
            </center>
        </form>
            </div>
        </center>
    </body>
</html>

小案例：註冊頁面

10.經常使用塊級標籤：

    1.<br> 強制換行標記 讓後面的文字，圖片，表格等等，顯示在下一行
    2.<p> 換段落標記  換段落，因爲多個空格和回車在HTML中會被等效爲一個空格，因此HTML中藥換段落就要用<p></p>,<p>段落中也能夠包含<p>段落
    3.<center> 居中對齊標記 讓段落或者是文字相對於父標記居中顯示
    4.<pre> 預格式化標記， 保留預先編排好的格式
    5.<li> 列表項目標記 每個列表使用一個<li> 標記中
    6.<ul> 無序列表標記
    7.<ol> 有序列表標記 能夠顯示特定的一些順序：
            1.格式：    
                    <ol type="符號類型">
                    <li type="符號類型"></li>
                    <li type="符號類型"></li>
                    </ol>
            2.有序列表的type屬性值：
                    1.阿拉伯數字1.2.3等，默認type屬性值
                    2.A大寫字母A，B，C等
                    3.a小寫字母a，b，c等
                    4.I 大寫羅馬數字I，II， III， IV
                    ５.小寫羅馬數字ｉ，ｉｉ，ｉｉｉ等
            ３.value 指定一個新的序列數字起始值
            4.列表能夠進行嵌套
    8.<dl><dt><dd> 定義型列表：使用場合：對列表條目進行簡短的說明
                                格式{
                                <dl>
                                    <dt>軟件說明</dt>
                                    <dd>簡單介紹軟件的功能及基本應用</dd>
                                    <dt>軟件界面</dt>
                                    <dd> 用於選擇軟件的外觀
                                </dl>
                                }
    9.<hr> 水平分割線標記
    10.<div>分區顯示標記，也稱之爲層標記

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。