html css基礎 js

前言：由于出差項目需要，學習一下html+css基礎和前人的經驗總結，在此做下備注，當然如果能幫到有需要的小伙伴再好不過。

html介紹

html是通過指定便簽來顯示內容的，每個便簽都有相應的開始和結束，建議都用小寫，層次間有相應的縮進。創建一個網頁文件很簡單：新建一個文本文件，將其命名為xxx.html或者xxx.htm（注意后綴名問題）

常用標簽介紹

Head

Head標簽中的內容是不會在網頁中顯示的，一般設置標題,引入外部文件，或者設置相應的meta等信息

<head>
    <title>index</title>
    <meta name="author" content="Administrator" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/main.css" type="text/css" />
</head>

文本標簽

換行標簽
對于html而言，代碼中的換行不會在頁面中顯示。需要使用相應的，<br/>和 <p></p>。
標題標簽
<h1>~~~<h6> 依次變小，用于網站的標題

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>

效果如下

列表標簽
1.ul和li

            <ul>
                    <li>你</li>
                    <li>我</li>
                    <li>他</li>
                </ul>

效果如下

注意：
2.dl ，dt，dd：它們分別代表列表，標題和數據。

<dl>
   <dt>水果</dt>
   <dd>蘋果</dd>
   <dd>橘子</dd>
</dl>

效果：

常用其它標簽

<a>超鏈接

//除了標簽還有自己的屬性，屬性全部在開始標簽寫多個標簽用空格分割
<a class="xyj" href="https://www.baidu.com/" target="content" title=" 標題">我是個鏈接</a>

link是默認樣式，visited為點擊之后的效果，hover為鼠標放上去的效果，注意：對于ie而言不會繼承link的效果，所以在一般在前面會加上這個visited屬性。

    a.xyj:link,a.xyj:visited {
                text-decoration:none;
                font-size:12px;
                color:#226;
            }

            a.xyj:visited {
                color:#a21;
            }

            a.xyj:hover {
                color:#191;
                text-decoration:underline;
            }

<img> 標簽用來展示圖片

//alt表示圖片沒加載成功顯示的文本
<img src="/i/eg_tulip.jpg"  alt="上海鮮花 港 - 郁金香" />

<span> 常常嵌套在其它標簽中，用來對文本進行簡單的控制。

注釋標簽
小于標簽(<)	& lt;
大于標簽(>)	& gt;
空格	& nbsp;
copy 符號（）	& copy;
@符號	@amp

* 容器標簽

1.div
<div>塊級元素，用做容器，放置大量內容

div是塊級元素獨占一行默認從上往下排列
<div > 我是一個div </div>
<div >我是另一個div </div>

2.表格
表單
常用的表單標簽:原則上所有的表單標簽都要放置在form標簽中
Input標簽可以用來設置文本框，密碼框等數據

<form action="01.html">
            <!--text表示文本輸入框，password代表密碼輸入框-->
            用戶名:<input type="text"/><br/>
            密碼:<input type="password"/><br/>

            性別:<input type="radio" value="男" name="sex"/>男
                <input type="radio" value="女" name="sex"/>女<br/>
            興趣:<input type="checkbox"/>唱歌<input type="checkbox"/>打豆豆
                <input type="checkbox"/>跳舞<br/>
            籍貫:<select>
                <option>北京</option>
                <option>上海</option>
                <option>廣東</option>
            </select><br/>
            <!--多行文本，cols表示多框，rows表示多高-->
            個人簡介:<textarea cols="50" rows="10"></textarea><br/>
            <!--submit提交，當提交時會鏈接到action中-->
            <input type="submit" value="用戶注冊"/>
            <!--button表示按鈕，點擊后沒有任任何控制-->
            <input type="button" value="按鈕"/>
</form>

效果

3.Frameset標簽用與協調管理其它界面html文件，靜態加載，cols表示橫向切分布局，rows，縱向切分布局

<!--第一列被設置為瀏覽器窗口的寬度的25%。第二列被設置為75%。加入noresize = " noresize阻止用戶調整大小。
-->
<frameset cols="25%,75%">  
   <frame src="frame_a.htm" />  
   <frame src="frame_b.htm" />  
</frameset>

CSS樣式表

HTML僅僅只是做數據的顯示，CSS是對頁面的修飾。
樣式表有三種方式進行編寫
1、內嵌樣式：
嵌套在標簽中，通過style屬性來聲明樣式，內嵌樣式只對當前標簽有效，內嵌樣式，最后執行，會把head中style樣式替換掉。

<h2 style="color:#212267;text-decoration:underline;font-size:12px">css文件</h2>

2、在html的title通過style標簽統一為該頁面編寫樣式，表示對頁面中對所有標簽都有效

<head>
        <title>css樣式</title>
        <style type="text/css">
        ／/對頁面中對所有h2標簽都有效
            h2{
                background:#aa1222;
                color:#fff;
            }
        </style>
    </head>

3、將樣式表文件編寫到一個xxx.css的文件中，然后在head中引入該樣式表文件,注意:對于樣式表而言，后定義的會把先定義的樣式表覆蓋掉

<head>
        <title> 我是標題</title>
        <link rel="stylesheet" href="css02.css" type="text/css"/>
    </head>

選擇器

1、標簽選擇器：會對頁面中的所有標簽都有效

        ／/對頁面中所有h2標簽都有效
            h2{
                background:#aa1222;
                color:#fff;
            }

