概述和介绍
html 的文档格式有三种 html4 html5 和 xhtml 在创建的时候可以进行选择 html5 新增了标签元素以及元素属性
HTML 语言是HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记值得是标签，
是一种用来制作网页的语言，保存的格式是一个html或者htm结尾的文本文件，一个hetml文件就是一个网页，html用文件编辑器
打开显示的是文本，用浏览器打开，渲染后显示的是网页。显示的网页可以从一个网页链接跳转到另外一个网页。
xhtml 就是多了一些相关的注释，没有本质的区别
html 的注释 <!-- -->
html 标题标签
通过 <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 标签可以在页面上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，
比如说：<h1> 用作主标题，其后是<h2>,再其次是<h3>，以此类推，搜索引擎会使用标题将网页的结构和内容编制索引，所以
网页上使用标题是很重要的。 <body> 不同的标签代表不同大小的字体 h是不同标签的大小
# 展示出body中的内容，空格不会被识别，都是顶格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>personal_page</title>
</head>
<body>
<!-- html comment -->
hello,this is Habby_yang's personal page!
</body>
</html>
# 展示h1到h6不同级别的大小不一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>personal_page</title>
</head>
<body>
<!-- this is comment -->
<!-- hello,this is Habby_yang's personal page! -->
<h1>level 1 page</h1>
<h2>level 2 page</h2>
<h3>level 3 page</h3>
<h4>level 4 page</h4>
<h5>level 5 page</h5>
<h6>level 6 page</h6>
</body>
</html>
html 段落标签 换行标签 字符实体
html 段落标签
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开 放在 body 中
<p></p> paragraph
标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
html 字符实体
html 中的空格 大于号 小于号 的需要使用 > < 来表示，空格不能被之间识别 > < 会被误认为是标签
两个 代表大约一个空格 但不是很精确 多个空格需要使用样式来实现
换行标签是 <br />
首行空格可以使用 ; ; 来实现
# 段落标签的样例 body 里面的间隔可以自行调整 首行空格可以使用 来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paragraph</title>
</head>
<body>
<h>paragraph_label</h>
<p> HTML 语言是HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，<br />
超文本指的是超链接，标记值得是标签，是一种用来制作网页的语言，保存的格式是一个html<br />或者htm结尾的文本文件，
一个hetml文件就是一个网页，html用文件编辑器,打开显示的是文本，<br />用浏览器打开，渲染后显示的是网页。
显示的网页可以从一个网页链接跳转到另外一个网页</p>
<p>aaaaaaa aaaaaaaaaaaaa<br />
10 > 8 <br />
1000 < 10000
</p>
</body>
</html>
html 块标签 含样式的标签
html 标签
1 <div> 标签 块元素，表示一块内容，没有具体的语义 多个p标签之间默认有空行，多个div标签之间默认没有空行
2 <span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义
含样式和语义的标签
1 <em>标签 行内元素，表示语气中的强调词
2 <i>标签 行内元素，表示专业词汇
3 <b>标签 行内元素，表示文档中的关键字或者产品名
4 <strong>标签，行内元素，表示非常重要的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paragraph</title>
</head>
<body>
<b>my action brings my confidence.</b><br/>
<i>my action brings my confidence.</i><br/>
<em>my action brings my confidence.</em><br/>
<strong>my action brings my confidence.</strong><br/>
<p>my action brings my confidence.</p>
<div>my action brings my confidence.</div>
<span>my action brings my confidence.</span>
</body>
</html>
语义化 的标签：在布局的时候使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。
比如： h1标签表示标题，p标签表示段落，ul li 标签表示列表，a标签表示链接 dl dt dd 表示定义列表等，语义化的标签不多。
html 图像标签、绝对路径和相对路径
html 图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，他的使用属性有：
src属性 定义图片的引用地址
alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片，盲人读屏软件会读取这个文字让盲人识别图片，
所以此属性非常的重要
<img src='images/pic.jpg' alt="产品图片">
相对路径和绝对路径
相对路径在整体文件夹迁移的时候不会担心因为路径变更找不到文件
sublime 添加插件 AutoFileName 才能自动补图片地址
# 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get_pictures</title>
</head>
<body>
<img src="/home/habby/bj19/test2/booktest/static/images/habby.jpeg" alt="habby's pictures" />
<img src="/home/habby/bj19/test2/booktest/static/images/mm.jpg" />
</body>
</html>
html 链接标签
<a> 标签表示这是一个链接地址：
href 属性定义跳转的地址
title 属性定义鼠标悬停时弹出的提示文字框
target 属性 定义链接窗口打开的位置
target="_self" 默认值，新页面替换原来的页面，在原来位置打开
target="_blank" 新页面汇总新开的一个浏览器窗口打开
<a href='#'></a> <!-- # 表示链接到页面顶部 -->
<a href="wwww.itcast.cn/" title="跳转到传智播客的网站"></a>
<a href="2.html" target="_blank">测试页面2</a>
页面中的使用： 需要在标签中间写上标识 不然不能够进行跳转
<a href="#">#</a>
<a href="003.html" title="go to 003">turn to 003.html</a>
<a href="003.html" target="_blank">go to 003</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>link</title>
</head>
<body>
<h1>web_address_linl</h1>
<a href="pic.html">go_to_the_pic</a>
</body>
</html>
使用图片做链接 在a标签中添加进<img>标签 把图片的位置放在标签内容上就能实现
<a href="003.html" target="_blank"><img src="../../static/images/23.png" alt="tem_picture"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>link</title>
</head>
<body>
<h1>web_address_linl</h1>
<!-- 跳转到其他的页面-->
<a href="pic.html">go_to_the_pic</a>
<!-- 跳转到指定的网址 -->
<a href="http://www.baidu.com">go_to_the_baidu</a>
<!-- 点击图片跳转到指定网址 -->
<a href="http://www.baidu.com"><img src="/home/habby/bj19/test2/booktest/static/images/habby.jpeg" alt="baidu"></a>
<!-- 点击图片实现跳转到指定网址 title 实现浮动标识网址 -->
<a href="http://www.baidu.com" title="baidu"><img src="/home/habby/bj19/test2/booktest/static/images/habby.jpeg" alt="baidu"></a>
<!-- 在原来的位置上跳转 _target -->
<a href="http://www.baidu.com" title="baidu" target="_self"><img src="/home/habby/bj19/test2/booktest/static/images/habby.jpeg" alt="baidu"></a>
<!-- 跳转到新的标签 _blank -->
<a href="http://www.baidu.com" title="baidu" target="_blank"><img src="/home/habby/bj19/test2/booktest/static/images/habby.jpeg" alt="baidu"></a>
<!-- # 实现跳转到默认页面最顶部 -->
<a href="#">default_position</a>
</body>
</html>
html 列表
有序列表 自动生成编号，在实际开发中使用较少 通过 <ol><li>标签实现
可以通过快捷键来实现 ol>li*3 + tab
无序列表 在网页上定义一个无编号的内容列表，可以用<ul><li>配合实现
ul>li*3 + tab 实现
另外一种快捷方式
ul>(li>a{新闻标题})*3
第一个有# 所有的都可以跳转到页面最上方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lists</title>
</head>
<body>
<h1>list_with_order</h1>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
<h1f>list_without_order</h1f>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<h>news_without_order</h>
<ul>
<li><a href="#">news_title</a></li>
<li><a href="">news_title</a></li>
<li><a href="">news_title</a></li>
</ul>
</body>
</html>
定义列表
定义列表通常用于术语的定义。
<dl>标签表示列表的整体 一个dl中可以有多个题目和解释
<dt>标签定义术语的题目
<dd>标签是术语的解释
快捷方式 dl>(dt+dd)*3 + tab
# 添加在body中
<h3>3 blocks</h3>
<d1>
<dt>html</dt>
<dd>page content</dd>
<dt>css</dt>
<dd>page appearance</dd>
<dt>javascript</dt>
<dd>page action</dd>
</d1>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
