HTML常用知識點代碼演示

阿新 • • 發佈：2019-03-08

ict 不同 class checked 標簽顏色 ctype 有序列表 deb

1 HTML部分常用知識點

<!-- 版本聲明 -->
<!DOCTYPE html>

<!-- 唯一根元素 -->
<html>

<!-- 對網頁做基本的配置 -->
<head>

<!-- 聲明網頁編碼，HTML5不嚴格準守XML 所以單標簽可以不以/結束 -->
<meta charset="UTF-8">

<title>實驗網頁</title>
</head>

<!-- 寫網頁的具體內容 -->
< 
body>
    <!-- 1 標題 （塊）-->
    <h1>第一標題</h1>
    <h2>第二標題</h2>
    <h3>第三標題</h3>
    <a href = "#conan"><h6>第六標題 </h6></a>
    
    <!-- 2段落 （塊）-->
    <p>這是段落</p>


    <!-- 3.1 有序列表 -->
    <ol> 

        <li>安徽省</li>
        <li>湖北省</li>
        <li>河北省</li>
    </ol>
    
    
    <!-- 3.2 無序列表 -->
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>南京</li>
    </ul>
    
    <!-- 
 3.3 嵌套列表 -->
    <ol>
        <li>
        河北省
            <ul>
                <li>石家莊</li>
                <li>唐山</li>
            </ul>
            
        </li>
            
        <li>
            山東省
            <ul>
                <li>濟南</li>
                <li>青島</li>
            </ul>
        
        </li>
        <li>安徽省</li>
    
    </ol>
    
    <!-- 4  行內元素 -->
    <P>
        <i>傾斜，安徽省馬鞍山市安徽工業大學</i>
        <strong>加粗，安徽省馬鞍山市安徽工業大學</strong>
        <del>刪除線，安徽省馬鞍山市安徽工業大學</del>
        <b>加粗，安徽省馬鞍山市安徽工業大學</b>
        <span style = "color:red;">設置顏色，安徽省馬鞍山市安徽工業大學</span>
    </P>
    
    <!-- 5 空格折疊 -->
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;靜夜思<br>
        &nbsp;&nbsp;床前明月光，<br>
        &nbsp;&nbsp;疑是地上霜。<br>
        &nbsp;&nbsp;舉頭望明月，<br>
        &nbsp;&nbsp;低頭思故鄉。<br>
        &lt;<br>
    </p>
    
    <!-- 6  圖片（行內元素，左右排列） -->
    <p>
        <!-- 絕對路徑 ，長且改路徑麻煩 ，不常用-->
        <img  src="picture/code.jpg "/>
        <!-- 相對路徑,只要網頁和圖片相對位置不變則一般不會出問題，比較方便，常用 .補充：上級文件夾用..-->
        <img src="picture/conan.jpg"/>
        
    </p>
    
    <!-- 7.1  超鏈接（行內） -->
    <p>
        <a href = "https://www.cnblogs.com/kwinwei/">KwinWei‘blog</a> <br>
        <!-- 新窗口打開網頁  -->    
        <a href = "https://www.cnblogs.com/kwinwei/" target = "_blank;">KwinWei‘blog</a><br>
    </p>
    <!-- 7.2  超鏈接特殊用法 ,超鏈接到本網頁某個位置,這個位置叫錨點，錨點要提前聲明 -->
    <p>
        <a name="conan"> 柯南-基德 </a><br>
        <!-- 頂部默認就是錨點，沒有名字 -->
        <a href = "#">返回頂部</a>
    </p>
    
    <!-- 8 表格 （塊），塊元素不需要用段落 -->
        <!-- 8.1 表格基本格式 -->
        <!-- table聲明 -->
        <table border = "1" cellspacing = "0" width = "30%">
            <!-- 聲明行 -->
            <tr>
                <!-- 聲明行內元素 -->
                <td>人名</td>
                <td>年齡</td>
            </tr>
            
            <tr>
                <td>Kwin</td>
                <td>23</td>
            </tr>
            
            
        </table>
        
    <!-- 8.2 跨行 ,又叫單元格合並 -->
    <table border = "1" cellspacing = "0" width = "30%">
            <!-- 聲明行 -->
            <tr>
                <!-- 聲明行內元素 -->
                <td  rowspan = "2">人名</td>
                <td>年齡</td>
            </tr>
            
            <tr>
                <!--  <td>Kwin</td>   -->
                <td>23</td>
            </tr>
        </table>
    
    <!-- 8.3 跨列 -->
    <table border = "1" cellspacing = "0" width = "30%">
            <!-- 聲明行 -->
            <tr>
                <td>人名</td>
                <td>年齡</td>
            </tr>
            
            <tr>
                <td colspan ="2">Kwin</td>
                <!-- <td>23</td>  -->
            </tr>
        </table>
    
    <!-- 8.4 行分組 -->
    <table border = "1" cellspacing = "0">
        <thead>
            <tr>
                <td>姓名</td>
                <td>年齡</td>
                <td>薪資</td>
            </tr>
        </thead>
        <tbody style="color:blue;">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3333</td>
            </tr>
            <tr>
                <td>2</td>
                <td>444</td>
                <td>5555</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan ="2">合計</td>
                <td>8888</td>
            </tr>
        </tfoot>
    </table>
    
    
    