2、ID選擇器（獲取id為xx的標簽）：可以對頁面中某個標簽進行樣式的設置，使用#號進行設置，注意匹配的id都適用這個標簽。

#d1,#p2 {
            font-size:19px;
            background:#999;
        }

3、類選擇器（獲取標簽中class=xxx的標簽）：可以選擇頁面中的一組標簽，class=”xxx的一組標簽
用.表示，可以加載多個類，用空格來隔開

    .p1 {
                color:#54a;
                font-size:16px;
            }
            // 樣式
        <p class="p1  nav_last">
            Apache Whisker allows a...
        </p>

4、包含選擇符（獲取某個標簽中的所有的子標簽）
表示此標簽下的所有span都應用這個css樣式，
注意：當使用了包含的操作符之后，它的加載時間比使用class的加載時間要低，所以如果此時再來定義一個class的樣式，不會把使用包含的樣式覆蓋掉。

div span {
            background:#0ff;
        }

5、子對象選擇符(獲取某個標簽的第一級子標簽)
僅對第一級生效

div>span {
            background:#f0f;
        }

6、分組選擇符（可以同時設定多個標簽，使用逗號進行分割），

//d1，p2都使用該樣式。
    #d1,#p2 {
            font-size:19px;
            background:#999;
        }

布局

1、盒子模型(box model)默認

2、span和a相類似的文本標簽
僅僅只是用來設置文本，諸如:a和span對于這兩個標簽而言，注意：在W3C的標準中默認是不能進行width等樣式進行修飾的，所以直接為這些標簽設置width是沒有作用的，需要通過display:block之后才有作用。但是對于IE而言就是有作用。
3、padding的兼容性
如果一個標簽設置了height或者width,再進行padding的設置，對于IE而言，padding的值不會加到height或者width中（如果：一個div的高度為40,而padding-top:20;此時這個div的高度依然是40）；對于IE之外的所有瀏覽器，padding的值會加到height或者width中(如果：一個div的高度為40,padding-top為20，此時div的高度是60)。所以千萬不要使用padding來進行對齊操作
4、定位Absolute和relative
Absolute是絕對定位，針對父級標簽中進行了absolute定位的標簽來進行left、right等設置，如果父級標簽中都沒有這樣的定位方式，就會針對body來進行定位，而且對于absolute而言，該容器不再占用相應的空間，原有的空間會被其他元素所占據。
Relative是相對定位，都是針對父級元素進行定位的，而且空間會一直被占用
使用經驗：經常會使用relative來實現文本位置的移動。所以如果要為某個容器設置里面的文本位置，可以用span包裹處理<span>sssss</span>，再為span設置

position：relative ；left ：10px；

5、float
float：元素會根據屬性值向左或向右浮動。一般用于橫向列表導航，復雜界面等
一個塊級元素如果沒有設置height，其height是由子元素撐開的。對子元素使用了浮動之后，子元素會脫離標準文檔流，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。要解決這樣的問題，我們就是要使用清除浮動。分一下三種方式。

1、哪里有浮動元素，就在其父級元素的中增加一個（作為最后一個子元素）clear:both;
2、父級元素添加overflow:hidden，注意：子元素超出父元素的范圍，會造成超出的部分被隱藏
.clearfix{overflow:hidden;zoom:1}
3、利用after偽元素



// 例如消除<ul class="menu clearfix"> 
.clearfix: { zoom: 1; }
    .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }

6、讓容器居中
1、body {text-align:center;}僅僅只有IE可以居中
2、margin:auto;僅僅只有IE之外的瀏覽器可以居中
3、推薦使用的居中方式

        position:absolute;
        left:50%;
     marginLeft:-width;

7、div等容器盒子設置邊框border

border-bottom: 1px solid #f1f1f1;

Flex 布局

彈性布局
容器和行內元素都可以聲明Flex布局。
display: flex;
Webkit內核的瀏覽器，必須加上-webkit前綴display: -webkit-flex; /* Safari */
注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

采用Flex布局的元素，稱為Flex容器，它的所有子元素自動成為容器成員，簡稱”項目”。
1、容器的屬性

//決定主軸方向
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

//控制一條軸線排不下，如何換行。
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

//flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

//主軸上的對齊方式
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

//交叉軸上對齊方式
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

//多根軸線的對齊方式,如果只有一根軸線，該屬性不生效
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

2、項目屬性

//order屬性定義項目的排列順序
.item {
  order: <integer>;
}

//放大比例
.item {
  flex-grow: <number>; /* default 0 */
}

//縮小比例
.item {
  flex-shrink: <number>; /* default 1 */
}

//項目占據的主軸空間
.item {
  flex-basis: <length> | auto; /* default auto */
}

//單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

參考

Flex 布局教程：語法篇

如有疏漏，請指出不勝感激，如有問題可以通過如下方式聯系我

簡書
 csdn
掘金
 klvens跑碼場

本文鏈接：https://blog.csdn.net/qq_19307133/article/details/80047790

智能推薦

html css js 編碼規范

目錄一、HTML編碼規范 1. img標簽要寫alt屬性 2. 單標簽不要寫閉合標簽 3. 自定義屬性要以data-開頭 4. td要在tr里面，li要在ul/ol里面 5. ul/ol的直接子元素只能是li 6. section里面要有標題標簽 7. 使用section標簽增強SEO 8. 行內元素里面不可使用塊級元素 9. 每個頁面要寫 10. 要用table布局寫郵件模板 11. html...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...