前端之HTML

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

前端之html

HTML是一種超文本標記語言,是一種用於建立網頁的標記語言css

  • 它本質上是瀏覽器可識別的規則, 咱們按照規則寫網頁, 瀏覽器根據規則渲染咱們的網頁. 對於不一樣的瀏覽器, 對於同一個標籤可能會有不一樣的解釋. (兼容性問題)html

    記住它不是一種編程語言,它是用來描述網頁的前端

HTML文檔結構web

<!DOCTYPE>
<html lang="zh-CN"
<head>
  <meta charset="utf8">
  <title>css樣式優先級</title>
</head>
<body>

</body>
</html>

1.<!DOCTYPE>聲明爲HTML5文檔
2.<html>,</html>是文檔的開始標記和結束的標記,是HTML頁面的根元素,在它們之間是文檔的頭部(head)和主體(body).
3.<head>,</head>定義了HTML文檔的開頭部分. 它們之間的內容不會在瀏覽器的文檔窗口顯示,包含了文檔的元(meta)數據
<title>,</title>定義了網頁標題, 在瀏覽器標題欄顯示.
<body>,</body>之間的文本是可見的網頁主體內容

HTML標籤編程

  • HTML標籤是由尖括號包圍的關鍵字, 如<html.>,<div.>等
  • HTML標籤一般是成對出現的, 好比<div.>和</div.>, 第一個標籤是開始, 第二個標籤是結束, 結束標籤會有斜線.
  • 也有一部分標籤是單獨呈現的, 如:<br/.>,<hr/.>,<img src="1.jpg"/.>等
  • 標籤裏面能夠有若干屬性, 也能夠不帶屬性.

標籤的語法:瀏覽器

  • < 標籤名 屬性1="屬性值1" 屬性2="屬性值2".....>內容部分
  • <標籤名 屬性1="屬性1"屬性2="屬性值2"..../>

幾個很重要的屬性:服務器

  • id: 定義標籤的惟一ID, HTML文檔樹中惟一
  • class: 爲html元素定義一個或多個類名(classname)(CSS樣式類名)
  • style: 規定元素的行內樣式(CSS樣式)

HTML註釋和標籤編程語言

<!--註釋內容--> 
<!--註釋是標籤之母-->

<!DOCTYPE> 聲明必須是HTML文檔的第一行, 位於<html>標籤以前.
<!DOCTYPE> 聲明不是HTML標籤, 它是指示web瀏覽器關於頁面使用哪一個HTML版本進行編寫指令.

HTML經常使用標籤

head內經常使用標籤post

標籤 意義
定義網頁標題
定義內部樣式表
定義JS代碼或引入外部JS文件
引入外部樣式表文件
定義網頁原信息

Meta標籤網站

Meta標籤介紹:

  • <meta.>元素可提供有關頁面的元信息, 針對搜索引擎和更新頻度的描述和關鍵詞
  • <meta.>標籤位於文檔的頭部,不包含任何內容
  • <meta.>提供的信息是用戶不可見的
meta下http-equiv屬性
<!--指定文檔的編碼類型(須要知道)-->
<meta http-equiv="content-Type" charset='UTF8'>
<!--2秒後跳轉到對應的網址, 注意引號(瞭解)-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--告訴IE以最高模式渲染文檔(瞭解)
<meta http-equiv="x-ua-compatible" content="IE=edge"
meta下name屬性: 
主要用於描述網頁, 與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的.
<meta name="keywords" content="meta總結,html,meta屬性,meta跳轉">
<meta name="description" content="個人英雄學院">

body內經常使用標籤

基本標籤

<b>加粗</b>
<i>斜體</i>
<u>下劃線</U>
<s>刪除</s>

<p>段落標籤</p>

<h1>標題1</h1>
<h2>標題1</h2>
<h3>標題1</h3>
<h4>標題1</h4>
<h5>標題1</h5>
<h6>標題1</h6>

<!--換行-->
<br>

<!--水平線--> <hr>

特殊字符

