初识HTML流水笔记
html概述
中文全稱：超文本標記語言。
不是一種編程語言，是標記語言。
標記語言是一套標記標簽。
HTML 使用標記標簽來描述網頁。
HTML，css，javaScript三者的關系
網頁主要由三部門組成：結構、表現和行為。
HTML---結構，決定網頁的結構和內容。
css---表現，設定網頁的表現樣式。
JavaScript（JS）---行為，控制網頁的行為。
開發工具
1、webStorm（web前端）
2、Subline Text 代碼編輯器
3、HBuilder（HTML5的web開發IDE）
4、eclipse(集成開發環境)
5、Visual studio（簡稱vs，微軟的開發工具集）
6、記事本---需要更改后綴名為.html，且將格式改成utf-8。
HTML標簽基本語法
1、基本的語法：
<p> </p>
<開始標簽>內容</結束標簽>
2、標簽通常用<>包圍關鍵字，且成對使用，有一個開始標簽就對應有一個結束標簽，結束標簽只是在開頭標簽的前面加一個斜杠“/”
特殊：<img scr="" alt="" />空標簽
3、在元素的開始標簽中，還可以包含“屬性”來表示元素的其他特性，它的格式是：
<p style="color:red;"></p>
color:屬性名
red：屬性值
4、屬性只能寫在開始標簽中。
HTML注釋
注釋內容可插入文本中任何位置，其內容不在網頁中顯示，只在源碼文檔中供備注使用，方便程序員自己和他人查看。
<!--<form action="#" method="post">-->
<!--用戶名：<input class="username" id="username1" name="username2" type="text"-->
<!--readonly="readonly">-->
<!--密碼：<input name="password" type="password" placeholder="請輸入密碼">-->
<!--<input type="button" value="登錄">-->
<!--<input type="submit">-->
<!--<button>我是一個按鈕</button>--> 方法適用于文檔主體部分（body）
//注釋內容
/* 注釋內容 */ 方法適用于文檔引用標簽部分
快捷鍵：ctrl+“/”
HTML注意事項
1、所有標簽的元素和屬性的名字都必須使用小寫
2、所有的屬性必須用雙引號“”括起來，如屬性值本身就含有雙引號
3、文件的擴展名要以.html結束
4、任何空格和回車在代碼中都無效，插入空格或回車有專用的標記。分別是 、<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
doctype三種解析模式
IE 準標準模式
標準模式
混雜模式（非標準）
doctype：聲明，文檔類型，用哪種解析方式
html：html文檔，也就是網頁
head：所有頭部元素的容器，如<title>.<link>.<meta>.<script>.<style>等
title：
1.定義瀏覽器工具欄中的標題。
2.提供頁面被添加到收藏夾時顯示的標題。
3.顯示在搜索引擎結果中的頁面標題。
meta：描述文檔（作者或編輯軟件），或定義文檔的關鍵詞，或重定向用戶到新的網址，此處是設置編碼格式，否則為亂碼，不會顯示在頁面上。
body：網頁內容的主體部分。所有的標簽都應該寫在這里面。
錨點（回到頂部）
1、創建錨點
2、指向錨點
<a href=""name="ie"></a>
<a href="#ie"></a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?from表單
輸入框
input type=“text”
<form action="#" method="post或get">------get安全性低，速度快，顯示用戶信息。 post安全性高，速度慢，不顯示用戶信息。
用戶名：<input class="username" id="username1" name="username2" type="text"---------------------------class常用于html，css ?
readonly="readonly">
密碼：<input name="password" type="password" placeholder="請輸入密碼">---------------------id常用于js---------name常用于交互時（供后臺）
<input type="button" value="登錄">
<input type="submit">--------------自帶提交功能
<button>我是一個按鈕</button>
<video src="要連接的視頻文件名.mp4" controls autoplay></video>
<audio src="song.mp3" controls> </audio>
<textarea name="" id="" cols="30" rows="10">文本域</textarea>
?
? ? ? ? ? ? ? ? ? ?單選框
<div>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
在操作時他的type必須一樣可以設置多個選項
<div>
<input type="checkbox">多選框
</div>
<select multiple="multiple">
<option value="sichuan" selected="selected">川菜</option>
<option value="guangdong">粵菜</option>
<option value="beifang">北方菜</option>
<option value="shanghai">上海菜</option>
<option value="west" >西餐</option>
<option value="thailand">泰國菜</option>
</select>
<div>
<fieldset>
<legend>標題</legend>
<p>男 <input name="sex" type="radio"></p>
<p>女 <input name="sex" type="radio"></p>
</fieldset>
</div>
<label for=""></label>
<div>
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="women" name="sex">
<label for="women">女</label>
</div>
<span style="width: 100px;height: 100px;border: 1px solid red;font-size: 100px">我是格一個span</span>
<strong>我是一個srtong</strong>
<div style="width: 500px;height: 500px;border: 1px solid red">我是一個盒子</div>
<img src="圖片名稱.png" alt="">f
<input type="text">用戶名
</form>
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px"---單元格內邊距 align="center"----表格內容對齊方式 style="border-collapse:collapse"----合并表格邊框>
<caption>學生管理表</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>-------表示表格的列標題
<th>非得給第三</th>
</tr>--------------------------表示行（row）
<tr>
<td colspan="2">1-1</td>----表示列，單元格
<!--<td>1-2</td>-->
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
?
</table>
?
</body>
</html>
colspan="2"列上兩個單元格合并，占用相鄰單元格的空間。
rowspan="2"行上兩個單元格合并，占用相鄰行上同位置單元格的空間。
表格的語義化，thead頁眉，tbody主體內容，tfoot頁腳。
placeholder：提供一種提示，描述輸入域所期待的值。
塊級元素有：div、表單、表格、標題、段落等。
行內元素有：圖片，輸入框、span、strong等。
兩者的區別：
塊級元素特點：
1、塊級元素比較霸道，總是獨占一行。
2、具有一定的寬高。其寬高與內容無關。
3、常用作容器，可以容納行內元素和其他塊級元素。
行內元素特點：
1、和其他行內元素都在一行上。
2、其寬高只與內容有關。
3、行內元素只能容納文本或者其他行內元素，無法容納塊級元素。
4、內聯元素可以設置外邊界，但是外邊界不對上下起作用，只能對左右起作用。
?
轉載于:https://www.cnblogs.com/zacy110/p/5427543.html
總結
以上是生活随笔為你收集整理的初识HTML流水笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Memcached安装
- 下一篇： 【转载】Gradle学习 第十一章：使用