生活随笔
收集整理的這篇文章主要介紹了
前端基础——day1
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML：超文本標記語言
HTML（內容）CSS（修飾）JavaScript（功能）
標記：
<>
注釋：
<!--注釋內容--
>
一.HTML例子
<!DOCTYPE html
>
<html lang
="en"><head
> <!--注釋：頭部信息，不需要顯示的內容 --
>
<meta charset
="utf-8"><!--注釋：中文編碼格式--
>
<title
>html練習
</title
><!--注釋：窗口顯示信息--
>
</head
><body
>
<div style
="width:80%;color:red;margin:100px;auto;"><!--CSS格式--
>
<h1
>h1寫標題
</h1
>
<p
>p寫段落
</p
>
</body
></html
>
二.常用標記
1.標題標記
h1~h6
語法：雙標記
<h1
>顯示內容
</h1
>
<h1
>我的第一個標題
</h1
>
<h2
>我的第二個標題
</h2
>
<h3
>我的第三個標題
</h3
>
<h4
>我的第四個標題
</h4
>
<h5
>我的第五個標題
</h5
>
<h6
>我的第六個標題
</h6
>
1.自動加粗2.大小從h1到h6逐漸變小3.每個標簽獨占一行，整體從上到小依次排列
2.段落標記
<!--段落--
>
<!--獨占一行，從上到下排列，上下有間距--
>
<p
>我的第一個段落。
</p
>
3.圖像標記：img
代碼：
<img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width
="100" height
="100" alt
="孫笑川的美圖">
<!--在 HTML 中，圖像由
<img
> 標簽定義。
<img/
>是單標簽，斜杠加后面要在頁面上顯示圖像，你需要使用源屬性（src）。src 指
"source"。源屬性的值是圖像的路徑屬性：src引入路徑屬性（重要）相對路徑：
../返回上一級 width寬 height高 取值數字 不建議用屬性改變寬高 alt 屬性用來為圖像定義一串預備的可替換的文本,替換文本屬性的值是用戶定義的。
<img src
="boat.gif" alt
="Big Boat">在瀏覽器無法載入圖像時，顯示alt文本屬性--
>
多張圖片并排放出現分割的白條（會影響尺寸）
代碼：
<img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width
="100" height
="100" alt
="孫笑川的美圖"><img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width
="100" height
="100" alt
="孫笑川的美圖">
<!--圖片間用回車隔開會有白條隔開，需要放在同一行--
>
<img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width
="100" height
="100" alt
="孫笑川的美圖">
4.超鏈接標記：a
<a
>網頁顯示內容
</a
>
作用：用戶點擊后跳轉到指定位置
屬性：href跳轉到地址
格式：
<a href
="url">鏈接文本
</a
>href
= "#id"實現錨點功能，電梯效果，返回本頁面的其他指定位置id需要在標簽處加入id
=""
<p id
="p1">我的第一個段落。
</p
>
<a href
="#p1">跳轉到p標簽
</a
>
href
= "#"只有target功能
<a href
="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target
=target_self
>天皇震怒！
</a
>
<!--瀏覽器不能打開壓縮包（或其他瀏覽器不能打開的資源），所以跳轉到壓縮包會自動下載（沒法打開）target
=_self:原窗口跳轉target
=_blank:打開新窗口跳轉target_parent:文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中，那么它與目標 _self 等效。target_top:文檔載入包含這個超鏈接的窗口，用 _top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。_blank 在新窗口中打開被鏈接文檔。_self 默認。在相同的框架中打開被鏈接文檔。_parent 在父框架集中打開被鏈接文檔。_top 在整個窗口中打開被鏈接文檔。framename 在指定的框架中打開被鏈接文檔。在本頁面想跳轉的地方跳轉設置id（唯一標識）
<a id
="xx"> 新建跳轉，連接為href
="#xx"id相同的情況下跳轉到第一個指定id的地方如果target的值錯誤，只會打開一次新窗口，后面的同樣操作基于新打開的那個窗口，即第一次操作起到blank效果，后面起到self效果
--
>代碼：
<a href
="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309">天皇震怒！
</a
>
<!--瀏覽器不能打開壓縮包，所以跳轉到壓縮包會自動下載（沒法打開）--
>
5.列表
有序列表ol order list
無序列表ul unorder list
列表項li
語法：
<ol
><li
></li
><li
></li
><li
></li
>
</ol
>代碼：
<ol
><li
>李吼辣么大聲干什么嘛
</li
><li
>那你去物管啊
</li
><li
>你再罵！
</li
><li
>阿米西諾！
</li
>
</ol
>
完整代碼：
<!DOCTYPE html
>
<html lang
="en"><head
><!--注釋：頭部信息，不需要顯示的內容--
><meta charset
="utf-8"><!--注釋：中文編碼格式--
><meta name
="Keywords" content
=""><meta name
="Description" content
=""><title
>菜鳥教程
</title
><!--注釋：窗口顯示信息--
></head
><body
><!--CSS格式、標簽通用屬性id屬性：唯一標識style：樣式屬性class：類屬性title屬性：所有標簽都有的屬性，鼠標懸停（放在頁面內容上）時浮現出值--
><div style
="width:80%;color:red;border: 0; margin:0;auto;"><!--1.自動加粗2.大小從h1到h6逐漸變小3.每個標簽獨占一行，整體從上到小依次排列--
><h1
>我的第一個標題
</h1
><h2
>我的第二個標題
</h2
><h3
>我的第三個標題
</h3
><h4
>我的第四個標題
</h4
><h5
>我的第五個標題
</h5
><h6
>我的第六個標題
</h6
> <!--段落--
><!--獨占一行，從上到下排列，上下有間距--
><p id
="p1">我的第一個段落。
</p
><p
>我的第二個段落。
</p
><!--在 HTML 中，圖像由
<img
> 標簽定義。
<img/
>是單標簽，斜杠加后面要在頁面上顯示圖像，你需要使用源屬性（src）。src 指
"source"。源屬性的值是圖像的路徑屬性：src引入路徑屬性（重要）相對路徑：
../返回上一級 width寬 height高 取值數字 不建議用屬性改變寬高 --
><img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width
="100" height
="100" alt
="孫笑川的美圖" title
="孫哥的美貌"><img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width
="100" height
="100" alt
="孫笑川的美圖" title
="孫哥的美圖"><!--圖片間用回車隔開會有白條隔開，需要放在同一行--
><img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width
="100" height
="100" alt
="孫笑川的美圖"><!--多圖片顯示規則：大小足夠不換行，從左往右依次排列，一行顯示不下，自動換行alt 屬性用來為圖像定義一串預備的可替換的文本,替換文本屬性的值是用戶定義的。
<img src
="boat.gif" alt
="Big Boat">在瀏覽器無法載入圖像時，顯示alt文本屬性--
><br
><!--換行--
><!--a跳轉作用：用戶點擊后跳轉到指定位置屬性：href跳轉到地址href
= "#id"實現錨點功能，電梯效果，返回本頁面的其他指定位置id需要在標簽處加入id
=""href
= "#"只有--
><a href
="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target
=target_self
>天皇震怒！
</a
><a href
="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target
="target_parent">天皇震怒！
</a
><a href
="https://www.bilibili.com/video/BV1bs411M7i1?from=search&seid=2514703813258322309" target
=_top
>天皇震怒！
</a
><a href
="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%AD%99%E7%AC%91%E5%B7%9D&step_word=&hs=0&pn=14&spn=0&di=198330&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=2345536007%2C2371784920&os=480719738%2C3786853738&simid=3510676177%2C363014778&adpicid=0&lpn=0&ln=1600&fr=&fmq=1610954730893_R&fm=result&ic=&s=undefined&hd=&latest=©right=&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fi2.hdslb.com%2Fbfs%2Fface%2F4205f5a7fad0a3b122c10c8b3568cffb2848ec69.jpg%26refer%3Dhttp%3A%2F%2Fi2.hdslb.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1613549469%26t%3Daefaa0cbcb897247d13470b2d0d80217&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3Bktstktst_z%26e3Bv54AzdH3Fet1j5AzdH3Fwecbbcdcd_z%26e3Bip4s&gsm=f&rpstart=0&rpnum=0&islist=&querylist=&force=undefined" target
=_blank
>跳轉到圖片
</a
><a href
="#p1">跳轉到p標簽
</a
><!--瀏覽器不能打開壓縮包（或其他瀏覽器不能打開的資源），所以跳轉到壓縮包會自動下載（沒法打開）target
=_self:原窗口跳轉target
=_blank:打開新窗口跳轉target_parent:文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中，那么它與目標 _self 等效。target_top:文檔載入包含這個超鏈接的窗口，用 _top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。_blank 在新窗口中打開被鏈接文檔。_self 默認。在相同的框架中打開被鏈接文檔。_parent 在父框架集中打開被鏈接文檔。_top 在整個窗口中打開被鏈接文檔。framename 在指定的框架中打開被鏈接文檔。在本頁面想跳轉的地方跳轉設置id（唯一標識）
<a id
="xx"> 新建跳轉，連接為href
="#xx"id相同的情況下跳轉到第一個指定id的地方如果target的值錯誤，只會打開一次新窗口，后面的同樣操作基于新打開的那個窗口，即第一次操作起到blank效果，后面起到self效果--
></div
><!--有序列表ol order list有序type:取值默認1，還有A,a,I有序列表比無序列表多一個起止位置 start
=""，“”中必須是數字，不然第一個是0，后面按照tpye的值開始按順序排序如果start的值很大，如type
= "A" start
="25"，Y，Z后出現AA，AB
<ol
type = "1" start
="5"> 從5開始無序列表ul unorder list無序type屬性：列表標識的類型 取值 默認disc實心圓 square實心方形 circle 空心圓列表項li語法：
<ol
><li
></li
><li
></li
><li
></li
></ol
>列表項：獨占一行，從上到下排序，上下，左側有間距
<dl
><dt
></dt
><dd
></dd
></dl
>--
><ol
type = "A" start
="1"><li
>李吼辣么大聲干什么嘛
</li
><li
>那你去物管啊
</li
><li
>你再罵！
</li
><li
>阿米西諾！
</li
></ol
><dl
><dt
>孫笑川
</dt
><dd
>日本天皇，又叫孫狗
</dd
></dl
></body
></html
>
總結
以上是生活随笔為你收集整理的前端基础——day1的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
