1.html语法基本结构
<!DOCTYPE html> <!-- html为最大的根标签 --> <html lang="en"> <!-- 头部标签 --> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 标题标签 --> <title>Document</title> </head> <body> <!-- 文档主体 --> </body> </html>
2.页面举例
<html> <head> <title></title> </head> <body> <p>人生第一个html页面</p> </body> </html>
2.标题标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> </body> </html>
3.段落标签以及换行标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p></p> <!-- 段落标签 --> <br> <!-- 换行标签 --> </body> </html>
4.文本格式化标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <del>删除线</del> <s>删除线</s> <strong>加粗线</strong> <b>加粗线</b> <em>倾斜线</em> <i>倾斜线</i> <ins>下划线</ins> <u>下划线</u> </body> </html>
5.div和span标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>div和span标签</title> </head> <body> <div>我是一个div标签我一个人单独占一行</div> <div>我是一个div标签我一个人单独占一行</div> <span>百度</span> <span>新浪</span> <span>搜狐</span> </body> </html>
6.图像标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图像标签</title> </head> <body> <h4> 图像标签的使用:</h4> <img src="img.jpg"/> <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4> <img src="img1.jpg" alt="我是pink老师"/> <h4> title 提示文本 鼠标放到图像上,提示的文字:</h4> <img src="img.jpg" title="我是pink老师思密达" alt="我是pink老师"/> <h4> width 给图像设定宽度:</h4> <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500"/> <h4> height 给图像设定高度:</h4> <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" height="100"/> <h4> border 给图像设定边框:</h4> <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500" border="15"/> </body> </html>
7.路径
<img src="./img.jpg" /> //同级路径 <img src="images/img.jpg" /> //下一级路径 <img src="../img.jpg" /> //上一级路径 <img src="C:\Users\apple\Desktop\前端基础第一天-HTML\案例\img.jpg" /> //绝对路径
8.超链接标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>超链接标签</title> </head> <body> <h4>1.外部链接</h4> <a href="http://www.qq.com" target="_blank"> 腾讯</a> target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面 <a href="http://www.itcast.cn" target="_blank">传智播客</a> <h4>2.内部链接: 网站内部页面之间的相互链接</h4> <a href="gongsijianjie.html" target="_blank">公司简介</a> <h4>3.空链接:#</h4> <a href="#">公司地址</a> <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4> <a href="img.zip">下载文件</a> <h4>5.网页元素的链接</h4> <a href="http://www.baidu.com"><img src="img.jpg"/></a> </body> </html>
9.特殊字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 我想喝手磨咖啡 --> 讲 究 <!-- <p> 是一个段落标签 --> < p > 是一个段落标签 </body> </html>
10.锚点定位
<a href="#box1">我跳到box1</a> <a href="#" name="#box2">我跳到box2</a> <div id="box1"></div> <div id="box2"></div>
