1.基本结构：
<html> //文件开始标志，表示网页文档的开始
<head> //文件头，标题，主题
............ //文件头内容
<meta charset="utf-8"> //网页的编码
</head> //文件头结束标记
<body> //文件主体开始标志
............. //文件主体内容
</body> //文件主体结束
</html> //文件结束标志
<!-- --> //注释
2.HTML标题标签
（1）<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
<body>
<h1>个人主页</h1> //字体由大到小，带有间距
<h2>登录</h2>
<h3>登录</h3>
<h4>登录</h4>
<h5>登录</h5>
<h6>登录</h6>
</body>
（2）<p></p>
<body>
<h1>html基本结构</h1>
<p>
超文本标记语言，标准通用标记语言下的一个应用。
<br />“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
<br />超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
// <br />：换行
</p>
<p>10>5</p> //大于小于，段落间有间距
<p>10 > 5</p>
<p>10<5</p></body>
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
3.语义标签
（1）<div>标签 块元素，表示一块内容，没有具体的语义。
<div>
超文本标记语言，标准通用标记语言下的一个应用。
<br />“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
<br />超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
</div>
<div>
<div>
<h1>div标签</h1>
</div>
<div>超文本标记语言</div>
</div>
//<div>表示块，块与块之间没有间距，可以嵌套，而<p>不可以嵌套，（2）<span>标签 行内元素，表示一行的一小段内容，没有具体的语义。
4.图片标签
<p>
<span>超文本标记语言，标准通用标记语言下的一个应用。</span>
// <span> ：能在<p>里的某一段设置一个样式，本身不带有样式
</p>（3）含样式和语义的标签
<em>标签行内元素，表示语气中的强调词，斜体
<i> 行内元素，表示专业词汇，斜体
<b>行内元素，表示加粗，关键词
<strong>行内元素，表示非常重要的内容，整体加粗
<p>
<span><b>超文本标记语言，标准通用标记语言下的一个应用。</b></span>
<br /><strong>“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
<br />超文本标记语言的结构包括“头”部分（英语：<em>Head</em>）、和“主体”部分（英语：<i>Body</i>），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容</strong>
</p>
**（4）语义化的标签**
就是布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，如：h1表示标题，p表示段落，ul,li表示列表，a表示链接，dl,dt,dd表示定义列表（5）图片标签
src属性定义图片的引用地址
alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会使用
<img src="image/路飞1.jpg" alt="我要成为海贼王的男人" />
<img src="image/biu.gif" alt="邓紫棋.gif" />
<img src="C:\Users\雄少\Pictures\ps\新建文件夹\like.gif" alt="比个like你" />
//相对路径： ./表示当前目录，可以省略 ../表示上一级目录
//绝对路径：最好用相对路径，在别的地方也可以用
5.HTML链接标签
（1）<a>标签可以在网页上定义一个链接地址，它的常用属性有
href属性 定义跳转的地址
title属性 定义鼠标悬停时弹出的提示文字框
target属性 定义链接窗口打开的位置，target=“_self"缺省值，新页面替换原来的页面，在原来位置打开，target="_blank"新页面会在新开的一个浏览器窗口打开
<img src="image/路飞1.jpg" alt="我要成为海贼王的男人" />
<img src="image/biu.gif" alt="邓紫棋.gif" />
<img src="C:\Users\雄少\Pictures\ps\新建文件夹\like.gif" alt="比个like你" />
<a href="link.html" target="_self">主页</a> -
<a href="https://www.ishuhui.com/comics/anime/1" title="鼠绘网站" target="_blank">
<img src="image/海贼王.jpg" alt="海贼王logo">
</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#">回到顶部</a>
**6.HTML列表**（1）有序列表：<ol>
<li></li>
</ol>
//快捷写法：ol>li*3
（2）无序列表：<ul>
<li></li>
</ul>
//快捷写法：ul>(li>a)*3
<h1>有序列表</h1>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li><a href="http://sports.qq.com/nba/" target="_blank">腾讯NBA</a></li>
<li><a href="https://v.qq.com/" target="_blank">腾讯视频</a></li>
<li><a href="https://movie.douban.com/" target="_blank">豆瓣电影</a></li>
</ul>（3）定义列表：通常用于术语的定义。<dl>表示列表的整体，<dt>表示术语的题目，<dd>表示术语的解释，一个dl可以有多高题目和解释
<dl>
<dt>html</dt>
<dd>负责页面结构</dd> //首行缩进
<dt>css</dt>
<dd>负责页面表现</dd>
<dt>javascript</dt>
<dd>负责页面行为</dd>
</dl>
*//简写：dl>(dt+dd)3**
转载于:https://blog.51cto.com/13742773/2332343
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
