html 1

時間  2019-12-04
標籤 html 欄目 HTML 简体版
原文   原文鏈接

課程安排css

 

Html + css 四天html

 

u Html是什麼html5

1. html (hypertext mark-up language)是 超文本標記語言, 主要的用處是作網頁, 能夠在網頁上顯示 文字、圖像、視頻、聲音…面試

<input type=」text」 name=」xxx」/>瀏覽器

 

☞ 標記==元素 網絡

簡單說明一下動態網頁的示意圖:框架

 

 

u Html歷史佈局

 

 

 

1999 html--  xhtml (xhtml 能夠理解成就是html的增強版) -&agrave;xml網站

 |url

2008 html5.0

 

u W3c的介紹

是一個制定標準的組織 ( 好比 給 html ,xhtml ,css ,xml , wml…制定標準)

 

☞ 不一樣的瀏覽器，去訪問同一個網頁，可能看到的效果是有差異!->hack

 

u Html的運行原理

Hello.html

Html的運行有兩種方式

 

Html文件的基本結構

 

<html>

<head></head>

<body></BODY>

</html>

 

1.本地運行

 

所謂本地運行就是直接用 瀏覽器打開

 

 

 

2. 遠程訪問

 

 

l 何爲協議? 計算機互相通訊(網絡)的規則. ftp smtp pop http

 

遠程訪問的原理示意圖:

 

  

 

☞  這裏咱們涉及到http協議，這裏咱們沒有深刻講解， 可是這是一個很是重要的知識點.

 

Html的基本結構

 

<html>

<head>

<元素 屬性1=」值」 …./>

</head>

<body>

<元素 屬性1=」屬性值」 屬性2=「屬性值」 …>內容</元素>

<元素 屬性=」屬性值」/> 

</body>

</html> 

 

說明

1. 標記一般是成對出現 <head></head>

2. 單標記 <br/>

 

案例:

 

Demo1.htm

<html>

<head></head>

<body>

<b>橫當作林</b><br/><br/>

<font color="red">遠近高低各不一樣</font><br/>

<!--size 值能夠取 1..7 -->

<font style="font-size:30px;">不知廬山真面目</font><br/>

</body>

</html>

 

面試: 請問 後綴 html 和 htm 有什麼區別?

答: 1. 若是一個網站有 index.html  和 index.htm  默認狀況下，優先訪問 .html

3. htm 後綴是爲了兼容之前的dos 系統 8.3的命名規範

 

 

u html符號實體

 

 

說明：當咱們在網頁中有一些特殊字符時候，能夠考慮使用字符實體(char entity)

 

 

 

超連接的案例:

<br/>*****************<br/>

<a href="a.html" target=」_self,_blank,_top,_parent」>鏈接到a.html</a><br/>

<!--若是咱們但願在點擊該超連接後，就跳轉到外網的某個地址，則應當寫完整的url-->

<!--url 統一資源定位-->

<a href="http://www.baidu.com">跳轉到百度</a><br/>

<a href="mailto: hanshunping@tsinghua.org.cn">聯繫管理員</a>

 

 

圖片:

 

 

<img src=」圖片的路徑/該圖片也但是一個url」 width=」寬度」 heigth=」高度」/>

 

u Html的表格元素

l 在之前對網頁佈局要求不高的狀況下，使用 table 佈局(即便用表格來顯示數據，同時用於佈局)

 

快速入門:













<html> 
<body>
<table  align="center" height="10px" bgcolor="yellow" border="3px" width="400px">
<!--tr表示一行-->
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align="right">
<td>2</td>
<td align="center">4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr> 
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>

 

應用案例 ：

 

1. 肯定行

 

 

 

代碼 以下:

 

<html>
<body>
<!--
<table  align="center" height="10px" bgcolor="yellow" border="3px" width="400px">
<!--tr表示一行
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align="right">
<td>2</td>
<td align="center">4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr> 
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
</table>-->
<table height="150px">
<tr><td></td></tr>
</table>
<!--顯示菜單-->
<table border="1"  align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px" >
<tr>
<!--colspan="3" 表該列要佔用三列-->
<td align="center" colspan="3">菜譜</td>
 
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
 
