整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
新建一个test.html文件，内容如下
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一个标题</h1><p>我的第一个段落。</p> </body></html>其中：
保存后运行，即可在浏览器中打开如下界面
3.1 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6> </body></html>3.2 段落
HTML 段落是通过标签 <p> 来定义的
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p> </body></html>3.3 链接
HTML 链接是通过标签 <a> 来定义的
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://blog.csdn.net/zong596568821xp">这是一个链接使用了 href 属性</a> </body></html>3.4 图像
HTML 图像是通过标签 <img> 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>3.5 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>4.1 基本文档
<!DOCTYPE html><html><head><title>文档标题</title></head><body>可见文本...</body></html>4.2 基本标签
<h1>最大的标题</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的标题</h6> <p>这是一个段落。</p><br> （换行）<hr> （水平线）<!-- 这是注释 -->4.3 文本格式化
<b>粗体文本</b><code>计算机代码</code><em>强调文本</em><i>斜体文本</i><kbd>键盘输入</kbd> <pre>预格式化文本</pre><small>更小的文本</small><strong>重要的文本</strong> <abbr> （缩写）<address> （联系信息）<bdo> （文字方向）<blockquote> （从另一个源引用的部分）<cite> （工作的名称）<del> （删除的文本）<ins> （插入的文本）<sub> （下标文本）<sup> （上标文本）4.4 链接
普通的链接：<a href="http://www.example.com/">链接文本</a>图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>书签：<a id="tips">提示部分</a><a href="#tips">跳到提示部分</a>4.5 图片
<img src="URL" alt="替换文本" height="42" width="42">4.6 样式/区块
<style type="text/css">h1 {color:red;}p {color:blue;}</style><div>文档中的块级元素</div><span>文档中的内联元素</span>4.7 无序列表
<ul> <li>项目</li> <li>项目</li></ul>4.8 有序列表
网站的前台使用JS可以做很多的事情，比如利用JS获取当前网页的网址，参数，锚点，通讯协议等等。那么这篇文章就简单的说一下，利用 javascript 获当前网页网址中部份信息的方法。
一个完成的url由通信协议，主机，端口号等几大部份组成，如以下格式
scheme://host:port/path?query#fragment
scheme：通信协议 常用的http,ftp,maito等
host：主机服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port：端口号整数，如省略则默认为80
path：路径一个或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query：查询，可选，用于给动态网页传递参数，多个参数用 & 隔开
fragment：信息片断字符串，也可以叫做锚点，用于指定网络资源中的片断。
JS 中利用 window.location.href 获取当前页面浏览器地址栏中的完整url
JS代码：
//window.location.href console.log(window.location.href);
普通网址测试
浏览器地址：
https://www.feiniaomy.com
打印结果：
https://www.feiniaomy.com
带有hash值的URL测试
浏览器地址：
https://www.feiniaomy.com#mochu
打印结果：
https://www.feiniaomy.com#mochu
带有参数的URL测试
浏览器地址：
https://www.feiniaomy.com/?=mochu
打印结果：
https://www.feiniaomy.com/?=mochu
注：由上面的几个小测试可以看出，window.location.href 可以获取浏览器中完整的URL地址
js 中利用 window.location.port 获取网址中带有端口号
JS代码
//window.location.port console.log(window.location.port);
带有端口的网址测试
浏览器地址
https://www.feiniaomy.com:8080
打印结果：
8080
不带端口的网址测试
浏览器地址
https://www.feiniaomy.com
打印结果：
NULL
注：window.location.port 只能返回网址中带有的端口，如果网址中不带有端口则返回为空
JS中使用 window.location.hash 获取URL中锚点的值
JS代码
//window.location.hash console.log(window.location.hash);
带有锚点的URL测试
浏览器地址
https://www.feiniaomy.com/index.html#mochu
打印结果：
#mochu
js 中利用 window.location.protocol 获取网址的协议部份，如http，https等
JS代码
//window.location.protocol console.log(window.location.protocol);
测试
浏览器地址
https://www.feiniaomy.com
打印结果：
https
js中利用 window.location.pathname 获取文件的路径
js代码
//window.location.pathname console.log(window.location.pathname);
测试
浏览器地址
https://www.feiniaomy.com/post/1.html
打印结果：
/post/1.html
js 中的 window.location.search 可以获取 url 中的参数部份
js代码
//window.location.search console.log(window.location.search);
测试
浏览器地址
https://www.feiniaomy.com/index.php?s=4
打印结果：
?s=4
window.location.host 可以获取到url地址中的主网址部份
js代码
//window.location.host console.log(window.location.host);
测试
浏览器地址
https://www.feiniaomy.com/index.php
打印结果：
www.feiniaomy.com
注意：以上JS代码的 console.log()，为测试时，方便向浏览器控制台打印数据所用到的。关于此方法的使用，可查看本博客的相关文章。
互联网时代人们通过上网浏览信息，打开浏览器上网看到丰富的图文、视频、音乐等多媒体信息，一系列信息反馈和视觉冲击之后，您有没有想过，互联网这么发达的时代，您觉得花一点点时间学会做个网站页面不真香？
“超文本标记语言“（HTML）作为文档信息载体。当我们用html创建文档时，它将我们的语言转换成计算机可以理解的语言。这使得计算机能执行特定任务至关重要。人与计算机交互，需要一套编辑规范，编辑者（相对于计算机，这里指写html的人）使用html标签（机器识别的关键字）对内容做排版，填写内容，然后定义板块的样式和动画后的一份字符串文本，发布到远程服务器，最终被机器解析成网络传输报文协议，传输到前端（一般情况下就是我们的浏览器），就能够呈现出大家熟悉的网站页面了。
这里有一个小的指导教程，大家可以跟着来学习
一、 准备工具
编辑器 - windows系统自带的记事本工具（右击鼠标快捷键-> 新建 -> 文本文档 )
浏览器
二、 实现步骤
电脑桌面上右击鼠标，新建文本文档，helloword.html,需要注意修改.txt后缀名为.html
2.输入以下内容
<html>
<head>
<title>第一个页面</title>
</head>
<body>
<h1>您的成果</h1>
<p>hello word!</p>
</body>
</html>
用浏览器打开这个文档，可以通过修改打开方式也可以把文档拖到浏览器快捷键图标上面选择浏览器打开，预览成果。
三、总结一下您做的事情
使用windows系统的文本文档工具写了一份文本。这是一份主要信息内容（“第一个页面”、“您的成果”、“hello word!”），和信息结构化载体关键字（“html”,“head“,“title“,“body”,“h1”,“p”）的文本，组成了一份带结构的文本。我为什么称之为带结构呢？主要原因是，读者阅读需要清楚知道内容排版、模块、段落信息等等,例如：一份word文档，首行就是一个大标题，其次副标题，然后就是段落内容，其组成成分可能有图片、视频、跳转链接、注释等，它们组成了一个word文档的结构，按word文档结构规范编辑word文档是掌握word的基本要领。掌握html，需要认识html的基本结构。按照教程的html内容，它组成了html的最基本结构，<html> </html>, 可告知浏览器其自身是一个 HTML 文档。<head></head>,可告知浏览器这里是文档的头部。<body></body> 这里是文档的主体。“<>” 告知浏览器，将要用到元素标签,即“<html>”用了html标签。“<>”是标签的开始，“</>”则是标签的结束。标签是HTML语言中最基本的单位，标签的组合使用即是自由组合，也是相互约束的。例如：“<title></title>”标签，告诉浏览器本页的标题，只能在“<head></head>”标签里面使用。掌握html需要知道各种标签的作用范围，定义和用法。以上 “<h1></h1>” 是文档内容大标题,副标题有 “<h12></h2>” 、 “<h3></h3>” ..... “<h5></h5>”。“<p></p>” 标签定义了段落内容，每一次 “<p></p>”,文本内容将产生一个段落。编写html为了方便阅读，需要有良好的编写格式。每一个子标签需要顶格，“<head>"相对“<html>顶格了，我是通过输入Tab实现的。平级的标签不需要顶格，例如 ,案例中的排版 “<h1>" “<p>" 是相对于“<body>"平级的。
充分利用html标签，完成页面内容的布局，需要掌握以下要点
掌握基本的html标签，参考网络学习资源链接:https://www.w3school.com.cn/html/html_basic.asp掌握html排版技巧，使得页面内容整整齐齐
使用css，层叠样式定义，它主要是负责控制内容展示的形式，并不具有具体信息内容，它能控制html元素的布局、属性、例如在css里面，定义了某类元素的名字（.className = {}），这类元素统一长度为10px( .className = {width:10px} )，之后通过把名字赋予元素(<div class="className" > <div>),拥有class="className"的元素都会显示出长度为10px的样子。
参考内容https://www.w3cschool.cn/css/
使用script,可以控制元素的响应动作，例如移动元素、改变元素的大小，颜色、切换图片、提交表单、校验内容等等。页面常用的是javascript，需要较轻的编程知识，但是由于javascript的出现，使得页面的前端开发技术的进步，永无止境。
参考内容 https://www.w3school.com.cn/tags/tag_script.asp
html如此简单，只要您不被标签内容影响了您对超文本的阅读理解，了解html标签对内容做了结构化，掌握起来，便能够进入互联网的大舞台时代了！
获得精彩内容，记得关注哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
