1.如何理解HTML?
- HTML類似于一份word“檔案”
- 描述檔案的“結構”
- 有區塊和大綱
2.對WEB標準的理解?
Web標準是由一系列標準組合而成,一個網頁主要由三部分組成:結構層、表現層和行為層,
對應的標準也分三方面:
- 結構化標準語言主要包括XHTML和HTML以及XML,
- 表現層標準語言主要包括CSS,
- 行為標準主要包括物件模型,DOM、ECMAScript等
2.1 結構層標準
結構化標準語言,就是W3C規定的主要包括HTML和XHTML以及XML,在頁面body里面我們寫入的標簽都是為了頁面的結構,
- 標簽的書寫,需要開始和結束,單便簽除外;
- 塊級元素不能放在p標簽里面,li內可以包含div標簽,
- 塊元素里面可以放在塊和行內,特殊的 p和 h1—h6里面不要放塊元素,li和div可以放很多,因為這兩個標簽,本身就有容器的屬性
- 行內里面要放行內,不要放塊,(嵌套關系)
- 結構與表現分離
- 命名一定要規范
2.2 表現層標準
表現標準語言主要包括CSS(Cascading Style Sheets)層疊式樣式表,通過CSS樣式表,W3C創建CSS標準的目的是以CSS取代HTML表格式布局、幀和其他表現的語言,通過CSS樣式可以是頁面的結構標簽更具美感,
- 盡可能使用外部引入的方式,達到分離的目的
- CSS選擇器,優先級
- 代碼簡潔
2.3 行為層標準
行為是指頁面和用戶具有一定的互動,同時頁面結構或者表現發生變化,標準主要包括物件模型(如W3C DOM)、ECMAScript并要求這三部分分離,
-
DOM是Document Object Model檔案物件模型的縮寫,DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突,給予web設計師和開發者一個標準的方法,讓他們來訪問他們站點中的資料、腳本和表現層對像,
-
ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的標準腳本語言(JAVAScript)
3.對W3C的認識?
W3C對web標準提出了規范化的要求,也就是在實際編程中的一些代碼規范,
主要包含如下幾點:
3.1 對于結構的要求
- 1)標簽字母要小寫
- 2)標簽要閉合
- 3)標簽不允許隨意嵌套
3.2 對于css和js的要求
- 1)盡量使用外鏈css樣式表和js腳本,使結構、表現和行為分為三塊,符合規范,同時提高頁面渲染速度,提高用戶的體驗,
- 2)樣式盡量少用行間樣式表,使結構與表現分離,標簽的id和class等屬性命名要做到見文知義,標簽越少,加載越快,用戶體驗提高,代碼維護簡單,便于改版,
- 3)不需要變動頁面內容,便可提供列印版本而不需要復制內容,提高網站易用性,
4.什么是前端語意化?
[!NOTE]
語意化就是是讓機器可以讀懂內容,web頁面的決議是由搜索引擎來進行搜索,機器來決議,
4.1 標簽是有語意的
h1~h6、thead、ul、ol等標簽,初期的語意化標簽:程式員利用HTML標簽的id和class屬性,進一步對HTML標簽進行描述,如對頁腳HTML標簽添加如id="footer"或者class="footer"的屬性(值)(使用有語意的對于需要宣告的變數和class,id)
4.2 HTML5的語意標簽
w3C采用了header/footer; section(章節、頁眉、頁腳)/article(內容區域); nav導航;aside 不重要的內容;em(emphasize)/strong增強; i(icon)制作圖示
5.談一下頁面布局架構?
- CSS布局:table布局,float布局,flex布局(瀑布流布局),inline-block布局
- 三大框架,頁面架構
6.HTML的版本問題?
- HTML4/4.0.1(SGML)(標簽允許不結束)
- XHTML(XML)(標簽必須結束,屬性必須帶引號,屬性必須有值,標簽屬性必須有值)
- HTML5(類似于HTML4的寫法)
[!NOTE]
關鍵點:HTML是一種基本的WEB網頁設計語言,XHTML是一個基于XML的置標語言
7.HTML5新增的內容有哪些?
- 新的區塊標簽:section,article,nav,aside
- 表單增強:日期、時間、搜索(修改type的型別實作);表單驗證;placeholder
- 語意增強:header/footer; section/article; nav導航;aside 不重要的內容;em(emphasize)/strong增強; i(icon)制作圖示
8.HTML的元素分類?
- 塊級元素block(方塊形狀,占據一整行):div ul ol li dl dt dd h1 h2 h3 h4…p
- 行內元素inline(一行中的某個位置):a b span img input select strong(強調的語氣)
- inline-block(行內,有寬高屬性):selection
[!NOTE]
行內元素:a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:br、meta、hr、link、input、img
9.HTML嵌套關系?
- 塊級元素可以包含行內元素
- 塊級元素不一定能包含塊級元素(p標簽不能包含div標簽)
- 行內元素“一般”不能包含塊級元素(a包含div是可以的)
10.HTML的默認樣式?
- 默認樣式的意義
- 默認樣式代理的問題
- CSS Reset 的作用
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
11.使用ajax方式來提交資料可以不使用form標簽嗎?
- form標簽可以使用submit, reset
- 使用form可以直接一次性獲取所有的form表單的資料屬性
- form可以較好地實作表單驗證等功能
11.1 Form表單提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="login test">
</head>
<body>
<div id="form-div">
<form id="form1" action="/users/login" method="post">
<p>用戶名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=https://www.cnblogs.com/fecommunity/p/""/>
密 碼:
 
