HTMLCSS學習筆記（一）-入門介紹

站的建站流程

頁面圖例

網頁的結構

WEB標準

WEB標準是網頁制作的標準，它不是一個標準，它是根據網頁的不同組成部分生成的一系列標準。這些標準大部分由W3C起草發布，也有部分標準由ECMA起草發布

（1）W3C( World Wide Web Consortium )萬維網聯盟，創建于1994年是Web技術領域最具權威和影響力的國際中立性技術標準機構；是專門負責網絡標準制定的非贏利組織。制定了結構標準和樣式標準；（2）ECMA：歐洲電腦網商聯合會（廠商協會），制定了行為標準；

計算機語言

HTML

HTML 指的是超文本標記語言 (Hyper Text Markup Language) www萬維網的描述性語言。 XHTML指可擴展超文本標記語言（標識語言）（EXtensible HyperText Markup Language）是一種置標語言，表現方式與超文本標記語言（HTML）類似，不過語法上更加嚴格。 HTML5指的是HTML的第五次重大修改（第5個版本）

HTML發展

編輯器

建立站點

規劃網站的所有內容和代碼
整合資源

文件的命名規范

小寫英文字母、數字、下劃線的組合，
其中不得包含漢字、空格和特殊字符；
必須以英文字母開頭。

HTML開始

1：HTML架構

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
有三種：Strict（嚴格型)、
Trasitional（過渡型）、
Frameset（框架型）

2：HTML5基本結構

3:HTML語言

HTML語言組成

（1）標簽

txt 寫在尖角號<>里的第一個單詞，叫做標記，也叫做標簽，也稱作元素；

（2）屬性

標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在雙引號內一個標記可以有多個屬性，屬性和屬性之間用空格隔開，屬性不分先后順序

HTML語法

（1）常規標記(雙標記)： <標記名稱屬性1名="屬性1值" 屬性2名="屬性2值" ………… >

（2）空標記（單標記）：<標記名屬性1名="屬性1值" />

常用標簽

1 ：文本標題標簽

文本標題共有6個（h1-h6）
<h1>一級標題</h1>(唯一性,放網站LOGO)
<h2>二級標題</h2>
...
<h6>六級標題</h6>

2:字體傾斜&加粗標記

文本傾斜:
    <i></i>
    <em></em>

文本加粗：
    <b></b>
    <strong></strong>

3：下劃線

<u></u>

4 : 換行&水平線

<br>
<hr>

5：上標&下標

<sup></sup>
<sub></sub>

6 : 段落標記

<p></p>

7 : 字符（小段文本）

<span></span>

8 : （1）無序列表

<ul>
     <li>列表項內容</li>
     <li>列表項內容</li>
     <li>列表項內容</li>
       ........   
</ul>

? （2）有序列表

<ol>
    <li>列表項內容</li>
    <li>列表項內容</li>
    <li>列表項內容</li>
    ........   
</ol>

type:規定列表中的列表項目的項目符號的類型語法：<ol type=“ a"></ol> 1 數字順序的有序列表（默認值）（1, 2, 3, 4）。 a 字母順序的有序列表，小寫（a, b, c, d）。 A 字母順序的有序列表，大寫（A,B,C,D) i 羅馬數字，小寫（i, ii, iii, iv）。 I 羅馬數字，大寫（i, ii, iii, iv）。 start 屬性規定有序列表的開始點。(start的屬性值必須是數字) 語法：<ol start="5"></ol>

? （3）自定義列表

<dl>
     dt></dt>
     <dd></dd>
</dl>

9 : 超鏈接

<a></a>
    屬性：
        href = 'url'
        target = "_blank  /  _self";
        title = '文本提示'

    拓展：
        rel = 'nofollow';

10 : 圖片

<img>
    屬性：
        src = 'url';
        alt = ' 標簽 實例 帶有指定替代文本的圖像'  
        title = '文本提示'
        width = ''
        height = ''
        border = ''

圖片 title 和 alt區別：

alt:
1、alt屬性是考慮到不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，
以及視覺障礙的用戶和使用屏幕閱讀器的用戶。當圖片不顯示的時候，圖片的替換文字。
2、alt屬性值的長度必須少于100個英文字符
3、alt屬性是img標簽的必須屬性，如果沒有特別意義的圖片，可以寫alt=""
4、alt屬性是搜索引擎判斷圖片與文字是否相關的重要依據， alt屬性添加到img主要的目的才是為了SEO
title:
1、title屬性并不是必須的。
2、title屬性規定元素的額外信息，有視覺效果，當鼠標放到文字或是圖片上時有文字顯示。
3、title屬性并不作為搜索引擎抓取圖片的參考，更多傾向于用戶體驗的考慮。

11 : 相對路徑

（同級）
1)當當前文件與目標文件在同一目錄下，直接書寫目標文件的文件名+擴展名；
（上級找下級）
2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：
文件夾名/目標文件全稱+擴展名；
（下級找上級）
3)當當前文件所處的文件夾和目標文件在同一目錄下，寫法如下：
../目標文件文件名+擴展名；

12 ： DIV

13 : HTML注釋

<!-- 注釋 -->

表格

1 : 表格基本結構

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<!-- 
    table 為表格
    tr 行
    td 列（每一個單元格）
-->

2：表格的html屬性

1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bordercolor="邊框色"
5）cellspacing="單元格與單元格之間的間距"
6）cellpadding=“單元格與內容之間的距離"
7）align="表格水平對齊方式"
   取值：left、right、center、
   valign=“垂直對齊” top\bottom\middle
8）合并單元格屬性：(td)
  合并列： colspan=“所要合并的單元格的列數"
  合并行： rowspan=“所要合并單元格的行數”

3 ：數據行分組

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

