一、初識html
起始標記
<>
結束標記
</>標籤的作用就是告訴瀏覽器內容的起始和結束的位置
二、html基礎模板
<!-- 不是標籤 告訴瀏覽器使用html5的標準解析這個文件 -->
<!doctype html>
<!-- html標籤代表的就是整個html文檔 -->
<html>
<!-- 代表整個html文檔的頭部 -->
<head>
<meta charset="utf-8"/>
<!-- 代表網頁的標題，可以顯示在瀏覽器的選項卡中 -->
<title>hello</title>
</head>
<!-- 展示網頁的內容 -->
<body>
你好呀.
</body>
</html>三、html基礎標籤
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>基礎標籤</title>
</head>
<body>
<!-- h1標籤可以作爲整個網頁內容的標題，一般一個網頁只有一個h1 -->
<h1>寶寶離婚了</h1>
<h2>寶寶離婚了</h2>
<h3>寶寶離婚了</h3>
<h4>寶寶離婚了</h4>
<h5>寶寶離婚了</h5>
<h6>寶寶離婚了</h6>
<!-- 段落：每一段文字都是一個p標籤-->
<p>寶寶心裏苦，但是寶寶不說，現在寶寶說了，寶寶要離婚。寶寶不知道寶寶的寶寶是不是寶寶的寶寶</p>
<!-- 文字的容器：用來展示文字 -->
<span>我是span標籤</span>
<!-- 容器 -->
<div>我是div標籤</div>
<!-- b,strong,em,i標籤都是用來展示文字的，其中b,strong標籤是加粗效果i,em是斜體效果 -->
<b>我是b標籤</b>
<strong>我是strong標籤</strong>
<i>我是i標籤</i>
<em>我是em標籤</em>
<!-- a鏈接標籤，錨點；href是a標籤的屬性 -->
<!-- href屬性：①網址；②寫自己的html文件；③#（佔位符）
target="_blank"可設置鏈接在新窗口打開，默認是在原來的窗口打開-->
<a href="http://www.baidu.com" target="_blank" title="去百度呀">百度</a>
<!-- src:①給圖片的url；②給本地圖片的路徑
相對路徑:從本html所在的位置（文件夾）查找；../代表返回上一層文件夾
絕對路徑:從根目錄查找
alt屬性：①作用是文本替代方案；②可以讓搜索引擎收錄圖片的時候檢測到我們圖片的內容；③對seo有一定的優化作用
title：鼠標懸浮在標籤上面的時候會有一個提示 -->
<img src="http://www.wallcoo.com/paint/space_1600/wallpapers/1440x900/wallcoo.com_Space_Art_wc.jpg" alt="星空" />
<img src="/Users/lanou/Desktop/12班H5學習/HTML基礎/1、XHTML基礎/yuzhou.jpg" alt="星空" />
<!-- 分割線 -->
<hr/>
<!-- 換行 -->
<br/>
</body>
</html>四、html標籤特性和CSS樣式
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>標籤特性和CSS樣式</title>
</head>
<body>
<!-- css樣式引入
1、行間樣式 -->
<div style="background:red;width:200px;height:100px">我是div</div>
<div>我是div2</div>
<!-- img標籤也可以改變寬和高
第一種：通過行間樣式在style屬性裏面寫width:200px
第二種：通過img標籤的width屬性直接給寬和高（一般使用第二種） -->
<img width="300" src="yuzhou.jpg" alt="宇宙"/>
<!-- 行級標籤：(display:inline)span，a，img，b，i，em，strong，br可以與行級同行顯示，寬高不能改變，只能由內容決定
塊級標籤：(display:block)div，p，h1~h6，hr獨佔一行，高度由內容決定，寬度繼承父級 -->
<!-- display 可以改變標籤的特性inline代表行級；block代表塊級，行塊可以互換
display:inline-block 晚自習自測-->
<div style="background:blue;">測試div的特性</div>
<div style="background:grey;display:inline;">我是塊級div</div>
<span style="background:orange;display:block;">我是行級span</span>
<!-- css文本樣式、邊框 -->
<div style="color:red">文字顏色</div>
<div style="font-size:30px;">文字大小</div>
<div style="text-indent:20px;">文本縮進</div>
<div style="text-align:center;">對齊方式</div>
<!-- 行高 line-height：當行高和容器的高度一樣時，就可讓文字在容器裏豎直方向居中（僅限於單行文字） -->
<div style="color:white;background:blue;width:300px;height:100px;text-align:center;line-height:100px;">行高</div>
<div style="">邊框</div>
</body>
</html>