HTML第一篇

時間 2019-12-07

標籤 html 一篇欄目 HTML 简体版

原文原文鏈接

HTML:

html分爲三部分：javascript

一、文檔聲明：css

<!DOCTYPE HTML>

告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔html

二、head區域：java

是元信息和網站的標題元信息通常是不顯示出來的,可是記錄了你這個HTML文件的不少有用的信息python

<title>
<base/>
<link/>（rel、href、type）
<meta/>（http-equiv、name、content）

三、body區域：sql

是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這裏是網頁的主體。也就是body的身體之意瀏覽器

塊級標籤 <p><h1><table><ol><ul><form><div>

老是在新行上開始；
高度，行高以及外邊距和內邊距均可控制；
寬度缺省是它的容器的100%，除非設定一個寬度。
它能夠容納內聯元素和其餘塊元素

　　2.內聯標籤 <a><input><img><sub><sup><textarea><span>緩存

　　① 和其餘元素都在一行上；
　　② 高，行高及外邊距和內邊距不可改變；
　　③ 寬度就是它的文字或圖片的寬度，不可改變
　　④ 內聯元素只能容納文本或者其餘內聯元素安全

基本標籤（<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>）
特殊符號（>、<、 、"、©...）
<a> 超連接標籤(錨標籤)（href、target、name）
<img> 圖形標籤（src、title、alt、width、height、align）
列表標籤（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）
<table> 表格標籤（<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan）
<from> 表單標籤（action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>）

HTML三部分的詳解：

<head>標籤：

1.定義編碼格式：

<meta charset="UTF-8">  #定義編碼爲utf-8

2.刷新跳轉：

<meta http-equiv="refresh" content="5">     # 5秒跳轉

<metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/mosson/" />   #跳轉至新的博客地址

3.關鍵字

通常是讓爬蟲之類的收錄程序，當他們在爬你的網站的時候，若是你有關鍵字，那麼他們會優先把關鍵字收錄到他們的記錄中

<meta name="keywords" />

4.描述

<meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">

5.<title>

<title>我是顯示在瀏覽器頭的內容</title>

6.<link>:經常使用的有三個屬性：rel、href、type

rel 規定文檔與被連接文檔之間的關係。

rel="dns-prefetch" 預先解析緩存文檔中使用的域名，目的是爲了提升網頁訪問速度。使用場景：在一個網頁頻繁使用其餘域名資源時。
rel="shortcut icon"或rel="icon" 在收藏和標題欄上用於顯示的圖標。示例：<link rel="icon" href="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE瀏覽器只支持ico格式，爲了兼容IE，圖片文件採用ico格式
rel="stylesheet" 引用外部樣式表
rel="nofollow" 用於指示搜索引擎不要追蹤（爬蟲抓取），減小垃圾連接。用於<a>標籤，使用場景：網頁不被信任或是不但願唄搜索引擎錄入的網站。

href 資源的路徑（相對路徑/絕對路徑）

type 規定被鏈接文檔的MIME類型，用於明確文件的打開方式。例如：.ico文件 image/x-icon。

7.<style>

　　在當前文件中寫Css樣式

　　在其餘文件中寫Css樣式相似python的模塊導入的方式把Css樣式導入到當前文件中使用

8.<script>

　　在當前文件中寫JS

　　在其餘文件中寫JS相似python的模塊導入的方式把JS導入到當前文件中使用

<body>標籤：

1.body中的經常使用標籤：

<h1>~<h6> 標題標籤.

<a> 超連接標籤用於跳轉到其餘的頁面

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

　　　　style="text-indent: 2em"能夠設置樣式爲首行縮進兩個字符。

　　　　<blockquote></blockquote>能夠用來設置整個段落的縮進。

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<u>: 文字下方加下劃線.

<em> <i>: 文字變成斜體.

<sup>和<sub>: 上角標和下角標.

<br>:換行.

<hr>:水平線.

<div>

塊級標籤。塊級標籤經常使用於佈局，行級標籤經常使用語顯示內容。

