html網(wǎng)頁編寫基本代碼

html結(jié)構(gòu):

<標記>
內(nèi)容
<標記>

標記屬性:
<標記 屬性=屬性值 屬性1=屬性值1>內(nèi)容<標記>
在網(wǎng)頁編寫的時候盡量使用小寫

<-注釋內(nèi)容->

利用tab給代碼縮進

使用實體名稱來代替符號。

html基本結(jié)構(gòu):

<html>文檔標記,網(wǎng)頁的開始和結(jié)束

<head>文件頭標記,網(wǎng)頁的標題,關(guān)鍵字標記

<title>網(wǎng)頁的文件標題標記,網(wǎng)頁的瀏覽器上的主題。

<body>網(wǎng)頁主體部分,可以標記p h1 br hr等標記,構(gòu)成我們所看到的網(wǎng)頁。
body的常見屬性有 bgcolor,text,link,vlink,alink

<meta>提供頁面的元信息,針對SOE的屬性,必須的屬性是Content
例如 <meta name="key words" content="you key words">,必須放在head元素內(nèi)。
<meta charset="UTF-8">

文檔標記

br 強制換行
p 換段落
center 居中對齊
pre 預格式化
li 列表項目
ul 無序列表
ol 有序列表,可嵌套,可設(shè)置type值
dl,dt,dd 定義型列表
hr 水平分割標記
div 分區(qū)顯示標記,用來編排大段落和格式化表。

文本標記

h1-h6,六個級別的標題格式
font 字體設(shè)置標記,三個屬性,size,color,face
b,字體加粗
i,斜體字
sub 上標文字
sup 下標文字
tt 打印機字體標記
cite 引用方式,斜體
em 強調(diào),通常顯示為斜體
small 可以多個嵌套,會顯示多級變小。
big 多級變大
u 下劃線字體標記

圖像標記

img 圖像標記,src 制定圖片路徑,名稱,格式。width 寬,hight高,border邊框?qū)挾龋琣lt,加載完成后顯示指定的文字,沒有下載或者加載失敗,文字代替圖像顯示,搜索引擎通過文字抓取圖片。

超鏈接

href,鏈接網(wǎng)頁視頻圖片。#aaa,錨鏈接。
target,blank新窗口打開,seif(默認)在本窗口打開,parent,父窗口打開(多框架),top頂層窗口打開(框架中用)
name指定頁面錨鏈接。

表格標記

  • table,表格標記
  • caption,標題標記,位于table后,tr之前
  • th表頭標記,位于首行或者首列
  • td是數(shù)據(jù)標記,標示單元格內(nèi)的具體數(shù)據(jù)。
  • td和th都是單元格標記,必須嵌套tr內(nèi)
  • th文字默認會被加粗,td不會
    border,表哥邊框?qū)挾?br> align 表格顯示位置left center right
    cellspacing,單元格之間的間距
    cellpadding,單元格內(nèi)容與單元格邊框的顯示距離
    frame,控制表格最外層的四條邊線。void無邊框,above只有上面有,below底部有,hsides頂部和底部有,lhs左側(cè)有,rhs右側(cè)有,vsides左右側(cè)有,box包含全部邊框,border包含全部邊框
    rules控制單元格之間的分割線,no表示無分割線,all所有分割,rows只有行,clos只有列,groups行列之間有。
    tr標記,bgcolor,align bottom top middle,valign center left right

HTML框架

把瀏覽器分割開,同窗多頁面。
frameset,cols平分數(shù)量,rows上下分數(shù)量,例如rows="30%,70%"
src 指定加載頁面
name 框架名稱,鏈接標記target的所需要參數(shù)
noresize表示不能調(diào)整框架大小,沒有設(shè)置表示可以調(diào)整
scrolling,是否需要滾動條,auto,yes,no
frameborder,是否需要邊框,1顯示,0不顯示。

表單設(shè)計

