目录
一、HTML基本结构
<!DOCTYPE html>
<!-- 文档申明告诉浏览器以html5的方式解读 -->
<html>
<head>
<!-- 申明编码方式 -->
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>小结：
1.html语言中有单标记和双标记，单标记一开始就结束了。
2.<!DOCTYPE html> 文档申明告诉浏览器以html5的方式解读
3.html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
二、HTML标签
01.标题标签
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
02.段落标签
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
HTML是 HyperText Mark-up Language 的首字母简写，
意思是超文本标记语言，超文本指的是超链接，
标记指的是标签，是一种用来制作网页的语言，
这种语言由一个个的标签组成，
用这种语言制作的文件保存的是一个文本文件，
文件的扩展名为html或者htm，一个html文件就是一个网页，
html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，
如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，
显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
<p>
HTML是 HyperText Mark-up Language 的首字母简写，
意思是超文本标记语言，超文本指的是超链接，
标记指的是标签，是一种用来制作网页的语言，
这种语言由一个个的标签组成，
用这种语言制作的文件保存的是一个文本文件，
文件的扩展名为html或者htm，一个html文件就是一个网页，
html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，
如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，
显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
</body>
</html>
03.换行标签
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
HTML是 HyperText Mark-up Language 的首字母简写，
意思是超文本标记语言，超文本指的是超链接，<br />
标记指的是标签，是一种用来制作网页的语言，<br />
这种语言由一个个的标签组成，<br />
用这种语言制作的文件保存的是一个文本文件，<br />
文件的扩展名为html或者htm，<br />一个html文件就是一个网页，<br />
html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，<br />
如果用浏览器打开，<br />浏览器会按照标签描述内容将文件渲染成网页，<br />
显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
</body>
</html>
04.html字符实体
1>&nbps
在代码中空多个空格，在渲染成网页时只会显示一个空格.同时如果直接是没有使用<br/>进行换行的直接以enter换行的解释器将直接将他们连接而不显示换行也不显示空格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
HTML是 HyperText Mark-up Language 的首字母简写 (前面隔了一个空格) (前面隔了两个空格) (前面隔了三个空格)
</body>
</html> 
如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
</body>
</html>
2>> <
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
这个是大于号>
这个是小于号<
</p>
</body>
</html>
05.html块标签、含样式的标签
1>html块标签
1、<div> 标签 块元素，表示一块内容，没有具体的语义。
2、 <span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
2>含样式和语义标签
1、<em> 标签 行内元素，表示语气中的强调词
2、<i> 标签 行内元素，表示专业词汇
3、<b> 标签 行内元素，表示文档中的关键字或者产品名
4、<strong> 标签 行内元素，表示非常重要的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<em>语义化的</em>标签，<br>
<i>就是在布</i>局的时候多使用有语义的标签，<br>
<b>搜索引擎</b>在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。
比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，<br>
<strong>a标签表示</strong>链接，dl、dt、dd表示定义列表等，语义化的标签不多
</p>
</body>
</html>
3>语义化标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
06.图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
src属性 定义图片的引用地址
alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../images/002.jpg" alt="水果图片">
<img src="../images/003-02.gif" alt="这个是动态图片">
</body>
</html>
注意：../表示路径为上一级文件，./代表本级
07.html链接标签
<a>标签可以在网页上定义一个要跳转的链接地址，它的常用属性有：
属性：
1.href属性定义跳转的地址
2.title属性定义鼠标悬停时弹出的提示文字框
3.target属性定义链接窗口打开的位置target="_self" 缺省值，新页面替换原来的页面，在原来位置打开target="_blank" 新页面会在新开的一个浏览器窗口打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接</title>
</head>
<body>
<h1>网页的标题</h1>
<a href="./01html文档结构.html">01html文档结构.html</a>
<a href="http://www.itcast.cn", title="去到传智的网站"><img src="../../../images/logo.png" alt="传智网站"></a>
<a href="http://www.itcast.cn", title="去到传智的网站", target="_self"><img src="../../../images/logo.png" alt="传智网站"></a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#">缺少的链接会自动跳到顶部</a>
</body>
</html>
<!--
target="_self"默认本页面跳转 "_blank"另外再开一个页面
-->设置title="跳转到传智播客网站"鼠标悬停时的文字框示例：
<a href="http://www.itcast.cn", title="去到传智的网站", target="_self"></a>
注意：<a href="#">缺少的链接会自动跳到顶部</a>
08.HTML列表标签
列表标签为ul无序 ol有序,其子级都为li
1>有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：
<ol>
<li>html</li>
<li>python</li>
<li>java</li>
</ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
2>无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
<ul>
<li><a href="#">新闻标题1</a></li>
<li><a href="#">新闻标题2</a></li>
<li><a href="#">新闻标题3</a></li>
</ul>
3>案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>无序列表</h1>
<ul>
<li><a href="#">新闻标题1</a></li>
<li><a href="#">新闻标题2</a></li>
<li><a href="#">新闻标题3</a></li>
</ul>
<h1>有列表</h1>
<ol>
<li>html</li>
<li>python</li>
<li>java</li>
</ol>
</body>
</html>
<!--
列表分为有序和无序：
ul---无序
ol---有序
里面的子标签li
--> 
4>定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>前端三大块</h1>
<dl>
<dt>html </dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
</body>
</html> 
三、预告和心得
就目前而言所学的比较基础需要进行强化和记忆，同时下一个将会加大难度。
追寻光，成为光，发散光。
四、总结
本博客讲解了
1.html的基本框架
2.h1-h6，<p></p>,<br/>(注意双标签<p></p>单标签<br/>)
3.> < &nbps;
4.<em></em>倾斜 <strong></strong>加粗
5.<img src="", alt=""> 标签里面的不同属性可以空格隔开也可以逗号隔开; <a href="http://www.itcast.cn", title="去到传智的网站", target="_self"></a>
6.<ul><li></li></ul>;<ol><li></li></ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="./1.png" alt="这个是动态图片">
<ol>
<li>html</li>
<li>python</li>
<li>java</li>
</ol>
<ul>
<li>h1</li>
<li>h2</li>
<li>h3</li>
</ul>
<p>
这个是一个段落哈哈哈
颠三倒四辅导辅导费的范德萨范德萨范德萨范德萨范德萨发生的
大师的撒的萨达是的撒多岁的萨达的挥洒的好时机独山大道
</p>
<p>
这个是一个段落&nbps;哈哈哈
颠三倒四辅导辅导费的范>德萨范德萨范德萨范德萨范德萨发生的<br/>
大师的撒的萨达是的撒多岁的萨达的挥洒的好时机独山大道这个是一个段落哈哈哈
颠三倒四辅导辅导费的范<德萨范德萨范德萨范德萨范德萨发生的
大师的撒的萨达是的撒多岁的萨达<em>挥洒</em>的的好时机独山大道这个是一个段落哈哈哈<br/>
颠三倒四辅导辅导费的范德萨范德萨范<strong>德萨范</strong>德萨范德萨范德萨发生的
大师的撒的萨达是的撒多岁的萨达的挥洒的好时机独山大道这个是一个段落哈哈哈
颠三倒四辅导辅导费的范德萨范德萨范德萨范德萨范德萨发生的
大师的撒的萨达是的撒多岁的萨达的挥洒的好时机独山大道
</p>
<a href="https://www.cnblogs.com/alex3714/articles/5465198.html#!comments" title="百度" target="_blank">wangzhan</a><!-- 在新窗口打开 -->
<br>
<a href="https://www.cnblogs.com/alex3714/articles/5465198.html#!comments" title="百度" target="_self">wangzhan</a><!-- 在本窗口打开 -->
<img src="./1.jpg" alt="图片">
</body>
</html>
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