　　 div的顯示一般使用id或class來標識。id爲惟一的標籤標識，class爲標籤的類標識。

　　 div的大小是由內容來決定的，默認狀況下，高度由內容的高度決定，寬度適應屏幕。

　　能夠容納其餘元素，是一個容器。

<span>

2.特殊的符號：

特殊符號    符號碼
"    &quot ;
&    &amp ;
<    &lt ;
>    &gt ;
©   &copy ;
®   &reg ;
±   &plusmn ;
×   &times ;
§   &sect ;
¢   &cent ;
¥   &yen ;
·   &middot ;
    &euro ;
£   &pound ;
™   &trade ;

3.<a>標籤：經常使用的屬性：href、target、name

　　href:要鏈接的資源路徑格式以下: href="http://www.baidu.com"

　　target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.

　　name: 定義一個頁面的書籤.

<a href="http://www.cnblogs.com/mosson/l"  target="_blank">猛戳這裏</a>

4.列表標籤：

<ul>: 無序列表

　　<ol>:有序列表

　　 <li>:列表中的每一項.

　　　　　li 的經常使用屬性：type指明項目的類型，屬性值有：A，a，I，i，1，disc（實心圓），square（實心正方形），circle（空心圓）。

　　<dl> 定義列表

　　 <dt> 列表標題

　　<dd> 列表項

5.<img>圖形標籤：重要屬性有：src、title、alt、width、height、align。

　　src 圖片的路徑。

　　title 鼠標懸浮在圖片上的文字。

　　alt 圖片找不到時要替換的文字。若是圖片資源使用的是外網資源，則不會顯示要替換的文字。若是使用的是本網站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，並保留圖片設置的寬高結構。

　　align 圖片周圍文字的垂直對齊狀況（過期了）。經常使用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（默認，與圖片的底部對齊）。

　　width 圖片的寬

　　height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

<img src="http://www.cnblogs.com/mosson/" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>

6.<table>表格標籤：

　　border: 表格邊框.

　　cellpadding: 內邊距

　　cellspacing: 外邊距.

　　width: 像素百分比.（最好經過css來設置長寬）

　　<tr>: table row 表格的數據行

　　 <th>: table head cell 表格的表頭名稱，與<td>不一樣在於文字採用加粗居中的形式顯示

　　<td>: table data cell 單元格，用來顯示錶格內容

　　rowspan: 單元格豎跨多少行

　　colspan: 單元格橫跨多少列（即合併單元格）

　　<th>: table header <tbody>(不經常使用): 爲表格進行分區.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>Title</title>
</head>
<body>
<table border="1" >
    <caption>無聊的小婊砸</caption>
    <thead>
            <tr align="center">
                <th>序號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>女神</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <th>1.</th>
                <td>拉克絲</td>
                <td>18</td>
                <td>是男人</td>
            </tr>
            <tr align="center">
                <th>2.</th>
                <td>炮娘</td>
                <td>21</td>
                <td>是男人</td>
            </tr>
        </tbody>
</table>

</body>
</html>

效果圖：

表格合併單元格

 <table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;background-color: #9E9C9C;text-align: center">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td colspan="3">1 2 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6 9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>

        </tr>
    </table>

合併單元格

7.<form>表單標籤：

屬性：action、method、enctype

　　action 表單要提交的地址，用於處理表單的內容（通常是提交字典到後臺的一個接口，這個接口是java寫成的，提交到這個接口後後臺就知道如何處理這些數據了）。

　　method 提交的方法，默認是get方式提交。

get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

　　enctype 對錶單數據進行編碼，默認都是要編碼的。格式爲：application/x-www-form-urlencoded（表單默認的編碼格式，表單發送前對全部字符進行編碼。編碼規則：空格轉換爲「+」號，特殊符號轉換爲ASC HEX值）。提交普通的文本內容到服務器就能夠採用這種默認的編碼方式。當你須要提交的是一個文件時，編碼就須要採用另外一種格式：multipart/form-data（不對字符編碼，文件上傳時使用）。text/plain（是一種純文本編碼，空格轉換爲「+」號，可是不對特殊字符進行編碼）。

