Html學習

時間  2019-11-25
標籤 html 學習 欄目 HTML 简体版
原文   原文鏈接

1、HTML簡介

第一個html：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魑魅魍魎</title>
　　<link rel="icon" href="img/mobile-icon.png" type="img/x-ico" />   #head裏面小圖標
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <h1>個人第一個標題</h1> 
    <p>個人第一個段落。</p>
</body>
</html>

 

  • <!DOCTYPE html> 聲明爲 HTML5 文檔
  • <html> 元素是 HTML 頁面的根元素
  • <head> 元素包含了文檔的元（meta）數據
  • <title> 元素描述了文檔的標題
  • <body> 元素包含了可見的頁面內容
  • <h1> 元素定義一個大標題
  • <p> 元素定義一個段落
  • <a>元素定義一個超連接
  • 註釋：  <!--  註釋的內容  -->

注：標籤的分類（html

塊級標籤： div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距）
行內標籤： span（白板）編程

一、Meta標籤：

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞：
一、頁面編碼（告訴瀏覽器是什麼編碼）
<meta http-equiv=「content-type」 content=「text/html;charset=utf-8」>

二、刷新和跳轉
<meta http-equiv=「Refresh」 Content=「30″>
<meta http-equiv=」Refresh「 Content=」5; Url=http://www.autohome.com.cn「 />

三、關鍵詞
< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >

四、描述
<meta name="description" content="免費 Web & 編程 教程">

二、P 和 Br及Span

p表示段落，默認段落之間是有間隔的！瀏覽器

br 是換行app

Span是行內ide

三、a標籤

<a href="http://www.baidu.com" target="_blank">百度</a>
target屬性，_black表示在新的頁面打開

 錨：字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <a href="#1">第一章</a>
        <a href="#2">第二章</a>
        <a href="#3">第三章</a>
        <a href="#4">第四章</a>
        <div id="1" style="height:600px;">第一章</div>
        <div id="2" style="height:600px;">第二章</div>
        <div id="3" style="height:600px;">第三章</div>
        <div id="4" style="height:600px;">第四章</div>
</body>
</html>

四、H 標籤

<h1>H標籤</h1>

H1

H2

H3

H4

H5
H6

五、input標籤：

示例1：ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <form action="http://localhost:8888/index" method="get">
         <select name="city" multiple="multiple" size="10">
             <option value="1">北京</option>
             <option value="2">天津</option>
             <option value="3">石家莊</option>
             <option value="4">南京</option>
             <option value="5">成都</option>
             <option value="6">哈爾濱</option>
         </select>
         <input type="text" name="user" value="chengcuichao"/>
         <input type="password" name="pwd" value="ccc949885111"/>
         <input type="button" value="登陸1" />
         <p>請選擇：</p>
         男<input type="radio" name="sex" checked="checked"/>
         女<input type="radio" name="sex"/>
         <p>愛好：</p>
         足球<input type="checkbox" name="like" checked="checked">
         籃球<input type="checkbox" name="like" checked="checked">
         羽毛球<input type="checkbox"  name="like">
         乒乓球<input type="checkbox"  name="like">
         <p>上傳文件</p>
         <input type="file" name="filename">
         <p></p>
         <textarea name="text">默認值</textarea>
         <input type="submit" value="提交" />
         <input type="reset" value="重置" />
     </form>
</body>
</html>

 實例2：搜索引擎

將搜索轉發到百度搜索：
  <form action="https://www.baidu.com/s?">
       <input type="text"  style="width: 400px;height: 30px" name="wd"/>
       <input type="submit" style="width: 75px;height: 34px;" value="百度一下"/>
  </form>

詳解：編碼

一、input系列 + form標籤：          
input type='text'     - name屬性，value="user1"（默認填寫帳戶） 
input type='password' - name屬性，value="趙凡" （默認填寫密碼）
input type='submit'   - value='提交' 提交按鈕，表單
input type='button'   - value='登陸' 按鈕          
input type='radio'    - 單選框 value，checked="checked"（默認被選中），name屬性（name相同則互斥）
input type='checkbox' - 複選框 value, checked="checked"（默認選中），name屬性（批量獲取數據）
input type='file'     - 依賴form表單的一個屬性 enctype="multipart/form-data"
input type='rest'     - 重置
二、textarea標籤：    
<textarea >默認值</textarea>  - name屬性,默認值放中間。
三、select標籤：
select標籤            - name,內部option value, 提交到後臺，size（默認顯示幾個），multiple=‘multiple’（能夠多選）
四、optgroup標籤       
optgroup標籤          - label（層級名），

 六、Img標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <a href="http://www.baidu.com">
      <img src="s2.png" title="截圖" style="height:200px;width:200px" alt="截圖"/>
   </a>
