整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML中可以使用文本標(biāo)記、段落標(biāo)記、列表標(biāo)記和排版標(biāo)記對文本進(jìn)行各種各樣的格式化工作。
下面讓我們來進(jìn)行上述內(nèi)容的學(xué)習(xí)：
HTML為單獨(dú)的詞或者句子定義了兩種樣式：物理樣式(Physical Style)和邏輯樣式(Logical Styles)。
物理樣式標(biāo)記也稱為字體樣式元素或?qū)嶓w字符控制標(biāo)記，因?yàn)樗鼈優(yōu)闉g覽器提供了特定的字體指令。現(xiàn)在各類網(wǎng)頁開發(fā)工具中仍然有這類標(biāo)記。
物理樣式標(biāo)記(Physical Style):
| 標(biāo)記 | 說明 |
| b軟件工程專業(yè)！/b | 黑體 |
| i軟件工程專業(yè)！/i | 斜體 |
| u軟件工程專業(yè)！/u | 下劃線 |
| del軟件工程專業(yè)！/del | 刪除線 |
| big軟件工程專業(yè)！/big | 變大字號 |
| small軟件工程專業(yè)！/samll | 變小字號 |
| Xsup2/sup | 上標(biāo)--X2 |
| Ysub1/sub | 下標(biāo)--Y1 |
邏輯樣式標(biāo)記（Logical style）:
邏輯樣式標(biāo)記也稱為基于內(nèi)容的標(biāo)記。
| 標(biāo)記 | 主要用途 |
| abbretc./abbr | 表示縮寫 |
| address江蘇省南京市/address | 表示地址（address） |
| cite軟件工程！/cite | 書名、影視名等的引用，斜體 |
| code軟件工程！/code | 計(jì)算機(jī)代碼，顯示固定寬度字體 |
| dfn軟件工程！/dfn | 定義一個詞，通常為斜體 |
| samp軟件工程！/samp | 顯示固定寬度字體 |
| kbd軟件工程！/kbd | 鍵盤輸入，顯示無格式的固定寬度字體 |
| em軟件工程！/em | 強(qiáng)調(diào)，通常為斜體 |
| strong軟件工程！/strong | 強(qiáng)調(diào)，顯示黑體字符(重要性) |
| var變量/var | 變量，顯示斜體字符 |
文本格式化其它標(biāo)記使用
標(biāo)題字（heading）:標(biāo)題是通過 h1～h6 等標(biāo)記進(jìn)行定義的。h1 定義最大的標(biāo)題，h6 定義最小的標(biāo)題。瀏覽器會自動地在標(biāo)題的前后添加空行。
添加空格 (nbsp; -non break space):
基本語法： nbsp；
添加特殊符號：編寫網(wǎng)頁代碼時有時需要一些特殊符號，如?、?等，可以直接添加相應(yīng)的符號代碼即可。
段落格式化
p標(biāo)記屬性語法:瀏覽器會自動地在段落的前后添加空行
預(yù)格式化文本標(biāo)記
實(shí)現(xiàn)預(yù)先排版好的文本原封不動地顯示出來
居中標(biāo)志
center 實(shí)現(xiàn)網(wǎng)頁中段落居中顯示
段落縮進(jìn)
可以實(shí)現(xiàn)文字縮排，一對縮排標(biāo)記可以縮進(jìn)5個西方字符位置
列表標(biāo)記
列表將網(wǎng)頁中相關(guān)的資料以條目的形式而形成的一種特殊的表，列表主要分為以下幾類；
無序列表：ul
無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。
無序列表始于 ul 標(biāo)簽。每個列表項(xiàng)始于 li。
2. 有序列表：ol
同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。
有序列表始于 ol 標(biāo)簽。每個列表項(xiàng)始于 li 標(biāo)簽。
3. 定義列表：dl
自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
自定義列表以 dl 標(biāo)簽開始。每個自定義列表項(xiàng)以 dt 開始。每個自定義列表項(xiàng)的定義以 dd 開始。
Query彈出層插件lightbox
相信用這個插件的朋友會遇到一些問題：
1.頂部滾動
頂部菜單fixed固定，但是點(diǎn)擊用了lightbox的圖片 點(diǎn)擊預(yù)覽時菜單會向右滾動；仔細(xì)查看發(fā)現(xiàn)預(yù)覽層彈出時滾動條隱藏了；解決方法：
在 lightbox.css 中去掉隱藏屬性：
滾動條隱藏.png
2.圖片抖動
預(yù)覽層彈出和收起時圖片的動畫抖動顯得有點(diǎn)卡頓；解決方法：
在 lightbox.js 中找到：
"transition-duration",e+"ms"進(jìn)入時間 和 "transition-duration",i+"ms"收起時間；
進(jìn)去.png
收起.png
然后改成你想要的時間，比如：
進(jìn)入時間："transition-duration","200ms"
收起時間："transition-duration","150ms"
3.彈出窗底部有個橫線
線1.png
在 lightbox.css 中找到：
fancybox-caption{padding:30px 0;border-top:1px solid hsla(0,0%,100%,.4)；
線.png
把border-top出掉即可
演示網(wǎng)站cuanyair.com(頭部幻燈片部分)
為 Web 開發(fā)人員，我們希望用戶無論使用哪種瀏覽器瀏覽網(wǎng)頁，HTML 元素的外觀都是一樣的。遺憾的是，由于瀏覽器的運(yùn)行方式，情況并非如此。每個瀏覽器都有自己的默認(rèn)樣式表，其中規(guī)定了一些適用于元素的最基本規(guī)則。在大多數(shù)情況下，這些默認(rèn)樣式是有用的。但是，由于這些默認(rèn)值的不同，有時會在特定瀏覽器中出現(xiàn)表現(xiàn)不一致的現(xiàn)象，影響用戶的瀏覽體驗(yàn)。
為了避免這些不一致，CSS Reset 由此而來。本文先用部分章節(jié)介紹 CSS Reset的歷史，后面重點(diǎn)介紹推薦的 Modern CSS Reset。
本節(jié)按時間線來整體回顧 CSS Reset 的發(fā)展歷程。
最基本的全局重置方法是使用通配符選擇器將所有元素的 padding 和 margins 重置為零。根據(jù)瀏覽大多數(shù)網(wǎng)站 CSS 樣式得出的結(jié)論，下面應(yīng)該是最常用的 CSS 重置方法，簡單粗暴。
* {
padding: 0;
margin: 0;
}
2007 年，根據(jù)杰夫-斯塔爾（Jeff Starr）收集的大量不同的 CSS 重置方法。最早的應(yīng)該是 Tantek ?elik 的 undohtml.css（http://tantek.com/log/2004/undohtml.css）。Tantek 的 CSS Reset 可移除一些比較突出和不需要的默認(rèn)瀏覽器樣式。特別是，它能去除鏈接和點(diǎn)擊鏈接上通常不受歡迎的下劃線和邊框，消除大多數(shù)塊元素的邊距和填充，甚至將通用字體大小設(shè)為 1em。
Tips：從樣式中可以看到 CSS Reset 沒有包含對 HTML5 新增的語義化標(biāo)簽。
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }
/* more varnish stripping as necessary... */
Eric Meyer 的 CSS Reset 應(yīng)該是當(dāng)前最流行的。它的內(nèi)容與 Tantek 的不同（包含了一些新增的 HTML5 元素），但實(shí)現(xiàn)目的都一樣：移除默認(rèn)樣式。您可能會認(rèn)出這個著名的代碼塊，它在開發(fā)者的 DevTools 風(fēng)格面板中隨處可見。該 CSS Reset的優(yōu)點(diǎn)是簡單易用，但是它也有一些缺點(diǎn)，例如會影響一些網(wǎng)頁元素的默認(rèn)樣式，例如 form 元素。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
多年后，隨著 HTML5 變得越來越真實(shí)，Richard Clark的 HTML5 Reset等重置技術(shù)也開始流行起來。它仍然是Meyer Reset的修改版，保留了Meyer Reset 重置的精神。
Richard Clark 的 HTML5 Reset 在 Meyer Reset的基礎(chǔ)上新增了 mark、hr、ins等元素的樣式重置，同時指定了 input、select 等表單元素垂直居中。
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
normalize.css 代表了 CSS Reset 第一個有意義的轉(zhuǎn)變，來感受下它的與眾不同：
例如下面這部分代碼，用完備的注釋來說明包含此段 CSS Reset 的原因。
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
當(dāng)前，normalize.css 很受開發(fā)者的喜愛，它已經(jīng)發(fā)布了 8.0.1 版本，超過51K個 Github stars。但是最近圈子里又出現(xiàn)了 Modern CSS Reset 很受開發(fā)者的喜愛。
2023年9月18日，安迪-貝爾（Andy Bell）--英國設(shè)計(jì)師、前端開發(fā)員和設(shè)計(jì)公司創(chuàng)始人，發(fā)布了一篇博文介紹了Modern CSS Reset。 整個 Reset 的源碼比較簡單：
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}
通讀了 Modern CSS Reset 之后，發(fā)現(xiàn)一些比較有意思的點(diǎn)，分析如下：
1）盒模型重置：
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
這條規(guī)則將所有元素和偽元素設(shè)置為 border-box，而不是默認(rèn)的 content-box。現(xiàn)在我們更注重讓瀏覽器通過靈活的布局、流動的字體和空間來完成更多工作，因此這條規(guī)則已經(jīng)不像以前那么有用了。·
border-box 和 content-box 是 box-sizing 屬性的兩個值。與 content-box 不同，border-box 值表示元素的尺寸還包括邊框和填充。
2）列表樣式重置：
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
增加按條件的列表樣式重構(gòu)，不至于覆蓋全量列表，按需重置。
3）body樣式重置：
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}
對 body 元素，引入了現(xiàn)代單位 vh，并設(shè)置了最小高度為當(dāng)前視口高度。
4）標(biāo)題樣式重置：
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}
這條規(guī)比較特殊，但新的 text-wrap 屬性會讓標(biāo)題看起來很可愛。可能部分UI同學(xué)會覺得這不合適，所以你可能想刪除這一條。
4）標(biāo)題樣式重置：
/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}
最后，如果一個元素是錨定的，那么用滾動邊距在其上方增加一點(diǎn)空間是有意義的，只有當(dāng)該元素是目標(biāo)元素時才會考慮到滾動邊距。這只是一個小小的調(diào)整，卻能帶來很多用戶體驗(yàn)！如果你有一個固定的頁眉，可能需要調(diào)整一下。
沒有哪種 CSS Reset 最好，選擇哪種取決于我們的項(xiàng)目需求和個人偏好。
如果你在項(xiàng)目中盡量多的保留默認(rèn)樣式，小懶在這里強(qiáng)烈推薦你選擇 normalize.css，如果你更傾向于完全自定義樣式，Meyer 的 CSS Reset 可能更適合你，如果你想改變默認(rèn)的盒模型計(jì)算方式，box-sizing: border-box 是一個不錯的選擇。
在選擇任何 CSS Reset 方案之前，請確保你深刻理解其工作原理，并充分測試其在你的項(xiàng)目中的效果。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
