計(jì)算機(jī)二級(jí)Web（3）：HTML語言基礎(chǔ) （上）

核目標(biāo)

掌握HTML的基本結(jié)構(gòu)和語法
掌握HTML標(biāo)記及其屬性
掌握使用HTML表單收集和提交信息

1.HTML文檔的基本結(jié)構(gòu)與語法

HTML是Hypertext Markup Language的縮寫,即超文本標(biāo)記語言.

html標(biāo)記:用于表示文檔類型是HTML文件.
head標(biāo)記:表示標(biāo)題及其有關(guān)文檔的信息
body標(biāo)記:表示文檔部分的開始

2.HTML標(biāo)記及其屬性

（1）HTMl標(biāo)記

一個(gè)完整的HTML元素就是從起始標(biāo)記開始至結(jié)束標(biāo)記之間所有的內(nèi)容,其格式為:

<標(biāo)記>受標(biāo)記影響的內(nèi)容</標(biāo)記>

空元素:HTML元素不包含具體內(nèi)容,以起始標(biāo)記的結(jié)束而結(jié)束

行內(nèi)元素:基于語義級(jí)的基本元素,只能收納文本和其它行內(nèi)元素,如:

<a>,<em>,<font>,<input>

塊內(nèi)元素:可以收納其他塊元素和行內(nèi)元素,如

<div>,<h1>,<p>,<table>

（2）標(biāo)記屬性

標(biāo)記屬性

HTML標(biāo)記可以有屬性,屬性總是以名稱/值對(duì)的形式出現(xiàn).

HTML文檔中的屬性一般有如下共同屬性:

核心屬性(id,class,style,title)
i18n屬性(lang,dir)
事件屬性(onclick,onmousedown)

id在HTML中的作用是給一個(gè)單元(元素,標(biāo)記)一個(gè)獨(dú)一無二的標(biāo)識(shí)或標(biāo)記,常用于:

元素的風(fēng)格(style,sheet)選擇
單擊的鏈接可以跳到這個(gè)id所在的地方
腳本語言用它作為標(biāo)識(shí),找到id所在的地方
用作聲明object的單元的標(biāo)識(shí).

3.段落標(biāo)記

注釋標(biāo)記

<!--注釋內(nèi)容-->

強(qiáng)制換行標(biāo)記和不換行標(biāo)記

文字<br>
<nobr>文字</nobr>

段落標(biāo)記

<p align="left|center|right">文字</p>

水平線標(biāo)記

<hr align = "left|center|right" size="線條粗細(xì)" width="線條長(zhǎng)度" color="顏色值" noshade>

容器標(biāo)記

<div>是一個(gè)塊元素,他周圍的元素會(huì)自動(dòng)換行,<span>是一個(gè)行內(nèi)元素

示例:

4.文字標(biāo)記

標(biāo)題文字標(biāo)記

<h#>標(biāo)題文字</h#>,其屬性主要有align,默認(rèn)為左對(duì)齊

字體標(biāo)記

<font size="數(shù)字" face="字體名" color="顏色值">被設(shè)置的文字</font>

字形標(biāo)記

5.表格標(biāo)記

擊上方 "程序員小樂"關(guān)注, 星標(biāo)或置頂一起成長(zhǎng)

使用Vue開發(fā)前端頁(yè)面的時(shí)候，難免會(huì)遇到接收的字符串過長(zhǎng)，需要讓字符串換行。以往在HTML頁(yè)面開發(fā)中，常用的方法是word-wrap：break-word；添加上這行代碼后，在塊元素定義的寬度不夠時(shí)輸出的文本內(nèi)容就會(huì)換行。但是在vue中使用word-wrap屬性就不起作用，網(wǎng)上查找資料說使用white-space：pre-line;就可以實(shí)現(xiàn)換行。本文就簡(jiǎn)單介紹下white-space的使用。

因?yàn)槲覜]有系統(tǒng)的學(xué)過前端，就是遇到一點(diǎn)問題學(xué)習(xí)一點(diǎn)前端知識(shí)。當(dāng)我在這次實(shí)現(xiàn)換行效果的過程中就學(xué)習(xí)使用了white-space的用法。

首先按照網(wǎng)上的資料，直接添加white-space：pre-line; 是實(shí)現(xiàn)了換行，但是換行卻是從第二行中間開始的。具體效果大概如下圖：

為什嗎會(huì)有這個(gè)效果呢？第一反應(yīng)是有空格產(chǎn)生了，哪里來的空格呢？那就是接收的后端傳遞的字符串中有空格，于是就想辦法去處理接收的變量，嘗試了以下兩種方法：

（1）添加一層盒子嵌套，父盒子font-size：0，子盒子font-size：12px；

