HTML知识积累及实践（一） - 标签样式
1.认识HTML
（1）HTML不是一种语言，而是一种标记语言
（2）标记语言是由标记标签和纯文本组成的
（3）HTML使用标记标签描述网页
2.HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
（1) HTML 标签是由尖括号包围的关键词，比如 <html>
（2) HTML 标签通常是成对出现的，比如 <b> 和 </b> <br />
（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> <!-- 空格： 换行 <br /><br /> 大于号 > ep: <a href="#">更多>></a> ----<br /><br /> 小于号 < ep:<<书名<<------<br /><br /> 引号 " 版权号 ----CopyRight ©2018-2019 我的版权 tch.com 版权所有-----<br /><br /> 以上为常用特殊符号，其他的查询即可 --> </body>
html标签 - HTML标签 - 字体效果（font 标签） 在html5里被淘汰了，但是一定要了解
<body> <!-- <font>规定文本的字体、字体尺寸、字体颜色。 <font size="字体大小" color="字体颜色" face="字体类型">要设置的文字</font> size:12,13 color: 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标签
<strong> 用于强调文本，但它强调程度更强一些，表示重要文本，有利于SEO优化
<b>标签呈现粗体
超链接 -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 知识积累-------<br /><br /> 大于号：-------更多 >>--------<br /><br /> 小于号：-------<<-------<br /><br /> 引号：-------"测试引号"---------<br /><br /> 版权号：------CopyRight © 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之后，重新写入
这样就解决了，滚动标签以及锚链接都可用，一切正常
