行不行，看圖
代碼源碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DAY1：HTML基礎</title>
<style>
*{ margin:0; padding:0;}
body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微軟雅黑";}
h1,h2{padding: 20px 0;}
h3{ background: #00AA88;
color: #FFFCF4;
font-size: 20px;
font-weight: 700;
margin: 10px 0;
border-radius: 4px;
padding: 5px 0px 5px 15px;}
p{ line-height: 40px;}
ul li{ list-style: none;line-height: 40px;}
span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;}
em{ font-style: normal; color:red;}
.other{ color:#044D22;}
.oo{ color:red; display:inline; font-size:18px; font-weight:normal;}
.marleft{ margin-left:30px;}
.marbtom{ margin:15px 0; font-weight:600;}
.borderbtm{ border-bottom: solid 1px #eee;
padding-bottom: 15px;margin-bottom: 15px;}
.textcon{
margin: 10px 0;
border: solid 1px #ddd;
border-left-width: 6px;
padding: 10px;
border-radius: 4px;
border-color: #f60;
}
</style>
</head>
<body>
<div class="boxs">
<h1>DAY1：HTML基礎</h1>
<h2 class="borderbtm"> </h2>
<div class="marleft">
<p><span>HTML的基本語法</span></p>
<blockquote class="textcon">
<p><strong class="oo">1、<常規標記></strong><br>
<標記 屬性=“屬性值” 屬性=“屬性值”></標記><br>
例如：<head></head></p>
</blockquote>
<blockquote class="textcon">
<p><strong class="oo">2.空標記</strong><br>
<標記 屬性=“屬性值” /><br>
例如：<meta charset=”utf-8”>
<br/></p>
<br>
</blockquote>
</div>
<h3>五、HTML常用標記</h3>
<div class="marleft">
<p class="marbtom">1、文本標題（h1-h6） </p>
<blockquote class="textcon">
<p><h1>LOGO</h1> <br>
<h2>次要欄目或標題-小標題H2</h2> <br>
<h3>再次要欄目或分類小標題H3</h3> <br>
<h4>文中分類小標題H4</h4> <br>
<h5>二級標題</h5><br>
<h6>六級標題</h6></p>
<p><strong>html標題標籤使用原則</strong>：</p>
<p>H1在一個網頁中最好只使用一次，如對一個網頁LOGO使用。<br>
</p>
</blockquote>
<p class="marbtom">2、段落文本(p) </p>
<blockquote class="textcon">
<p><p>段落文本內容</p><br>
標識一個段落(段落與段落之間有段間距)</p>
</blockquote>
<p class="marbtom">3、空格 </p>
<blockquote class="textcon">
<p> <br>
所佔位置沒有一個確定的值,這與當前字體字號都有關係.</p>
</blockquote>
<p class="marbtom">4、換行(br) </p>
<blockquote class="textcon">
<p><br /><br>
換行是一個空標記(強制換行)<br>
</p>
</blockquote>
<strong class="marbtom">5、加粗 加粗有兩個標記</strong><br>
<blockquote class="textcon">
A、<b>加粗內容</b><br>
B、<strong>加粗內容</strong><br>
</blockquote>
<strong class="marbtom">6、傾斜<br></strong>
<blockquote class="textcon">
<em></em> ,<i></i></p>
</blockquote>
<p><strong class="marbtom">7、水平線</strong> <blockquote class="textcon"> <hr />空標記<br></blockquote>
<strong class="marbtom">8、列表(ul,ol,dl)</strong>
<blockquote class="textcon">
<p>HTML中有三種列表分別是：無序列表，有序列表，自定義列表<br>
<div style="overflow:hidden">
<div style="float:left; height:220px; margin-right:30px; ">
*無序列表<br>
無序列表組成：<br>
<ul>(unordered list)<br>
<li></li><br>
<li></li><br>
．．．．．．<br>
</ul><br>
</div>
<div style="float:left; height:220px; margin-right:30px; ">
*有序列表<br>
有序列表組成：<br>
<ol>(ordered list)<br>
<li></li><br>
<li></li><br>
．．．．．．<br>
</ol><br>
</div>
<div style="float:left; height:220px; margin-right:30px; overflow:hidden; ">
*自定義列表<br>
<dl>(definition list)<br>
<dt>名詞</dt><br>
<dd>解釋</dd><br>
(definition description)<br>
．．．．．．<br>
</dl><br>
<br>
</div> </div>
</p>
<br>
</p>
</blockquote>
<p class="marbtom">9、插入圖片</p>
<blockquote class="textcon">
<p><img src="目標文件路徑及全稱" alt="圖片替換文本" title="圖片標題" /><br>
</p></blockquote>
<strong class="marbtom">10、超鏈接的應用</strong></p>
<blockquote class="textcon">
<p>語法：<br>
<a href="目標文件路徑及全稱/連接地址" title="提示文本">鏈接文本/圖片</a><br>
<a href="#"></a>空鏈接<br>
</p>
</blockquote>
<p class="marbtom"> 11、div和span的用法</p>
<blockquote class="textcon">
<p><div ></div></p>
<p>沒有具體含義，統稱為塊標籤，<br>
用來設置文檔區域，是文檔佈局常用對象</p>
<p><span> </span><br>
文本結點標籤<br>
可以是某一小段文本，或是某一個字。 <br>
</p>
</blockquote>
<p class="marbtom">12、數據表格的作用及組成</p>
<blockquote class="textcon">
<p >作用：顯示數據<br> </p>
<p>
表格組成<br>
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value"><br>
<tr><br>
<td></td><br>
<td></td><br>
</tr><br>
</table></p>
<p><strong class="oo">注：一個tr表示一行;一個td表示一列(一個單元格)</strong><br>
*數據表格的相關屬性<br>
1）width="表格的寬度"<br>
2）height="表格的高度"<br>
3）border="表格的邊框"<br>
4）bgcolor="表格的背景色" bg=background<br>
5）bordercolor="表格的邊框顏色"<br>
6）cellspacing="單元格與單元格之間的間距"<br>
7）cellpadding="單元格與內容之間的空隙"<br>
8）對齊方式：align="left/center/right";<br>
9)合併單元格屬性：<br>
colspan=“所要合併的單元格的列數"合併列; </p>
<p>rowspan=“所要合併單元格的行數”合併行;</p>
</blockquote>
<p class="marbtom">13、表單的作用及組成</p>
<p><span class="oo">表單的作用：用來收集用戶的信息的;</span></p>
<p>1)、表單框<br>
<blockquote class="textcon">
<form name="表單名稱" method="post/get" action=""></form><br>
</blockquote>
2）文本框<br>
<blockquote class="textcon">
<input type="text" value="默認值"/><br></blockquote>
3)密碼框<br>
<blockquote class="textcon">
<input type="password" /><br>
<input type="password" placeholder="密碼" /></p></blockquote>
<p>4)重置按鈕<br>
<blockquote class="textcon">
<input type="reset" value="按鈕內容" /><br></blockquote>
5）單選框/單選按鈕<br>
<blockquote class="textcon">
<input type="radio" name="ral" /><br>
<input type="radio" name="ral" checked="checked" /><br>
單選按鈕裡的name屬性必須寫，同一組單選按鈕的name屬性值必須一樣。<br>
checked="checked"(默認選中；) disabled="disabled"禁用</p></blockquote>
<p>6）複選框<br>
<blockquote class="textcon">
<input type="checkbox" name="like" /><br>
<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)<br>
(checked="checked" :默認選中)</p></blockquote>
<p> 7)下拉菜單<br>
<blockquote class="textcon">
<select name=""><br>
<option>菜單內容</option><br>
</select><br></blockquote>
8）多行文本框（文本域）<br>
<blockquote class="textcon">
<textarea name="textareal" cols="字符寬度" rows="行數"><br>
</textarea><br></blockquote>
9)按鈕<br>
<blockquote class="textcon">
<input name="'" type="button" value=“按鈕內容” /><br>
<input name="'" type="submit" value=“按鈕內容” /><br>
<button></button></p></blockquote>
<p class="oo">
<p ><br>
</p>
</div>
</div>
<div style=" width: 130px;
height: 45px;
line-height: 44px;
text-align: center;
color: #f00;
background: #000;
border-radius: 4px;
position: fixed;
bottom: 50px;
cursor:pointer;
right: 10px; "><br />
<br />
<br />
</div>
</body>
</html>
前端框架Vue組件之手機通信錄實戰視頻
pan.百度/s/1bNy2rs
密碼：bhdg
相關推薦