內容 對應代碼
空格 &.nbsp;
大於號> &.gt;
小於號< &.lt;
& &.amp;
¥ &.yen;
版權 &.copy;
註冊 &.reg;

div標籤和span標籤

div標籤用來定義一個塊級元素, 並沒有實際的意義, 主要經過CSS樣式爲其賦予不一樣的表現

span標籤用來定義內聯(行內)元素, 並沒有實際意義, 主要經過CSS樣式爲其賦予不一樣的表現

塊級元素與行內元素的區別:

所謂塊元素, 是以另起一行開始渲染的元素,行內元素則不須要另起一行, 若是單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響,

這兩個元素是專門爲定義CSS樣式而生的

a標籤

超連接標籤

所謂超連接是指從一個網頁指向一個目標的鏈接關係, 這個目標能夠是另外一個網頁,也能夠是相同網頁上的不一樣位置,還能夠是一個圖片,一個電子郵件地址, 甚至能夠是一個應用程序.

什麼是URL?
URL是統一資源定位器的縮寫, 也被稱爲網頁地址, 是因特網上標準的資源的地址
URL舉例:
http://www.sohu.com/stu/intro.html
http://222.127.123.33/stu/intro.html

URL地址有4部分組成
第一部分: 爲協議: http://, ftp://等
第二部分: 爲站點地址: 能夠是域名或IP地址
第三部分: 爲頁面在站點中的目錄: stu
第四部分: 爲頁面名稱, 例如 index.html
各部分之間用"/"符號隔開
eg:
<a href="http://www.baidu.com" target="_blank">點我</a>

href屬性指定目標網頁地址.該地址能夠有幾種類型:

  • 絕對URL -執行另外一個站點(好比 href="http://www.jd.com")
  • 相對URL - 指當前站點中確切的路徑 (href="index.html")
  • 錨 - 指向頁面中的錨(href="#top")

target:

  • _blank表示在新標籤頁中打開目標網頁
  • _self表示在當前標籤中打開目標網頁

列表

1.無序列表

<ul type="disc">
    <li>第一項</li>
    <li>第二項</li>
</ul>

type屬性:

  • disc (實心原點, 默認值)
  • circle (空心圓圈)
  • square (實心方塊)
  • none (無樣式)

2.有序列表

<ol type="1" start="2">
    <li>第一項</li>
    <li>第二項</li>
</ol>

type屬性:

  • 1 數字列表, 默認值
  • A 大寫字母
  • a 小寫字母
  • I 大寫羅馬
  • i 小寫羅馬

3.標題列表

<dl>
    <dt>標題1</dt>
        <dd>內容1</dd>
    <dt>標題2</dt>
        <dd>內容1</dd>
        <dd>內容2</dd>
</dl>

表格

表格是一個二維數據空間, 一個表格由若干行組成,單元格里能夠包含文字.列表,圖案,表單,數字符號,預置文本和其餘的表格內容.

表格最重要的目的是顯示錶格類數據, 表格類數據時指最適合組織爲表格格式,(即按行和列組織)的數據

表格個基本結構:

<table>
   <thead>
      <tr>
          <th>序號</th>
          <th>姓名</th>
          <th>愛好</th>
      </tr>
   </thead>
   <tbody>
       <tr>
          <td>1</td>
          <td>kang</td>
          <td>wan</td>
       </tr>
      <tr>
          <td>2</td>
          <td>wei</td>
          <td>日天</td>
        </tr>
   </tbody>

</table>

屬性:

  • border: 表格邊框
  • cellpadding: 內邊框
  • cellspacing: 外邊距
  • width: 像素 百分比: (最好經過CSS來設置長寬)
  • rowspan: 單元格豎跨多少行
  • colspan: 單元格橫跨多少列( 即合併單元格)

HTML之form

功能:

表單用於向服務器傳輸數據,從而實現用戶與Web服務器的交互

表單可以包含input系列標籤,好比文本字段,複選框,單選框,提交按鈕等

表單還能夠包含textarea,select,filedset和lable

表單屬性

