WEB前端--HTML
HTML基礎
一、基本概念
1、簡介
HTML：網頁超文本標記語言，不是編程語言，是描述性的標記語言。
2、基本結構
| 12345678 | <html> 文件開始標記<head> 文件頭開始的標記……文件頭的內容</head> 文件頭結束的標記<body> 文件主體開始的標記……文件主體的內容</body> 文件主體結束的標記</html> 文件結束標記 |
3、標記
<html>：html開頭，表示網頁文檔的開始
<head>：標明文檔的頭部信息
<body>：指明文檔的主體區域
二、編寫方法
文檔工具，如：記事本
IDE
三、瀏覽html文件
1、運行效果
如果用pycharm編寫，不要直接運行，直接找到文件路徑打開這個文件最快捷。因為pycharm直接運行是作為一個服務監聽起來，比較慢。
2、看源文件
鼠標右鍵-->查看源文件
HTML基本標記
一、<head>標記
head頭部元素包括標題、基礎信息和元信息等；
作用范圍：整篇文檔；
頭信息中可以有：<meta>元信息、文檔樣式表和腳本等；
頭部信息一般不會再網頁上直接顯示。
二、<title>標記
用來說明頁面的用途，顯示在瀏覽器的標題欄中。
位置：<head>……</head>之間
三、<meta>元信息
用來定義頁面信息的說明、關鍵字和刷新等，它不用結束標記。屬性有name和http-equiv。
1、設置頁面關鍵字
供搜索引擎使用
| 123456 | <html lang="en"><head>????<meta name="keywords" content="插入關鍵字" charset="utf-8">????<title>插入關鍵字</title></head></html> |
2、設置頁面說明
詳細說明網頁的內容
| 1 | <meta name="description" content="設置頁面說明" charset="utf-8"> |
3、定義編輯工具
設置網頁編輯工具名稱
| 1 | <meta name="generator" content="Pycharm" charset="utf-8"> |
4、設置作者信息
| 1 | <meta name="author" content="作者姓名" charset="utf-8"> |
5、設置網頁文字及語言
| 1 | <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
6、設置網頁定時跳轉
| 1 | <meta http-equiv="refresh" content="跳轉的時間; URL=跳轉的地址" charset="utf-8"> |
7、icon
| 123 | <head>????<link rel="shortcut icon" href="image/favicon.ico"></head> |
8、css文件
?9、js文件
四、主體標記<body>
1、背景色 bgcolor
默認顏色是白色或灰白色，bgcolor自定義背景顏色。
| 123 | <body bgcolor="背景顏色">……主體內容</body> |
2、背景圖片?backgroud
| 1 | <body backgroud="背景圖片"> |
3、文字顏色 text
| 1 | <body text="文字的顏色"> |
4、鏈接文字屬性 link
超鏈接的顏色默認是藍色，訪問后變成暗紅色。可以通過link修改：
| 1 | <body link="鏈接的顏色" alink="點擊后的顏色"> |
5、邊距 margin
設置頁面和瀏覽器邊框的距離
| 1 | <body topmargin=上邊距的值 leftmargin=左邊距的值> |
五、注釋標記
| 1 | <!-- 注釋的內容 --> |
文字與段落標記
一、標題
1、h標記
<h1>~<h6>，級別從最高到最低。
| 123456 | <body><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3>……</body> |
2、對齊方式 align
默認是左對齊，如更改，用align屬性。
left：左對齊
center：居中
right：右對齊
| 1 | <h1 align="center">一級標題居中對齊</h1> |
二、文本基本標記
<font>標記用來控制字體、字號和顏色等屬性。
1、字體屬性 face
| 123 | <body><p><font face ="字體樣式">……</font></p></body> |
2、字號屬性 size
| 1 | <font?size="文字字號">……</font> |
3、字體顏色 color
| 1 | <font color="字體顏色">……</font> |
三、文本格式化標記
1、字體加粗
| 12 | <b>加粗的文字</b><strong>加粗的文字</strong> |
2、斜體
| 123 | <i>斜體文字效果</i><em>斜體文字效果</em><cite>斜體文字效果</cite> |
3、上標?sup
如：平方、立方
sup是superscript的縮寫，在數學公式、日常計算應用、書記文章注解等有廣泛應用。可在文字的任何地方使用，允許嵌套。
| 12345 | <body><center>a<sup>2</sup>+b<sup>2</sup>=(a+b)<sup>2</sup>-2ab</center></body> |
結果：
4、下標sub
如：化學方程式
sub是subscript的縮寫，在數學公式、化學方程式有廣泛應用。
| 12345 | <body><center>H<sup>2</sup>SO<sup>4</sup> 化學方程式硫酸分子</center></body> |
結果：
5、增大一級字號
| 1 | <big>大字號內容</big> |
6、小字號標記
| 1 | <small>小字號內容</small> |
7、下劃線
| 1 | <u>下劃線內容</u> |
四、段落標記
1、段落p
| 1 | <p>段落文字 |
它沒有結束標記</p>，下一個<p>開始意味著上一個段落結束。
2、換行br
相當于windows的“\r\n”和linux的"\n"換行
| 1 | 文字內容<br>文字內容 |
3、不換行nobr
| 1 | <nobr>不換行的許多文字</nobr> |
五、水平線
1、插入水平線hr
| 1 | <hr> |
2、水平線寬度width
| 1 | <hr width="寬度"> |
3、水平線高度size
| 1 | <hr size="高度"> |
4、水平線去陰影noshade
布爾值，加上它，不會顯示例題形狀的水平線。瀏覽器默認是顯示一條立體形狀帶陰影的水平線。
| 1 | <hr noshade> |
5、水平線顏色color
| 1 | <hr color="顏色"> |
6、水平線排列 align
水平線默認是居中對齊，要想左對齊或右對齊，用align語法，該語法有3種：
center：居中
left：左對齊
right：右對齊
| 1 | <hr align="對齊方式"> |
六、其它標記
以&開頭，以；結束。
1、插入空格
| 1 | |
2、插入特殊符號
| “ | " |
| & | & |
| < | < |
> | > |
| × | × |
| § | § |
還有更多，參考博客http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html。
使用列表
一、列表類型
列表有三種：有序列表、無序列表和定義列表。
有序列表：項目符號由字母或數字進行排序；
無序列表：項目符號由幾個符號構成；
定義列表：靈活自定義。?
二、有序列表
1、有序列表標記?ol
| 12345 | <ol>????<li>有序列表項</li>????<li>有序列表項</li>????……</ol> |
2、有序列表序號類型 type
有序列表項目符號默認是數字，用type屬?性來改變成大小寫字母、阿拉伯數字和大小寫羅馬數字。
| type | 列表項目的序號類型 |
| 1 | 數字1、2、3、4…… |
| a | 小寫字母a、b、c、…… |
| A | 大寫字母A、B、C、…… |
| i | 小寫羅馬數字i、ii、iii、…… |
| I | 大寫羅馬數字I、II、III、…… |
| 12345 | <ol type="序號類型">????<li>有序列表項</li>????<li>有序列表項</li>????……</ol> |
3、有序列表的起始數值 start
默認是從1開始，用start屬性修改，也可以改動除數字的其它類型。
| 12345 | <ol start="起始數值">????<li>有序列表項</li>????<li>有序列表項</li>????……</ol> |
三、無序列表?
1、無序列表標記 ul
| 12345 | <ul>????<li>無序列表項</li>????<li>無序列表項</li>????……</ul> |
2、無序列表類型 type
| Disc | 默認值，黑色實心圓點項目符號“●” |
| circle | 空心圓環項目符號“○” |
| square | 正方形的項目符號“□” |
語法：?
| 12345 | <ul type="符號類型">????<li>無序列表項</li>????<li>無序列表項</li>????……</ul> |
四、定義列表?dl
dl英文全稱：definition list
dt英文全稱：definition term
dd英文全稱：definition description
| 12345 | <dl>????<dt>定義條件</dt>????????<dd>定義描述</dd>????……</dl> |
舉例：
| 12345678 | <body>????<dl>????????<dt>CSS</dt>????????????<dd>CSS 就是 Cascading Style Sheets,中文翻譯為“層疊樣式表”。</dd>????????<dt>Dreamweaver</dt>????????????<dd>Dreamweaver是網站編輯工具。</dd>????</dl></body> |
五、目錄列表?<dir>
用于創建多列的目錄列表，顯示效果與無序列表相同，它的功能也可通過無序列表實現?。
| 12345 | <dir>????<li>有序列表</li>????<li>無序列表</li>????<li>目錄列表</li></dir> |
六、菜單列表 <menu>?
用于設計單列的菜單列表，顯示效果與無序列表相同，它的功能也可通過無序列表實現?。
| 12345 | <menu>????<li>列表項</li>????<li>列表項</li>????……</menu> |
來自為知筆記(Wiz)
轉載于:https://www.cnblogs.com/daliangtou/p/5169171.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的WEB前端--HTML的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端ajax封装对象数组，后台的取法
- 下一篇： MYSQL创建多张表，相同表结构，不同表