Web安全学习 Week1
這周主要學HTML 寫個靜態百度頁面 看懂DOM
?寫好文件想運行 option+b
<h1>這不是一個標題<h1>
<p>這不是一個段落<p>
1.網頁
1.網頁 指在因特網上根據一定的規則，用HTML等制作的用于展示特定內容相關的網頁集合
2.
1.2 HTMl指的是超文本標記語言(Hyper Text Markup Language),它是用來描述網頁的一種語言
<jpg==“logo.logoing.jpg”>
1.3網頁組成
網頁是由圖片、鏈接、文字、聲音、視頻等元素組成，其實就是一個html文件后綴
2.常用瀏覽器
常用的瀏覽器IE、火狐（Firefox)、Chrome、Safari和Opera等
瀏覽器內核：瀏覽 渲染
IE Trident IE、獵豹安全、360瀏覽器、百度瀏覽器
firefox Gecko 火狐瀏覽器內核
safari Webkit 蘋果瀏覽器內核
Chrome Blink Chrome瀏覽器內核
3.Web標準
Web標準是由W3C組織和其他標準化組織制定的一系列標準的集合
3.1瀏覽器不同，它們顯示頁面或者排版就有些差異
遵循標準可以
3.2Web的標準主要包括結構、表現和行為三方面
1結構 現階段主要是HTML（骨骼）
2表現 主要指的是CSS（皮囊）
3行為 現階段主要是Javascript（行為）
1.1基本語法概括
1.HTML標簽是由尖括號包括的標簽
1.2雙標簽可以分為兩類：包含關系和并列關系
2.1第一個HTML網頁
<html>
<head>
<title>這不是一個頁面</title>
</head>
<body>
斷劍重鑄之日，騎士歸來之時。
</body>
</html>
3.
3.1<!DOCTYPE html>文檔類型聲明標簽，告訴瀏覽器這個頁面采取html5版本來顯示頁面
3.2 lang語言種類
<html lang=“zh-CN”> </html>
用來定義當前文檔顯示的語言
1.en定義語言為英文
2.zh-CN定義語言為中文（fr法語
3.3字符集
字符集（character set）是多個字符的集合。以便計算機能夠識別和儲存各種文字。
在<head>標簽內，可以通過<meta>標簽的charset屬性來規定HTML文檔應該使用哪種字符編碼
<meta charset=“UTF-8”/>
UTF-8也被稱為萬國碼
4.HTML常用標簽
4.2<h1>標題標簽</h1>
? ? ? <h2>標題一共六級選</h2>
<h3>文字加粗一行顯</h3>
<h4>由大到小依次減</h4>
<h5>從重到輕隨之變</h5>
<h6>語法規范刷新見</h6>
4.3段落和換行標簽（重要）
在網頁中<p>標簽用于定義段落
<p>這是一個段落標簽</p> //paragraph
特點：文本在一個段落中會根據瀏覽器的大小自動變換大小
換行標簽：<br /> ? ? //break
段落和段落間隙較大
換行雖然有間隙但總體還是一個自然段
4.4文本格式化標簽
在網頁中，有時需要為文字設置粗體、斜體或下劃線等效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
標簽語義：突出重要性，比普通文字更重要
<strong></strong>//加粗標簽
或<b></b>//加粗標簽
<em></em>或<i></i>//傾斜標簽
<del></del>或<s></s>//刪除線標簽
<ins></ins>或<u></u>//下劃線標簽
4.5<div>和<span>標簽//division。span范圍
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容的。
span小盒子只占一塊 div占一行
4.6圖像標簽和路徑（重點）
1.圖像標簽
在HTML標簽中，<img>標簽用于定義HTML頁面中的圖像//image
<img src=“圖像URL”/>
src是<img>必須屬性
alt替代文本
title提示文本
width
height
border
注意點：
1.圖像標簽可以擁有多個屬性，必須寫在標簽名的后面
2.屬性之間不分前后，標簽名和屬性、屬性名之前要用空格隔開
3.屬性采取鍵值對的格式即屬性=“屬性值”
4.8圖像標簽和路徑
2.路徑
（1）目錄文件夾和根目錄：實際工作中，我們的文件不能亂放
目錄文件夾：就是普通文件夾，里面只不過存些素材
根目錄：打開目錄的最外層
（2）vscode中打開文件夾
路徑可分為
1.相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑
圖片相對于HTML頁面的位置
2.絕對路徑
下一級路徑圖片文件位于文件夾下一級 <img src=“images/baidu/gif”/>
上一級 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src=“images../baidu/gif”/>
5.Study
1.<a></a>跳轉標簽標簽 <a href="https://baidu.com">百度一下</a>
2.css文件與html同級 用link標簽 <link rel=“stylesheet” href=“strengen.css”>可把標題色 ? ? ? ? ? ? ? ? ? ? ?
3.塊元素<div></div>獨占一行
4.css中 color：顏色；
? ? ? font-size:像素大小；
? ? ? background-color:顏色；
*{
margin:0;/*外邊距*/
? ? ? ? ? ? padding:0;/*內邊距*/
} 通配符 全選 清除默認樣式
div{
background-color:顏色；
height:像素大小；
width：像素大小；
} ? ? ? ?
5.<ul></ul> 列表元素
可用ul>li*3回車之間開三個列表元素
ul{}在css中修改ul的狀態
在css中ul{}修改ul狀態
ul{
padding:像素大小；
list-style:none;/*清除默認點*2/
}
ul li{
}
6. ? .box span{}修改box中span元素樣式
/* relative 相對定位 是相對于元素本身進行移動 */
? ? /* absolute 絕對定位 是相對于有定位的父盒子進行移動 */
? ? /* fixed 固定定位 相對于瀏覽器視口進行定位 */
? ? /* 相對移動 相對對上向下移動20個像素 相對左向右移動100px*/
? ? /* top與bottom同時存在 top不起作用 left與right同理*/
我的博客雖然不好 但你努力看到了現在 不留個贊嘛0.0
總結
以上是生活随笔為你收集整理的Web安全学习 Week1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最大权闭合子图(最小割)
- 下一篇： 安全学习Week2