整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器
剛開始設計HTML語言是為了將文字圖像關聯在一起，用另一臺發送或接收
HTML 不是一種編程語言，而是一中標記語言(mark-up language),標記語言是一套標記標簽(mark-up tag)
標簽是由尖括號 < > 把關鍵詞括起來，標簽通常是成對出現的
讀取 HTML 文檔，使用標簽來解析頁面的內容，以網頁的形式現實，瀏覽器不會現實HTML標簽
每種瀏覽器都有自己的內核(引擎)（解析網頁的一個程序，io以什么方式去渲染它都要通過引擎去執行）
目前主流的瀏覽器分為五種
Chrome谷歌瀏覽器 （Webkit內核，V8 js引擎）
Firefox火狐瀏覽器 （Gecko內核）
Internet Explorer IE瀏覽器（ Trident內核）
Opera 歐朋瀏覽器 （Presto內核） 主要市場：移動端
Safari 蘋果瀏覽器 （Webkit內核，但JS引擎為Nitro）
不需要去記，簡單了解下
標簽必須閉合
所有標簽名一律小寫
代碼縮進，使閱讀代碼更加易懂
特殊符號規范使用
命名規范，見名之意
PS: 所有的標記符號都是半角英文
眾說紛紜編輯器太多，最終只是一個工具，希望同學們能從萬千世界中找到適合自己的編輯器伙伴
| 編輯器 | 描述 |
|---|---|
| EditPlus | 手寫模式，適合初學手寫，無代碼提示(有IE調試視圖) |
| Sublime | 插件特別多，占用內存小，啟動速度快，打開大項目較慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特別多，啟動較慢，占用內存大，開發和管理視圖都很方便 |
| Dreamweaver | 適合初學，主要代碼提示和代碼插入功能強大，主要偏向于設計(有設計視圖) |
| 插件名 | 描述 | 詳情請戳 |
|---|---|---|
| emmet | 前端自動補全，提供快捷補全方式 | |
| ColorPicker | 調色板，顏色選擇器 | |
| SublimeTmpl | sublime模板，可以快速創建一個HTML模板 | |
| view in browser | 用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁) | |
| LiveReload | 實時刷新HTML(編輯器里按下保存ctrl+s的時候，已經打開的HTMl會自動刷新) | 谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載 |
| Color Highlighter | CSS顏色代碼高亮及顏色預覽提示 | |
| CSS3 | CSS3的代碼高亮提示 | 還針對了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代碼提示 | |
| Sublime-Better-Completion | 可自選開啟代碼提示，支持jQ、js、bootstrap、php、sql ... | 倉庫地址此插件只能通過Github克隆下載安裝安裝方法 |
注：Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 里面search 可以進行搜索插件名字來找到具體使用方法，還有什么不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是標簽，主要用于文檔類型的聲明 |
| charset="utf-8" | 聲明字符編碼集 |
| http-equiv="Content-Type" | 把Content屬性關聯到HTTP頭部(協議頭) |
HTML模板
簡單了解，并不需要熟練掌握
Dom節點樹
.html .htm這兩種是比較常見的
在早期系統中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm
現在通常使用.html作為擴展名
接下來所有的標簽元素學習都在body標簽里面去敲打實現、
為了突出標題，字體大小和加粗發生相應的改變
<h1>我是大主題</h1> <h2>我是大主題</h2> <h3>我是大主題</h3> <h4>我是大主題</h4> <h5>我是大主題</h5> <h6>我是大主題</h6>
<!doctype html><!-- 讓瀏覽器使用html5的標準解析 --> <html> <head> <!-- 設置字符編碼集讓瀏覽器使用utf8解析當前網頁 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，關鍵詞，多個請用逗號分開" /> <meta name="description" content="網頁描述，八十字內" /> <title>瀏覽器標簽頁上的網頁標題</title> </head> <body> <!-- 所有的標簽學習都在這body里面去敲，上面head元素里面的內容做個了解就可以了 --> <h1>我是大標題</h1> <h2>我是主題2</h2> <h3>我是主題3</h3> <h4>我是主題4</h4> <h5>我是主題5</h5> <h6>我是主題6</h6> </body> </html>
可以發現h標簽從h1到h6會隨著數值越小字越小，并且都是會加粗和各占一行的狀態（前后的元素都會被換行）
h1標簽一般一個頁面里面只會寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優化)
<p> 冬著一身素衣，緩緩而來，季節沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。 </p>
剛我們了解到了瀏覽器是識別尖括號的，如果要在頁面中顯示html標記那要怎么做呢？這時候就需要特殊符號的表示來顯示
| 符號 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引號 | " |
| 版權 | © |
| ×叉 | × |
| & | & |
| 符號 | 描述 |
|---|---|
| B標簽 | 物理加粗，頁面呈現加粗狀態. |
| Strong標簽 | 不僅能加粗，還利于搜索引擎優化 |
<b>物理加粗，頁面呈現加粗狀態.</b> <strong>不僅能加粗，還利于搜索引擎優化，就是類似于百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標簽里面的內容來優化顯示網頁的排名</strong>
可以根據word文檔上面發現 b是加粗 u是下劃線 i是傾斜 同樣適用于標簽
<i>我是傾斜</i> <u>我加了下劃線</u>
鏈接一個頁面,點擊則會跳轉這個鏈接頁面
使用錨點滾動到設定的位置
<a href=""></a> a標簽中的href控制點擊的時候跳轉到哪里如果沒寫表示刷新當前頁面 <a href="#"></a> 跳轉到當前頁面(回歸到頁面頂部) <a href="javascript： void(0);"></a> 死鏈接，不會跳轉，一般用于js特效 <a href="#name">錨點到一個標簽上所對應的ID名字，點擊則跳到那個標簽位置</a> <a >跳轉到百度</a> 跳轉到百度 需要注意的是 http 協議不能少
點擊#flag的a標簽的時候會跳到到上面h2標簽
只有擁有name屬性的
a標簽
才能錨點,還有一種方式是通過ID標識唯一元素，也可以跳轉(不僅僅是a標簽)
| 描述 | 標簽 |
|---|---|
| 滾動標簽 | marquee |
| 字體標簽 | font |
| 定義水平線 | hr |
marquee
| 屬性 | 描述 |
|---|---|
| direction | 滾動方向 |
| behivior | 行為 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滾動 |
| scroll | 滾動 |
| slide | 滑落 |
| 屬性 | 描述 |
|---|---|
| color | 顏色 |
| size | 0-7 |
| face | 字體 |
與font相似，擁有color和size屬性
hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統一會加一個反斜杠表示結束這個標簽，不加也能夠正確顯示，但是養成一個良好的習慣確實重要，比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、
結合今天所學，寫一個簡單的網頁
內容如下：
寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網上一大把哈哈，可以自己寫下，鍛煉下思維
需要包括h、p、a、加粗
題材不限，至少200字
在習題一的文章底部，使用滾動標簽進行滾動方向為45°
家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。
CSS-in-JS 技術用于在同一文件中編寫組件和樣式，同時保持簡單性和清晰度。
根據 styled-components 創建者 Max Stoiber 的說法，超過 60% 的 React 安裝者還安裝了 CSS-in-JS 庫。 在 JavaScript 中編寫 CSS 非常流行，尤其是在使用 React 或 Angular 等 JS 框架時。 但是許多庫可用于簡化編寫 CSS-in-JS 的過程，本文將向大家介紹6款零運行時 CSS-in-JS 庫。
CSS-in-JS 是一種樣式技術，使用 JavaScript 直接對組件進行樣式設置，其使用變量來定義組件的 CSS。 該變量將包含所有 CSS 屬性，確保組件與其指定的樣式無縫銜接。
隨著基于組件的樣式變得越來越流行，CSS-in-JS 近年來也有所增加。 由于大多數現代 JavaScript 框架都是組件化，從而進一步推動 CSS-in-JS 的流行。 CSS 現已嫣然成為 JavaScript 的一個模塊，可以在需要時自由定義和使用。
在類似 React 的現代框架中，開發者可以通過編寫 CSS-in-JS 使用內聯技術在 JavaScript 文件的 JSX 部分中編寫 CSS。 但這種技術可能會令人困惑、可讀性較差，并且可能會破壞代碼流程。 通過庫編寫 CSS-in-JS 并不能取代 CSS 的模塊化。
在 CSS-in-JS 中，開發者可以在變量中定義樣式，然后通過用變量標簽包裝組件來設置組件樣式。
styled 標簽是從庫中導入，創建一個具有預定義樣式的 React 組件，然后在 HTML 標簽中使用。 下面的示例使用 h1，根據定義的 CSS 屬性進行自定義。 編碼完成后，定義屬性，如下所示：
const Title = styled.h1`
font-family: sans-serif;
font-size: 48px;
color: #f15f79;
`;接下來，將內容包裝在變量標簽中：
const App = () => <Title>Hello world!</Title>;這就是在大多數 CSS-in-JS 庫中定義樣式的方式。
使用 CSS-in-JS 具有以下優點：
使用 CSS-in-JS 有一些缺點，包括：
編譯時是指用高級、人類可讀語言編寫的代碼被編譯器轉換為低級、機器可讀代碼，而運行時是指程序轉換后的代碼在最終用戶的計算機上運行。
改善 CSS-in-JS 由于雙重解析而導致的性能時間損失的解決方案之一是，庫可以首先將 CSS-in-JS 塊轉換為單獨的 CSS 文件。 然后，瀏覽器將讀取這些樣式并將其應用到網頁，最終節省生成 style 標簽時浪費的時間。 這稱為零運行時 CSS-in-JS。 它對于性能至關重要的規模化或復雜的項目特別有用。
Linaria 的編譯時 CSS-in-JS 工具提供了介于純 CSS 解決方案和運行時 CSS-in-JS 方法之間的中間解決方案，即編譯時方案。
Linaria 具有以下特征：
總之，Linaria 在編譯時生成 CSS 類并將其提取到單獨的 CSS 文件中，而不是在運行時生成。 這使得可以避免運行時 CSS-in-JS 解決方案的性能損失，同時保留組件隔離和動態樣式匹配的優勢。
import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';
// Write your styles in `css` tag
const header = css`
text-transform: uppercase;
font-family: ${fonts.heading};
font-size: ${modularScale(2)};
${hiDPI(1.5)} {
font-size: ${modularScale(2.5)};
}
`;
// Then use it as a class name
<h1 className={header}>Hello world</h1>;使用 Linaria 的缺點主要包括以下兩點：
下面是 Linaria 的完整的 Webpack 示例配置：
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const dev = process.env.NODE_ENV !== 'production';
module.exports = {
mode: dev ? 'development' : 'production',
devtool: 'source-map',
entry: {
app: './src/index',
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: '[name].bundle.js',
},
optimization: {
noEmitOnErrors: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) },
}),
new MiniCssExtractPlugin({ filename: 'styles.css' }),
// 將所有文件中的 CSS 提取到單個 styles.css 中
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{ loader: 'babel-loader' },
// 最終通過Babel處理
{
loader: '@linaria/webpack-loader',
options: { sourceMap: dev },
},
// 添加js文件的linaria的自定義loader
],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: { sourceMap: dev },
},
],
},
{
test: /\.(jpg|png|gif|woff|woff2|eot|ttf|svg)$/,
use: [{ loader: 'file-loader' }],
},
],
},
devServer: {
contentBase: [path.join(__dirname, 'public')],
historyApiFallback: true,
},
};Astroturf 允許開發者在 JavaScript 文件中編寫 CSS，而無需添加任何運行時層，并使用現有的 CSS 處理管道。
Astroturf 具有以下特征：
import React from 'react';
import { css } from 'astroturf';
const btn = css`
color: black;
border: 1px solid black;
background-color: white;
`;
export default function Button({ children }) {
return <button className={btn}>{children}</button>;
}Astroturf 的缺點主要包括：
Reshadow 用 JavaScript 編寫。 該庫提供了許多功能，最值得注意的是為 React 等虛擬 DOM 框架提供了 Shadow DOM 開發人員體驗，同時還支持 CSS-in-JS 語法。
Reshadow 的典型特征包括：
import styled, { css } from 'reshadow';
const styles = css`
button {
font-size: 16px;
cursor: pointer;
padding: 10px 15px;
border-radius: 20px;
border: 2px solid;
background-color: white;
color: darkorange;
}
`;
const Button = ({ children, ...props }) =>
styled(styles)(<button {...props}>{children}</button>);Reshadow 的缺點包括：
vanilla-extract 是 TypeScript 中的零運行時樣式表。使用本地范圍（locally scoped）的類名和 CSS 變量在 TypeScript（或 JavaScript）中編寫樣式，然后在構建時生成靜態 CSS 文件。
基本上，它是“TypeScript 中的 CSS Modules”，但具有作用域 CSS 變量 等更多特性。
// styles.css.ts
import { createTheme, style } from '@vanilla-extract/css';
export const [themeClass, vars] = createTheme({
color: {
brand: 'blue',
},
font: {
body: 'arial',
},
});
export const exampleStyle = style({
backgroundColor: vars.color.brand,
fontFamily: vars.font.body,
color: 'white',
padding: 10,
});vanilla-extract 的缺點包括：
Treat 是可主題化、靜態提取的 CSS-in-JS，運行時間接近于零。使用 Treat 時，樣式在 .treat.js 或 .treat.ts 文件中聲明。 Treat 執行 .treat.js 文件并在構建時生成所有 CSS 規則，僅打包生成的 CSS 樣式。
如果使用主題功能，Treat 會在構建時生成所有 CSS 樣式。 然后，當切換主題時，它會在運行時交換預先生成的類。
Treat 的特征可以總結為以下幾點：
import { style } from 'treat';
export const buttonStyle = style({
backgroundColor: '#1e4db6',
color: '#fff',
padding: '10px 20px',
borderRadius: '5px',
border: 'none',
});
然后，可以將聲明的樣式導入到組件中，如下例所示。
import React from 'react';
import { buttonStyle } from './Button.treat';
export const Button = () => {
return <button className={buttonStyle}>Click me</button>;
};Treat 的缺點包括：
Goober 是一個流行的、輕量級的、零依賴包。 雖然它不是嚴格意義上的零運行時 CSS-in-JS 解決方案，但其內置的 extractCss 函數允許開發者提取靜態 CSS 文件并將它們注入到 <head> 標記中，就像在零運行時 CSS-in- 中一樣。
使用 Goober 的優點包括：
該 API 的靈感來自于 emotion 的 styled 函數。意思是，您使用 tagName 調用它，它會返回該標簽的 vDOM 組件。請注意，需要在使用樣式函數之前運行安裝程序。
import { h } from 'preact';
import { styled, setup } from 'goober';
// Should be called here, and just once
setup(h);
const Icon = styled('span')`
display: flex;
flex: 1;
color: red;
`;
const Button = styled('button')`
background: dodgerblue;
color: white;
border: ${Math.random()}px solid white;
&:focus,
&:hover {
padding: 1em;
}
.otherClass {
margin: 0;
}
${Icon} {
color: black;
}
`;Goober 的缺點包括：
https://github.com/callstack/linaria
https://blog.logrocket.com/comparing-top-zero-runtime-css-js-libraries/
https://github.com/astroturfcss/astroturf
https://github.com/yandex/reshadow
https://github.com/vanilla-extract-css/vanilla-extract
https://github.com/seek-oss/treat
https://github.com/cristianbote/goober
https://medium.com/@arnabroyy/21-best-javascript-and-css-library-in-2023-for-web-development-e6e6af939a1e
TML 的 input 標簽是構建網頁表單的基石。它提供了多種多樣的輸入字段類型，使網頁開發人員能夠創建功能強大且用戶友好的表單。從簡單的文本輸入到復雜的日期選擇器，input 標簽為表單交互提供了無限的可能性。在本文中，我們將全面探索 input 標簽的各種應用，并揭秘一些提高用戶體驗的技巧。
input 標簽的類型揭秘
input 標簽提供了豐富的類型屬性，使我們能夠創建不同的輸入字段。一些常見的類型包括：
自定義輸入字段
input 標簽的真正強大之處在于它的自定義能力。你可以利用各種屬性來定制輸入字段，滿足特定的需求。例如：
增強用戶體驗
除了基本的輸入字段類型，input 標簽還提供了多種功能來增強用戶體驗：
樣式化輸入字段
使用 CSS，你可以完全控制輸入字段的外觀和感覺，使其與網頁設計完美融合。你可以改變輸入字段的背景顏色、邊框、字體大小和圓角等。來看一個例子：
<style>
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
<input type="text" placeholder="輸入你的名字">
在這個例子中，我們使用 CSS 為文本輸入字段添加了內邊距、邊框和圓角。
結論：打造動態表單
HTML input 標簽為網頁開發人員提供了構建動態表單的強大工具。通過結合不同的輸入類型、自定義屬性和樣式化技術，你可以創建出引人入勝且易于使用的表單。不斷探索 input 標簽的無限可能，讓你的網頁表單更加高效、直觀和視覺吸引力！釋放你的創造力，打造令人難忘的用戶體驗！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
