手機端網(wǎng)站開發(fā)各地疫情最新消息
簡介
本文簡要講解了html,css,js.主要是讓大家簡要了解網(wǎng)絡(luò)知識
因為實際開發(fā)中很少直接寫html&css,所以不必過多糾結(jié),了解一下架構(gòu)就好
希望深度學(xué)習(xí)可以參考MDN和w3school
HTML
基礎(chǔ)
HTML (Hyper Text Markup Language) 不是一門編程語言,而是一種用來告知瀏覽器如何組織頁面的標(biāo)記語言.
主要用于頁面結(jié)構(gòu)的組織
最簡單的一個內(nèi)容是這樣的
<p>welcome to html</p>
屬性
使用屬性來給元素設(shè)定額外信息,屬性的基本寫法為
<p class="foobar">EESAST</p>
用空格與元素名或前一個屬性隔開,屬性名="值"(單引號雙引號都可)
比較典型的例子就是元素<a>,用來創(chuàng)建鏈接
<a href="https://eesast.com" title="科協(xié)官網(wǎng)">EESAST</a>
常用標(biāo)簽
- 文檔結(jié)構(gòu)標(biāo)簽:
<!DOCTYPE html>: 定義HTML文檔類型和版本.<html>: HTML文檔的根元素.<head>: 包含文檔的元信息,如標(biāo)題、字符集等.<title>: 定義文檔的標(biāo)題,顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁上.<body>: 包含文檔的主要內(nèi)容.
- 文本標(biāo)簽:
<h1>to<h6>: 定義標(biāo)題,h1為最高級標(biāo)題,h6為最低級標(biāo)題.<p>: 定義段落.<br>: 插入換行.<hr>: 插入水平線.
- 鏈接和圖像標(biāo)簽:
<a>: 定義超鏈接.<img>: 插入圖像.
- 列表標(biāo)簽:
<ul>: 無序列表.<ol>: 有序列表.<li>: 列表項.
- 表格標(biāo)簽:
<table>: 定義表格.<tr>: 定義表格行.<th>: 定義表頭單元格.<td>: 定義表格數(shù)據(jù)單元格.
- 表單標(biāo)簽:
<form>: 定義表單.<input>: 定義輸入字段.<textarea>: 定義文本域.<button>: 定義按鈕.<select>: 定義下拉列表.<label>: 定義表單標(biāo)簽.
- 樣式和格式標(biāo)簽:
<style>: 定義文檔的樣式信息.<div>: 定義文檔中的一個區(qū)塊.<span>: 定義文檔中的內(nèi)聯(lián)元素容器.<strong>: 定義強調(diào)文本.<em>: 定義強調(diào)的文本.
- 其他常用標(biāo)簽:
<meta>: 定義文檔的元信息,如字符集、關(guān)鍵詞等.<script>: 插入JavaScript代碼.<iframe>: 插入內(nèi)聯(lián)框架.<head>: 定義文檔的頭部.<footer>: 定義文檔的頁腳.
基本結(jié)構(gòu)
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的測試站點</title></head><body><p>這是我的頁面</p></body>
</html>
基本布局
<header>：頁眉.<nav>：導(dǎo)航欄.<main>：主內(nèi)容.主內(nèi)容中還可以有各種子內(nèi)容區(qū)段,可用<article>、<section>和<div>等元素表示.<aside>：側(cè)邊欄,經(jīng)常嵌套在<main>中.<footer>：頁腳.
關(guān)于完整的 html 元素和屬性,可以參考這里
應(yīng)用 CSS 和 JavaScript
對于 CSS,需要加入一個<link>元素,rel="stylesheet"表明這是文檔的樣式表,而 href 包含了樣式表文件的路徑,這個元素一般放在head里
<link rel="stylesheet" href="my-css-file.css" />
對于 js 腳本,加入<script>元素,src 為腳本的路徑.把它放在文檔的尾部</body>標(biāo)簽之前是一個更好的選擇,這樣可以確保在加載腳本之前瀏覽器已經(jīng)解析了 HTML 內(nèi)容
<script src="my-js-file.js"></script>
這里 script 元素沒有內(nèi)容,但他不是一個空元素,你也可以直接把腳本寫在元素里
CSS
基礎(chǔ)
CSS (Cascading Style Sheets,層疊樣式表),用于定義樣式,實現(xiàn)很多炫酷的功能,如
h1 {color: red;font-size: 5em;
}
主要語法如下
選擇器 : 語法由一個 選擇器 (selector) 開頭.它選擇 (selects)了我們將要用來添加樣式的 HTML 元素.在這個例子中我們?yōu)橐患墭?biāo)題(主標(biāo)題<h1>)添加樣式.
樣式修改 : 接著輸入一對大括號{ }.在大括號內(nèi)部定義一個或多個形式為 屬性 (property):值 (value);
元素選擇器
標(biāo)簽匹配
使用元素選擇器來直接匹配一種 html 元素
p {color: green;
}
id匹配
#ID {color: red;
}
多標(biāo)簽匹配
不同的選擇器可以用,隔開來使用多個選擇器
p, li { color: green; }
這種直接指定元素類型的寫法只能同時應(yīng)用于所有同類元素,在實際使用的時候是十分不方便的,因此我們還可以使用類名來進一步指定作用的對象.前面說到 HTML 中的元素可以添加屬性,這里的類名選擇器就對應(yīng)標(biāo)簽中的class屬性,比如
<ul><li>項目一</li><li class="special">項目二</li><li>項目 <em>三</em></li>
</ul>
同標(biāo)簽特殊匹配
.special {color: orange;font-weight: bold;
}
這里指定了屬于 special 類的元素進行設(shè)置,在在選擇器的開頭加.即為指定類,當(dāng)然可以同時指定元素和類
li.special,
span.special {color: orange;font-weight: bold;
}
元素位置匹配
嵌套關(guān)系
li em {color: rebeccapurple;
}
表示選擇嵌套在<li>內(nèi)部的<em>
相鄰關(guān)系
h1 + p {font-size: 200%;
}
表示選擇跟在<h1>后面的<p>
例子
可以嘗試下解讀這個選擇器
body h1 + p .special {color: yellow;background-color: black;padding: 5px;
}
盒模型
參考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
在 CSS 中,所有的元素都被一個個的“盒子(box)”包圍著,理解這些“盒子”的基本原理,可以幫助我們使用 CSS 實現(xiàn)準(zhǔn)確布局、處理元素排列.
CSS 中組成一個塊級盒子需要:
- Content box: 這個區(qū)域是用來顯示內(nèi)容,大小可以通過設(shè)置
width和height. - Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域； 大小通過
padding相關(guān)屬性設(shè)置. - Border box: 邊框盒包裹內(nèi)容和內(nèi)邊距.大小通過
border相關(guān)屬性設(shè)置. - Margin box: 這是最外面的區(qū)域,是盒子和其他元素之間的空白區(qū)域.大小通過
margin相關(guān)屬性設(shè)置.
如下圖：
在標(biāo)準(zhǔn)模型中,如果你給盒設(shè)置 width 和 height,實際設(shè)置的是 content box. padding 和 border 再加上設(shè)置的寬高一起決定整個盒子的大小
.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black;
}
可以嘗試計算一下這個盒子的大小
JS
簡介
這里主要介紹瀏覽器對象模型,用于瀏覽器的日常開發(fā),我們可以通過js方便的操控這些對象
BOM
BOM,一個基于js的瀏覽器對象,但并不是W3C(World Wide Web Consortium,萬維網(wǎng)聯(lián)盟)標(biāo)準(zhǔn),不同瀏覽器存在差異
如圖,是瀏覽器模型的基本結(jié)構(gòu),在瀏覽器環(huán)境下,一般可以省略window
我們主要控制的還是DOM對象
常用屬性
-
open()/close()打開/關(guān)閉窗口
-
alert()彈窗警告
DOM
符合W3C標(biāo)準(zhǔn),在日常開發(fā)更常見
添加/刪除
// 添加/刪除 HTML 元素
// appendChild(): 將新元素作為其它元素的子節(jié)點進行添加（添加到尾部）
// insertBefore(): 將新元素添加到其它元素的頭部let para = document.createElement("p"); // 創(chuàng)建一個段落
let text = document.createTextNode("abc"); // 創(chuàng)建一個文本節(jié)點
para.appendChild(text); // 將該段落與文本合成一個元素 <p>abc</p>
x.appendChild(para); // 將新元素 para 添加到 x 的尾部
x.insertBefore(para); // 將新元素 para 添加到 x 的頭部// 刪除元素時需要知道該節(jié)點的父節(jié)點
// removeChild(): 將某元素的子節(jié)點移除
// 一般來說是這樣刪除節(jié)點的：
// child.parentNode.removeChild(child); // 先找父節(jié)點，再刪除查找
let x= document.getElementById ("content"); //通過id
let x = document.getElementsByClassName("content"); //通過
修改
通過查找然后賦值實現(xiàn)
// 利用 innerHTML 屬性修改元素的內(nèi)容：
let x = document.getElementById("content"); // 找到對應(yīng)的元素
x.innerHTML = "hello world";// 利用 style 屬性修改元素的 CSS 格式：
document.getElementById("content").style.color = "red";
使用
直接寫在 HTML 中：
一般放在body最后面,避免阻塞
<script>console.log("Hello World!");
</script>
通過文件的路徑引入：
defer表示在html解析完畢后執(zhí)行,避免阻塞
<script src="___.js" defer></script>
示例
下面是一個使用了html,css,js的簡單實例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello World Example</title><style>body {display: flex;align-items: center;justify-content: center;height: 100vh;}#helloText {color: red;}</style>
</head><body><div><p id="helloText">Hello World</p><button id="changeColorButton" onclick="changeColor()">Change Color to black</button></div><script>function changeColor() {document.getElementById('helloText').style.color = 'black';}</script>
</body></html>