html基礎-2

ody

常用標簽

body分為塊級和行內

塊級獨占整行
行內內容有多少就占多少

文本格式化標簽

br 換行

<div>qwer<br/>zxcv</div>

div和span

div 塊級標簽樣式

<div style="background-color: green;">qwer</div>

span 行內標簽樣式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 標題

h1~h6y依次變小

   <div>默認文字字體</div>
   <h1>再再再再再粗一點</h1>
   <h2>再再再再粗一點</h2>
   <h3>再再再粗一點</h3>
   <h4>再再粗一點</h4>
   <h5>再粗一點</h5>
   <h6>粗一點</h6>

鏈接

a 超鏈接，跳轉到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

錨點，點擊后跳轉到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野雞平臺</title>
</head>
<body>
<h1>章節(jié)</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>內容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花開,萬物復蘇,又到了交配的季節(jié)。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄過去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 無序列表
ol 有序列表
dl 層級列表
li 列表項目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野雞平臺</title>
</head>
<body>
    <ul>
        <li>周杰倫</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>鐵錘</li>
        <li>鋼彈</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯鄲</dd>
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>
</body>
</html>

table 表格

table表格標題
thead表格標題
tr 行標簽
th 列名
tbody表格內容
tr 列標簽
td 列內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 選擇表格樣式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看書</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并單元格-->>
                <td>18</td>
                <td>吃飯</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--顯示本地圖片，找不到圖片則顯示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--顯示網絡圖片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用戶交互

按鈕標簽

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按鈕 </button>

input

text，文本框。
password，密碼框。
radio，單選框（必須設置name屬性相同，否則無法實現）。
checkbox，復選框。
file，文件上傳。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密碼框</h3>
    <input type="password">
    <h3>單選框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>復選框</h3>
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox">橄欖球
    <h3>上傳文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML學習</title>
</head>
<body>
    <h3>單選</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多選</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
臥槽，無情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML學習</title>
</head>
<body>
    <textarea>文本內容寫在這里...</textarea>
</body>
</body>
</html>

form表單

用于提交數據到后臺

提交時，只會提交form標簽內部【用戶交互】相關的標簽。
<input type="submit" value="提交"> 用于提交當前所在的表單。
<input type="reset" value="重置"> 用于重置當前標簽中的選項。
form標簽內置屬性action="/xx/" ，表示表單要提交的地址。method="get"，表示表單的提交方式。enctype="multipart/form-data"，如果form內部有文件上傳，必須加上此設置
form內部【用戶交互】相關標簽必須設置name，不然提交數據后后端無法獲取

// 提交表單之后，實際上會將表單中的數據構造成一種特殊的結構，發(fā)送給后臺，類似于：
{
    user:用戶輸入的姓名,
  pwd:用戶輸入的密碼,
    ...
}

radio、checkbox、select 除了要設置name屬性以外，還必須設置value屬性，因為這三中標簽在form表單提交時，不會把看到的內容提交到后臺，而是把選擇選項對應的value值提交到后臺。

家今天好我是小月,為大家介紹一下建站的基礎語音,喜歡的建站的朋友要認真閱讀,這會對你有一定的幫助!!

DW使用；

搭建一個站點；

首頁文件名稱：index.html

文件夾 style js

w3c 是一個組織，制定網頁規(guī)范標準的組織；

聲明網頁的編碼格式；

常用的編碼格式；utf-8 國際通用標準，支持英文，中文，韓文，越南語

日語等等。。。；

gbk(gb2312)它是國標，支持中文簡體繁體；跟后臺有關；

字體：編輯，首選參數字體

列表 type修改列表符號；

布局，搭建一個網頁結構；根據用戶體驗需求對內容進行合理規(guī)劃；根據網絡營銷需求；

怎么布局；

表格布局

表格的最外層標記，<table> </table>

表格里面的行用<tr></tr>表示；一對tr表示一行；

一個單元格用<td></td>來表示；

表格里面有一個屬性邊框 border 默認情況下，這個border="0"

ctrl alt a

單元格與單元格的縫 cellspacing 默認情況不為0

跨行 rowspan 跨行，就是指一個單元格在垂直方向占領多行；

跨列 colspan 在水平方向占領多個單元格；

背景顏色 bgcolor

布局 table布局；現在不是主流，但是在網頁中還是會用到；現在主要用

div+css來進行網頁布局；

為什么要用div+css呢？

簡單一些；

2 代碼相對table而言，div+css涉及到的代碼行數更少；

2 div+css網頁布局有利于seo；做搜索引擎喜歡網站；

