HTML 初學整理

時間 2019-11-11

標籤 html 初學整理欄目 HTML 简体版

原文原文鏈接

1、HTML簡介

HTML的概念

HTML是HyperText Markup Language(超文本標記語言)的簡寫，超文本標記語言，標準通用標記語言下的一個應用。
「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
超文本標記語言的結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。css

2、一個完善HTML的基本元素組成

一、 DOCTYPE

HTML5文檔類型: <!DOCTYPE html>html

二、 <html>

Html的根元素，用來包含html文檔的全部元素

三、 <head>

包含在頭部的內容不會被顯示的頁面中，這裏一般包含頁面的編碼，做者，頁面的描述信息，js的導入，css的導入等信息。

四、 <meta charset="utf-8">

用來聲明當前文檔的編碼方式爲utf-8

五、 <title>

用來聲明當前文檔的標題，標題將會出如今瀏覽器的選項卡中

六、<body>

全部想要顯示在瀏覽器中的元素都被包含在該元素中。

3、 HTML元素

1）行內元素

與其餘行內元素共享一行空間
默認清下，寬度和高度都由其內容所決定
不能爲其指定寬和高
行內元素只能容納文本或其餘行內元素
設置行內元素，須要注意以下
（1）設置寬度 width 無效。
（2）設置高度 height 無效，但能夠經過 line-height 來設置（當line-height = 行高時，顯示上下居中）。
（3）設置 margin 只有左右有效，上下無效。
（4）設置 padding 只有左右有效，上下無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。
HTML經常使用行內元素
（1）<span></span>無心義的行內元素
（2）<a></a> 超連接
（3）<img> 圖片

2）塊級元素

獨佔一行空間
默認狀況下，寬度佔滿整個父元素，高度由其內容決定
能夠爲其寬和高
塊級元素能夠容納行內元素和其餘塊級元素
HTML經常使用塊級元素
（1）<div></div> 無心義的塊級元素
（2）h1~h6 標題
（3）<ul> 無序列表 <li> 列表項
（4）<ol> 有序列表 <li> 列表項
（5）<dl> 定義列表 <dl> 列表標題 <dd> 列表項
（6）<p> 段落

3）其餘元素

1. table

caption 表格標題瀏覽器

thead     表格的頭部
        tr
            th / td     
    tbody (不能夠省略的)    表格的體部
        tr
            td / th
    tfoot     表格的尾部
        tr
            td
            

    table屬性
        border    邊框線寬度，默認爲0
        cellspacing    單元格之間的間距，默認爲1
        cellpadding 單元格的內邊距，文字距離單元格邊框的距離
        width     寬度
        align     表格的排列方式
            center
            left        默認
            right
        
        colspan     跨列，向右跨
        rowspan     跨行，向下跨

        注意：每一行的列數在計算（rowspan,colspan）以後應該是相等的。若是不等，表格就會破裂

2. form

form 屬性編碼

action url後臺服務地址
method 方法 GET POST put delete (REST)
enctype 編碼格式

input 屬性url

- value
- name
- type     
    - text
    - password
    - radio 
    - checkbox
    - file
    - submit
    - reset

select>optionspa

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

textarea
多行文本域
屬性 cols 列 rows 行code

H5中form的新特性(瀏覽器支持程度不高，不可靠)orm

1) 新增的表單元素
    progress      進度條
    output        計算輸出
    meter         刻度條
    datalist      下拉列表

2) input的type屬性值
    search    搜索框     placeholder    提示輸入內容
    日期相關
        date
        time
        datetime
        month
        week
    功能相關
        email
        url
        tel

3) 提交按鈕上新增的屬性（記憶）
    <input type="submit">
    formaction
    formmethod
    formenctype
    formtarget

未完待續. . .

相關標籤/搜索

每日一句

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