百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

HTML文档 - 网络统计学编程

toyiye 2024-06-21 12:42 14 浏览 0 评论

HTML+CSS+JavaScript技术是网络统计学编程的基础，网络统计学离不开网页前台编程技术，学习web前端开发基础技术（网页设计）需要了解：HTML、CSS、JavaScript三种语言。其中，HTM(HyperText MarkUp Language,HTML)超文本标记语言是网页内容的载体，网页内容就是网页制作者放在页面上想要让用户浏览的信息，包含文字、公式、图片、视频、表格等。

HTML超文本标记语言有如下特征：

  • HTML是用来制作网页的标记语言，HTML不需要编译，直接由浏览器解析；
  • HTML文件是一个文本文件,包含了一些HTML元素, 标签等；
  • HTML文件必须使用html或htm为文件名后缀；
  • HTML是大小写不敏感的,HTML与html是一样的。

HTML超文本标记语言是通过使用标记来描述文档结构和表现形式的一种语言，由浏览器进行解析后把结果显示在网页上。它是网页构成的基础，你见到的所有网页都离不开HTML。

一、HTML文档结构

1、HTML文档基本结构

<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<p>第一个HTML文件</p>
</BODY>
</HTML>

HTML文档以标记【<HTML>】开始，以标记【</HTML>】结束。HTML标签告诉浏览器这两个标签之间的内容是HTML文档。

HTML文档分为文档头【<HEAD>...</HEAD>】和文档体【<BODY>...</BODY>】两部分。在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档内容信息。

打开windows的记事本，复制、粘贴HTML文档基本结构代码，在指定文件夹中保存为"First.html"，如图：

图1：保存到指定文件夹的HTML文档"First.html

鼠标双击打开这个HTML文件,显示结果如图：

图2：浏览器打开HTML文档"First.html，段落标签<p>第一个HTML文件</p>之间的文本显示在浏览器中

2、HTML文档头

HTML文档中文档头【<HEAD>...</HEAD>】标签间的内容不被显示，但在网页设计中非常重要。下面为一段HTML文档头代码：

