HTML知识积累及实践（一） - 标签样式

1.认识HTML

（1）HTML不是一种语言，而是一种标记语言

（2）标记语言是由标记标签和纯文本组成的

（3）HTML使用标记标签描述网页

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

（1) HTML 标签是由尖括号包围的关键词，比如 <html>

（2) HTML 标签通常是成对出现的，比如 和

（3) 标签对中的第一个标签是开始标签，第二个标签是结束标签

（4) 开始和结束标签也被称为开放标签和闭合标签

3.HTML 文档 = 网页

1. HTML 文档描述网页

2. HTML 文档包含 HTML 标签和纯文本

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML

标签，而是使用标签来解释页面的内容

4.Html文档结构说明

（1）HTML的结构包括头部（Head）、主体（Body）两大部分

（2）其中头部描述浏览器所需的信息

（3）而主体则包含所要说明的具体内容。

5.HTML <!DOCTYPE> 标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型，分别表示严格版本（Strict)、过渡版本（Transitional )以及基于框(Frameset）的 HTML 文档。

以下面这个 <!DOCTYPE> 标签为例： <!DOCTYPE html >

文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如

何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置

6.实践穿插知识点

创建一个符合W3C规范的模板

<!doctype html>
<html><head><!--声明当前页面的编码集：中文编码（GBK/GB2312）,国际编码（utf-8）--><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--05年之后基本是utf-8--><!--声明当前页面的三要素--><title>HTML国际化标准模板 - TCH</title>  31个字以内<meta name="Keywords" content="关键词,关键词,关键词"><meat name="description" content="">  80个字以内<!--css/js--></head>
<body></body>
</html>

之后的练习均按照此模板进行

html -特殊符号

部分非模板代码截取

<body><!--空格：&nbsp;换行  <br /><br />大于号 &gt;  ep: <a href="#">更多&gt;&gt;</a> ----<br /><br />小于号  &lt;  ep:&lt;&lt;书名&lt;&lt------<br /><br />引号  &quot;版权号   ----CopyRight &copy;2018-2019 我的版权 tch.com 版权所有-----<br /><br />以上为常用特殊符号，其他的查询即可-->
</body>

html标签 - HTML标签 - 字体效果（font 标签）在html5里被淘汰了，但是一定要了解

<body><!--<font>规定文本的字体、字体尺寸、字体颜色。<font size="字体大小" color="字体颜色" face="字体类型">要设置的文字</font>size:12,13color: red,blue,green  或者颜色值#333  font 标签的颜色值不能简写face : “黑体” “微软雅黑” “宋体”-->
<h1>HTML标签  - 字体效果（font 标签）</h1>
<font>测试一句话</font>
</body>

html标签 - h标签（不仅仅是字体大小的改变，这相当于文章的大小标题）

<body><!--1.文字默认加粗2.h1到h6数字越大，文字大小越小3.随着数字的增大，标题的权重值越低；4.h1标签是页面主题，在一个页面中有且只能出现一次5.h2到h6这些是小标题，页面中可以出现多次；--><h1>HTML 标签  -H标签</h1>  h标签，一共有六个 h1-h6<h2>我是一个标签</h2><h3>我是一个标签</h3><h4>我是一个标签</h4><h5>我是一个标签</h5><h6>我是一个标签</h6><!--p标签是段落标签   --><p></p>
</body>
</html>

strong/b标签
 用于强调文本，但它强调程度更强一些，表示重要文本，有利于SEO优化
标签呈现粗体

超链接 -a标签：

页面链接语法
链接到其他页面<a href="链接地址" target="_blank">

还有锚链接需要指定标签内容，标签链接前要声明#

滚动标签（学了样式等，在实际中不会用这个标签）

<body><h1>html标签 - 滚动标签</h1><marquee direction="left"> 测试条目 </marquee></body>

综合实践及运行结果

将本节的知识整合制作一个文本网页


<!doctype html>
<html><head><!--声明当前页面的编码集：中文编码（GBK/GB2312）,国际编码（utf-8）--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--声明当前页面三要素--><title>HTML标签学习及实践</title><meta name="Keywords" content="学习,Web,前端"><meta name="description" content=""><!--css/js--><style type="text/css">body{height:3000px;}</style></head>
<body><h1>HTML标签</h1><a href="#ts">特殊符号</a> | <a href="#font">font标签</a> | <a href="#p">p标签</a> | <a href="#span">span标签</a> | <a href="#sb">strong/b 标签</a> | <a href="#a">a标签</a> | <a href="#m">marquee标签</a><h2>HTML标签 - 特殊符号<a name="ts"></a></h2>空格：------CSDN&nbsp;&nbsp;&nbsp;&nbsp;知识积累-------<br /><br />大于号：-------更多 &gt;&gt;--------<br /><br />小于号：-------&lt;&lt;-------<br /><br />引号：-------&quot;测试引号&quot;---------<br /><br />版权号：------CopyRight &copy; 2018-2100 TCH 版权所有--------<br /><br /><h2>HTML标签 - 字体效果（font标签）<a name="font"></a></h2><font size="20" color="red" face="微软雅黑">CSDN - html+css 知识积累</font><h2>HTML标签 -  p标签<a name="p"></a></h2><p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书平台。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2016年4月，百度百科已经收录了超过1300多万的词条，参与词条编辑的网友超过580万人，几乎涵盖了所有已知的知识领域。</p><h2>HTML标签 - span标签<a name="span"></a></h2><p>百度百科旨在创造一个涵盖各领域知识的<span>中文信息</span>收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。
</p><h2>HTML标签 - strong/b 标签<a name="sb"></a></h2><p><strong>百度百科</strong>是百度在2006年4月20日推出第三个基于搜索平台建立的社区类产品，这是继百度贴吧、百度知道之后，<b>百度再度深化</b>其知识搜索体系
</p><h2>HTML标签 - a标签<a name="a"></a></h2><a href="#" target="_blank">我是一个超级链接</a><h2>HTML标签 - marquee标签<a name="m"></a></h2><marquee>看我在滚动啦~~~~~~~~</marquee></body>
</html>

运行结果如下：

结果出现了乱码，出错误是好事，接下来就是寻找解决办法

首先想到的应该是editpuls的编码方式问题，将editpuls的默认编码更改为utf-8之后，重新写入

这样就解决了，滚动标签以及锚链接都可用，一切正常