4 ：數據列分組

<colgroup span="value"></colgroup>
<!--span屬性為把幾列分為一組-->

5 ：列標題

<th></th>

6: 表格標題

<caption></caption>

7：表格屬性

1、單元格間距：border-spacing:value; 說明：單元格間距(該屬性必須給table添加) 表示單元格邊框之間的距離，不可取負值 2、合并相鄰單元格邊框：border-collapse:separate/collapse; 說明：合并相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開)默認值； collapse(邊框合并) 3、無內容時單元格的設置：empty-cells:show/hide; 說明：定義當單元格無內容時，是否顯示該單元格的邊框區域；show：顯示；hide：隱藏； 4、顯示單元格行和列的算法(加快運行的速度)： table-layout:auto/fixed;

本文轉自知乎號：千鋒HTML5學院

用JavaScript訪問和操作的HTML DOM對象的例子。

Document 對象

使用 document.write() 輸出文本
使用 document.write() 輸出 HTML
返回文檔中錨的數目
返回文檔中第一個錨的 innerHTML
返回文檔中表單的數目
返回文檔中第一個表單的名字
返回文檔中的圖像數
返回文檔中第一個圖像的ID
返回文檔中的鏈接數
返回文檔中的第一個鏈接的ID
返回文檔中的所有cookies的名稱/值對
返回加載的文檔的服務器域名
返回文檔的最后一次修改時間
返回加載的當前文檔的URL
返回文檔的標題
返回文檔的完整的URL
打開輸出流，向流中輸入文本
write() 和 writeln()的不同
用指定的ID彈出一個元素的innerHTML
用指定的Name彈出元素的數量
用指定的tagname彈出元素的數量

Anchor 對象

返回和設置鏈接的charset屬性
返回和設置鏈接的href屬性
返回和設置鏈接的hreflang屬性
返回一個錨的名字
返回當前的文件和鏈接的文檔之間的關系
改變鏈接的target屬性
返回一個鏈接的type屬性的值

Area 對象

返回圖像映射某個區域的替代文字
返回圖像映射某個區域的坐標
返回一個區域的href屬性的錨部分
返回的主機名：圖像映射的某個區域的端口
返回圖像映射的某個區域的hostname
返回圖像映射的某個區域的port
返回圖像映射的某個區域的href
返回圖像映射的某個區域的pathname
返回圖像映射的某個區域的protocol
返回一個區域的href屬性的querystring部分
返回圖像映射的某個區域的shape
返回圖像映射的某個區域的target的值

Base 對象

返回頁面上所有相對URL的基URL
返回頁面上所有相對鏈接的基鏈接

Button 對象

當點擊完button不可用
返回一個button的name
返回一個button的type
返回一個button的value
返回一個button所屬表的ID

Form 對象

返回一個表單中所有元素的value
返回一個表單acceptCharset屬性的值
返回一個表單action屬性的值
返回表單中的enctype屬性的值
返回一個表單中元素的數量
返回發送表單數據的方法
返回一個表單的name
返回一個表單target屬性的值
重置表單
提交表單

Frame/IFrame 對象

對iframe排版
改變一個包含在iframe中的文檔的背景顏色
返回一個iframe中的frameborder屬性的值
刪除iframe的frameborder
改變iframe的高度和寬度
返回一個iframe中的longdesc屬性的值
返回一個iframe中的marginheight屬性的值
返回一個iframe中的marginwidth屬性的值
返回一個iframe中的name屬性的值
返回和設置一個iframe中的scrolling屬性的值
改變一個iframe的src

Image 對象

對image排版
返回image的替代文本
給image加上border
改變image的高度和寬度
設置image的hspace和vspace屬性
返回image的longdesc屬性的值
創建一個鏈接指向一個低分辨率的image
返回image的name
改變image的src
返回一個客戶端圖像映射的usemap的值

Event 對象

哪個鼠標鍵被點擊了？
被按下的鍵盤鍵的keycode？
鼠標的坐標？
鼠標相對于屏幕的坐標？
shift鍵被按下了嗎？
哪個元素被按下了？
哪個事件發生了？

Option 和 Select 對象

禁用和啟用下拉列表
獲得有下拉列表的表單的ID
獲得下拉列表的選項數量
將下拉列表變成多行列表
在下拉列表中選擇多個選項
彈出下拉列表中所有選項
彈出下拉列表中被選中的選項的索引
改變下拉列表中被選中的選項的文本
刪除下拉列表中的選項

Table, TableHeader, TableRow, TableData 對象

改變表格邊框的寬度
改變表格的cellpadding和cellspacing
指定表格的frame
為表格指定規則
一個行的innerHTML
一個單元格的innerHTML
為表格創建一個標題
刪除表格中的行
添加表格中的行
添加表格行中的單元格
單元格內容水平對齊
單元格內容垂直對齊
對單個單元格的內容水平對齊
對單個單元格的內容垂直對齊
改變單元格的內容
改變單元格橫跨的列數(colspan屬性)

例

設置一個段落的高度和寬度：

p.ex

{

height:100px;

width:100px;

}

屬性定義及使用說明

height屬性設置元素的高度。

注意： height屬性不包括填充，邊框，或頁邊距！

默認值：	auto
繼承：	no
版本：	CSS1
JavaScript 語法：	object.style.height="50px"

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

屬性
height	1.0	4.0	1.0	1.0	7.0

屬性值

值	描述
auto	默認。瀏覽器會計算出實際的高度。
length	使用 px、cm 等單位定義高度。
%	基于包含它的塊級對象的百分比高度。
inherit	規定應該從父元素繼承 height 屬性的值。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：Vue基礎之v-bind、計算屬性
下一篇：從零開始學Vue-vue模板和組件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商