有沒有從單個頁面導出CSS和HTML代碼的方法？
在Chrome中，點擊文件->頁面另存為(mac上的command + s或pc上的control + s)。
您可以在頁面源代碼中看到html代碼。 要導出它們，只需簡單的復制和粘貼即可。
點擊元素中的鏈接可以查看CSS，也可以查看js:
& ltlink rel = " style sheet " href = " link _ to _ CSS " & gt；
你也可以點擊鼠標右鍵，然后另存為。
我想你的意思是& quot摘錄& quot從html中分離css/js資源(而不是& quot導出& quot).奇怪的是，沒有人回答對網絡行業如此重要的問題。
通常，許多老師告訴你，你必須用eslint，或jscs，或sonarqube，或標記驗證器w3的理想代碼風格，或者用一些真空理想的流行框架，親自動手構造html+js+css。但是在現實生活中，您經常從草稿(MVP)開始項目，并在最近優化它，所以您需要類似于逆向工程的工具來開發您自己的web項目...
這樣的工具可以讓你避免對其他程序員進行大的技術解釋，將你的web項目(前端部分)重構為可讀的干凈格式，例如從html/php中提取css/js。
SnipCSS extension提取與HTML網頁的任何部分相關聯的所有CSS樣式(借助Chrome DevTools協議)。
提取關鍵css提取上層內容的CSS，以便盡可能快地將內容呈現給用戶(目標是加速)。
Webpack js mini css extract插件提取到JS+CSS對中(用于webpack world)。
TexAu可以從你的網站提取CSS和JavaScript(從你的主機上的HTML)。
創建一個免費的TexAu帳戶。 列出要自動喜歡的配置文件URL。 立即運行自動化(并安排它)。 在Chrome Ctrl + S中保存你渲染的HTML頁面，它通常允許單獨拆分一些資源(CSS，JS，字體，IMG)。
使用Chrome標準瀏覽器控制臺和元素檢查器。在控制臺上，您可以查看document.styleSheets對象值以了解外部CSS文件名。
如果你來自Figma世界而不是網絡世界，Figma導出到html插件可以幫助你。
如果你來自Wordpress世界而不是網絡現實世界，將wp頁面導出為靜態html會對你有所幫助。
借助PHP (CSS，來自源html)提取內聯和外部樣式:從HTML提取CSS
借助Perl提取樣式(CSS，來自源HTML):使用Perl提取樣式標簽數據
在Java JSoup HTML解析器的幫助下提取CSS樣式(從源HTML):在Java中使用JSoup從HTML提取CSS樣式
用Softdrink Lisp從HTML中提取CSS樣式。極端的方式。
HTTrack網站復制器有助于準備一個已經包含一些從HTML中分離出來的CSS樣式的網站鏡像。但是，如果沒有，您可以在上傳到其他主機/本地主機后使用其他方法。如果你的MVP(草案)和不受歡迎的CMS在一起，這是很有用的。
通常html頁面中有三種類似css的樣式:內嵌元素樣式、內部html樣式和外部HTML鏈接CSS樣式。好的方法是將它們全部提取為外部CSS文件。
更新3。我已經創建了自己的這種提取器的簡化示例:
<?php
// HTML code containing inline, internal and external CSS styles
$html = "<HTML>
<head>
</head>
<body>
<style type=\"text/css\">
h1 {
color: red;
}
</style>
<h1 class=\"hh html-regular-header h-1\" id=\"main-header\" style=\"font-size: 24px;\">Hello World!</h1>
<h2 class=\" hh html-regular-header h-2\" style=\"color: skyblue; background-color: grey\">Hello, Underworld.</h2>
<p class=\"some simple\" style=\"color: blue;\">This is a paragraph.</p>
<div style=\"text-align: center;\">It is sample</div>
<style>
p {
font-size: 16px;
}
</style>
<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\">
</body>
</HTML>";
// Parse HTML code using DOMDocument
$dom = new DOMDocument();
$dom->loadHTML($html);
function getSimplePath ($tag, $deepMax = 3) {
$nodeKey = '';
if (!isset($tag) || empty($tag) || $deepMax <= 0) {
return $nodeKey;
}
if (!empty($tag->nodeName) && $tag->nodeName[0] !== '#') {
$nodeKey = strtolower($tag->nodeName);
if ($nodeKey === 'body' || $nodeKey === 'head' || $nodeKey === 'html') {
$deepMax = 0;
}
} else {
$nodeKey = '*';
$deepMax = -1;
}
$parentKey = '';
$was = false;
if ($tag->hasAttribute('id')) {
$nodeKey .= '#' . $tag->getAttribute('id');
$was = true;
}
if (!$was && $tag->hasAttribute('class')) {
$nodeKey .= '.' . implode('.', explode(' ', preg_replace('/\s+/', ' ', trim($tag->getAttribute('class')))));
$was = true;
} else if ($tag->hasAttribute('class') && !empty(trim($tag->getAttribute('class')))) {
$nodeKey .= '.' . (explode(' ', trim($tag->getAttribute('class')))[0]);
}
if (!$was || !$tag->hasAttribute('id')) {
$parentKey = getSimplePath($tag->parentNode, $deepMax - 1);
if (!empty($parentKey)) {
$nodeKey = $parentKey . ' > ' . $nodeKey;
}
}
return $nodeKey;
}
function fixInlineStyleContent ($styleStr) {
$styleStr = trim($styleStr);
while ($styleStr[strlen($styleStr) - 1] === ';') {
$styleStr = trim(substr($styleStr, 0, strlen($styleStr) - 1));
}
$styleArr = explode(';', $styleStr);
foreach ($styleArr as $key => $value) {
$value = trim($value);
if (strpos($value, '!important') !== false || strpos($value, ' important') !== false || strpos($value, '"') !== false || strpos($value, "'") !== false) {
$styleArr[$key] = $value;
continue;
}
$styleArr[$key] = $value . ' !important';
}
$styleStr = implode('; ', $styleArr) . ';';
return $styleStr;
}
function printAndApplyCSS ($styles, $isExternal = false) {
if (!isset($styles)) {
return;
}
if (!empty($styles) && !is_array($styles)) {
$styles = array($styles);
}
if (count($styles) == 0) {
return;
}
if (count($styles) == 1 && strlen(trim($styles[0])) == 0) {
return;
}
foreach ($styles as $cssPart) {
if (!$isExternal) {
echo htmlspecialchars($cssPart); // print css (for user 1)
echo('<style type="text/css">' . $cssPart . '</style>'); // apply css
} else { // TODO
$cssPart = trim($cssPart);
if ($cssPart[0] === '/' && $cssPart[1] === '*' && $cssPart[strlen($cssPart) - 2] === '*' && $cssPart[strlen($cssPart) - 1] === '/') {
$cssPart = trim(substr($cssPart, 2, strlen($cssPart) - 4));
echo htmlspecialchars('href=' . $cssPart); // print css (for user 2)
echo('<link rel="stylesheet" type="text/css" href="' . $cssPart . '">'); // apply external css
} else {
echo htmlspecialchars($cssPart); // print css (for user 3)
}
}
}
}
// Retrieve External styles:
$external_styles = [];
foreach ($dom->getElementsByTagName('link') as $link_tag) {
if ($link_tag->hasAttribute('rel') && strtolower($link_tag->getAttribute('rel')) == 'stylesheet' && $link_tag->hasAttribute('href')) {
$external_styles[] = '/*' . $link_tag->getAttribute('href') . '*/';
}
}
// Retrieve Internal styles:
$internal_styles = [];
$internalStyleTags = [];
foreach ($dom->getElementsByTagName('style') as $style_tag) {
$internal_styles[] = $style_tag->nodeValue;
$internalStyleTags[] = $style_tag;
}
foreach ($internalStyleTags as $style_tag) {
$style_tag->parentNode->removeChild($style_tag); // do this only on simple array
}
// Retrieve Inline styles:
$inline_styles = [];
foreach ($dom->getElementsByTagName('*') as $tag) {
if ($tag->hasAttribute('style')) {
$nodeKey = getSimplePath($tag);
$inline_styles[] = '' . $nodeKey . '{' . fixInlineStyleContent($tag->getAttribute('style')) . '}';
$tag->removeAttribute('style');
}
}
// Print results:
echo "<b>External styles: </b>"; printAndApplyCSS($external_styles, true); echo "<br/>";
echo "<b>Internal styles: </b>"; printAndApplyCSS($internal_styles); echo "<br/>";
echo "<b>Inline styles: </b>"; printAndApplyCSS($inline_styles); echo "<br/>";
echo "<hr/>";
$body = $dom->documentElement->lastChild;
echo($dom->saveHTML($body));
?>