程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> JAVA綜合教程 >> JavaWeb之HTML入門及常用標簽,javaweb入門標簽

JavaWeb之HTML入門及常用標簽,javaweb入門標簽

編輯:JAVA綜合教程

JavaWeb之HTML入門及常用標簽,javaweb入門標簽


 

HTML:

  HTML的概述及作用: 

    HTML全稱為HyperText Markup Language,譯為超文本標記語言,不是一種編程語言,是一種描述性的標記語言,用於描述超文本中內容的顯示方式。比如字體什麼顏色,大小等。
    Html就是超文本標記語言的簡寫,是最基礎的網頁語言。
    Html是通過標簽來定義的語言,代碼都是由標簽所組成。

  HTML的基本格式:

<html>
    <head>
    放置一些屬性信息或者輔助性的信息
        <title></title>
    引入外部的文件
    會先加載
    </head>
    <body>
    真正存放數據內容的地方
    其他的標簽
    </body>
</html>

A:通過觀察格式,發現
Html代碼由<html>開始</html>結束。裡面由頭部分<head></head>和體部分<body></body>兩部分組成。
頭部分是給Html頁面增加一些輔助或者屬性信息,它裡面的內容會最先加載。
體部分是真正存放頁面數據的地方。

B:對格式的解釋
html:放在html文件的開頭,但沒有實質性的功能,即使沒有這個標記,浏覽器在碰到其他的html標記時也一樣會進行解析。
浏覽器內置了html語言的解析器.
可以設置默認打開浏覽器:工具—文件夾選項-文件類型
head:頭標記,放置關於此html文件的信息,如提供索引,定義css等。
title:標題標記,包含在head標記內,它的作用是設定網頁的標題。
body:主體標記,網頁所需要顯示的內容都放在這個標記內。

* 以.html或者.htm來結尾
* 浏覽器就可以解析HTML的文件。

 

  HTML的注意事項:

 一般的標簽都有開始和結束,只有單一的功能,可以在標簽內部結束。
改變屬性,達到好的顯示效果
屬性值可以使用雙引號,單引號,或者不用引號,一般采用雙引號,或者根據公司的規范。


* MyEclipse
* 設置工作空間的編碼
* window-首選項-General-workspace-選擇UTF-8的編碼
* Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的編碼
* Window—preferences—General—Editors—File Associations—選擇*.html—選擇MyEclipse HTML Editor—選擇default—選擇ok


* HTML的標簽
* 排版標簽
* 換行標簽 <br/> (用的比較少)
* 水平線 <hr/>
* 屬性:color:顏色
* 顏色的寫法:有兩種寫法:1)顏色的英文單詞 2)RGB三原色(red green blue) #ffffff
* 屬性:width:寬度
* 值有兩種寫法:1)像素值(300px)2)百分比(30%)
* 區別:百分比會隨著浏覽器大小而改變,像素不會。
* 空格:&nbsp;
* 段落標簽(用的相對較多)
* <p></p>
* 特點:在開始和結束的位置上,各產生一行空行。
* 屬性:align:對齊的方式

* <div></div>
* <span></span>
* 標簽非常的簡單,就是在浏覽器上聲明一塊區域。
* 區別:div後面有換行,span沒有。

* 塊級元素和行內元素(了解)


* 字體標簽
<font></font>(重要的)
* color:顏色
* size:字體的大小
* 最大值和最小值 最大值是7 最小值是1
* 默認值是3,size的寫法又提供了一種(+2)
* face:字體的類型

* 標題的標簽(用的比較少)
* <h1></h1>
...
* <h6></h6>
* 從1到6是逐漸縮小的。

* 粗體和斜體的標簽
<b></b>
<i></i>

* 標簽是可以嵌套的
<b><i></i></b>

* HTML的特殊字符
< : &lt;
> : &gt;
& : &amp;

* 滾動字幕(忘了吧)
marquee

* 列表標簽
* 把數據進行格式化,指定的格式。

* 列表標簽
<dl>(用的較少)
<dt>上層項目</dt>
<dd>下層項目</dd>
<dd>下層項目</dd>
</dl>

* dd標簽的特點:默認縮進和自動對齊的。

* 有序列表和無序列表
有序:(也是比較多的)
<ol>
<li></li>
</ol>
* 屬性: type 類型
start 從哪開始

無序:(用的非常多)
<ul>
<li></li>
</ul>
* 屬性:type

* 不管是有序還是無序,中間數據的條目都使用<li></li>


* 圖片標簽(重要*****)
<img />
* 屬性:
* 屬性:src="圖片的地址"
* width 圖片的顯示寬度
* height 圖片顯示的高度
* alt 圖片的說明文字


* 超鏈接的標簽(重要*****)
* <a>文本內容</a>
<a></a>
* 鏈接資源
* 屬性:href="指定鏈接的資源的地址"
* 注意:如果鏈接網絡資源,需要協議寫上。如果沒有協議,默認file文件協議。
* 注意:如果浏覽器可以解析的文件,直接就打開了。
* 如果浏覽器不可以解析的文件,彈出下載窗口。
* 自定義的協議
* 如果浏覽器解析不了的協議,會找操作系統上的應用程序。

* target:打開的位置。

* 定位資源
* 專業的術語 錨
* 屬性:name

* 表格標簽(*****)
表格標簽
<table>:聲明表格的范圍
* 屬性: border="1"
width:表格的寬度
height:高度
bgcolor:背景的顏色
cellpadding:內邊距

<caption>標題</caption>
<tr>:代表表格的行
* 屬性:align:文字的對齊方式

<td>:單元格
屬性:width:寬度
height:高度
合並單元格:
行合並:rowspan="2"
列合並:colspan="2"
</td>
</tr>
<tr>
<th></th>:單元格
</tr>
</table>

* 注意:td與th的區別:th默認居中並且加粗的


* 表單標簽(重要**********)
<form>:封裝表單的范圍。
* 屬性: action="請求提交的路徑"

method="表單的提交方式"
* 面試題:表單的提交方式有哪些?
* 答:表單的提交方式有很多,常用的有兩種,get和post。
* get和post提交方式的區別:
* get方式提交時,會把數據顯示在地址欄上。
* post方式不會。

* get方式提交時,安全級別較低。
* post方式安全級別較高。

* get方式提交時,數據大小有限制。
* post方式不會。

* 輸入項的表單組件
<input />
* 非常重要的屬性:type,根據type值的不同,提供了不同的輸入項的組件。
* 列子:<input type="text" />

type=text 文本輸入框
type=password 密碼輸入框
type=radio 單選按鈕
* 提供了屬性name(name的值是相同的)
* 默認被選中的:checked=checked或者true

type=checkbox 多選按鈕
* 默認被選中的:checked=checked或者true

type=file 文件的選擇框
type=hidden 隱藏組件
type=button 按鈕(史上最難看的)
type=image 和提交按鈕是相同的作用。
type=reset 重置
type=submit 提交數據

* 選擇框
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>

* 文本域
<textarea rows="" cols=""></textarea>

</form>

* 注意:點擊了提交按鈕後,地址欄發送了變化(?sex=on)* ?username=haha&sex=on
* ?username=zhangsan&pwd=123&sex=nan&love=lq

* input標簽需要提供兩個屬性,一個屬性name,一個是value
(*****)name屬性必須要指定,value看情況指定。


* 框架標簽(用的比較少)
* 使用<frameset></frameset> :注意:不能在body標簽的內部和下面來使用該標簽。





















  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved