HTML學習筆記

時間 2019-11-11

標籤 html 學習筆記欄目 HTML 简体版

原文原文鏈接

HTML5學習筆記css

這是原做者本身的整理:https://www.gitbook.com/book/li-xinyang/frontend-notebook/detailshtml

1.HTML:(Hyper Text Markup Language),超文本標記語言,用於標記,頁面中的內容:文字,圖片,音視頻內容,只是單純的顯示,須要修飾就要用到CSS.git

2.HTML文檔的基本結構web

<!DOCTYPE html>//首行定格書寫,聲明文檔類型
<html lang=「en」>//語言類型
<head> //頭部
<meta charset=「UTF-8」>//編碼類型
<title>Title</title>//文檔標題,瀏覽器窗口顯示的那個標題canvas

<meta name="keywords" content="websit search keyword">
<meta name="description" content="website discription">//兩個結合給搜索引擎抓取,SEO
<meta name="viewport" content="width=device-width,initial-scale=1.0">//移動端瀏覽器的寬高和縮放
<link href="css.css">//引入外部的CSS樣式瀏覽器

</head>//結束標籤
<body>//文檔主體部分

</body>
</html>frontend

3.一些重要的屬性ide

id: <div id=「unique-string」></div>整篇文檔只能有一個svg

class:<div class=「div」>class</div>一個類羣,可重複出現模塊化

style:儘可能避免使用內嵌樣式

title:對對應元素的描述

<a href="http://www.baidu.com" title="sample link">默認的連接</a>

   <a href="http://sample.com" title="sample link" target="_self">sample</a>
   
   <a href="http://sample.com" title="sample link" target="_blank">blank link</a>

<a href="http://sample.com" title="sample link" target="iframe-name">sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>


<a href="#id">Anchor point</a>
<section id="id">Anchor content</section>

郵箱和電話
<a href="mailto:sample@qq.com" title="Email">Contact US</a>

   
   <a href="mailto:sample@xx.com?cc@qq.com">Contacts</a>



<a title="email" href="mailto:sample@dd.com&subject=help&body=body content">Contacts</a>

<a href="tel:9999" title="phone">phone</a>


<div>塊</div>
<p>段落</p>
<ol>有序列表</ol>
<ul>無序列表</ul>
<dl>一個單元格</dl>
<pre>保存模塊化的內容,好比代碼</pre>
<blockquote>引用大段的文字</blockquote>


<cite>引用做品的名字或者做者的名字</cite>
<q>引用小段文字</q>

<canvas>基於像素,性能要求比較高,用於實時顯示數據</canvas>
<svg>矢量圖形圖像</svg>



<img src="mama.jpg" width="100" height="100" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,50,50" href="index.html" alt="熱點1">
<area shape="circle" coords="100,100,12" href="" alt="redian2">
</map>


<table>
<caption>表格標題</caption>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>

<tbody>
<tr>
<td>data</td>
<td>data222</td>
</tr>
<tr>
<td colspan="2">11</td>
<td></td>
</tr>

<tr>
<td rowspan="2">11</td>
<td></td>
<td></td>
</tr>

</tbody>
</table>


<form action="website_sumbit" method="get" accept-charset="utf-8">
<fieldset>
<legend>title</legend>


<label><input type="text" name="name" value="yourname">名字</label>
<label for="input-id">另一種添加標籤說明</label>
<input type="text" id="input-id">
</fieldset>

<fieldset>
<legend>title</legend>

<input type="text" name="readonly" readonly>


<input type="tel" name="hidden-info" value="hiden-value" hidden>

</fieldset>
<button type="submit"></button>
<button type="reset"></button>
</form>



<textarea>多行輸入</textarea>
<select>選擇下拉框
<option>1</option>
<option>2</option>
</select>

""//雙引號
&&//&符號
<<//小於號
>>//大於號
  //空格
&　//中文全角空格

IE8一下版本兼容H5標籤,使用js來建立一個沒有的元素
或者shiv解決
<script>
document.createElement("headr");
</script>

5.CSS(Cascading Stylesheet)層疊樣式表,用來修飾HTML元素,至關於裝飾.在H5中能夠實現簡單的動畫


<link href="css.css" rel="stylesheet">

<style>

p{

margin: 10px;
}

.ul span{
positon:relative;
height:100px;
overflow:hidden;
}

.pic{
-webkit-transition: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
</style>


<p style="color: red;">red Text!!!!</p>






margin:[<length> | <percentage> | auto]{1,4}

   /*基本元素:<length>,<percentage>,auto*/
/*組合符號:[],|*/
/*數量符號:{1,4}*/

CSS @規則
   @import "subs.css"

   @chartset "utf-8"
@media print{
/*property:value*/
   }
@keyframes fadein{
/*property:value*/
   }

@標示符內容;
@標識符內容{}

   經常使用規則
   @media(響應式佈局)
   @keyframes(CSS動畫)
@font-face(外部字體)

6.經常使用的選擇器

選擇器:
種類:
   標籤選擇器 p{}
類選擇器 .className{}
id選擇器 #idName{}
通配符 *{}

屬性選擇器:
[attr] or [attr=val] ===> #nav{}===[id=nav]{}
[attr~=val]屬性包含value值的元素
[attr|=val]屬性除去val開頭的屬性值
[attr^=val]屬性val開頭的元素
[attr$=val]屬性val結束
[attr*=val]屬性包含val的元素


:或者::開頭
:link,:visited,:hover,:active,:enabled,:disabled
:checked,:first-child,:last-child,
   :nth-child(even/odd)//父元素下第n個且是element的元素
:nth-last-child(n[0...])
:only-child僅選擇惟一的元素
:only-of-type
:first-of-type
:last-of-type
:nth-of-type(even)//父元素下第n個element元素,
:nth-last-of-type(2n)


:empty,:root,:not,:target,:lang()

::first-letter,第一個字母
::first-line
::selection用戶選中的內容


後代選擇器: .main h1{}
子代選擇器: .main>h2{}
兄弟選擇器: h2+p{}或者h2~p{...}


   

color,font,text-align,list-style


background,border,position... 樣式的優先級計算 a = 行內樣式 b = id選擇器的數量 c = 類,僞類選擇器的數量 d = 標籤選擇器和僞元素的數量

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。