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