form 表單標記,定義表單開始位置和結(jié)束位置
基本格式form action="service address(表單內(nèi)容接受地址) " name= method="post|get"
method傳送數(shù)據(jù)的方式,分為post和get,

  • post方式提交,表單中的數(shù)據(jù)一并包含在表單的主體種,一起傳送到服務(wù)器種處理,沒有數(shù)據(jù)大小限制。
  • get提交,表單的內(nèi)容附加在url地址后面,限制提交的長度不能超過8192個字符,不具備保密性。
    action 表單處理程序的url地址,如果為空,則使用當前文檔的url地址,如果表單中不需要使用action屬性,也要制定其屬性為"no"
    enctype設(shè)置表單的資料的編碼方式
    target和超鏈接的屬性類似,用來制定目標窗口。

按鈕:inputtype= submit提交,reset充值 button 普通
radio單選
chekebox復選
單選和復選可以用cheked默認選擇好的項目
input type=hidden 隱藏表單域

多行文本域,textarea,cols=? rows=?

菜單下拉select ,option value=value selected

CSS樣式的方法

內(nèi)鏈式樣式表
<body style=background-color:green;margin:0,padding:0;"><body>

嵌入式樣式表
style type="text/css"> <style> 需要放在head中

引入式樣式表 link rel=stylesheet type=text/css href=style.css

css定義樣式表

html標記定義:p,選擇器,定義那個標記中的內(nèi)容執(zhí)行其中的樣式,一個選擇器可以控制若干個樣式屬性,他們之間需要用;隔開,最優(yōu)一個可以不用加;

class定義:<p class=“p”>....</p>
class定義以“.”開始

ID定義:p id=“p”
以#開始

P{屬性:屬性值;屬性1......}

組合選擇器
h1,h2,h3,h4{color:red;font-size:14px;} 組合選擇器,可以用","隔開

偽裝元素選擇器
a:link 正常連接的樣式
a:hover 鼠標放上去的樣式
a:active選擇鏈接時的樣式
a:visited 已經(jīng)訪問過的鏈接樣式

常見屬性:
color:#ff6600
color:green
color:rgb(255,255,255)
color:rgba(255,255,255,1) (透明度)

font-size :
px
%根據(jù)父元素的百分比
smaller 比父元素更小
larger 同上
inherit 繼承父元素
定義字體:font-family:微軟雅黑,serif; (可以用“,”隔開,以確保當字體不存在的時候用下一個。用于字體屬性。
字體加粗font-weight: normal (400),bold(700) ,lighter(更細),取100-900的整百數(shù)。

圖片屬性:
background-color:

background-image:rul

background-repeat:
repeat 重復平鋪滿,no-repeat不重復

background-position: 圖片位置
center
left,right,top ,bottom
簡寫方式:
background:#f2f2f2 url(image/bg.gif) no-repeat 20px 20px

邊框?qū)傩?br> border-style
border-bottom -style 下邊框樣式(單獨定義其中一個方向的邊框)
邊框風格樣式:
none無邊框
solid直線
dashed虛線邊框
dotted點狀邊框
double雙線邊框
groove凸邊框
ridge 壟邊框
inset
outset
inherit 繼承

border-color 統(tǒng)一風格

border-top-color 上邊框顏色(單獨風格)

列表屬性:
list-style-image 設(shè)置圖像列表標記,url圖像路徑,none無圖像
簡寫: list-style:square inside url(XX.jpg)

div和span盒模型

div和span在html表集中存在意義為了用css樣式。
div和span的區(qū)別在于,span是內(nèi)聯(lián)元素,div是塊元素。

盒子模型:
外邊距margin
內(nèi)邊距padding
邊框?qū)挾萣order
盒子寬度width
盒子高度height

布局相關(guān)屬性

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,200評論 1 4
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,135評論 1 92
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進行統(tǒng)一,系統(tǒng)功能實現(xiàn)集...
    liusong007閱讀 1,200評論 0 1
  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,448評論 0 5
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進階之旅閱讀 16,874評論 32 459

友情鏈接更多精彩內(nèi)容