HTML的基本結構與標籤的初步了解
- 巴扎黑原創
- 2017-06-23 14:51:112324瀏覽
一、初步了解HTML
HTML是超文本標籤語言，瀏覽器則是用來「解釋和執行」HTML原始碼的工具。
HTML的基本結構
#
nbsp;html><meta><title></title>
##
其中是文檔類型聲明，聲明這個文件必須是HTML5文件，讓瀏覽器按照HTML5準備進行解析，必須在HTML5中，必須要有，且是一定要寫在文件的最上方滴。
<span style="font-size: 16px"><span style="font-family: 宋体"> 是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。</span>。</span><span style="font-size: 18px"><span style="font-size: 16px">。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！</span><br></span>
<span style="font-family: 宋体; font-size: 16px"> 则是所有的代码都写在其中。<br><span style="font-size: 18pt; background-color: #cc99ff">二、初步了解标签<br></span></span>1、頭部部分
链接网页的小图标，网页选项卡上面的小图片
其中rel="icon"表示目前link的作用是連結網頁圖示
href="img/ss.gif "表示圖示的位址所在的位置<link>
2)meta:用來描述網頁的各種資訊
<span style="font-family: 宋体; font-size: 16px; background-color: #ffffff"><span style="font-family: 宋体"><span style="line-height: 36px"><span style="color: #ff6600; background-color: #ffffff">①</span>其中<meta charset="utf-8">设置网页的编码格式为utf-8格式<br>常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文<br><span style="color: #ff0000">utf-8：万国码，兼容各种语言编码，常用！<br></span></span></span></span><br>
<meta>
<br>②
<meta># ########③###設定網頁的詳細信息，搜尋引擎時標題下面的一段文字！ ###############name="description" 表示這個meta標籤設定的是網頁的描述資訊；######### content="" 表示描述資訊的詳細內容！ ！ ######
<br>###
<meta>###
<br>
2、主体部分
1）标签的分类
①块级标签：显示为块状，独占一行，自动换行。<br>②行级标签：在一行中，从左往右依次排列，不会自动换行。
2）块级标签
常见的块级标签有：
a.标题标签：...... 特点:h1最大，h6最小且自动加粗。
b.水平线标签：
c.段落标签：
d.换行标签：<br>
e.引用标签：<br> 要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示，浏览器一般显示为首行缩进
f.预格式标签：<br> 浏览器默认显示样式：①显示为等宽字体
②代码中的换行，空格等元素可在浏览器中直接显示。<br>
nbsp;html><meta>HTML基本块级标签 这是h1标签
这是h2标签
这是h3标签
这是h4标签
这是h5标签
这是h6标签
这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！ 哈哈啊哈哈哈啊哈哈哈哈啊哈！<br>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
if(entity != null){ tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型 jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型 }光明正大的不要脸！这段话就是抄的！你能咋地！
g.有序列表<br>
- （order list）<br>
- ... 列表项可以有n多个<br>
- ... <br>
- ... <br>
h.无序列表<br>
- (unorder list)<br>
- ... n多个<br>
- ... <br>
- ... <br>
i.定义描述列表<br>
-
<br>
- 一般只有一项 （列表标题）<br>
- 可以有很多项 （列表描述项）<br>
- 132 <br>
- 123 <br>
g.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。<br> 图片<br>
k.分区标签
可以包裹任何标签，也可以被包裹进任何标签。
nbsp;html><meta>HTML基本块级标签
- 这是无序列表第一项
- 这是无序列表第二项
- 这是无序列表第三项
- 这是无序列表第四项
- 这是无序列表第一项
- 这是无序列表第二项
- 这是无序列表第三项
- 这是无序列表第四项
- 这是dl列表的标题
- 这是dl列表的描述项1
- 这是dl列表的描述项2
- 这是dl列表的描述项3
11111
3)行級標籤
常見的行級標籤：
（1）文字標籤span
① span標籤只是包裹作用，沒有其他意義；<br> ② span作用與div類似，需配合CSS使用。只不過div是塊級標籤、span是行級標籤
<br>（2）強調標籤em與strong；傾斜標籤i；加粗標籤b；四之間的區別
① em和i都能傾斜。 strong和b都能加粗！但是，i和b只是單純的傾斜加粗，而em和Strong多了強調的語意。 <br> ② em和strong都表示強調，但strong強調的等級更高！ ！ <br> 注意：<br> 1、強調的目的：讓搜尋引擎知道網頁重點強調的內容！方便搜尋引擎顯示！ <br> 2、Strong和em都可以多層嵌套，表示強調程度的遞增！
（3）短引用標籤q：表示短引用 。 cite屬性：用於宣告引用的來源。
【常用的引用標籤】<br> 用來引用一段內容
<br> 用來引用一句話
<br> 常用來引用作品名、書名等 <br><br> 相同點：三個引用標籤，都用cite屬性表示引用來源<br> 不同點：① 引用的內容不同。 blockquote->一段話，q->一句話，cite->作品名<br>② 顯示的預設效果不同。 blockquote-> 預設整段向右縮排； q->預設加引號； cite->預設傾斜！
（4）縮小標籤small：將字體縮小一號；big標籤：將字體放大一號。
注意：<br> ① small和big可以多層嵌套，直到字體達到最小或最大為止；<br> ② 這兩個標籤已經被淘汰，不建議使用。
（5）圖片標籤img
① src屬性：表示圖片的路徑<br> [圖片路徑的合法方式]<br>A.網路連結：由於圖片在其他網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式；<br> 
<br>B.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協定才能存取！所以，嚴禁使用這種方式！ <br>
<br>C.相對路徑：<br>a、 圖片與目前文件在同一層資料夾：直接寫圖片名稱<br> <br>b、圖片在目前文件的下一層資料夾：資料夾名稱/圖片名稱<br> <br>c、 圖片在目前文件的上一層資料夾： ../圖片名稱(../表示後退一層)<br> 
<br>但是，一定要注意：圖片必須包含在專案裡面，不能存取項目外的圖片。 <br><br><br>② height:圖片的高度 width：圖片的寬度<br> 
<br><br> ③ title：圖片的標題，也就是滑鼠手指後看到的提示文字<br># < ;img src="img/icon.jpg" title="滑鼠指上後看到的提示文字" /><br><br> ④ alt: HTML的基本結構與標籤的初步了解<br> <br><br>## ⑤ align：圖片周圍的文字相對於圖片如何對齊。 <br> 可選值：top->圖片頂部 center->圖片中間bottom->圖片底部<br> 12345
#（6）超連結標籤a
##A、href屬性：表示超連結跳轉的頁面。① 可以寫網址：<br> 這是超連結 a><br>
② 可以開啟本機的html檔案：<br>使用相對路徑決定檔案位址。與img標籤確定方式相同。 <br> 這是一個超連結<br>
B、title屬性：滑鼠指上後顯示的提示文字<br> 這是一個超連結<br> C、target属性：设置新页面打开的窗口位置<br> 可选值：_self自身页面打开（默认）<br> _blank 新窗口打开<br> 这是一个超链接 <br><br>【超链接的特殊应用】<br> 1、功能性链接：（了解）<br> mailto:// 点击链接给指定邮箱发送邮件<br> 点击发送邮件<br>tencent://message/?uin=1105093212"<br>还有：tell://手机端点击打电话<br>message://手机端点击发送短信<br>ftp://使用ftp协议进行文件的上传下载<br>2、锚点链接：<br> >>>本页面锚链接<br> ① 在页面的指定位置中设置一个锚点，用那么属性表示锚点名字：<br> a name="top">
nbsp;html><meta>HTML基本行级标签 糖糖真帅！！！<br> 这是em标签<br>这是strong标签<br>这是i标签<br>这是b标签<br>这是b标签<br>我是q标签引用我是blockqoute的引用！！！！！我是cite标签的引用！！<br> 我比正常小两号<br>我比正常大一号<br>12345 -->
12345 点击发送邮件点击123
4）块级标签与行级标签的区别
1、块级标签：默认宽度100%(占满一行)；<br> 块级标签自动换行(独占一行，右边不能有任何东西)；<br> 块级标签可以使用CSS设置宽度高度！<br><br> 2、行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；<br> 行级标签不会自动换行(一行当中，从左往右依次排列)；<br> 行级标签的宽度高度不能设置！
5）表格
（1）表格table
表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示<br><br> th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。<br><br>（2）table的常用属性<br>A、border：给表格加边框。 默认给所有td加边框，并且给整个table加外边框。 当增大border的值时，td上的边框不变化，只有最外层大边框变宽。<br><br>B、cellspacing：单元格与单元格之间的距离。<br> cellspacing="0" 表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。<br><br> [注意] 表格边框合并的CSS写法：<br> style="border-collapse: collapse;"<br><br>这条CSS与cellspacing="0"有什么区别？<br> cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线；<br> border-collapse: collapse; 是将表格相邻的两条边框进行合并处理，只有一条线存在。(一旦边框合并，cellspace属性将会失效。)<br><br><br>C、cellpadding：单元格中的文字与单元格边框的距离。<br><br>D、 height：表格的高度<br> width：表格的宽度<br><br> 使用表格宽、高属性设置大小：<br>
<br><br> 使用CSS样式设置大小：<br>
<br><br><br>E、align：设置表格在浏览器中的位置。不建议使用了。<br> 可选值：left 表格居左 /center 表格居中/right 表格居右<br><br><br>F、bgcolor：背景色<br> bordercolor:边框颜色<br> background:背景图 background="img/computer.jpg" <br> 背景色和背景图同时存在时，背景图会覆盖背景色<br><br><br>（3）tr与td常用属性<br>A、width：单元格宽度<br> height：单元格的高度<br><br>B、bgcolor： 单元格的颜色<br><br>C、align:设置单元格中的文字，水平对齐方式。<br> left、center、right<br> valign:设置单元格中的文字，垂直对齐方式。<br> top、middle、bottom<br><br>D、 nowrap="nowrap" 当单元格文字过多时，设置单元格文字不断行显示。 但是，会把表格的宽度撑大!!!<br><br><br>（4）表格的跨行与跨列<br><br>①跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。<br><br>②跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。
nbsp;html><meta>表格
| 标题一 | 标题二 | |
|---|---|---|
| 1-1 | 1-2 | 1-3 |
| 2-2 | 2-3 |
三、寫在後面的話
第一次接觸博客，第一發文內心還是有些小激動的，對於剛接觸不久程式碼的我，就覺得程式碼是個神奇的地方，而且既神奇又覺得很好玩。
之前就一直覺得這些東西很深奧，感覺是我所觸及不到的，但是當我接觸到後，還是挺喜歡的。
最後請各位多多關照。
#
##
#
以上是HTML的基本結構與標籤的初步了解的詳細內容。更多資訊請關注PHP中文網其他相關文章！