本文,有很多很棘手的问题,例如使用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 href="http://baidu.com">跳转到百度</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小时内与您取得联系。