<tr>
 
<td>小炒韭菜</td>
<td>白豆腐</td>
</tr>
<tr>
<td rowspan="2">葷菜</td>
<td>清蒸龍</td>
<td>魚香肉絲</td>
</tr>
<tr>
 
<td>小炒肉 <img src="dog.jpg" width="70px" /></td>
<td>水煮肉片</td>
</tr>
</table>
</body>
</html>

課堂練習:

 

 

 

<html>
 
<title>俺第一個實例</title>
<head>
</head>
<body>
<Center>
成績表
</center>
<br/>
<!--表格-->
<table align="center" align="center" bordercolor="579AFE" height="10px"  border="3px" width="500px">
<tr align="center">
<td>項目</td>
<td colspan="5" align="center">上課</td>
<td colspan="2" align="center">休息</td>
</tr>
 
<tr bgcolor="pink" align="center">
<th>星期</b></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
 
<tr align="center">
<td rowspan="4" align="center">上午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="4" align="center">休息</td>
</tr>
 
<tr align="center">
 
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
 
</tr>
 
<tr align="center">
 
<td>化學</td>
<td>語文</td>
<td>體育</td>
<td>計算機</td>
<td>英語</td>
<td>計算機</td>
 
</tr>
 
<tr align="center">
 
<td>政治</td>
<td>英語</td>
<td>體育</td>
<td>歷史</td>
<td>地理</td>
<td>計算機1</td>
 
</tr>
<tr></tr>
<tr align="center" >
<td rowspan="2" 
>下午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="2">休息</td>
</tr>
 
<tr align="center">
 
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
 
</tr>
 
 
 
</table>
</body>
</html>

 

u 無序列表

<ul>

<li></li>

</ul>

 

案例:

 

代碼:

<ul type="circle">

<li>英雄</li>

<li>精武門</li>

<li>西遊記</li>

</ul>

 

☞ type 能夠取 disc 、 circle 、 square

 

 

u 有序列表 

  

代碼:

 

<ol type="I" >

<li>盧俊義</li>

<li>吳用</li>

<li>林沖</li>

</ol>

☞ type用於指定用什麼來顯示, start 表示從第幾開始計算.

 

u Frameset框架集

用途主要是用於分割顯示多個頁面

☞ framest 和 frame 配合使用，通常講是用於後臺頁面

快速入門:

  

代碼

A2.html 頁面用於保護其它頁面

<frameset cols="30%,*">

<frame name="frame1" src="b.html"  noresize frameborder="0"/>

<frame name="frame2" src="c.html" frameborder="0"/>

</frameset>

 

☞ 該頁面不能有body和body體

 

b.html

<body bgcolor="pink">

<!--target表示咱們點擊後，目標指向誰-->

<a href="zjl.html" target="frame2">周杰倫</a><br/>

<a href="qq.html" target="frame2">齊秦</a><br/>

</body>

 

 

☞ target 屬性值有四個

_blank : 表示打開一個全新的頁面

_self: 替換本頁面

_top: 

_parent:

* 還有一個就是在 target 值中直接寫對應的那個 frame的名字.

 

c.html:

<body bgcolor="silver">

歌詞大全

</body>

 

其它頁面

 

 

Frameset的綜合小案例:

 

 

結構示意圖:

 

 

 

案例

All.html
<frameset rows="20%,*">
<frame src="top.html" scrolling="no"/>
<frameset cols="20%,*">
<frame src="left.html" noresize frameborder="0" />
<frame src="right.html" name="myframe" frameborder="0"/>
</frameset>
</frameset>
 
Top.html
<img src="title.JPG"/>
Left.html
<body bgcolor="pink">
<ul>
<li><a href="zjl.html" target="myframe">青花瓷</a></li>
<li><a href="qq.html" target="myframe">當兵的人</a></li>
</ul>
</body>
 
Right.html
 
<body bgcolor="silver">
歌詞大全
</body>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程