當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

初识HTML流水笔记

發布時間：2025/3/20 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了初识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注釋
注釋內容可插入文本中任何位置，其內容不在網頁中顯示，只在源碼文檔中供備注使用，方便程序員自己和他人查看。






 方法適用于文檔主體部分（body）

//注釋內容
/* 注釋內容 */ 方法適用于文檔引用標簽部分
快捷鍵：ctrl+“/”

HTML注意事項
1、所有標簽的元素和屬性的名字都必須使用小寫
2、所有的屬性必須用雙引號“”括起來，如屬性值本身就含有雙引號
3、文件的擴展名要以.html結束
4、任何空格和回車在代碼中都無效，插入空格或回車有專用的標記。分別是&nbsp、<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、指向錨點

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?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>

? ? ? ? ? ? ? ? ? ?單選框

在操作時他的type必須一樣可以設置多個選項

<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-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>

<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学习第十一章：使用