前端-HTML基礎

時間  2019-12-11
標籤 前端 html 基礎 欄目 HTML 简体版
原文   原文鏈接

1、什麼是HTML

hyper text markup language  即超文本標記語言javascript

超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。css

標記語言: 標記（標籤）構成的語言.html

網頁==HTML文檔，由瀏覽器解析，用來展現的java

靜態網頁：靜態的資源，如xxx.html編程

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的瀏覽器

html文檔樹形結構圖：服務器

2、標籤

1. 什麼是標籤

  • 是由一對尖括號包裹的單詞構成 例如: <html> *全部標籤中的單詞不可能以數字開頭.
  • 標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
  • 標籤分爲兩部分: 開始標籤<a> 和 結束標籤</a>. 兩個標籤之間的部分 咱們叫作標籤體.
  • 有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img />
  • 標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>

2. 標籤的屬性

  • 一般是以鍵值對形式出現的. 例如 name="alex"
  • 屬性只能出如今開始標籤 或 自閉和標籤中.
  • 屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
  • 若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly

3. <!DOCTYPE html>標籤

因爲歷史的緣由，各個瀏覽器在對頁面的渲染上存在差別，甚至同一瀏覽器在不一樣版本中，對頁面的渲染也不一樣。在
W3C標準出臺之前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差別(Quirks mode或者稱爲Compatibility 
Mode)；因爲W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱爲Strict mode也有叫作Standars
mode)，這就是兩者最簡單的區別。
W3C標準推出之後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來之前，
不少頁面都是根據舊的渲染方法編寫的，若是用的標準來渲染，將致使頁面顯示異常。爲保持瀏覽器渲染的兼容性，使以
前的頁面可以正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode
和Standars mode，兩種渲染方法共存在一個瀏覽器上。框架

window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。網站

若是你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。ui

這就是<!DOCTYPE html>的做用。

4. <head>標籤

<meta>

　　meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

　　1: name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="這是一個網站"/>

　　2: http-equiv顧名思義，至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，content中的內容其實就是各個參數的變量值 。

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意後面的引號，分別在秒數的前面和網址的後面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

其餘標籤

<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>

5. <body>標籤

塊級標籤和內聯標籤

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.
<b> <strong>: 加粗標籤.
<strike>: 爲文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
<div><span>

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

　　內聯標籤：<a><input><img><sub><sup><textarea><span>

　　block（塊）元素的特色

    • 老是在新行上開始；
    • 寬度缺省是它的容器的100%，除非設定一個寬度。
    • 它能夠容納內聯元素和其餘塊元素

　　inline元素的特色

    • 和其餘元素都在一行上；
    • 寬度就是它的文字或圖片的寬度，不可改變
    • 內聯元素只能容納文本或者其餘內聯元素

　　特殊字符

　　　　&lt; &gt；&quot；&copy;&reg;

圖形標籤<img>

src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

<img src="img/abc.jpg " alt="123" title="rua" width="300" height="300"/>

超連接標籤<a>

href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 
target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.
name: 定義一個頁面的書籤.
用於跳轉 href : #id.（錨）
<a href="http://www.xiaohuar.com/" target="_blank">

列表標籤

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>
<dl>
	<dt>第一章</dt>
	<dd>第一節</dd>
	<dd>第二節</dd>
	<dt>第二章</dt>
	<dd>第一節</dd>
	<dd>第二節</dd>
</dl>

表格標籤<table>

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好經過css來設置長寬）
<tr>: table row
         <th>: table head cell
         <td>: table data cell
rowspan:  單元格豎跨多少行
colspan:  單元格橫跨多少列（即合併單元格）
<th>: table header <tbody>(不經常使用): 爲表格進行分區.

<table bgcolor="beige" border="1px" cellpadding="5px" cellspacing="1px">
	<tr>
		<th rowspan="2">111</th>
		<th>222</th>
		<th>333</th>
	</tr>
	<tr>
		<td>222</td>
		<td>333</td>
	</tr>
	<tr>
		<td>111</td>
		<td colspan="2" align="center">222</td>
	</tr>
</table>

表單標籤<form>

<input> 標籤的屬性和對應值 

 type:     text 文本輸入框
             password 密碼輸入框
             radio 單選框
             checkbox 多選框  
             submit 提交按鈕            
             button 按鈕(須要配合js使用.) button和submit的區別？
             file 提交文件：form表單須要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的

 value:   表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

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

 checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

<select> 下拉選標籤屬性

name:表單提交項的鍵.
size：選項個數
multiple：multiple 
    <option> 下拉選中的每一項 屬性：
        value:表單提交項的值.   selected: selected下拉選默認被選中
    <optgroup>爲每一項加上分組

<textarea> 文本域

name:    表單提交項的鍵.
cols:    文本域默認有多少列
rows:    文本域默認有多少行

<label> 

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

<fieldset>

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

<form action="192.168.50.85:8080">
	<div>姓名<input type="text" name="user" /></div>
	<div>密碼<input type="password" name="passwd" /></div>
	<div>性別   男<input type="radio" name="gender" value="man"/>  女<input type="radio" name="gender" value="woman"/></div>
	<div>愛好   電影<input type="checkbox" name="hobby" value="movie"/>  音樂<input type="checkbox" name="hobby" value="music"/></div>
	<div><input type="submit" value="提交"/></div>
	<div><input type="button" value="提交"/></div>
	<div>簡介<textarea name="text" id="1" cols="30" rows="3">請輸入簡介</textarea></div>
	<div>省<select name="province" id="2" >
		<option value="henan">河南</option>
		<option value="hubei">湖北</option>
		<option value="hebei">河北</option>
	</select>
	</div>
</form>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程