Html（二）：基本框架
<!DOCTYPE html> <!--！号表示声明的意思--> <html lang="en"> <!--1头部，主要完成一个网页相关设置--> <head> <meta charset="UTF-8"><!--汉子呢编码--> meta:元 主要用来完成相应的设置 <meta name="keywords" content=""><!--设置网站搜索关键字--> <meta name="description" content=""><!--网站的描述--> <title>我的第一个网页</title><!--设置网站标签--> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--设置网站图标--> </head> <body> <!--1：div：用来布局的，没有具体含义，层--> <div> abc <div>ade</div> </div> <!--2:hx:标题，从1级到6级，1级最大，6级最小，会自动加粗，有默认字号--> <h1>一级标题</h1> <h2>二级标题</h2> <h6>六级标题</h6> <!--3：p：标签，表示段落。相当于一个回车，代表一个整体段落，换行作用--> <P>P标签练习</P> <!--4：br:表示换行,单标签--> 虽然偶尔会跑跑步，但如今腿越发追赶不上嘴的频率，体重不断上涨。想了又想最终决定在公司附近的一家健身房办张卡<br />虽然偶尔会跑跑步，但如今腿越发追赶不上嘴的频率，体重不断上涨。想了又想最终决定在公司附近的一家健身房办张卡 <br />虽然偶尔会跑跑步，但如今腿越发追赶不上嘴的频率，体重不断上涨。想了又想最终决定在公司附近的一家健身房办张卡 <!--5: hr:生成一条水平线，主要起装饰作用，单标签--> <hr> <hr width="80" align="center" color="red" height="2px"><!--属性设置宽度80% 对其方式 颜色 高度2像素--> <!--6：a:实现链接跳转，href跳转链接 title提示文字 target：_blank新建窗口打开，_self....--> <a href="https://baidu.com" title="百度">百度</a> <a href="Html标签学习.html" target="_blank">文档链接</a> <!--7: img:加载外部图片,src用来设定加载图片或者图像路径,alt当图片加载不成功时的提示文字，title鼠标移动上面提示文字--> <IMG src="https://pic.cnblogs.com/face/1512305/20190107155201.png" alt="加载失败" title="图片"> <!--8:span：作用和div一样，都是用来布局的div单独占一行，span不会,主要用于行内布局--> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> <!--9:ul/ol:列表，前者是无序列表，后者是有序列表，他们的列表内容都用的是li标签--> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <ol> <li>ol1</li> <li>ol2</li> <Li>ol3</Li> </ol> <!--10:注释的快捷键是Ctrl+shit+/--> </body> </html>
<!DOCTYPE html> <!--！号表示声明的意思-->
<html lang="en"><!--1头部，主要完成一个网页相关设置-->
<head>
<meta charset="UTF-8"><!--汉子呢编码--> meta:元 主要用来完成相应的设置
<meta name="keywords" content=""><!--设置网站搜索关键字-->
<meta name="description" content=""><!--网站的描述-->
<title>我的第一个网页</title><!--设置网站标签-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--设置网站图标-->
</head>
<body>
<!--1：div：用来布局的，没有具体含义，层-->
<div>
abc
<div>ade</div>
</div>
<!--2:hx:标题，从1级到6级，1级最大，6级最小，会自动加粗，有默认字号-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<!--3：p：标签，表示段落。相当于一个回车，代表一个整体段落，换行作用-->
<P>P标签练习</P>
<!--4：br:表示换行,单标签-->
虽然偶尔会跑跑步，但如今腿越发追赶不上嘴的频率，体重不断上涨。想了又想最终决定在公司附近的一家健身房办张卡<br />虽然偶尔会跑跑步，但如今腿越发追赶不上嘴的频率，体重不断上涨。想了又想最终决定在公司附近的一家健身房办张卡
<br />虽然偶尔会跑跑步，但如今腿越发追赶不上嘴的频率，体重不断上涨。想了又想最终决定在公司附近的一家健身房办张卡
<!--5: hr:生成一条水平线，主要起装饰作用，单标签-->
<hr>
<hr width="80" align="center" color="red" height="2px"><!--属性设置宽度80% 对其方式 颜色 高度2像素-->
<!--6：a:实现链接跳转，href跳转链接 title提示文字 target：_blank新建窗口打开，_self....-->
<a href="https://baidu.com" title="百度">百度</a>
<a href="Html标签学习.html" target="_blank">文档链接</a>
<!--7: img:加载外部图片,src用来设定加载图片或者图像路径,alt当图片加载不成功时的提示文字，title鼠标移动上面提示文字-->
<IMG src="https://pic.cnblogs.com/face/1512305/20190107155201.png" alt="加载失败" title="图片">
<!--8:span：作用和div一样，都是用来布局的div单独占一行，span不会,主要用于行内布局-->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
<!--9:ul/ol:列表，前者是无序列表，后者是有序列表，他们的列表内容都用的是li标签-->
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>ol1</li>
<li>ol2</li>
<Li>ol3</Li>
</ol>
<!--10:注释的快捷键是Ctrl+shit+/-->
</body>
</html>
浙公网安备 33010602011771号