第一周周報
本周了解了一些HTML元素，以及一些CSS里面簡單的標簽、盒子的組成、常規流、浮動和一些基本的知識（定位看了，但還不會運用），
1.網頁基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.學習了一些HTML元素
| 標簽 | 作用 |
|---|---|
| H系列元素 | h1~h6,標題文本，重要性遞減 |
| p標簽 | 表示一個段落 |
| -img標簽- | -插入一個圖片- |
| a標簽 | 鏈接標簽，可直接跳轉至被鏈接的物件 |
| -target標簽- | -用于指定鏈接頁面打開的方式，有self和blank- |
| 錨點定位 | 能夠快速定位到目標內容 |
| 水平線標簽 | 橫線< hr/> (這是一個單標簽) |
| 換行標簽 | < br/>（單標簽） |
| base標簽 | 設定整體鏈接的打開狀態（在< head>中） |
| pre元素 | 此元素中內容不會出現空白折疊 |
3.字符集
GBK里面存盤的字符比較少，僅僅存盤了一些漢字和一些常用外文
UTF-8里面存盤里世界上所有的文字
在HTML檔案中指定的字符集必須和保存這個檔案的字符保持一致，否則會出現亂碼
4.串列：
- 無序串列
<ul>
<li>串列項</li>
<li>串列項</li>
</ul>
-
有序串列
與無序串列差不多 -
自定義串列
常用于對名詞進行解釋等，
<dl>
<dt>名詞</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
</dl>
5.video audio
controls:控制控制元件的顯示，取值只能為controls，
布爾屬性：
autoplay:自動播放
muted：靜音播放
loop：回圈播放
video audio兩者完全一致
<video src=""> </video>
6.容器元素
區塊域 可放置其他元素
eg: div元素 無語意
header：頁頭； footer：頁腳
article：文章章節
aside：側邊欄
7.css中標簽
| 塊級元素 | 行級元素 |
|---|---|
| 會獨占一行 | 不會獨占一行 |
| 可設定寬高 | 不可設定寬高 |
| div、ul、ol、li | span 、img |
display屬性：block、inline、inline-block
8.css中代碼書寫位置
- 內部樣式表（在style元素中）
- 行內樣式表（直接寫在元素的style屬性中）
- 外部樣式表（建立新的檔案 在元素后寫class=“ ” 在css中參考)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<link rel="stylesheet" href="./mystyle.css">
</head>
- 外部樣式表
（下面是css里邊的一些屬性）
| 屬性 | 名稱 |
|---|---|
| color | 內容顏色 |
| background-color | 背景顏色 |
| font-size | 內容文字大小 |
| font-weight | 文字粗細程度 |
| font-family | 文字型別（sans-serif） |
| font-style | 文字樣式 |
| text-decoration | 文本修飾 （加線） |
| text-indent | 縮進 |
| line-height | 每行文本高度 |
9.選擇器
-
元素選擇器
-
id選擇器
-
類選擇器
-
通配符選擇
用*選中所有元素 -
屬性選擇器
根據屬性名和屬性值選擇元素 -
偽類選擇器
-
偽元素選擇器
i.before ii.after
10.層疊
宣告沖突，瀏覽器的處理
i.首先為重要性（除！important 外，作者樣式表優先）
ii.特殊性
iii.比較代碼的先后順序
11.盒子模型
12.常規流
所有元素，默認情況下，都屬于常規流布局
總體規則：塊盒獨占一行，行盒水平依次排列
包含塊：每個盒子都有他的包含塊，包含塊決定了盒子的排列區域，
絕大部分情況下：盒子的包含塊，為其父元素內容盒
下面做了一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color:rgb(29, 4, 21);
}
.container{
background-color:#fff;
width: 90%;
margin: auto;
line-height: 2;
padding: 30px 0;
}
body .container header{
background-color: #267890;
color: #fff;
text-align: center;
line-height: 2;
padding: 20px;
margin: 20px -34px;
border:5px solid #14414e
}
body .container .under{
color:#bdbdbd;
}
body div a{
color:#bdbdbd;
text-decoration: none;
}
body div a:hover{
color:#fff;
}
body .container .text h3{
font-size:32px;
border: 1px dashed;
margin:0 auto;
border-left:none;
border-right:none;
}
body .container .text section{
width: 90%;
margin:0 auto;
}
body .container .text section .expact{
border-top: none;
}
</style>
</head>
<body>
<article class="container">
<header>
<h1>這是一個標題</h1>
<div class="under">
原文地址：<a href="https://www.baidu.com">https://www.baidu.com</a>
</div>
</header>
<div class="text">
<section>
<h3 class="expact">章節1</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi incidunt nemo iusto sapiente aspernatur doloremque, unde maxime itaque soluta, expedita quia praesentium quo. Impedit et repellendus aspernatur quasi. Quaerat, ratione.</p>
</section>
<section>
<h3>章節2</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem, quia minus. Culpa aspernatur nulla doloremque beatae illo atque odio aut ab, in expedita vero modi saepe dolorem distinctio temporibus nostrum.</p>
</section>
<section>
<h3>章節3</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos non vel architecto nam minus magni sunt minima accusantium ea pariatur! Tempora blanditiis ab earum delectus deserunt odit quasi, cum nisi.</p>
</section>
<section>
<h3>章節4</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis voluptates harum a et necessitatibus fugit commodi! Sequi voluptatum atque perferendis provident molestias vero optio quas. Sit voluptatum ab maiores id.</p>
</section>
<section>
<h3>章節5</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, alias? Ea voluptates vitae cumque inventore magnam odit. Iusto numquam inventore porro quisquam eligendi velit officiis iste, aspernatur, eos odio blanditiis!</p>
</section>
</div>
</article>
</body>
</html>
結果如下；
13.浮動
常用于水平排版
先來一個小例子吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float: left;
margin-right:20px;
}
</style>
</head>
<body>
<div>
<img src="./Saved Pictures/t016c37058fe52a0b8f.jpg" width="200px" alt="趙麗穎">
<p>趙麗穎，1987年10月16日出生于河北省廊坊市，中國內地影視女演員、歌手，</p>
<p>2006年，因獲得《雅虎搜星》比賽馮小剛組冠軍而進入演藝圈；同年，在馮小剛執導的廣告片《跪族篇》中擔任女主角，2011年，因在古裝劇《新還珠格格》中飾演晴兒一角而被觀眾認識，2013年，憑借古裝劇《陸貞傳奇》獲得更多關注，2014年10月，在第10屆金鷹電視藝術節舉辦的投票活動中被選為“金鷹女神”；12月，憑借都市愛情劇《杉杉來了》獲得第5屆國劇盛典內地最具人氣女演員獎；同年，成立海潤傳媒趙麗穎作業室，</p>
<p>2015年，主演的仙俠劇《花千骨》打破中國內地周播劇收視紀錄，而其個人則憑借該劇先后獲得第6屆澳門國際電視節金蓮花最佳女主角獎、第6屆國劇盛典最具收視號召力演員獎、第22屆上海電視節白玉蘭獎最佳女主角獎提名、第28屆中國電視金鷹獎觀眾喜愛的女演員獎，2017年，憑借電影《乘風破浪》獲得第24屆北京大學生電影節最受大學生歡迎女演員獎；同年主演的古裝劇《楚喬傳》成為中國內地首部在播期間網路播放量突破400億次的電視劇，2018年，主演的都市劇《你和我的傾城時光》播出，2019年5月，憑借古裝劇《知否知否應是綠肥紅瘦》獲得第25屆上海電視節白玉蘭獎最佳女演員提名，2020年，主演古裝武俠劇《有翡》，</p>
<p>2020年10月18日，獲第30屆中國電視金鷹獎觀眾喜愛的女演員，</p>
</div>
</body>
</html>
結果如下：
下面是一個導航條的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix ::after{
content: "";
display: block;
clear: both;
}
div{
background-color: #345678;
width: auto;
border: 1px solid black;
}
div ul li{
float: left;
margin: 0 62px;
}
ul{
list-style: none;
}
div ul li a:hover{
color: #fff;
}
div ul li a{
text-decoration:none ;
color: red;
}
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li><a href="">服裝城</a></li>
<li><a href="">美妝館</a></li>
<li><a href="">全球購</a></li>
<li><a href="">閃購</a></li>
<li><a href="">團購</a></li>
<li><a href="">拍賣</a></li>
<li><a href="">金融</a></li>
</ul>
</div>
</body>
</html>
結果如下
- 高度坍塌
原因：常規流盒子的自動高度，在計算時不考慮浮動盒子
要清除浮動：clear（默認為none）
-left清除左浮動，該元素必須出現在所有左浮動盒子的下方
-right清除右浮動，該元素必須出現在所有右浮動盒子的下方
-both清除左右浮動，該元素必須出現在所有浮動盒子的下方
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226876.html
標籤：其他
下一篇：bootstrap知識總結