</body>
</html> 

 七、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ul>
<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ol>
<dl>
    <dt>第一章</dt>
    <dd style="height:600px;">內容一</dd>
    <dt>第二章</dt>
    <dd style="height:600px;">內容二</dd>
    <dt>第三章</dt>
    <dd style="height:600px;">內容三</dd>
    <dt>第四章</dt>
    <dd style="height:600px;">內容四</dd>
</dl>
</body>
</html>

 八、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
        <thead>
            <tr>
                <th>表頭1</th>
                <th>表頭2</th>
                <th>表頭3</th>
                <th>表頭4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td rowspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
</table>
</body>
</html>

 注：colspan橫向合併表格，rowspan縱向合併表格。

 九、label標籤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用戶名：</label>
    <input id="username" type="text" name="user" />
</body>
</html>
#點擊用戶名能夠輸入

2、CSS

引用css文件：

<link rel="stylesheet" href="commons.css" />

註釋：

<!--<img src="a1.png" style="height: 15px;width: 15px"/>-->    #baody裏面的註釋
/*#text-align: center;*/        #style裏的註釋

 網頁最上面的圖標：

 <link rel="apple-touch-icon-precomposed"  href="img/apple-touch-icon-76x76-precomposed.png">  ##圖標

基礎樣式：

background-color:red          注（rgb顏色對照表）：http://www.114la.com/other/rgb.htm
height   高度 百分比
width    寬度 像素，百分比
text-align:ceter  水平方向居中
line-height   垂直方向根據標籤高度
color         字體顏色
font-size     字體大小
font-weight   字體加粗

選擇器：

一、id選擇器
#i1{
background-color: #2459a2;
height: 48px;}

二、class選擇器
.名稱{
...}
<標籤 class='名稱'> </標籤>


三、標籤選擇器
div{
...}
全部div設置上此樣式

四、層級選擇器（空格）
.c1 .c2 div{}

五、組合選擇器（逗號）
#c1,.c2,div{}

六、屬性選擇器 
對選擇到的標籤再經過屬性再進行一次篩選
.c1[n='alex']{ width:100px; height:200px; }

PS:優先級，標籤上style優先，編寫順序，就近原則

邊框：

border: 4px dotted（虛線） red;
border: 4px solid（實線） red;
border-radius:25px;   #圓角邊框50%的話變爲圓
box-shadow:5px 5px 4px;  #陰影

float：

讓標籤浪起來，塊級標籤也能夠堆疊
老子管不住：
<div style="clear: both;"></div>

display：

display: none; -- 讓標籤消失
display: inline;  
display: block;
display: inline-block;
具備inline,默認本身有多少佔多少
具備block，能夠設置沒法設置高度，寬度，padding margin
******
行內標籤：沒法設置高度，寬度，padding margin
塊級標籤：設置高度，寬度，padding margin

padding,margin：

padding      #內邊距
margin(0,auto)   #外邊距

position：

position主要是讓標籤固定到屏幕的固定位置
position: fixed;   #固定在屏幕的特定位置，能夠用fixed進行分層
position: relative+absolute   #固定在relative標籤裏的相對位置

top: 0     #離上面多遠
right: 0   #離右面多遠
left: 0    #離左面多遠
bottom: 0  #離下面多遠

position會把標籤變爲行內標籤，會把標籤分層
opcity: 0.5 透明度  
z-index: 層級順序   #越大會在上層

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">頭部</div>
    <div class="pg-body">內容</div>
</body>
</html>
固定到頂部 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: auto">
<div style="height: 300px;width: 300px;background-color: aqua;position:relative;margin: 0 auto;">
    <div style="height: 20px;background-color:greenyellow;width: 20px;position: absolute;left: 0;bottom: 0"></div>
</div>
</body>
</html>
固定到標籤的相對位置 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="display:none;z-index:10; position: fixed;top: 50%;left:50%;
    margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">

        <input type="text" />
        <input type="text" />
        <input type="text" />

    </div>

    <div style="display:none;z-index:9; position: fixed;background-color: black;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.5;
    "></div>

    <div style="height: 5000px;background-color: green;">
        asdfasdf
    </div>
</body>
</html>
進行分層

 overflow：

 overflow: hidden 將圖片隱藏
　　　　　　 auto   出現滾動條

 hover：

. class_name:hover  #當鼠標移動到標籤上，如下屬性纔會生效。

background：

background-image:url('image/4.gif');   # 默認，div大，圖片重複訪
background-repeat: repeat-y;   #只重複豎直方向
background-repeat: no-repeat   #不重複
background-position-x:         #移動圖片的位置（左右）
background-position-y:         #移動圖片的位置（上下）
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程