挑戰(zhàn)30天在頭條寫日記#
HTML是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言,其中包含了許多標(biāo)簽,可以用于排版、布局和展示內(nèi)容。本文將詳細(xì)介紹HTML中的<tr>和<td>標(biāo)簽的使用方法,并通過示例展示如何創(chuàng)建表格。
1. <tr>標(biāo)簽的作用: <tr>標(biāo)簽代表HTML表格中的一行(行數(shù)據(jù)),它可以包含一個或多個<td>元素作為單元格。
2. <td>標(biāo)簽的作用: <td>標(biāo)簽用于定義表格中的一個單元格(列數(shù)據(jù)),可以包含文本、圖像、鏈接等內(nèi)容。
3. 如何使用<tr>和<td>: 在使用<tr>和<td>標(biāo)簽時,首先需要創(chuàng)建一個<table>元素作為表格的容器,然后在其中嵌套<tr>和<td>標(biāo)簽,如下所示:
htmlCopy code<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
4. 表格樣式: 可以使用CSS來為表格添加樣式,如設(shè)置邊框、背景顏色等。以下是一個簡單的示例:
htmlCopy code<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
5. 示例應(yīng)用: 以下示例演示了如何使用<tr>和<td>標(biāo)簽創(chuàng)建一個包含姓名、年齡和城市的簡單表格:
htmlCopy code<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>城市</td>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>廣州</td>
</tr>
</table>
</body>
</html>
6. 書籍參考:
7. 總結(jié): 通過本文的介紹,我們了解了HTML中<tr>和<td>標(biāo)簽的基本用法,以及如何創(chuàng)建簡單的表格和添加樣式。使用這些標(biāo)簽,我們可以輕松地創(chuàng)建具有結(jié)構(gòu)和內(nèi)容的網(wǎng)頁表格,提升頁面的可讀性和可視性。
通過為<table></table>標(biāo)簽的cellspacing進(jìn)行賦值可以調(diào)整單元格與單元格之間的空間距離。
示例代碼如下:
<table border = "1" width = "100%" cellspacing = "50">
頁面效果如下:
下面我們刪除cellspacing = "50"這段代碼看看變化,如圖:
通過對比,大家應(yīng)該明白cellspacing這個屬性的作用了吧。
通過為<table></table>標(biāo)簽的cellpadding進(jìn)行賦值可以調(diào)整單元格邊框與單元格內(nèi)容之間的空間距離。
示例代碼如下:
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">
頁面效果如下:
通過與上圖對比,我們不難發(fā)現(xiàn)變化。
設(shè)置表格顏色
這里我們要介紹一個全局屬性style,對,你沒看錯!就是freestyle的那個style!英文翻譯過來是"樣式"、"風(fēng)格"的意思。我們通過這個屬性可以為表格設(shè)置顏色。實(shí)際上,可以為任何html元素設(shè)置顏色、大小、排列等不同屬性!
值得一提的是把style信息如果寫到一個獨(dú)立文件中,并保存為css文件,就是以后我們要學(xué)的CSS層疊樣式列表了。
這里我們先來簡單了解一下它作為html的一個全局屬性的用法。
示例代碼如下:
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
頁面效果如圖所示:
我們來分析一下這段代碼,寫法和其他屬性大同小異。
首先也是才有"屬性"="數(shù)值"的寫法,具體是:style=""
是不是和其他屬性寫法一樣?
但是到了雙引號里面就不同了,比如width屬性只需要為其賦值就可以,比如width="100%"。
而style是在雙引號里面再指定屬性。例如:style="background-color"。
然后我們再為background-color(背景顏色)屬性賦值。
這時,賦值的寫法就發(fā)生變化了,不是使用=號,而是使用:。
例如style="background-color : #00ffff;"
大家注意的是為其賦值后,要用;結(jié)尾。這個;必須要添加,因?yàn)椋ㄟ^style可以指定多個不同的樣式屬性,在指定多個樣式屬性時,我們使用;分割。
#00ffff這個符號是色彩的16進(jìn)制表示方法,這個顏色是藍(lán)色。
#000000這個符號的顏色是黑色。
#ffffff這個符號是白色。
這個顏色的算法我們會在下一期中詳細(xì)講解,感興趣的小伙伴請關(guān)注!
大家想一想。如何為一列單元格指定背景顏色呢?
示例代碼如下:我們?yōu)楸砀駱?biāo)題欄賦予綠色。
<tr style = "background-color: #00ff00;"><th>姓名</th><th>年齡</th></tr>
頁面效果如圖所示:
下面我們?yōu)?#34;一列一行"、"二列一行"賦予紅色。
示例代碼如下:
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
頁面效果如下:
今天的內(nèi)容到此結(jié)束了,一下是今天示例的全部代碼:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網(wǎng)頁</title>
</head>
<body>
<h1>第一個網(wǎng)頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
<caption>表格標(biāo)題</caption>
<tr style = "background-color: #00ff00;">
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>
明天將繼續(xù)為大家講解頁面制作中16進(jìn)制的顏色指定方式和另外一種表格顏色指定方式。
喜歡的小伙伴請關(guān)注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
HTML序章(學(xué)習(xí)目的、對象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
示:文章底部有完整的源代碼,使用Rollup編譯后總體積只有2kb左右,童鞋們有需要可以直接CTRL + C拿走。
我想,前端的童鞋們應(yīng)該都了解或使用過網(wǎng)格布局吧?著名的UI庫:bootstrap,element-ui,iview等都提供了網(wǎng)格布局。我們所熟知的這些庫都是采用的CSS預(yù)處理語言生成的網(wǎng)格布局。這是一種主流的實(shí)現(xiàn)方案,也很符合前端開發(fā)的一個格言:能用CSS實(shí)現(xiàn)的,盡量不要用JS實(shí)現(xiàn)。
動機(jī):熟悉網(wǎng)格布局實(shí)現(xiàn)原理的童鞋們應(yīng)該都比較清楚,網(wǎng)格布局的CSS代碼量是很大的,輕而易舉就能達(dá)到30kb以上;雖然我們是用less這樣的預(yù)處理語言寫的,擁有編程語言的一些能力,可以利用循環(huán)和變量來大幅減小我們所編寫的代碼量;但是,最終瀏覽器加載的依舊是生成的CSS。這個體積嘛,像我這種對體積非常敏感的人,感覺有一點(diǎn)點(diǎn)兒大。那么,我們有沒有一種方式,可以大幅減小網(wǎng)格布局的體積呢?這正是本篇文章的主題:使用JS動態(tài)生成響應(yīng)式網(wǎng)格布局。
我們先看兩張效果圖,這是element-ui官方文檔Row和Col組件的例子沒有做任何修改,直接在本篇文章實(shí)現(xiàn)的組件下的效果。
前端網(wǎng)格布局
前端網(wǎng)格布局
要使用JS生成網(wǎng)格布局,我們需要動態(tài)創(chuàng)建樣式表;使用JS創(chuàng)建樣式表是很簡單的事情,只需要創(chuàng)建一個style元素,然后將樣式表字符串添加到style元素,最后將style元素添加到head即可。如下是createStylesheet函數(shù)的定義:
export function createStylesheet (id, styleSheetStr) {
let el = document.getElementById(id)
// 避免重復(fù)創(chuàng)建相同的樣式表,只有不存在的時候才創(chuàng)建
if (!el) {
el = document.createElement('style')
el.id = id
el.innerHTML = styleSheetStr
document.head.appendChild(el)
}
}
我們采用的網(wǎng)格布局是24分欄,和element-ui保持一致,這也是目前最主流的網(wǎng)格布局分欄數(shù)量。我們需要生成0-24共25列,當(dāng)列占用的空間為0的時候處于隱藏狀態(tài)。現(xiàn)在,我們先創(chuàng)建一個包含25個元素的數(shù)組,我們不需要關(guān)注數(shù)組中元素的值,我們只會用到元素的索引。之所以使用數(shù)組,是因?yàn)槲也幌胧褂胒or循環(huán),而更偏向于數(shù)組的遍歷方法。
const nulls = new Array(25).fill(null)
現(xiàn)在,我們定義一個獲取列寬度的函數(shù)getSpan,當(dāng)列數(shù)為0的時候,將元素設(shè)置為不可見。
const getSpan = (i, val) => i ? `width:${val}` : 'display:none'
然后,我們創(chuàng)建用于生成列的函數(shù)genCol,該函數(shù)將列數(shù)轉(zhuǎn)化為百分比,以實(shí)現(xiàn)彈性的寬度。不知道童鞋們有沒有被left和right搞懵呢?[呆無辜]
export const cls = 'x-col' // class前綴
const genCol = () => nulls.map((_, i) => {
const val = `${i / 24 * 100}%`
return [
`.${cls}_span-${i}{${getSpan(i, val)};}`, // 列寬
`.${cls}_pull-${i}{right:${val};}`, // 向左移動的寬度
`.${cls}_push-${i}{left:${val};}`, // 向右移動的寬度
`.${cls}_offset-${i}{margin-left:${val};}` // 向右的偏移寬度
].join('')
}).join('')
目前,我們生成的布局不是響應(yīng)式的,不管屏幕有多寬,都會占用固定的百分比寬度。那么,我們?nèi)绾问共季肿兂身憫?yīng)式的呢?媒體查詢,該你出場了。
現(xiàn)在,我們先定義一個根據(jù)窗口寬度生成布局的函數(shù)genColBySize。這個函數(shù)和上面的genCol函數(shù)長的很像,只是class名稱中添加了一個size,童鞋們應(yīng)該都能理解吧?
const genColBySize = size => nulls.map((_, i) => {
const val = `${i / 24 * 100}%`
return [
`.${cls}_${size}-span-${i}{${getSpan(i, val)};}`,
`.${cls}_${size}-pull-${i}{right:${val};}`,
`.${cls}_${size}-push-${i}{left:${val};}`,
`.${cls}_${size}-offset-${i}{margin-left:${val};}`
].join('')
}).join('')
我們與element-ui保持一致,將響應(yīng)式斷點(diǎn)設(shè)置為5個,分別是: xs,sm,md,lg,xl;現(xiàn)在,我們生成響應(yīng)式布局,并導(dǎo)出一個添加樣式表函數(shù)addStylesheet。
const genResponsiveCol = () => [
['xs'],
['sm', 768],
['md', 992],
['lg', 1200],
['xl', 1920]
].map(_ => _[1]
? `@media (min-width:${_[1]}px){${genColBySize(_[0])}}`
: genColBySize(_[0])
).join('')
// 為什么沒有寫在addStylesheet里面?
// 是為了減少2個生成函數(shù)的調(diào)用次數(shù),避免不必要的調(diào)用,現(xiàn)在只會被調(diào)用一次
const ruleStr = genCol() + genResponsiveCol()
export const addStylesheet = () => {
createStylesheet('XGridLayout', ruleStr)
}
以上就是使用JS生成響應(yīng)式網(wǎng)格布局的全部核心代碼,是不是很簡單?現(xiàn)在,我把Row和Col組件的剩余代碼提供給童鞋們,為了節(jié)省篇幅,把空行去掉了,但可讀性還是很高的。希望閱讀過本篇文章的童鞋們都能夠自己動手實(shí)現(xiàn)。
Col.vue組件源碼:
<template>
<div :class="classes" :style="styles">
<slot />
</div>
</template>
<script setup>
import { computed, inject, onMounted } from 'vue'
// N: Number, N0: { type: Number, default: 0 }
import { N, N0 } from '../../types'
import { addStylesheet, cls } from './utils'
const props = defineProps({
span: { type: N, default: 24 },
offset: N0,
push: N0,
pull: N0,
xs: {},
sm: {},
md: {},
lg: {},
xl: {}
})
const classes = computed(() => {
const clsList = [cls]
;['span', 'offset', 'push', 'pull'].forEach(k => {
const v = +props[k]
v && clsList.push(`${cls}_${k}-${v}`)
})
;['xs', 'sm', 'md', 'lg', 'xl'].forEach(k => {
const v = props[k]
if (v) {
const opts = +v ? { span: +v } : v
Object.keys(opts).forEach(k2 => {
clsList.push(`${cls}_${k}-${k2}-${opts[k2]}`)
})
}
})
return clsList
})
const gutter = inject('gutter') // 響應(yīng)式的數(shù)值,由Row組件提供,注入到Col組件
const styles = computed(() => {
const padding = `${gutter.value / 2}px`
return gutter.value && { paddingLeft: padding, paddingRight: padding }
})
onMounted(() => {
addStylesheet()
})
</script>
Row.vue組件源碼:
<template>
<div :class="classes" :style="styles">
<slot />
</div>
</template>
<script setup>
import { computed, provide, toRefs } from 'vue'
// N0: { type: Number, default: 0 }, oneOf: (arr, v) => arr.includes(v)
import { N0, oneOf } from '../../types'
const props = defineProps({
gutter: N0,
justify: {
default: 'start',
validator: v => oneOf(['start', 'end', 'center', 'space-around', 'space-between'], v)
},
align: {
validator: v => oneOf(['top', 'middle', 'bottom'], v)
}
})
const { gutter } = toRefs(props) // gutter是響應(yīng)式的
provide('gutter', gutter) // 提供給子組件使用
const classes = computed(() => {
const cls = 'x-row'
return [
cls,
props.align && `${cls}_${props.align}`,
props.justify && `${cls}_${props.justify}`,
{ gutter: props.gutter }
]
})
const styles = computed(() => props.gutter && { margin: `0 -${props.gutter / 2}px` })
</script>
Col組件樣式是通過JS生成的,我們只需要row.scss樣式文件就夠了,這里是源碼:
.x-row {
display: flex;
&_top {
align-items: flex-start;
}
&_middle {
align-items: center;
}
&_bottom {
align-items: flex-end;
}
&_start {
justify-content: flex-start;
}
&_end {
justify-content: flex-end;
}
&_center {
justify-content: center;
}
&_space-around {
justify-content: space-around;
}
&_space-between {
justify-content: space-between;
}
}
.x-col {
word-wrap: break-word;
}
現(xiàn)在我們可以實(shí)現(xiàn)體積只有2kb的響應(yīng)式網(wǎng)格布局了,童鞋們理解了嗎?感謝閱讀!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。