HTML+CSS(基础)
HTML+CSS
HTML
決定頁面的結構,主要就是學習一些標簽
注釋:
<!-- 內容 -->標題標簽
<h3>三級標題</h3>當然同理還有1-6級標題
段落標簽
<p>段落標簽</p>(此時的首行并未縮進2個字符,這個功能需要借助于CSS)
換行標簽
<br>在html中只有遇到塊級元素才會換行(沒彈性布局的情況下),此時就需要我們手動換行
格式化標簽
<strong>這是加粗</strong> <b>這也是加粗</b><em>這是傾斜</em> <i>這也是傾斜</i><del>這是刪除線</del> <s>這也是刪除線</s><ins>這是下劃線</ins> <u>這也是下劃線</u>圖片標簽
<img src="url" alt="">url就是一個圖片的路徑,如果是你提前存好的,且存在和html文件同一目錄下,那就直接寫文件名即可,如果是其他目錄,注意路徑寫法,可以有相對路徑和絕對路徑
其次,這個url也可以是網絡上的一張圖片的鏈接
再其次:alt:用于src的資源沒加載出來時頂一下的
第一次看到前一個標簽里頭出現鍵值對,這叫屬性,一個標簽里可以有多個,部分先后順序,不一樣的標簽所支持的屬性都不一樣,即可使用的鍵值對不一樣,但這些屬性都是描述這個標簽所代表的html元素的特性
超鏈接
<a href="一個url">這是一個超鏈接</a>這個url可以是自己寫好的其他的html文件(注意路徑別寫錯了),當然也可以是網絡中的任意一個url,只填一個#,可以理解為開發階段的一個占位符
把"這是一個超鏈接"這些個文字(此時的功能是點擊文字實現跳轉),替換成一個img標簽,就可實現,點擊圖片實現跳轉
表格標簽
table:表示整個表
tr:表示一行
td:表示一列
th:表示表頭中的一列
如:構造一個表格:
<body><style>td{text-align: center;}</style><table border="2px" width="500px" height="200px" cellspacing="0"><tr><td>張三</td><td>25</td></tr><tr><td>李四</td><td>23</td></tr></table> </body>500px是整個表的寬,200px是整個表的高
0表示單元格之間嚴絲密縫
style標簽是css寫法,為了td標簽內的內容水平居中
列表標簽
<!--無序列表--> <ul></ul><!--有序列表--> <ol></ol><!--自定義列表--> <ol></ol>表單標簽
表單標簽是用戶和頁面交互的重要手段,大部分的html標簽只是用來展示給用戶看,而表單標簽做到了讓用戶去輸入!
text:文本框
password:密碼輸入框,輸入的時候看不見內容
radio:單選框:通過name相同的的radio互斥,也就是只能在所有name屬性都相同的選項中選擇其中一個,checked表示默認選項.
input是一個單標簽,所以男和女的標簽都在同一行,前面的文本框和密碼框我都手動換行了:
此處的選擇只能通過點那個小圓圈實現,我想實現一個點擊文字也能選擇的功能:
為input標簽添加一個label,把字加到label中使其為專有的標簽服務通過唯一的id進行關聯
如:
<body><form><input type="text"><br><input type="password"><br><input type="radio" name="gender" id="male"><label for="male">男</label><input type="radio" name="gender" checked="checked" id="female"><label for="female">女</label></form> </body>此時即可實現點擊文字也能選中,可以理解成每個選項的等價選擇就是那個關聯了自己id的標簽的內容,此處就是男,女二字.
還有一些input標簽:
<body><form><input type="text"><br><input type="password"><br><input type="radio" name="gender" id="male"><label for="male">男</label><input type="radio" name="gender" checked="checked" id="female"><label for="female">女</label><br><input type="checkbox" id="eat"><label for="eat">吃飯</label><input type="checkbox" id="sleep"><label for="sleep">睡覺</label><input type="checkbox" id="play" checked="checked"><label for="play">打豆豆</label></form> </body>按鈕:
<body><form><input type="text"><br><input type="password"><br><input type="radio" name="gender" id="male"><label for="male">男</label><input type="radio" name="gender" checked="checked" id="female"><label for="female">女</label><br><input type="checkbox" id="eat"><label for="eat">吃飯</label><input type="checkbox" id="sleep"><label for="sleep">睡覺</label><input type="checkbox" id="play" checked="checked"><label for="play">打豆豆</label><br><input type="button" value="提交" onclick="alert('hello')"><br><input type="file"></form> </body>select下拉菜單和編輯框
<body><form><input type="text"><br><input type="password"><br><input type="radio" name="gender" id="male"><label for="male">男</label><input type="radio" name="gender" checked="checked" id="female"><label for="female">女</label><br><input type="checkbox" id="eat"><label for="eat">吃飯</label><input type="checkbox" id="sleep"><label for="sleep">睡覺</label><input type="checkbox" id="play" checked="checked"><label for="play">打豆豆</label><br><input type="button" value="提交" onclick="alert('hello')"><br><input type="file"><br><select><option>請選擇年份</option><option>2000</option><option selected="selected">2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select><br><textarea cols="30" rows="10"></textarea></form> </body>注意上述都是在form表單標簽下可以使用哦~
無語義標簽
使用:
<body><div><span>咬人貓</span><span>阿葉君</span><span>孫尚香</span></div><div><span>咬人貓</span><span>阿葉君</span><span>孫尚香</span></div> </body>可以把div想象成一個盒子!具體的其他一些標簽可查MDN文檔,注意不是MSDN
CSS
前述的html只是頁面結構的骨架,并沒有什么美感可言,此處學完css,就可以對上述的骨架加一些皮膚,美化一下效果
CSS的引入方式
內部樣式
也就是通過style標簽的方式來寫CSS
如:
<body><style>p{color: red;}</style><p>這是一段話</p><p>這是第二段話</p> </body>這種形式會使同樣的標簽都被選中,所以上述兩段話都是紅色的
內聯樣式
通過在html標簽中的style屬性來應用樣式,用法就是style=“樣式的鍵值對”
內聯樣式只會對當前的標簽起作用,有點就是不用謝選擇器,也不用寫{}
外部樣式
有很多的css文件,其實可以被多個頁面復用,所以我們可以將這個css文件寫到另外一個文件當中,當某些html文件想使用這個css的樣式,直接引用這個css文件就可以了
在head標簽中使用link標簽href屬性來進行引用,注意路徑
Note:HTML和CSS都是不區分大小寫的,可以統一使用小寫,CSS通常使用脊柱命名法
選擇器
上述講了CSS代碼能處在三種不同的地方,此處就應當說一說怎么用,一個CSS代碼塊由選擇器和屬性構成,先說選擇器:
基礎選擇器:
屬性解釋:外邊距為0.內邊距為0.向內擠壓(比如盒子的boder變粗,它會向內變粗,而不是向外變粗去影響別的盒子).
復合選擇器
后代選擇器:多個選擇器的組合,能夠選中某個元素的子元素甚至是孫子…等元素,輩分之間空格隔開,每個輩分都可以是基礎選擇器的前三種啦~
子選擇器:只能匹配的兒子輩的元素,這里就是不用空格了,而是用>分隔輩分,要注意:一個元素要是有孫子輩的元素甚至輩分更小的元素,非要用子選擇器去嘗試命中孫子輩的元素甚至更小的元素是不可行的,此種情況只能用后代選擇器
并集選擇器:因為通常的選擇器一次只能命中一個或者一類元素,使用并集選擇器就可以同時命中多個或者多類元素啦,并集的選擇器,每個都可以寫成基礎選擇器或者是符合選擇器
偽類選擇器:學兩個:
賦予一個html元素鼠標懸停在其上的時候,可以出現顏色變化:我們假設這個Html元素就是一個div吧:
div:hover
賦予一個html元素鼠標點擊在其上的時候,可以出現顏色變化:我們假設這個Html元素就是一個div吧:
div:active
屬性
學習完一些簡單的選擇器,我們可以命中我們想添加樣式的html元素接下來該賦予它們一些屬性了
字體家族
/*字體,如宋體*/ font-family:/*大小,如10px,px是像素,越大,字體越大*/ font-size:/*粗細*/ font-weight/*樣式,如normal,即什么樣式都不加*/ font-styletext-decoration
文本裝飾:none:什么都不加;uderline:下劃線;line-through;overline上劃線
文本縮進
text-indent:
行高
line-height:這里有個小技巧:就是這個文字在某個元素中的行高,如果和這個元素自身的高度一致的話,那文字就會被設置到處于元素的上下居中的位置
上述幾個都是常見的針對文字的樣式的設置
再介紹幾個和背景相關的
背景顏色
basckground-color:顏色可以用單詞表示,也可以rgb,如果填了個transparent,表示使用這個元素的父元素的樣式,或者說背景顏色
背景圖片
backgroud-image:
這個背景圖總得屬于誰的背景吧,比如背景是一個div的背景,那這個div比較大,圖片比較小,設置背景圖之后,默認是用這個圖片把整個div都鋪滿的,如:
<body><style>div{width: 1000px;height: 1000px;background-image: url(./java.png);font-size: 100px;text-align: center;line-height: 1000px;}</style><div>這是一個無語義標簽</div> </body>那我們指向要一個圖片:
<body><style>div{width: 1000px;height: 1000px;background-image: url(./java.png);background-repeat: no-repeat;background-size: cover;font-size: 100px;text-align: center;line-height: 1000px;}</style><div>這是一個無語義標簽</div> </body>圓角矩形
只能針對一個塊級元素而言哦!
使用border-radius:進行使用,并且這個半徑如果取一個矩形的一半,切完四個角,那這個盒子就要變成一個規規矩矩的圓了.
Note:
可以通過dispaly改變元素的顯示模式
比如:把一個行內元素改成一個塊級元素:
<body><style>a{display: block;width: 50px;height: 50px;}</style><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a> </body>每個鏈接都獨占一行了.
盒子模型
note :設置了box-sizing:border-box的時候,可以避免padding和margin默認情況下,會往外面擴充的情況.這樣設置,盒子的大小始終不會發生變化.
margin在垂直方向會有塌陷(上下的盒子較大的外邊距為二者的垂直距離,而不是二者的外邊距之和)的情況,水平沒有
簡單試用一下盒子模型:
<body><style>.one{width: 500px;height: 200px;background-color: blue;padding-top: 10px;box-sizing: border-box;/*因為.two在.one內,所以這個padding是會影響到.two這個div的布局的*/}.two{width: 200px;height: 100px;background-color: green;margin: 0 auto;/*實現左右居中,前一個是上下邊距,后一個是左右自適應*//* padding: 0 auto; 這個不起任何作用,因為這個設置只會影響.two的后代的布置情況*/} </style><div class="one"><div class="two">hello</div></div> </body>彈性布局
默認的元素的擺放方式,是子元素在父元素的基礎之上去擺,并且是從上往下擺,并且子元素能超出父元素的盒子大小
也就是說一個塊級元素(一個大盒子),內如果有多個小的塊級元素(小盒子),你可能很容易的將其在垂直方向布置的很合理,但是有時候我們需要將其水平擺放,此時就需要用的彈性布局.
使用display:flex,這個屬性是設置在父元素當中的哦,這樣以設置,這個元素的子元素都會尊崇彈性布局原則
<body><style>.one{width: 500px;height: 200px;background-color: blue;box-sizing: border-box;display: flex;}.two,.three,.four{width: 100px;height: 100px;background-color: aqua;} </style><div class="one"><div class="two">hello</div><div class="three">你好</div><div class="four">java</div></div> </body>效果:
子元素水平,且頂著左上角擺放.
調整:
<body><style>.one{width: 500px;height: 200px;background-color: blue;box-sizing: border-box;display: flex;justify-content:space-around;/*空白環繞子元素*/align-items: center;/*上下居中*/}.two,.three,.four{width: 100px;height: 100px;background-color: aqua;} </style><div class="one"><div class="two">hello</div><div class="three">你好</div><div class="four">java</div></div> </body>總結
以上是生活随笔為你收集整理的HTML+CSS(基础)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单的html数据分页控件封装
- 下一篇： 终端上网_手机如何设置路由器PPPoE拨