一、HTML 框架
文件的头部 可以定义html文件的样式，JS行为等,不显示在页面
文件的主体 由组成HTML的各种标签构成，<p> </p>，<div> </div>等构成，完全显示在页面
二、 标签的结构
- 标签有尖括号<>包裹起来
- 标签通常成对出现，但也有一些单标签(如:换行 <br>、水平分割线 <hr>、图片标签<img>等)
- 每一对标签称为一个元素(如：<p> </p>)
三 常用的基本标签
3.1 标题标签
- 标题标签包括<h1> </h1><h2> </h2><h3> </h3>…
- 数字越大，标题的字号越小(类似Word中的一号字体、二号字体…)
3.2 段落标签
-
段落标签的格式 <p aglin=“left”> </p>
-
aglin 为段落标签的对齐属性，其值可以为left（左对齐）、right（右对齐），justify（两端对齐）
-
段落标签的注意事项
a. 每一个<p> </p>包裹的为一个段落，在段落中增加换行标签<br>，仅仅只是换行，并没有将一个段落拆分为两个段落
b.两个空格符" ；"(;应为英文状态下的)不等于首行缩进两个字符
c.<pre> </pre>也是段落标签，但该标签可以保存段落的原始书写格式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <pre>我是小妖怪，逍遥又自在。 杀人不眨眼，吃人不放盐。 一口七八个，肚子要撑破。 茅房去拉屎，想起忘带纸。</pre> </body> </html>
输出结果如下：
3.3 修饰标签
- 字体倾斜标签 <i> </i> 或者 <em> </em>
- 字体加粗标签 <b> </b> 或者 <strong> </strong>
- 删除线标签 <del> </del>
- 下划线标签 <ins> </ins>
- 上标 <sup> </sup>
- 下标 <sub> </sub>
3.4 常用的符号（；均应为英文状态）
- 空格符  ；
- 大于号 >；
- 小于号 <；
- 已注册 ®；
- 版权声明 ©；
- 商标 &trade；
3.5 列表标签
3.5.1. 无序列表标签
-
无序列表的格式
<ul type=" "> <li>.....</li> <li>....</li> </ul> -
无序列表的属性
type为无序列表的显示属性，其值可以是circle（小圆圈），disc（实心点），square（正方形）。但由于不同的浏览器的兼容问题，导致该图标在不同浏览器中的显示大小不同，所以一般用其他小图片代替。
3.5.2 有序列表标签
-
有序列表的格式
<ol type=" "> <li>.....</li> <li>....</li> </ol> -
有序列表的属性
type为无序列表的显示属性，其值可以是1（数字类型），a（小写数字类型），A（大写数字类型），i（小写罗马数字类型），I（大写罗马数字类型）。
3.5.3 定义列表标签
定义列表标签的格式
<dl>
<dt>定义列表项</dt>
<dd>定义列表描述项</dd>
</dl>
虽然页面展示中dt和dd看起来是包含关系，但实际dt和dd为同级关系
3.5.4 图片标签
-
图片标签的格式
<img src = "..." alt = "..." height = "..." width = "..."> -
图片标签的属性
src 为图片所在的路径，一般可以分为绝对路径和相对路径
绝对路径 从盘符开始写的图片的完整路径
相对路径 图片相对于当前文件所在位置的存放路径
与当前文件同级 XXX.jpg
在当前文件的上一级 …/XXX.jpg
在当前文件的下一级 img/XXX.jpg<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 在当前文件html基础。html 的下级 --> <img src="img\蔚蓝cp.jpg" alt=""> <!--与当前文件同级 --> <img src="魏无羡.jpg" alt=""> <!-- 在当前文件上级 --> <img src="..\Amyweb\魏无羡.jpg" alt=""> </body> </html>
alt 为图片的替换属性，当图片加载不出来时，用alt中的文字代替
height 为图片的高度，当其值为百分比时，所代表的图片的大小是相对于父级元素来说的
width 为图片的宽度，当其值为百分比时，所代表的图片的大小是相对于父级元素来说的
3.5.5 超链接标签
-
超链接标签的格式
<a href = " ..." target = "..." name = "..."></a> -
超链接标签的属性
href 为链接地址 可以分为站内链接地址和站外链接地址站内链接 与当前页面出自同一个系统（如：XXX.html） 站外链接 来自于另一个系统的网站地址(如：http://www.baidu.com)target 为链接跳转页面的地址 通常包括两种同页面跳转和不同页面跳转
当其值为“_self” 或者为空时，则表示在相同页面进行跳转 当其值为“_blank”时，则表示在不同页面进行跳转或者跳转到新的一页
title 当鼠标放置在某一超链接时，鼠标箭头右下角出现相应的提示信息
name 可以实现超链接的定位跳转
同页面定位跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#魏无羡">魏无羡</a>
<a href="" name="魏无羡"><img src="img\魏无羡.jpg" alt=""></a>
<a href="#蔚蓝cp">蔚蓝cp</a>
<a href="" name="蔚蓝cp"><img src="img\蔚蓝cp.jpg" alt=""></a>
</body>
</html>
不同页面定位跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../Amyweb/第一节html基础/图片标签.html#魏无羡">魏无羡</a>
<a href="../Amyweb/第一节html基础/图片标签.html#蔚蓝cp">蔚蓝cp</a>
</body>
</html>
<!-- 不同页面跳转时，锚标签需要在所跳转页定义 (定义到图标标签.html) -->
<a href="" name="蔚蓝cp"><img src="img\蔚蓝cp.jpg" alt=""></a>
<a href="" name="魏无羡"><img src="img\魏无羡.jpg" alt=""></a>
-
超链接的其他应用
电子邮件地址：<a href="mailto:邮件地址">邮件地址</a>文件下载：
<a href="所需下载文件的存放位置">点我下载</a>
.
转载：https://blog.csdn.net/shandy_liunian/article/details/101212223