HTML基礎知識之DIV

、HTML 塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素；
元素在瀏覽器顯示時，通常會以新行來開始和結束；
如：<h1>，<p>，<ul>，<table>，<div>等標簽；

二、HTML 內聯元素

內聯元素在顯示時通常不會以新行開始；
如：<b>， <td>， <a>， <img>，<span>等標簽；

三、HTML <div> 元素

HTML 中的<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器；
<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分；
<div> 元素經常與 CSS 一起使用，用來布局網頁；

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
 .all{
 width:500px;
 height:500px;
 margin:0 auto;
 background-color:#000;
 }
 .one{
 height:100px;
 background-color:#89E1BF;
 }
 .two{
 height:100px;
 background-color:#DEE099;
 }
 .three{
 height:100px;
 background-color:#D7A1CE;
 }
 
</style>
<body>
 <!--父div，all是黑色-->
 <div class="all">
 <!--子div，one是綠色-->
 <div class="one">
 </div>
 <!--子divtwo，是黃色-->
 <div class="two">
 </div>
 <!--子div，three是紫色-->
 <div class="three">
 </div>
 </div>
</body>
</html>

演示效果如圖所示：

. 嵌套操作----------
子操作： >
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
并列：+
div+ul>li
<div></div>
<ul>
<li></li>
</ul>
上級：^
ul>li^div
<ul>
<li></li>
</ul>
<div></div>
ul>li>a^^div 上級多層
<ul>
<li><a href=""></a></li>
</ul>
<div></div>
重復：*
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
分組：()
div>(p>span)*2
<div>
<p><span></span></p>
<p><span></span></p>
</div>
2. 屬性操作----------
id和類
div#header+div.main+div#footer
<div id="header"></div>
<div class="main"></div>
<div id="footer"></div>
屬性值
a[title=test target=_self]
<a title="test" target="_self" href=""></a>
數列值：$
p.item$*3
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
p.item$$*3
<p class="item01"></p>
<p class="item02"></p>
<p class="item03"></p>
數列操作符：@
p.item$@-*3 @- = -1
<p class="item3"></p>
<p class="item2"></p>
<p class="item1"></p>
p.item$@3*3 @3 = 從3開始3次
<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>
p.item$@-3*3 @-3 = 3次后到3結束
<p class="item5"></p>
<p class="item4"></p>
<p class="item3"></p>
3. 字符操作----------
字符操作：{}
a{click}
<a href="">click</a>
a>{click}+span{me}
<a href="">click<span>me</span></a>
4. 缺省元素----------
.header+.footer --------------- div.header+div.footer
ul>.item*3 -------------- ul>li.item*3
table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3

把手教你寫一個Vue組件發布到npm且可外鏈引入使用

前言

我們為什么要寫個組件上傳到npm鏡像上呢，我們肯定遇到過這樣一個場景，項目中有很多地方與某個功能相似，你想到的肯定是把該功能封裝成Component組件，后續方便我們調用。但是過了一段時間，你的Leader讓你去開發另一個項目，結果你在哪個項目中又看見了類似的功能，你這時會怎么做? 你也可以使用Ctrl + c + v大法，拿過來上一個項目封裝好的代碼，但是如果需求有些變動，你得維護兩套項目的代碼，甚至以后更多的項目....，這時你就可以封裝一個功能上傳到你們公司內網的npm上(或者自己的賬號上)，這樣每次遇到類似的功能直接npm install 安裝import導入進來使用就可以，需求有變動時完全可以改動一處代碼。

配置環境

筆者這里使用的是Webpack配置(有點菜，不要介意)，也可以安裝一個Vue-cli簡單版的，它那里面有暴露Webpack的配置(也得修改自行配置)，我們來配置一下打包組件環境，一般開發組件庫都是使用的umd格式，這種格式支持Es Module、CommonJs、AMD三種引入方式使用，主要就是Webpack里的library和libraryTarget，如果不明白的看這里詳解webpack的out.libraryTarget屬性

我這里的Webpack版本為4, 最好跟著本章里的插件版本號進行安裝，避免出現版本兼容問題

項目結構

|- /node_modules
|- /src
   |- Tag.vue
   |- main.js
|- index.html
|- webpack.config.js
|- package.json
復制代碼

初始化Package.json

npm init -y
復制代碼

安裝Webpack && Loader && Plugin

cnpm i webpack webpack-cli -D
cnpm i css-loader style-loader -D
cnpm i file-loader -D
cnpm i vue-loader@15.7.0 vue vue-template-compiler -D
cnpm i html-webpack-plugin@3.2.0 -D
復制代碼

css-loader style-loader 配置.css文件及樣式使用
file-loader 配置特殊字體和圖片使用
vue-loader 處理.vue文件后綴
vue 使用Vue語法
vue-template-compiler 處理.vue文件里的template模板語法

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]  
            },
            {
                test: /\.(ttf|eot|woff|svg|woff2)/,
                use: "file-loader"
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
}
復制代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</html>
復制代碼

