整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML基礎的用法

          、html概述

          1、html標簽是用來給文本添加語義的,而不是用來修飾文本的;

          2、<meta charset="GBK">指定字符集(GB2312、UTF-8),html保存和指定字符一樣,才不會亂碼;

          3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協議來寫的,不是html標簽;

          4、webstorm快捷鍵大全:https://www.cnblogs.com/yeminglong/p/5995421.html

          二、基礎標簽

          1、h、p 和 hr 標簽

          • 三個標簽都是占一行

          2、注釋:<!-- -->

          3、圖片:<img src=" ">

          • 不會獨占一行;
          • 保證不變形,指定寬或者高即可;
          • title 和 alt 屬性;
          • src 可以是相對路徑(../ 上一級)和絕對路徑,路徑中盡量不含中文,相對路徑不可跨盤符,路徑分隔統一寫 / ,絕對路徑的可移植性不好;

          4、換行:<br> 用于內容未完的換行

          5、跳轉:<a href=" "></a>

          • 支持文字和圖片的跳轉;
          • 地址必須加 http 或者 https;
          • href 可以指定本地的地址;
          • target(_self 和 _blank) 屬性控制跳轉是否打開新的選項卡;
          • title 提示作用;

          6、base 標簽:<base target="_self ">

          • 統一指定 a 標簽怎么打開,寫在 head 中

          7、假鏈接:點擊不會跳轉

          • a 標簽的 href 屬性值為 # 或者 javascript
          • # 會跳轉到頁面的頂部,而 js 不會

          8、錨點:<a href="#id值"><\a>

          • 可以跳轉到頁面的指定位置
          • 可以跳轉到其他頁面的指定位置,只需在 # 前面加上頁面的路徑即可
          • 跳轉無過度動畫

          三、列表標簽

          1、無序列表(!)

          • <ul><li><\li><\ul>;
          • 整體不可分割;
          • ul 除了 li 不建議再加其他的標簽,li 標簽中可以放其他標簽來豐富內容;
          • li 中還可嵌套列表;
          • ws快捷生成 ul>li*3>h2+p;

          2、有序列表(*)

          • <ol><li><\li><\ol>;

          3、定義列表

          ?

          • dt 是標題,dd 是具體的描述;
          • 推薦一個 dt 一個 dd ,也可以一個 dt 對多個 dd 或者沒有 dd;
          • dl 中不建議加其他標簽,二 dt 和 dd 可以加;
          • 應用:網站尾部,圖文混排(仿京東做個網站的尾部);

          四、表格標簽

          1、格式

          ?

          • 表格的邊框默認不顯示(border)

          2、屬性

          (1)寬高

          • table 和 td 可用;
          • 默認高寬根據內容調整;
          • td 設置高寬只會改變當前單元格的狀態,而不會改變 table 的高寬;

          (2)水平和垂直對齊(align 和 valign)

          • 水平對齊三個都可以用,而垂直對齊針對 tr 和 td;
          • table 設置 align 控制表格在水平方向的對齊,給 tr 和 td 設置都是控制單元格里的內容的對齊方式,不過 tr 影響一行,td 影響一個,tr 和 td 都設置 td 會覆蓋 tr 的效果;
          • tr 和 td 設置 valign 都是控制單元格內容的垂直方向的對齊,不過 tr 影響一行,td 影響一個,tr 和 td 都設置 td 會覆蓋 tr 的效果;

          (3)內邊距和外邊距(cellpadding 和 cellspacing)

          • 兩個屬性都是 table 的;
          • 外邊距是指格子與格子之間的空隙,而內邊距是指格子與文字之間的間隙;

          (4)細線表格

          • 先給 table 設置 bgcolor;
          • 再給 tr 設置 bgcolor;
          • 最后 table 設置 cellspacing;

          3、表格的其他標簽

          (1)caption:表格的標題標簽,必須寫在 table 內而且需緊跟 table

          (2)th:th 和 td 同級,th 有加粗的效果

          4、表格的結構

          (1)組成:caption 標題、thead 表頭、tbody 主體、tfoot 尾部

          (2)說明:

          • 瀏覽器自動添加 tbody;
          • table 設置高度后,tfoot 和 thead 的高度是不會變化的;

          5、單元格的合并

          (1)水平方向:td 屬性 colspan = "2";

          (2)垂直方向:td 屬性 rowspan = "2";

          五、表單標簽

          1、格式

          ?

          2、input 標簽

          (1)type = text:

          (2)password:

          (3)radio:互斥要設置 name 相同;默認選中 checked

          (4)checkbox:選中 checked

          (5)button:

          (6)image:

          (7)reset:value 修改標題

          (8)submit:

          • form 的 action 確定提交的地址
          • 提交數據加 name 屬性

          (9)hidden:

          -----------------------------------------------------------------------------------------------------------------------

          *相關標簽:

          • label 標簽:讓文字與 input 標簽綁定;兩種綁定的方式:

          ?

          • datalist 標簽:給輸入框綁定輸入的提示:<datalist><option>haha</option></datalist>
          • h5 中新增的 input 標簽:email 、url 、number 、color、date(瀏覽器的支持不好)

          3、非 input 標簽

          (1)select

          ?

          (2)textarea

          • cols 和 rows 指定輸入的行列,但是還是可以無限輸入
          • 默認可拉伸,也可通過 css 固定大小

          4、練習

          (1)表單標簽除了 button 外都可以用 value 來指定提交的值

          (2)表單添加邊框可以在 form 中添加 fieldset 來實現

          六、多媒體標簽

          1、video 標簽

          (1)格式:<video src=" " autoplay="autoplay"></video>;

          (2)屬性:controls(控制條)poster(海報)loop(循環)preload(預加載,與autoplay沖突)muted(靜音)width/height;

          3)另一種 video 格式:解決瀏覽器的兼容

          ?

          (4)讓所有的瀏覽器支持 video 標簽:通過 js 框架來實現

          2、audio 標簽

          (1)使用基本和 video 一樣,屬性只有寬高和 poster 不能用,也是兩種格式

          3、details 和 summary 標簽

          (1)格式:

          ?

          4、marquee標簽(跑馬燈效果)

          (1)w3c 不推薦,但是瀏覽器的支持好

          (2)屬性:direction(方向)scrollamount(滾動的速度)loop(滾動次數,默認-1)behavior(滾動類型 slide)

          (3)廢棄的標簽:<br><hr><font><b>加粗<u>下劃線<i>斜體<s>刪除線(無語義)

          替代的標簽:<strong><ins><em><del>(加入了語義)

          5、字符實體

          (1)&nbsp;空格 &lt;&gt; &copy;版權符號

          (2)理解:html 占用了的不顯示的特殊字符用另外的代替符號表示,使他們正常在 html 頁面上顯示

          • eta介紹

          • icon網頁圖標

          • 表格

          • 表單


          meta介紹

          設置編碼

          <meta charset="utf-8">

          設置關鍵字

          <meta name="keywords" content="html, java, 前端" />

          設置網頁描述

          <meta name="description" content="這是一個簡單的html頁面" />

          網頁重定向

          <meta http-equiv="refresh" content="3; http://www.baidu.com">

          作者

          <meta name="author" content="小火柴" />

          設置蜘蛛爬取狀態

          <meta name="robots" content="all|none|index|follow|noindex|nofollow">all 文件將被檢索,且頁面上的連接可以被查詢

          icon網頁圖標

          <link rel="icon" href="test.ico"/>

          表格

          <table border="1" width="500" height="300" cellspacing="0" cellpadding="10" bgcolor="#cfcfcf" align="centers">

          表格的標準結構

          <table border="1" width="500" height="300">

          表頭

          <table border="1" width="500" height="300">

          合并

          <table border="1" width="500" height="300">

          表格的標題 直接在td的地方換成th 邊框的顏色

          <table border="1" width="500" height="300" bordercolor="red">

          內容的垂直對其方式 在td中添加屬性 valign="top" top 頂部 middle 居中 bottom 靠下 細線的表格

          <table bgcolor="green" width="500" height="300" cellspacing="1">

          表格小案例 -- 課程表

          <table width="300" height="250" bgcolor="green" cellspacing="1" align="center">

          表單

          表單的作用的就是用來收集信息

          表單域

          <form action="" method="get">

          輸入框屬性簡介

          <input type="text" name="userName" maxlength="8" readonly="readonly" value="admin" disabled="disabled">

          單選框

          <input type="radio" name="sex" value="男" checked="checked" />男

          下拉列表

          <select multiple="multiple">

          多選框

          <input type="checkbox" name="play" value="籃球" checked="checked">籃球

          多行文本框 文本域

          <textarea cols="30" rows="10"></textarea>cols 輸入字符寬

          文件上傳組件

          <input type="file" name="myfile">

          文件的提交

          <input type="submit" value="提交">

          按鈕

          <input type="button" value="我的第一個按鈕"/>

          圖片提交按鈕

          <input type="image" src="submit.jpg" />

          重置按鈕

          <input type="reset" value="重置" />

          信息分組

          <fieldset>

          h5表單控件

          <!-- 網址控件 --><input type="url"/><!-- 日期控件 --><input type="date" /><!-- 時間控件 --><input type="time" /><!-- 郵件控件 --><input type="email" /><!-- 數字控件 --><input type="number" step="5"/><!-- 滑塊控件 --><input type="range" step="5" value="10"/>

          識點1:CSS3

          CSS3是CSS語言的最新版本,旨在擴展CSS2.1,它增加了許多新特性與新的布局方式。

          為了加快那些已經確認沒有問題的特性的標準化速度,CSS3劃分了一系列相互獨立的模塊,按照各自進度來進行標準化。因此現在標準CSS包括修訂后的CSS2.1以及完整模塊對它的擴充,模塊的level數并不一致。W3C會定期發布snapshots(快照),列出CSS2.1和成熟的模塊。

          有的CSS模塊已經十分穩定,使用時也不必添加前綴,其狀態為CSSWG規定的三個推薦品級之一:候選推薦、建議推薦或推薦。不穩定的特性應以瀏覽器引擎為前綴并謹慎使用。

          知識點2:顏色模塊Level3

          1.增加opacity屬性,用于指定元素透明度,可為0.0~1.0。被應用元素和其子元素會被當成一個整體看待,具有相同透明度,即便子元素有不同opacity值;

          2.可使用hsl()、hsla()、rgba()、rgb()來創建color值;

          3.transparent顏色目前是真彩色而且是rgba(0, 0, 0, 0.0)的別名。

          知識點3:選擇器Level3

          1.增加子串匹配的屬性選擇器,E[attribute^="value"],E[attribute$="value"],E[attribute*="value"];

          2.增加新的偽類,如:enabled,:disabled,:checked,:nth-child,:nth-of-type,:empty,:not等;

          3.偽元素使用兩個冒號而不是一個冒號來表示;

          4.新的普通兄弟選擇器~,用于選擇“某元素后所有同級的指定元素”。

          知識點4:媒體查詢

          使用@media媒體查詢,可以針對不同的設備定義不同的樣式。其包含一個可選的媒體類型和零或多個媒體特性表達式(表達式要用括號),語法為:@media mediatype and|not|only (media feature) {CSS-Code;},也可以在link中使用media="mediatype and|not|only (media feature)"屬性來針對不同媒體使用不同樣式表。

          可以使用not(對整個媒體查詢取反)、and(同時滿足)和only(防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式)來構建復雜的媒體查詢。若使用了not或only則必須指定一個媒體類型。也可以將多個媒體查詢以逗號分隔放在一起,相當于or。

          常見媒體查詢有:

          //寬高比為16:9或者16:10的寬屏設備

          @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { CSS-Code }

          //向顯示在設備最大寬度800px的屏幕上的文檔應用樣式表

          <link rel="stylesheet" media="screen and (max-device-width: 800px)" />

          //設備處于豎屏模式

          @media all and (orientation: portrait) { CSS-Code }

          //可視區域的寬度在500到800px之間的屏幕

          @media screen and (min-width: 500px) and (max-width: 800px) { CSS-Code }

          知識點5:背景與邊框模塊Level3

          1.支持多背景圖片,例:background-image:url(bg_flower.gif),url(bg_flower_2.gif);

          2.新增屬性background-size規定背景圖片的尺寸,例:background-size:63px 100px;

          3.新增屬性background-origin規定背景圖片的定位區域,例:background-origin:content-box;

          4.支持圓角邊框:border-radius,該屬性是一個簡寫屬性,也可分別設置四個屬性:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。例:border-radius:25px;

          5.支持圖片創建邊框:border-image,該屬性是一個簡寫屬性,用于設置border-image-source圖片路徑、border-image-slice圖片邊框向內偏移、border-image-width圖片邊框寬度、border-image-outset圖像區域超出邊框的量、border-image-repeat是否平鋪鋪滿或拉伸。例:border-image:url(border.png) 30 30 round;

          6.支持元素陰影:box-shadow。例:box-shadow: 10px 10px 5px #888888;前兩個值必須,為水平陰影與垂直陰影的位置。

          知識點6:值和單位模塊Level3

          1.initial(最初值)和inherit(從父元素繼承值)關鍵字能被用于任意CSS屬性中;

          2.定義了新的相對字體長度單位:rem和ch。rem相對于html的font-size,而1ch=1英文=1數字=0.5漢字。

          3.定義了相對視口長度單位:vm,vh,vmax和vmin。vw為可視區域寬度,總寬度為100vw,vh為可視區域高度,總高度100vh,vmin在可視區域寬度和高度取小,vmax則取大。

          知識點7 . 盒模型

          7.01 、盒子模型的概念

          所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個盛裝內容的容器。每個矩形都由元素的內容,內邊距(padding),邊框(border)和外邊距(margin)組成。

          a、網頁就是多個盒子嵌套排列的結果

          b、內邊距出現在內容區域的周圍,當給元素添加背景色或背景圖像時,該元素的背景色或背景圖像也將出現在內邊距中

          c、外邊距是該元素與相鄰元素之間的距離

          d、如果給元素定義邊框屬性,邊框將出現在內邊距和外邊距之間

          注意:雖然盒子模型擁有內邊距,邊框,外邊框,寬和高這些基本屬性,但是并不是要求每個元素都必須定義這些屬性。

          2 . 邊框屬性

          border:設置元素的邊框(width stylecolor)/四邊寬度,四邊樣式,四邊顏色

          border-width:設置元素邊框的寬度、像素值

          border-style:設置元素邊框的樣式 none:無(默認)/solid(單實線)/dashed(虛線)/dotted(點線)/double(雙實線)

          border-color:設置元素邊框的顏色

          7.01、單獨設置元素上邊框

          border-top :寬度/樣式/顏色

          border-top-width :寬度

          border-top-style :樣式

          border-top-color:顏色

          7.02、單獨設置元素右邊框

          border-right:寬度/樣式/顏色

          border-right-width:寬度 border-right-style:樣式 border-right-color:顏色

          7.03、單獨設置元素的下邊框

          border-bottom:寬度/樣式/顏色

          border-bottom-width:寬度

          border-bottom-style:樣式

          border-bottom-color:顏色

          7.04、單獨設置元素的左邊框

          border-left:寬度/樣式/顏色

          border-left-width:寬度

          border-left-style:樣式

          border-left-color:顏色

          7.05、綜合設置邊框

          像border,border-top等這樣,能夠一個屬性定義元素的多種樣式,在CSS中稱之為復合屬性。

          常用的復合屬性有font、border、margin、padding和background等。

          復合屬性可以簡化代碼,提高頁面的允許速度,但是如果只有一項值,最好不要用復合屬性,以免樣式不被兼容。

          Tips:

          a. 表單的邊框通常改為0;

          Border:0 none;//兼容所有瀏覽器

          b. 表格的細線邊框

          Table{border-collapse:collapse;}

          c. 輪廓(鏈接有虛線和文本框有藍色邊框)

          Outline-style:none;

          Padding屬性用于設置內邊距,也是復合屬性,相關設置如下:

          Padding-top:上內邊距

          Padding-right:右內邊距

          Padding-bottom:下內邊距

          Padding-left:左內邊距

          Padding:上內邊距、右內邊距、下內邊距 、左內邊距

          內邊距是享有背景色的

          7.06、外邊距屬性

          Margin屬性用于設置外邊框,也是復合屬性,相關設置如下:

          Margin-top:上外邊距

          Margin-right:右外邊距

          Margin-bottom:下外邊距

          Margin-left:左外邊距

          Margin:上外邊距/右外邊距/下外邊距/左外邊距

          Margin相關屬性的值,以及符合屬性margin取1~4個值得情況與padding相同

          外邊距可以使用負值,使相鄰元素重疊

          對塊元素應用寬度屬性width,并將左右的外邊距都設置為auto,可使塊級元素水平居中,實際工作中常用這種方式進行網頁布局,實例代碼如下:

          .header{width:960px;margin:0 auto};

          為了更方便地控制網頁中的元素,制作網頁時,可使用如下代碼清除元素的默認內外邊距:

          *{padding:0 /*清除內邊距*/

          Margin:0; /*清除外邊距*/}


          主站蜘蛛池模板: 国产Av一区二区精品久久| 久久se精品一区二区国产 | 国产精品女同一区二区| 91午夜精品亚洲一区二区三区| 国产午夜精品一区二区三区极品 | 国产福利微拍精品一区二区| 又紧又大又爽精品一区二区| 竹菊影视欧美日韩一区二区三区四区五区| 久久久久久人妻一区二区三区| 无码精品国产一区二区三区免费| 日本中文一区二区三区亚洲| 精品国产一区二区三区www| 亚洲日本久久一区二区va| 日韩亚洲一区二区三区| 成人区精品人妻一区二区不卡| 鲁丝丝国产一区二区| 国语对白一区二区三区| 久久精品日韩一区国产二区| 麻豆va一区二区三区久久浪| 综合一区自拍亚洲综合图区| 人妻aⅴ无码一区二区三区| 久久一区二区三区免费播放| 亚洲一区精品中文字幕| 日本免费一区二区三区| 末成年女AV片一区二区| 亚洲一区二区三区国产精品无码| 久久无码AV一区二区三区| 久久精品无码一区二区WWW| 99精品国产高清一区二区麻豆| 91在线看片一区国产| 国产成人一区二区三中文| 色一情一乱一伦一区二区三欧美| 性色AV一区二区三区天美传媒| 日韩精品无码免费一区二区三区| 中文字幕乱码人妻一区二区三区| 色综合视频一区二区三区44| 3D动漫精品一区二区三区| 在线成人综合色一区| 亚洲免费视频一区二区三区| 精品福利一区二区三区精品国产第一国产综合精品 | 国产成人精品一区二三区|