表單元素：

<input>的type屬性

　　text 文本框輸入（默認text文本框類型）。

　　autocomplete（自動完成輸入的內容，要求表單元素要有name屬性纔有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）

　　disabled（設置或者獲取控件的狀態，默認是false便可用，等於true時不可用，不能輸入內容）

　　password 密碼框。（如下屬性text和password共有）

　　　　size（指定表單元素的初始寬度。當type爲text或password時，表單元素的大小以字符爲單位，對於其餘元素，寬度以像素爲單位）

　　　　maxlength（type爲text或password時，表示輸入的最大字符數），有利於防止sql的注入攻擊

　　radio 單選按鈕。屬性：

name（將name的值設置爲相同值，才表示一組數據，才能實現單選功能）

value（必需要寫，提交到服務器的key值，實際開發過程當中value通常是編號）

checked（是否被選中的狀態）

　　checkbox 複選框。

name（名字必定要同樣同樣的，才表示是一組數據，添加到同一value值列表提交到服務器）

value（必需要寫，提交到服務器的key值，實際開發過程當中value通常是編號）

checked（是否被選中的狀態）

　　file 文件域，上傳文件（不一樣的瀏覽器表現形式不一樣）

　　submit 提交按鈕。用於提交表單。

　　reset 重置按鈕。清空表單的輸入，恢復到表單默認的狀態。

　　button 普通按鈕。通常結合javascript使用。

　　image 圖片按鈕，用來提交表單，與submit是同樣的效果。

src（圖片路徑）

　　hidden 隱藏字段。

value（隱藏的內容）

　　color 顏色標籤。value指定顏色值（採用#十六進制數表示）。

　　date 日期。value值指定默認的日期，格式爲****-**-**（年月日）。

　　datetime-local 顯示本地時間，value值指定默認的時間，格式爲2016-05-20T11:10:10（年月日T時分秒）。

　　number 數字向上或者向下滑動。能夠填數字而後向上或者向下選擇不一樣的值。

　　range 滑動標籤。min（指定最小值）、max（指定最大值）、value（指定當前默認值）。

　　week 每一年的週數。value指定哪一年第幾周，格式爲2016-W25（2016年第25周）。

<textarea> 文本域標籤。默認表現形式是能夠輸入不少行文本的文本框。

　　name （表單提交項的key）

　　cols（設置文本域寬度）

　　rows（設置文本域高度，即行數）

<select> 下拉框標籤。使用時要結合<option>子標籤一塊兒使用。

name:表單提交項的key

size：選項個數

multiple：多選

<option> 下拉選中的每一項

value（表單提交項的值）
selected（selected下拉選默認被選中）

<optgroup>爲每一項加上分組

<label> 把元素與文本結合起來

友好設計：不僅是選中複選框才能選中並打鉤，要求點擊對應的文字也能選中該複選框。
這種狀況下要用到<label>標籤的for屬性（設置或獲取給定標籤對象指定到的對象，值=另外一個元素的id號便可）

<label for="name">姓名</label>
<input id="name" type="text">

<fieldset> 對錶單中的相關元素進行分組

<fieldset>
    <legend>舒適提示</legend>
    <div align="middle">不要忘記點贊哦 ==</div>
</fieldset>

value: 表單提交項的值

對於不一樣的輸入類型，value 屬性的用法也不一樣：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值

<iframe> 框架

元素會建立包含另一個文檔的內聯框架（即行內框架）

name （設置框架名稱。此爲必須設置的屬性）

src （設置此框架要顯示的網頁名稱或路徑。此爲必須設置的屬性）

scrolling （設置是否要顯示滾動條。設定值爲auto, yes, no）

bordercolor （設置框架的邊框顏色）

frameborder （設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）

noresize （設置框架大小是否能手動調節）

marginwidth （設置框架邊界和其中內容之間的寬度）

marginhight （設置框架邊界和其中內容之間的高度）

width（設置框架寬度）

height （設置框架高度

相關標籤/搜索

每日一句

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