前端 day 30 html 基礎一

時間  2020-05-22
標籤 前端 day html 基礎 欄目 HTML 简体版
原文   原文鏈接

前情提要:html

　　html基礎一瀏覽器

　　一:html標籤入門
框架

　　　　1:ide

1 HTML結構

1）一個html文件有且只有一個html標籤。這個就是HTML的根標籤。
2）一個HTML文件主要由兩部分組成：文件頭和文件體。文件頭就是<head>標籤包含的部分，它是用來告訴瀏覽器如何解析HTML文件；文件體就是<body>標籤包含的部分，它是用來存放網頁顯示的內容。測試

2:注意事項ui

 

⦁ 注意事項：
⦁ HTML標籤必須成對存在。例如：<b>和</b>；
⦁ HTML開始標籤和結束標籤中間是標籤內容。標籤內容能夠是文本，也能夠是其餘標籤；
⦁ 標籤名對大小寫不敏感，<b>和<B>是同樣的，可是建議標籤名使用小寫。
⦁ 標籤名是固定的，不可以任意修改；spa

　　二:基本標籤3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本標籤</title>
</head>
<body>
<!--標題標籤-->
<h1>晚來天欲雪,能飲一杯無.</h1>
<h2>晚來天欲雪,能飲一杯無.</h2>
<h3>晚來天欲雪,能飲一杯無.</h3>
<h4>晚來天欲雪,能飲一杯無.</h4>
<h5>晚來天欲雪,能飲一杯無.</h5>
<h6>晚來天欲雪,能飲一杯無.</h6>
<!--總計6個-->
<!--段落標籤-->
<p>年年歲歲花常在,歲歲年年人不一樣</p>
<p>年年歲歲花常在,歲歲年年人不一樣</p>
<!--換行增長一條橫線-->
<hr/>
<!--換行-->
<br/>
</body>
</html>

　2>　字符實體:code

 

　　三:html屬性htm

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html標籤的屬性</title>
</head>
<body bgcolor="blue">
<!--背景顏色-->
<h1 align="center">hehehe</h1>
<font color="pink" size="1">我是女神</font><br/>
<font color="red" size="2">樓上是女神</font><br/>
<font color="yellow" size="3">樓上說的對</font><br/>
<font color="yellow" size="4">贊同</font><br/>
<table border="1">zhangsanlisi</table>
<table border="2">123123</table>
<table border="3">zhangsanlisi</table>
</body>
</html>

 

 

 

　　四:html格式化標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格式化輸出</title>
</head>
<body>
<b>測試粗體</b>
<br/>
<!--加粗--> 2<big>測試大字號</big>3<br/> 1<em>測試着重文字</em>2<br/>
<i>測試斜體</i><br/>
<small>測試小號字</small><br/>
<strong>測試加劇語氣</strong><br/> h<sub>2測試下標記</sub>0<br/> h<sup>2測試上標記</sup>0<br/>
</body>
</html>

 

　　五:html列表標籤

　　　　1:無序列表

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表標籤</title>
</head>
<body>
<!--無序列表 type屬性:指定列表類型 disc:點 square:方塊 <circle:圓圈-->
<ul type="circle">
    <li> haha <p>chifan</p>
        <p>shuijiao</p>
        <h1>dadoudou</h1>
    </li>
    <li> nihao </li>
    <li> fwnzi </li>
</ul>
<!--有序列表
type屬性:指定類型能夠是1,A,a,i,I-->
<ol type="i">
    <li>早乙女</li>
    <li>泰勒</li>

</ol>
</body>
</html>
 

 

 

 

　2:自定義列表

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義列表</title>
</head>
<body>
<dl>
    <dt> cook </dt>
    <dd>huoji</dd>
    <dd>mianao</dd>
    <dt>
    <dd>chifan    </dd>
    </dt>
    <dt>xiaoshuo</dt>
    <dd>wenshan</dd>
    <dd>wensha1231233n</dd>