.tabBox_tit {
  border: 1px solid red;
  width: 175px;
  height: 50px;
  white-space: pre-line;
  font-size: 0;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.tabBox_tit span {
  font-size: 16px; /* 根據(jù)需求設(shè)置具體的字體大小 */
}

/*說明如下：

將 white-space 屬性的值從 pre-wrap 修改為 pre-line，這樣文本可以從第一行第一個(gè)字符輸出并且可以自動(dòng)換行。
將 font-size 屬性的值設(shè)為 0，以去除在HTML中的空格（空格、回車等），避免產(chǎn)生不必要的空隙。
將 .tabBox_tit 框架內(nèi)的文字大小設(shè)為 0 ，因?yàn)榍懊嬉呀?jīng)有了一個(gè)全局修改，
并通過 .tabBox_tit span 選擇器來單獨(dú)指定文字的大小，這樣可以避免子元素繼承父元素的字體大小。
*/
復(fù)制代碼

（2）使用flex布局讓內(nèi)容居中

.tabBox_tit {
  border: 1px solid red;
  width: 175px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 16px; /* 根據(jù)需求設(shè)置具體的字體大小 */
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  box-sizing: border-box;
}
/*
說明如下：
將 white-space 屬性去掉，因?yàn)槭褂?flex 屬性后不需要再用這個(gè)屬性來控制文本輸出。
添加 display: flex 屬性，并設(shè)置 flex-direction: column，這樣會(huì)將容器中的元素按列排列。
添加 justify-content: center 和 align-items: flex-start 屬性，這樣可以使文字垂直居中并從左側(cè)對(duì)齊。
*/
復(fù)制代碼

經(jīng)過以上兩種方式的設(shè)置，文本輸出樣式還是和上面的截圖一樣，從第二行中間開始輸出。這樣嘗試的時(shí)候，沒有實(shí)現(xiàn)效果，導(dǎo)致我懷疑自己flex布局的知識(shí)點(diǎn)沒有學(xué)好，又去重新溫習(xí)了一遍flex布局的文檔。改來改去一個(gè)小時(shí)就過去了。內(nèi)心有點(diǎn)失敗的挫折感。這個(gè)時(shí)候，是不是就說明換行符號(hào)不是從變量里面?zhèn)鬟f過來的呢？

于是，再去查看代碼，發(fā)現(xiàn)了代碼被編輯器格式話之后換行了，在網(wǎng)上查找資料也終于瞅到有人說到這一點(diǎn)了。于是嘗試了修改VUE的模板代碼，代碼如下：

   <!--修改后-->
              <span class="tabBox_tit line1">
                <span class="font-color-red" v-if="val.cart_info.is_gift">贈(zèng)品</span>{{ val.cart_info.productInfo.store_name + ' | ' }}{{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
              </span>
              <!--修改前 -->
              <span class="tabBox_tit line1">
                <span class="font-color-red" v-if="val.cart_info.is_gift">贈(zèng)品</span>
                {{ val.cart_info.productInfo.store_name + ' | ' }}
                {{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
              </span>
復(fù)制代碼

讓后，讓后我想要的功能就實(shí)現(xiàn)了。到這里不得不感慨前端的水真的很深，原來代碼格式化也并不是所有的代碼都可以使用的。

基于以上的折騰分析，總結(jié)一下，Vue實(shí)現(xiàn)輸出文本自動(dòng)換行的效果：要做到以下兩點(diǎn)：1.HTML代碼塊不能格式化換行，2.使用white-space：pre-line; 這樣就可以了。

正常情況下到這里都應(yīng)該寫完了。但是我又有點(diǎn)強(qiáng)迫癥，總覺得不能格式化的代碼不好看，或者以后不小心格式化了，文本輸出這里又出現(xiàn)問題豈不是很不美。于是去查下white-space這個(gè)屬性的定義，通過菜鳥教程學(xué)習(xí)到了更好的解決方法，附菜鳥截圖:

根據(jù)教程，知道了想實(shí)現(xiàn)換行效果又可以格式化代碼使用：white-space：normal；就可以了。

以上就是前端white-space屬性學(xué)習(xí)的痛苦經(jīng)過。希望能幫助到你

作者：沐道PHP
鏈接：https://juejin.cn/post/7221341862116540471
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

在線咨詢

上一篇：用 CSS 實(shí)現(xiàn)傾斜的背景顏色
下一篇：社會(huì)服務(wù)機(jī)構(gòu)（民辦非企業(yè)單位）可以網(wǎng)上申辦公益事業(yè)捐贈(zèng)票據(jù)了！一起來看操作指南

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

計(jì)算機(jī)二級(jí)Web（3）：HTML語言基礎(chǔ) （上）

核目標(biāo)

您的項(xiàng)目需求