以上我們基本環境就搭建完啦，可以在終端使用npx webpack運行看看哦。

封裝組件

我這里只做一個示例哈，代碼就不寫那么復雜，大家知道怎么打包使用就行，具體封裝成啥樣看你們公司需求啦~。筆者這里使用Element Ui組件來做一個示例，相信大部分小伙伴公司也在使用Element Ui。假如我們項目中有以下類似的功能就可以單獨封裝起來。

main.js

import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
import customTag from "./Tag.vue"
Vue.component(Tag.name, Tag)
export default customTag
復制代碼

Tag.vue

<template>
  <div class="Tag">
    {{ msg }}
    <el-tag type="success">標簽二</el-tag>
  </div>
</template>

<script>
export default {
 name: 'Tag',
  data() {
    return {
        msg: "hello 蛙人",
    }
  },
  created() {
  },
  components: {},
  watch: {},
  methods: {
  }
}
</script>
<style scoped>

</style>

復制代碼

Webpack.config.js

將webpack.config.js里的output修改為如下

output: {
    filename: "index.js",
    library: "Modal",
    libraryTarget: "umd"
}
復制代碼

配置完之后就可以使用npx webpack打包，可以看到有一個dist目錄，該目錄下存在一個index.js, 這個文件就是我們封裝的Tag.vue文件, 你可以將它引入到你的項目中，進行調用，該文件支持Es Module、CommonJs、AMD三種方式引入。

import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
import CustomTag from "./index" // 打包完的，直接引入進來
new Vue({
    el: "#app",
    render: h => h(CustomTag)
})
復制代碼

Npm發布

如果沒有npm賬號呢，先去官網注冊一個npm賬號這里

新建一個發布包項目文件夾

在終端執行npm init -y ，進行初始package.json文件，主要信息就是name和main字段，前者是這個包的名稱(也就是npm instal xxx)，后者則是我們打包好的文件Tag文件，默認main就去找這個入口文件。

注意：包名稱不能包含大寫，包名稱不能包含大寫，包名稱不能包含大寫，重要的事情說三遍

{
  "name": "custom-tag-waren",
  "version": "1.0.0",
  "description": "這是xxxx",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "WaRen",
  "license": "ISC"
}
復制代碼

如果淘寶鏡像之前被更改，先改回來執行以下命令

npm config set registry http://registry.npmjs.org
復制代碼

注冊完之后，執行npm login, 依次填寫你的用戶名、密碼、郵箱

執行npm publish發布，然后等待進度條完成即可。

整理一些常見的發布錯誤

這是因為鏡像設置成淘寶鏡像了，設置回來即可

no_perms Private mode enable, only admin can publish this module
復制代碼

一般是沒有登錄，重新登錄一下 npm login 即可

npm publish failed put 500 unexpected status code 401
復制代碼

包名被占用，改個包名即可，最好在官網查一下是否有包名被占用，之后再重命名

npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
復制代碼

郵箱未驗證，去官網驗證一下郵箱

you must verify your email before publishing a new package
復制代碼

npm安裝使用

cnpm i custom-tag-waren -D
復制代碼

main.js

import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
import customTagWaren from "custom-tag-waren"  // 下載完引入進來
Vue.component(Tag.name, Tag)
new Vue({
    el: "#app",
    render: h => h(customTagWaren)
})
復制代碼

到此為止就完成了一個組件的打包上傳下載，這樣我們在每個項目需要的時候直接npm install安裝就行，當需求改動的時候只改一個文件然后再次發布就行。是不是很方便啦。

外鏈引入

我們也不上傳npm上，直接使用外鏈的形式使用，下面我們來看看

import引入

<template>
  <div class="Tag">
    <TagEl/>
  </div>
</template>

<script>
import TagEl from "./index"
export default {
 name: 'Tag',
  data() {
    return {
       
    }
  },
  components: {
      TagEl
  },
}
</script>
<style scoped>

</style>
復制代碼

上面example中，我們看到直接引入了index.js文件并進行注冊組件，直接就可以使用啦。

script引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Tag/>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script type="text/javascript" src="./dist/index.js"></script>
</body>
<script>
    new Vue({
        el: "#app",
        components: {
            Tag: Tag.default
        }
    })
</script>
</html>
復制代碼

上面example中，直接使用script標簽引入進來，也是注冊完使用就可以。那么我們怎么知道他名字是Tag，這個你在封裝組件的使用，必須指定Name名稱。

在線咨詢

上一篇：小白必看！Django 模板語言基礎來啦
下一篇：js的跳轉

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎知識之DIV

把手教你寫一個Vue組件發布到npm且可外鏈引入使用

前言

配置環境

項目結構

初始化Package.json

安裝Webpack && Loader && Plugin

webpack.config.js

index.html

封裝組件

main.js

Tag.vue

Webpack.config.js

Npm發布

新建一個發布包項目文件夾

整理一些常見的發布錯誤

npm安裝使用

main.js

外鏈引入

import引入

script引入

您的項目需求