</dl>
</body>
</html>

 

　　六:html超連接標籤

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超連接標籤</title>
</head>
<body>
<a href="1html標籤入門.html">標籤入門</a>
<!-- a標籤：超連接標籤 工做原理： 1）若是a標籤的href屬性是以http開頭，那麼瀏覽器就會啓用http協議解析該網址內容； 2）若是a標籤的href屬性是以其餘協議開頭，那麼瀏覽器就會檢查註冊表中是否存在處理該協議的軟件。 若是存在就打開軟件處理該協議。 3）若是a標籤是以file協議開頭，那麼瀏覽器就會當前目錄下查找是否存在指定資源； target：指定網頁的打開方式 _self：在當前窗口中打開 _blank: 在新窗口中打開 -->
<a href="2%20基本標籤.html" target="_blank">基本標籤</a>
</body>
</html>

 

 

 

 

　　七:錨點

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>錨點</title>
    <!--錨點能夠直接跳到對應name的位置上-->
</head>
<body> sadadasdasd<a href='#aa'>asdasdasdasdwadasd</a>asdadadadadqweqead adadasdasdadfdsfs <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a name="aa">asdadadaweqeqeqqe <p>chidahisdasd</p>
</a>
</body>
</html>
View Code

 

　　八:圖像

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圖像</title>
 6 </head>
 7 <body>
 8 <a href="5_html列表標籤.html"><img src="img/mmexport1550366443161.jpg"></a>
 9 
10 </body>
11 </html>
View Code

 

 

 

 

 

　　九:表格

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--table標籤-->
<!--<h1>學員成績表</h1>-->
    <!-- border: 設置表格邊框的寬度 width: 表格的寬度，以像素爲單位 height：設置表格的最小高度 cellspacing：設置單元格之間的空白 -->
<table border="1" width="500" height="200" cellpadding="0" align="left">
    <caption >測試代碼</caption>
    <tr align="left">
        <!--表格頭-->
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
    </tr>
    <tr align="left">
        <td>wz</td>
        <td rowspan="3">男</td>
        <!--縱向合併單元格-->
        <td>20</td>
    </tr>
    <tr align="left">
        <td>lp</td>
        <td>22</td>
    </tr>
    <tr align="left">
        <td>hehe</td>
        <td>21</td>
    </tr>
    <tr align="left">
        <td>xm</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr align="left">
        <td>平均年齡</td>

        <td colspan="2">20</td>
        <!--橫向合併單元格-->
    </tr>
</table>
</body>
</html>

 

 

 

 

　　十:框架

　　　　框架html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<frameset rows="100,500,*">
    <frame src="toubu.html"/>
    <frameset cols="200,*">
        <frame src="_菜單.html">
        <frame name="connent" src="_公司簡介.html"/>
    </frameset>

    <frameset>
        <frame src="_底部.html">
    </frameset>


</frameset>
</html>
View Code

 

　　　　　　　公司產品html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>這是產品</p>
</body>
</html>
View Code

　　　　　　　　公司簡介html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>這是公司公司簡介</p>
</body>
</html>

　　　　　　　　加入咱們html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<font>zheshineirong</font>
</body>
</html>

　　　　　　　底部html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底部</title>
</head>
<body>
<p>這是底部</p>
</body>
</html>

　　　　　　菜單html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜單</title>
</head>
<body bgcolor="blue">
<ul>
    <li><a href="_公司簡介.html" target="connent"><font color="yellow">公司簡介</font></a></li>

    <li><a href="_公司產品.html" target="connent">公司產品</a></li>
    <li><a href="_加入咱們.html" target="connent">加入咱們</a></li>
    <li><a href="_這是版權管理.html" target="connent">版權管理</a></li>

</ul>
</body>
</html>

　　　　　　版權管理html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<font>這是版權管理</font>
</body>
</html>

　　　　　　頭部html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頭部</title>
</head>
<body>
<img src="img/mmexport1550366443161.jpg">
</body>
</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程