2 div+css方便后期管理維護（css講完之后再來理解；）

2 有利于瀏覽器的向后兼容；新的瀏覽器不能識別傳統(tǒng)的一些布局標簽，但是div+css

所涉及的標簽瀏覽器能夠很好的識別；

ie 5 6 7 8 9 10 11 12

CSS是什么？

有什么用？

CSS全稱是層疊樣式表 Cascading Style Sheets 也叫樣式，style

修飾，美化網頁的；

table 表格，結構

如何在網頁中實現CSS；CSS表現形式；

三種常見的表現形式（實現方式）；

每一種行內式，

直接在html開始標簽里面寫上style="屬性：屬性值；屬性：屬性值；"

第二種寫法：內部嵌入式（嵌入式）

在<head></head>內部嵌入

<style>

css代碼

html標簽{屬性：屬性值；}

</style>

第三種表現形式；外部鏈接式（外鏈式）

把css樣式單獨放在一個style樣式文件夾里面，然后在html頁面中來調用這個css文件；

以后大家都使用第三種表現式，外部鏈接式；

為什么要用第三種表現形式；

第一,w3c組織推薦使用第三種外鏈式；

第二，外部鏈接式實現了表現（html）與樣式（css）相分離（有利于簡化頁面結構），

有利于后期維護修改等（選擇器）；

第三，有利于搜索引擎優(yōu)化（seo）

選擇器

是什么？

有什么用？

p{color:red;} 它表示把所有的p標簽里面的內容都變成紅色；

作用：指定樣式控制修飾的對象；

常用的基礎選擇器；

標簽選擇器；直接把html標簽拿到css里面當選擇器使用的稱之為標簽選擇器；

類選擇器；

給元素取名；

在開始標簽里面寫上 class="類名" ，注意，類名不要以數字開頭；一般用英文小寫開頭；

在css里面寫上 .類名{屬性：屬性值；屬性：屬性值；}

background:#09F; 背景顏色這是在css里面的寫法；

bgcolor 這是在html標簽里面的寫法；

text-align:center; 文字居中；

以上是今天的建站的內容，喜歡的小伙伴關注一下我每天都會更新這方面的知識！謝謝大家！

lt;thead>標簽定義HTML中<table>元素的標題；

<thead>標簽與<tbody>和<tfoot>標簽一起使用，它們定義HTML表格中的表頭，表主體和表腳。

<thead>標簽作為<table>標簽的子元素，需出現在<caption>、<colgroup>元素之后；<tbody>，<tr>或<tfoot>元素之前。

<thead>標記內應至少包含一行<tr>元素。

提示：<thead>、<tbody>和<tfoot>元素默認不會影響表格的布局。不過可以使用CSS來為這些元素定義樣式，從而改變表格的外觀。

語法格式

<thead>

<thead>

示例代碼

<table border="1">
    <caption>圖書大廈書目價格單</caption>  
    <thead>  
        <tr>  
            <th>書名</th>  
            <th>單價</th>  
        </tr>  
    </thead>  
    <tr>  
        <td>HTML入門教程</td>  
        <td>79.00元</td>  
    </tr>  
    <tr>  
        <td>JavaScript基礎教程</td>  
        <td>46.00元</td>  
    </tr>  
    <tr>  
        <td>Python精品教程</td>  
        <td>99.00元</td>  
    </tr>  
</table>  123456789101112131415161718192021復制代碼類型：[html]

效果展示：

圖書大廈書目價格單
書名	單價
HTML入門教程	79.00元
JavaScript基礎教程	46.00元
Python精品教程	99.00元

HTML4.01與HTML5差異

在HTML5中，不再支持HTML4.01中<thead>標簽的任何屬性。

瀏覽器支持

所有主流瀏覽器都支持<thead>標簽。

標簽屬性

屬性	值	描述
align	right left center justify char	HTML5 不支持。定義 <thead> 元素中內容的對齊方式。
char	character	HTML5 不支持。規(guī)定 <thead> 元素中內容根據哪個字符來對進行文本對齊。
charoff	number	HTML5 不支持。規(guī)定 <thead> 元素中內容的第一個對齊字符的偏移量。
valign	top middle bottom baseline	HTML5 不支持。規(guī)定 <thead> 元素中內容的垂直對齊方式。

全局屬性

<thead>標簽支持HTML的全局屬性。

事件屬性

<thead>標簽支持HTML的事件屬性。

開課吧廣場-人才學習交流平臺

在線咨詢

上一篇：JavaScript基礎09-數據類型
下一篇：新手課堂：關于css權重計算的趣事

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商