<HEAD>
<TITLE>网页标题</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
<!--
.item-title {padding: 25px 10px; }
#fixed-fullscreen-content {margin-top: 0; }
A.oPageLink {FONT-SIZE:14pt;COLOR:#6666ff; TEXT-DECORATION:none;}
//-->
</style>
<script language="JavaScript">
<!--
function setLSNorm() {
if(window.localStorage){
    localStorage.setItem($("#oNorm5").val(),$("#d1").val());
}else{
    alert('This browser does NOT support localStorage');
    }
    alert(localStorage.getItem($("#oNorm5").val()))
}
//-->
</script>
</HEAD>

HTML文档头代码中，

  • <TITLE>网页标题</TITLE>：设置网页标题，显示在浏览器上方；
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>：

标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。几乎任何网页可以看到类似上面这段代码。“charset=UTF-8”（有时为“charset=gb2312”）表示网页使用不同字符集。标签属性单元较为复杂,对于初学者来说,记住在网页中加入这段代码即可;

  • <link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>：

CSS外部样式,外部样式是通过在html中引用外部css文件来控制网页样式，同一个css文件可以被多个网页引用；

  • <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>：

引用外部JavaScript脚本程序文件，一个独立存在的JS脚本文件可以被多个网页引用；

  • <style>***</style>：

CSS内部样式,内部样式内部样式是写在html文件中，且包含在代码块中，而style写在head里面。内部样式对所在网页内所有指定的标签有效；

CSS还有一种内联样式，内联样式是直接在html标签上定义该标签的css样式，如：<div style="width:300px; color:#ff0000;">。这里style为块标签div的样式属性，定义块标签div的宽度为300像素、标签内文字颜色为红色。更多CSS知识参见“教程”；

  • <script language="JavaScript">***</script>：

在网页内部运行的JavaScript代码。更多JS知识参见教程。

3、HTML文档体

HTML文档中，文档体中才是要显示的各种文档内容信息。HTML文档体包含在【<BODY>...</BODY>】标签之间。文档体中常用的HTML标签为：

<b>标签b之间的文字在网页中显示为粗体字</b>
<i>标签b之间的文字在网页中显示为斜体字</i>
<h1>h1 标题1（head1）</h1>
<h2>h2 标题2（head2）</h2>
<h3>h3 标题3（head3）</h3>
<h4>h4 标题4（head4）</h4>
<h5>h5 标题5（head5）</h5>
<h6>h6 标题6（head6）</h6>
<sub>下标（subscript）</sub>
<sup>上标（superscript）</sup>
<a href="#">a 超级链接（anchor）</a>
<br/> br 换行（break）
<hr/> hr 横线（horizontal）
<center>center 居中（center）</center>
<div>div 区块（division）</div>
<p>p 段落（paragraph）</p>
<pre>pre 按预定格式显示的文本（Preformatted）</pre>
<img src="#" alt="图片" />img 图片（image）
<form action="#" method="post">
<input type="text" name="name" value=""/>文本输入框（text）
<input type="radio" name="name" value=""/>单选框（radio）
<input type="checkbox" name="name" value=""/>复选框（checkbox）
<input type="file" name="name" value=""/>文件选择框（file）
<input type="hidden" name="name" value=""/>隐藏域（hidden）
<input type="image" name="name" value=""/>图片按钮（image）
<input type="password" name="name" value=""/>密码输入框（password）
<input type="reset" name="name" value="reset"/>重置按钮（reset）
<input type="submit" name="name" value="submit"/>提交按钮（submit）
<select>
<option value="value">option 选择项1（option）</option>
<option value="value">option 选择项2（option）</option>
</select>
<textarea>textarea 多行文本输入区（textarea）</textarea>
</form>
有序列表
<ol>
<li>li 列表项（list item）</li>
<li>li 列表项（list item）</li>
</ol>
无序列表
<ul>
    <li>li 列表项（list item）</li>
    <li>li 列表项（list item）</li>
</ul>
table 表格（table）
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>td 表格数据（table data）</td>
        <td>td 表格数据（table data）</td>
    </tr>
    <tr>
        <td>td 表格数据（table data）</td>
        <td>td 表格数据（table data）</td>
    </tr>
</table>

4、HTML文档体转义字符

转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：

  • 第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。
  • 第二个原因是有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。

转义字符串分成三部分：

  • 第一部分是一个&符号，英文叫ampersand；
  • 第二部分是实体名字或者是#加上实体编号；
  • 第三部分加一个分号。

（1）常用HTML转义字符表

（2）数学和希腊字母标志

二、HTML常用标签（tag）使用方法及显示效果

1、超链接标签【a】

【用法】<a href="https://www.toutiao.com/article/7221429823632409147/">统计学面临的机遇与挑战 - 网络统计学</a>

【效果】统计学面临的机遇与挑战 - 网络统计学

2、换行标签【br】

【用法】在我后面换行<br/> br 换行（break）

【效果】

在我后面换行

br 换行（break）

3、粗体标签【b】

【用法】<b>b 粗体（bold）</b>

【效果】b 粗体（bold）

4、居中标签【center】

【用法】<center>center 居中（center）</center>

【效果】

center 居中（center）

5、换行块标签【div】

【用法】<div>div 区块（division），自动换行</div>后续文本

【效果】

div 区块（division），自动换行

后续文本

6、不换行块标签【span】

【用法】<span>span 区块（division），不换行</span>后续文本

【效果】span 区块（division），不换行后续文本

7、标题标签【hi】

【用法】hi 标题

<h1>h1 标题1（head1）</h1>
<h2>h2 标题2（head2）</h2>
<h3>h3 标题3（head3）</h3>
<h4>h4 标题4（head4）</h4>
<h5>h5 标题5（head5）</h5>
<h6>h6 标题6（head6）</h6>

【效果】

8、横线标签【hr】

【用法】<hr> hr 横线（horizontal）

【效果】

————————————————

hr 横线（horizontal）

9、斜体标签【i】

【用法】<i>i 斜体（italic）</i>

【效果】i 斜体（italic）

10、图片标签【img】

【用法】<img src="http://www.galaxystatistics.com/webTJX/mobile/blog/img/test1.jpg">

【效果】

图3：【img】图片标签显示src属性所指网络图片

11、有序列表标签【ol】

【用法】ol 有序列表（order list）

<ol>
  <li>li 列表项（list item）</li>
  <li>li 列表项（list item）</li>
</ol>

【效果】

  1. li 列表项（list item）
  2. li 列表项（list item）

12、无序列表标签【ul】

【用法】ul 无序列表（unordered list）

<ul>
<li>li 列表项（list item）</li>
<li>li 列表项（list item）</li>
</ul>

【效果】

  • li 列表项（list item）
  • li 列表项（list item）

13、段落标签【p】

【用法】<p>p 段落（paragraph）</p>

【效果】p 段落（paragraph）

14、按预定格式标签【pre】

【用法】<pre> 按预定格式显示的文本（Preformatted）</pre>

【效果】按预定格式显示的文本（Preformatted）

15、下标标签【sub】

【用法】X<sub>sub 下标（subscript）</sub>

【效果】Xsub 下标（subscript）

16、上标标签【sup】

【用法】X<sup>sup 上标（superscript）</sup>

【效果】

17、表格标签【table】

【用法】X<sub>table 表格（table）</sub>

<table border="1" cellpadding="0" cellspacing="0">
<caption>table 表格（table）</caption>
		<tr>
				<td>td 表格数据（table data）</td>
				<td>td 表格数据（table data）</td>
		</tr>
		<tr>
				<td>td 表格数据（table data）</td>
				<td>td 表格数据（table data）</td>
		</tr>
</table>

【效果】

18、表单标签

【用法】form 表单（form）

<form action="#" method="post">form 表单（form）<p/>
<input type="text" name="name" value="" />input,type='text' 文本输入框（text）<p/>
<input type="radio" name="name" value="" />input,type='radio' 单选框（radio）<p/>
<input type="checkbox" name="name" value="" />input,type='checkbox' 复选框（checkbox）<p/>
<input type="file" name="name" value="" />input,type='file' 文件选择框（file）<p/>
<input type="hidden" name="name" value="" />input,type='hidden' 隐藏域（hidden）<p/>
<input type="password" name="name" value="" />input,type='password' 密码输入框（password）<p/>
<input type="reset" name="name" value="reset" />input,type='reset' 重置按钮（reset）<p/>
<input type="submit" name="name" value="submit" />input,type='submit' 提交按钮（submit）<p/>
select 选择列表（select）
<select>
<option value="value1">option 选择项1（option）</option>
<option value="value2">option 选择项2（option）</option>
<option value="value3">option 选择项3（option）</option>
</select><p/>
<textarea>
textarea
多行文本输入区
</textarea> <p/>
</form>

【效果】

HTML文档制作主要指〈BODY〉***〈/BODY〉之间HTML标签的布局设计。本文简单介绍了常用的HTML标签，如果想用这些标签制作出漂亮的统计报告，还需要CSS样式修饰和JavaScript基本进行动态响应。至于统计图表、公式等需要JavaScript调用库函数来实现。

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表