</body>
</html>

View Code

2 HTML 表單用於收集不同類型的用戶輸入。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 表單 -->
    <form action="www.baidu,com">
    <!-- 1 表單元素  賬號
    value 指定默認值
    maxlength 最大長度
    readonly 只讀
    -->
    <p>
        賬號：<input type = "text" value="Kwin"  maxlength=15/>
    </p>
    
    <!-- 2 密碼,修飾屬性同上  -->
    <P>
        密碼：<input type="password"/>
    </P>
    
    <!-- 3 單選 
    name 組名，定義為同一組，才可以區分互斥
    checked 默認選中
    -->
    <P>
        性別：<input type="radio" name="sex" checked/>男
            <input type="radio" name="sex"/>女
    
    </P>
    
    <!-- 4 多選 -->
    <p>興趣：
        <input type="checkbox" />音樂
        <input type="checkbox" />讀書
        <input type="checkbox" />跑步
        <input type="checkbox" />籃球
        <input type="checkbox" />足球
    </p>
    <!-- 5 文件筐  -->
    <p>頭像：
        <input type="file"/>
    </p>    
    
    <!-- 6 隱藏框 -->
    <p>
        <input type="hidden">
    
    </p>
    
    <!-- 7 提交按鈕 8 重置  -->
    <p>
        <input type="submit" value="註冊"/>
        <input type="reset" value="重置"/>
    </p>
    
    <!-- 9 普通按鈕 ，功能由js代碼自己寫  -->
    <p><input type="button" value="普通按鈕"/>
    </p>
    
    <!-- 10 標簽
    label：用來管理表單中的文本，將文本與控件綁定，增大可選擇面積，方面老年等看不清小按鈕人選擇使用
     id：用來區分標簽名與for配合使用
     -->
    <p>
        <input type="checkbox" id="c1"/>
        <label for="c1">我已閱讀並自願接受此協議！</label>
    </p>
    
    <!-- 11 文本域  -->
    <p>簡介：
        <textarea cols="10" rows="3">請在此處輸入簡介！
        </textarea>
    </p>
    
    <!-- 12 下拉選 -->
    <p>
    城市：
    <select>
        <option selected>北京</option>
        <option>上海</option>
        <option>合肥</option>
        <option>南京</option>
    </select>
    </p>


</form>
</body>
</html>

View Code

HTML常用知識點代碼演示

ict 不同 class checked 標簽顏色 ctype 有序列表 deb 1 HTML部分常用知識點  <!DOCTYPE html>  <html

讓你的eclipse實現寫JAVA代碼，HTML,CSS,JAVASCRIPT代碼提示

css ref win imp center asc java代碼 char 保存文件　　1.打開eclipse→Windows→Preferences→Java→Editor→Content Assist 　　改動Auto Activation triggers f

Linux線程基本使用代碼演示樣例

-m nis tpi div argv and sub sig ack #include <pthread.h> #include <stdio.h> #include <unistd.h> void* thread_func(voi

HTML實體符號代碼速查表（轉載）

plus tro agg 小於號 times 問號大於號豎線 table 1.特色的 ? © ? 版權標誌 | | 豎線，常用作菜單或導航中的分隔符 · · · 圓點，有時被用來作為菜單分隔符 ↑ &

