web前端简易制作之HTML
1.文章標(biāo)題
這里可以看出在 <head 里的title 中 添加了 hello world
那么生成的html文件 名稱就叫做hello world
2.文本標(biāo)簽
HTML:表示該文件為HTML文件
HEAD：包含文件的標(biāo)題，使用的腳本，樣式定義等
BODY:放置瀏覽器中顯示信息的所有標(biāo)志和屬性，其中內(nèi)容在瀏覽器中顯示。
1.標(biāo)題標(biāo)簽：h1-----h6 表示的是標(biāo)簽的大小 其中h1最大，h6最小。
2.段落標(biāo)簽：p-------p 段落之間會空一行
3.加粗標(biāo)簽：b/strong 加粗字體
4.下劃線標(biāo)簽：u
5.刪除標(biāo)簽：s
6.預(yù)格式化文本標(biāo)簽（保留文本的原有格式）：pre標(biāo)簽
7.上標(biāo)和下標(biāo)：sup，sub
8.塊引用標(biāo)簽：blockquote
9普通的文本：span-----行內(nèi)標(biāo)簽
10.普通的文本標(biāo)簽：div-----
以上標(biāo)簽都是成對出現(xiàn)的
比如：<b … /b>
換行標(biāo)簽：br-----（第一個沒有成對出現(xiàn)的標(biāo)簽）
水平分隔符標(biāo)簽：hr-----（第一個沒有成對出現(xiàn)的標(biāo)簽）
在瀏覽器中打開 （圖中第一行處應(yīng)添加一個world）
這里我們看到使用塊引用，無論是什么格式，直接添加都會放在一行，打亂原有格式。
3.css和span和div的理解
從此之后的內(nèi)容都在body身體里
文本標(biāo)簽的常用樣式（屬性）
1.TEXT.ALIGN:LEFT,左對齊
2.TEXT.ALIGN:CENTER,居中
3.TEXT.ALIGN:RIGHT,右對齊
4.width:像素值或百分比，對象寬度
5.height：像素值或百分比，對象高度
6.color顏色
7.font-size：設(shè)置字體大小
8.border：設(shè)置邊框
9.padding.top：文本距邊框上部的距離
10.padding.left:文本距邊框左部的距離
這里我們注意到border-radius比高度和寬度大很多時，邊框就會變成圓形
如果沒有沒有border-radius，那么邊框就是正方形
如果較小就是類正方形
4.表格標(biāo)簽
1.table代表一個表格
caption：中間寫入標(biāo)題
td：寫入每一列的內(nèi)容
tr：寫入每一行的內(nèi)容
cellpadding=‘3’ —設(shè)置表格的內(nèi)邊距
cellspacing=‘5’ —設(shè)置表格的外邊距
行輸入法
輸入表格式的行輸入法
5.合并列單元格
6.合并行單元格
7.表單標(biāo)簽
這里下拉標(biāo)簽任選其一
8.個人信息
高度和寬度也可以用百分比表示
顯示結(jié)果
9.圖片標(biāo)簽
src指定圖片的位置， 可以是url地址， 也可以是本地的圖片;
alt: 如果圖片不能正常加載， 則顯示alt里面的文字;
建議將圖片從網(wǎng)站上下載到桌面，存放在pycharm中當(dāng)前目錄里
添加圖片超鏈接
<a href=’‘http://鏈接地址‘’><img src=’‘img01.jpg’’>
10.超鏈接標(biāo)簽
在瀏覽器中執(zhí)行
這里有5個超鏈接，分別是百度，4399，本地跳轉(zhuǎn)
11.序列化標(biāo)簽
1.無序標(biāo)簽之ul和li
去掉ul里面的所有l(wèi)i標(biāo)簽里面的樣式
實現(xiàn)水平導(dǎo)航欄和豎直導(dǎo)航欄
list-style-type：none -----去掉原點
display：inline-block ------變?yōu)樾袃?nèi)元素，并且可以設(shè)置高度和寬度
width： -------可以使用300px表示，也可以用百分比表示
此處的HTML是一個超鏈接
鏈接如下
2.有序標(biāo)簽之ol和li and 嵌套標(biāo)簽
12.編寫CSS樣式——類選擇器
不難看出，進入css樣式后，修改在head里進行
13.編寫CSS樣式----標(biāo)簽選擇器
14.編寫CSS樣式----id選擇器
15.CSS聯(lián)系-----導(dǎo)航欄
這里hover的作用是，鼠標(biāo)碰到就變色；html依舊是超鏈接
16.CSS的引入方式
*引入方式：
1.行內(nèi)引入：<a style="行內(nèi)引入的樣式‘’>
2.內(nèi)部引入：寫在head標(biāo)簽里面的style標(biāo)簽里面的樣式；
3.外部引入：將css樣式獨立成一個文件，通過<link rel=’'stylesheet ‘’ href= ‘‘css/main.css’’>與當(dāng)前html文件鏈接在一起。
三種引入方式的優(yōu)先級：就近原則
注意：成立前提是有css目錄里的main文件
其內(nèi)容為：div{ width：80%； margin:0 auto; padding:0;}
ul{ list-style-type:none}
li{ display:inline-block; width:%20; background:snow;
color:#333333; padding-top:10px; padding-bottom:10px;
text-align:center;
font-size:large;
text-transform:capitalize;
li:hover{ background:green; color:snow;}
a:hover{ color:snow;}
最終顯示如下：
鼠標(biāo)接觸依舊變色
17.層級選擇器
這里修飾的是ul標(biāo)簽內(nèi)的li標(biāo)簽內(nèi)的a標(biāo)簽。
注意：margin：0 auto意思是整體居中。
總結(jié)
以上是生活随笔為你收集整理的web前端简易制作之HTML的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一键修改windows远程桌面3389端
- 下一篇： 学生简单个人博客网页DW模板 简单HTM