五道自測題-你我都應知道的HTML小知識

幾天學習了HTML相關的基礎知識之后，老師出了五道自測題，通過這幾天學習的總結，和查閱相關文檔，我也作出了自己的理解，以下是我學習的相關心得分享給大家。

1.HTML元素、標簽和屬性之間的關聯與區別？

如果想要搞清楚HTML元素、標簽、屬性之間的關系，首先我們應該了解3個概念：

什么是HTML標簽？
HTML標簽由一對尖括號（'<'，'>'）包裹起來的對象，如<div>、 <h1>，<p>等等都叫標簽。絕大多數的標簽都是成對出現的，如，<div></div>、 <h1></h1>，<p></p>，但是也有例外，比方說換行符<br />，分割線<hr />，這些標簽，開始標簽和結束標簽都是自身。
什么是元素？
一個HTML頁面是由多個元素組成的，一個元素是由一對標簽包含某些內容組成的，比如：<h1>Hello World</h1>，這個就是元素。
什么是屬性？
給HTML元素附加各種樣式的叫屬性，它是以“屬性名=屬性值”這種名、值對形式出現的，需要注意的是，屬性必須寫在元素的起始標簽中。

了解上述三個概念，我明白了，一個HTML頁面就是由多個元素構成，元素是由標簽描述，每一個元素的特征，都是由屬性決定的。

2.為什么說HTML是結構化的文檔?

根據W3C標準，HTML是一種Web語言，它是使用一些“標簽”來定義網頁內容的，例如我們在一個HTML文檔中寫<html xmlns="http://www.w3.org/1999/xhtml"></html>，就聲明了一個HTML文檔的開始，里面可以放各種標簽，一個HTML文檔是由以下結構構成的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
</body>
</html>

由以上代碼不難看出，HTML結構層次分明，是一種具有結構層次的標記語言，通過這些標簽可以告訴瀏覽器如何做出相應的解析。否則，如果HTML標簽任意位置都能放置，就沒法做標準高度統一了，那么瀏覽器也就無法做出正確的解析了。因此，我們看到的各種網頁，都是通過這種具有結構化的標簽組合而成的。

3.表單控件中的name屬性為什么非常重要？

表單控件中的name值，是前端與后端進行交互時傳值的變量名稱，后端只有通過控件的name值才可以接收到該值進行相應的處理。

4.為什么現在都不再使用表格進行頁面布局了？

1.頁面布局不靈活；
2.代碼的可讀性：表格布局的代碼可讀性低，沒有使用<div>， <h1>等標簽直觀；
3.表格加載速度慢；
4.不利于SEO；

5.一個元素，最終呈現的樣式，由幾方面的因素決定的？

1.繼承的：根據元素在文檔的結構和層級關系來確定它的最終樣式；
2.瀏覽器客戶端：用戶代理樣式（user agent style），基本上瀏覽器的表現樣式都是一致的；
3.用戶自定義：寫在HTML文檔<style>標簽中的樣式；
4.行內樣式（內聯樣式）：寫在元素的style屬性中的樣式。

以上就是我個人的總結，不知道是否完全正確，如果有錯誤的地方煩請各位指正，多謝大家。

：HTML 基本結構
<html> 標記放在 HTML 文件的開頭，是一個形式上的標記；
<body> 標記稱為主體標記，網頁所要顯示的內容都放在這個標記內，它是 HTML 文件的重要所在；
<head> 標記稱為頭標記，起的作用是放置關于此 HTML 文件的信息，如提供索引、定義 CSS 樣式等；
<title> 標記稱為標題標記，起的作用是設定網頁標題；

2:開發中常用的標簽
<b>文字以粗體方式顯示</b>
<i>文字以斜體方式顯示</i>
<u>文字以加下劃線方式顯示</u>
<s>文字以加下刪除方式顯示</s>
<big>文字以放大方式顯示</big>
<small>文字以縮小方式顯示</small>
<strong>文字以加強強調方式顯示</strong>
<em>文字以強調方式顯示</em>
<address>地址標簽：xxxxxx@一只快樂的小碼農.com</address>
<code>代碼塊</code>
align 屬性控制段落的水平位置
bgcolor 屬性設置背景顏色
無序列表 ul
有序列表 ol
2.1 段落標簽<p>
2.2 換行標簽<br>
2.3 標題標簽<h1>~<h6>
2.4 文字居中標簽<center>
2.5 文字段落縮進標簽<blockquote>
<img src="">網頁中嵌入圖片（height+weigth屬性調整圖片大小）
<form action="" method="">表單提交
<align="">對齊方式-left+right+center...
<div></div>-設置塊級元素
type="radio"-單選框
type="checkbox"-復選框
<select><option></option><select>-下拉菜單

基本符號代碼轉化

3：用 HTML 建立超鏈接
3-1框架之間的鏈接
3-1-1：//frameset框架標簽中用rows屬性將窗口分為上中下三部分
<frameset rows="30%,10%,*">
<frame>
<frame>
<frame>
</frameset>
3-1-2：//用src屬性在框架中插入網頁
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>
3-1-3//框架之間建立鏈接
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frame name="main">
</frameset>
</html>
4：下一節我們講css和js

例

組合表單中的相關元素：

<form>

<legend>Personalia:</legend>

Name: <input type="text" size="30"><br>

Email: <input type="text" size="30"><br>

Date of birth: <input type="text" size="10">

</fieldset>

</form>

瀏覽器支持

目前大多數瀏覽器支持 <legend> 標簽。

標簽定義及使用說明

The <legend> 元素為 <fieldset>元素定義標題。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01中 "align" 屬性已被廢棄, HTML5不支持該屬性。不建議使用。請使用 CSS 來設置 <legend> 元素的對齊方式。

屬性

屬性	值	描述
align	topbottomleftright	HTML5 不支持。 HTML 4.01 已廢棄。不建議使用。請使用樣式代替。為 fieldset 中的標題定義對齊方式。

全局屬性

<legend> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。

事件屬性

<legend> 標簽支持所有 HTML事件屬性。

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

在線咨詢

上一篇：湖北尚誠云IT教育：html css javascr
下一篇：HTML5實現文件批量上傳組件

您的項目需求

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