HTML 是一种超文本标记语言。
“超文本”就是指页面内可以包含图片，链接，甚至音乐等非文字元素，“标记”是一种语言类型。
可用于：
• 控制页面和内容的外观
• 发布和检索联机文档
• 创建联机表单
• 插入诸如音频剪辑和视频剪辑等对象
什么是 HTML 标签
- HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
- HTML 标签由开始标签和结束标签组成
- 开始标签是被括号包围的元素名
- 结束标签是被括号包围的斜杠和元素名
- 某些 HTML 元素没有结束标签，比如 <br />
提示：HTML 标签对大小写不敏感：<P> 等同于 <p>。
1. HTML的基础格式
<html>
<head>
头部提供关于网页的信息
</head>
<body>
在网页中具体要显示的内容
</body>
</html>
2. HTML的基础标签及其常用属性
① 标题标签<h1><h2><h3><h4><h5><h6>由大到小的六种标题格式属性：align对齐方式：left 居左 right 居右 center居中 justify 默认（居左）
注意：标题内部嵌套其他大小的标题是不能在同行显示的；
同一属性多次赋值时，以第一个为准。
例如：
<h1>标题一号和标题一号中<h2>标题二号</h2>插入标题二号</h1>显示过程会将后半部分变成普通形式。
② 段落标签<p></p>，内部的内容自成一段，也可以起到换行作用。
③ 换行符，换行标签为<br />，强制换行不论被插入在哪里。
注意：段落p标签和换行br标签都可以换行，那么两者区别是：段落标签换行时是有段落的段前段后的间距的，而br换行时无行距。
④ 字体相关标签：
<b>b加粗</b>；<strong>strong也可以加粗</strong>；
<u>u下划线</u> ；
<i>i斜体</i>；
<del>del删除线</del>；<s>s删除线</s>；
H<sub>2</sub>O的下标2 10<sup>2</sup>=100上标2
⑤ <pre>
预先格式化
界面显示
与代码区域 显示 格式 一 致
(非预先格式化区域空格，换行在显示界面是无效的)
</pre>
⑥ <hralign="left" width="20" size="80"color="#00FFFF" noshade="noshade"/>一个水平线hr shade是阴影的意思
<hr />一个普通水平线
注意：也可以通过调节width，height的值把它变成垂直线。
⑦ 字体格式标签<font color="#CC00FF"size="+1" face="黑体, 宋体, Adobe 宋体 Std L">字体控制</font>
Face标签中可以自行添加电脑中其他的字体类型。
⑧ 图片、特殊字符和超链接的练习
图片：<imgalign="center" alt="土星图案"src="SATURN.JPG" width="200px" height="100px"title="土星"/>
<p>//alt属性是当图片的路径出现错误的时候，给与的文字说明。title是鼠标经过图片会显示的图片标题</p>
注意：图片的对齐方式是参照图片两边的文字而言。
目前遇见三个自闭和标签hr 水平线 br 强制换行 img图片。
特殊字符：格式为&+对应表示，例如空格： 需要在页面上输出几个空格则在代码区写几个 ；。
超链接：<a></a>标签，href属性为链接地址，有两种填写方式。
<a href="New.html">相对路径链接新的页面</a>
<a href="D:/HTML17/demo/New.html">绝对路径链接新页面</a>
注意:超链接内部可以是文字（点击文字页面跳转），也可以是图片等。
⑨ 锚标记:
主要格式：<a></a>标签一套(两对)，一对包住目的文本，并以#开头命名（给name属性赋值），另一对包住链接文本，给href属性写上锚标记对应锚(目的文本)的名字，通过命名的标记，即可通过链接访问到相应位置。
锚标记进行页面内与页面间的跳转：
第一种：
<h1><a name=”#h1”>顶部标题</a></h1>
<a href="#h1">页面内回到顶部</a><br />
第二种：
<a href="New.html#D2">页面间跳转</a><br /></font>
新的页面中的标记：
<body>
<p><a name="D2">页面new中的一个段落</a></p>
</body>
注意：锚标记常用于目录点击定位或者页面底部的回到顶部等需要通过链接跳转到指定位置的情况。
⑩ <p>列表的练习无序列表 有序列表 自定义列表</p>
<ul type="square" >
<li>无序列表1 嵌套有序列表
<oltype="I" start="1">
<li>无序列表2 嵌套自定义列表
<dl>
<dt>€列表标题</dt>
<dd>自定义列表3</dd>
<dd>自定义列表3</dd>
<dd>自定义列表3</dd>
<dd>自定义列表3</dd>
</dl>
</li>
<li>无序列表2</li>
<li>无序列表2</li>
<li>无序列表2</li>
</ol>
</li>
<li>无序列表1</li>
<li>无序列表1</li>
<li>无序列表1</li>
</ul>
<p>列表前面的显示样式通过type来改变，有序列表中start可选择序号从几开始。
注意：不建议过多层的嵌套列表，一般以三层为最多。
⑪ META标签（第四个自闭和标签）的刷新页面及重新。。。。功能
<!--<meta http-equiv="Refresh"content="5;url=NewONE.html">-->
⑫ 电子邮件的发送，比较简单，如下：
<br />
<a href="mailto:123456789@qq.com">请给我发送邮件，提出你的宝贵意见！</a>
<br />
以上基础内容的练习是后期熟练操作的必要前提。
扫一扫
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