php過濾表單提交的html等危險代碼

nbsp postget scrip ram text body tle copy ace 表單提交如果安全做得不好就很容易因為這個表單提交導致網站被攻擊了，下面我來分享兩個常用的php過濾表單提交的危險代碼的實例，各位有需要的朋友可參考。 PHP過濾提交表單的

HTTP常用狀代碼

rar part other 條件解釋 -m get方法 span move 2XX 成功 204 Not Content 請求處理成功，但沒有資源可以返回。 1 put請求：該資源已存在於服務器上 2 delete請求：該資源已從服務器上刪除 2

分針網——每日分享：10個程序員常用的代碼簡寫技術

代碼簡寫加入職業技能圈 q群：272292492 更多文章：www.f-z.cn 今天小編我給大家整理了一份10個程序員常用的代碼簡寫技術，看懂一種是入門，全懂就是大神，你能知道幾個呢？

Java操作Redis（代碼演示）

exce xxx mem log 來看 != 技術分享 org ons redis-demo演示一、創建一個maven工程 1、在pom.xml中引入相關redis的相關依賴 1 <project xmlns="http://maven.apache.org/P

JS中一些常用的代碼塊

最小值 all tran == 驗證 pro 代碼塊 length 需要本文記錄了一些工作中常用到的js代碼。 1. 生成指定範圍內的隨機數例如隨機獲取顏色rgba的參數值時 function setRandomNum(m,n){ 　　return Math.floor

前端開發常用js代碼片段

表達式 form break ase create 字節 eve follow getc HTML5 DOM 選擇器 // querySelector() 返回匹配到的第一個元素var item = document.querySelector(‘.item‘);conso

PyQt5.9 Html與本地代碼交互實例

gis markdown gist channel bsp int str func hello 在PyQt5.9中, 應用QWebEngineView和QWebChannel技術, 可以進行HTML與本地代碼進行交互. 要點: 創建交互對象, 基於QObject, 定義

Discuz!開發之HTML轉Discuz代碼(bbcode)函數html2bbcode()

dhtml log light submit indent round bbc trre require 定義文件：\source\function\function_editor.php函數定義： function html2bbcode($text) { $t

常用matlab代碼筆記

atl 常用 txt文件成對 open 代碼 slice n) bsp １．生成對應路徑下的圖片及寫入txt文件： Eg: imwrite(X1,strcat(‘path‘,num2str(n),‘slice_‘,num2str(j),‘.bmp‘));c=fopen(‘

Python Web框架Tornado的異步處理代碼演示樣例

str lease 異步處理 item 行業異步模式業務怎樣 mvc 1. What is Tornado Tornado是一個輕量級但高性能的Python

本站頁腳HTML回頂部代碼

代碼 bsp cor tex size align order index ott <style type="text/css">.top { width: 50px; height: 50px; background-color: #F0F0F0; bord

純js常用的代碼

.com spl return shopping hid code opp splay 事件 1、獲取表單中某屬性的值　　var name = document.myform.myname.value; 2、表單提交時校驗，相應js代碼中需要返回true或者false

常用的代碼塊

str 打印 ssa 常用 mic 代碼塊標記 mark pre /** 強引用 */ @property (nonatomic, strong) <#type#> <#name#>; /** 弱引用 */ @property (nonatom

multer處理post請求的代碼演示

multer app col -- RR expr use con send let express = require(‘express‘); let multer = require(‘multer‘); let mObj = multer({dest:__di

xss 防止攻擊,惡意用戶將輸入的信息當成html或js代碼執行,辦法是將用戶輸入的信息改為text格式,或特殊符號轉義

code 們的不用 ram 轉義字符 box 允許 onf xss 防止攻擊,惡意用戶將輸入的信息當成html或js代碼執行,辦法是將用戶輸入的信息改為text格式,或特殊符號轉義 XSS攻擊的防範 XSS攻擊造成的危害之所以會發生，是因為用戶的輸入

STM32的看門狗了解及代碼演示

clear tle 最小值就會 del size 概念 channels gpio 一、介紹： STM32看門狗分為獨立看門狗和窗口看門狗兩種，其兩者使用調條件如下所示， IWDG和WWDG兩者特點如下圖所示：獨立看門狗的手冊資料：串口

HTML常用知識點代碼演示

相關推薦