屬性 描述
accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集）。
action 規定向何處提交表單的地址（URL）（提交頁面）
autocomplete 規定瀏覽器應該自動完成表單（默認：開啓）
entype 規定被提交數據的編碼（默認：url-encoded）。若是是上傳文件須要將enctype="multipart/form-data"
method 規定在提交表單時所用的 HTTP 方法（默認：GET）。
name 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
movalidate 規定瀏覽器不驗證表單
target 規定action屬性中地址的目標(默認: _self).

表單元素

基本概念:

HTML表單是HTML元素中較爲複雜的部分, 表單每每和腳本,動態頁面,數輸處理等功能結合,所以它是製做動態網站很重要的內容.表單通常用來收集用戶的輸入信息

表單的工做原理:

訪問者在瀏覽有表單的網頁時,可填寫必須的信息,而後按某個提交按鈕提交,這些信息經過Internet傳送到服務器上.

服務器上專門的程序對這些數據進行處理,若是有錯誤會返回錯誤的信息,並要求糾正錯誤,當數據完整無誤後,服務器反饋一個輸入的信息.

input

<input>元素會根據不一樣的type屬性,變化爲多種形態.
type屬性 表現形式 對應代碼
text 單行輸入文本
password 密碼輸入框
date 日期輸入框
checkbox 複選框
radio 單選框
submit 提交按鈕 <input type='submit" value="提交"/>
reset 重置按鈕
button 普通按鈕
hidden 隱藏輸入框
file 文本選擇框

屬性說明:

  • name: 表單提交時的"鍵",注意和id的區別
  • value: 表單提交時對應的值
    • type="button", "reset", "submit"時, 爲按鈕上顯示的文本內容
    • type="text","password","hidden"時, 爲輸入框的初始值
    • type="checkbox","radio","file"時, 爲輸入相關聯的值
  • checked: radio和checkbox裏默認被選中的項
  • readonly: text和password設置只讀
  • disabled: 全部input均適用

select標籤

<form action="" method="post">
    <select name="city" id="city">
        <option values='1'>北京</option>
        <option selected="selected" value="2">上海</option>
        <option value="3">廣州</option>
        <option value="4">深圳</option>
    </select>
</form>

屬性說明:

  • multiple: 布爾屬性設置後爲多選,否者默認單選
  • disabled; 禁用
  • selected: 默認選中該項
  • value: 定義提交時的選項值

lable標籤

定義: 標籤爲input元素定義標註(標記)

說明:

  1. lable 元素不會向用戶呈現任何的特殊效果.
  2. 標籤的for屬性值應當與相關元素的id屬性值相同 
<form action="">
    <lable for="username">用戶名</lable>
    <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默認內容</textarea>

屬性說明:

  • name: 名稱
  • rows:行數
  • cols:列數
  • disabled:禁用

標籤的總結

塊級元素：塊級大多爲結構性標記

  <h1>...</h1>  標題一級

  <h2>...</h2>  標題二級

  <h3>...</h3>  標題三級

  <h4>...</h4>  標題四級

  <h5>...</h5>  標題五級

  <h6>...</h6>  標題六級

  <hr>  水平分割線

  <p>...</p>  段落

  <ul>...</ul>  無序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定義列表

  <table>...</table>  表格

  <form>...</form>  表單

  <div>...</div>

行內元素：行內大多爲描述性標記

  <span>...</span>

  <a>...</a>  連接

  <br>  換行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  圖片

  <i>...</i>  斜體

  <em>...</em>  斜體

  <del>...</del>  刪除線

  <u>...</u>  下劃線

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

·塊級元素

  1.老是重新的一行開始

  2.高度、寬度都是可控的

  3.寬度沒有設置時，默認爲100%

  4.塊級元素中能夠包含塊級元素和行內元素

·行內元素

  1.和其餘元素都在一行

  2.高度、寬度以及內邊距都是不可控的

  3.寬高就是內容的高度，不能夠改變

  4.行內元素只能行內元素，不能包含塊級元素
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程