整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

什么是HTML

什么是HTML

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面

2 入门实例

新建一个test.html文件,内容如下

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一个标题</h1><p>我的第一个段落。</p> </body></html>

其中:

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8(由于在大部分浏览器中直接输出中文会出现乱码,所以要在头部将字符声明为UTF-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

保存后运行,即可在浏览器中打开如下界面

3 各部分详解

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 速查列表

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 有序列表

.什么是HTML?

HTML(Hyper Text Mark-up Language )即超文本标记语言,是万维网的核心语言,标准通用标记语言下的一个应用,由 Tim Berners-lee提出。

HTML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。

HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。

2.HTML的由来

HTML是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

万维网上的一个超媒体文档称之为一个页面(page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。超级链接,就是一种统一资源定位器(Uniform Resource Locator,缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。

这是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。

3.HTML的功能和作用

设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样,你只要使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。

4.HTML的特点

4.1 HTML是用来制作网页的标记语言,不需要编译,直接由浏览器执行。

1)HTML其实是一个文本文件,包含了一些HTML元素、标签等,它需要浏览器的解释。

2)HTML文件必须使用html或htm为文件名后缀。出现2个后缀的原因是过去的老软件只支持3个字母的后缀,所以.html的文件只能写成写成.htm,这是长久以来形成的习惯。现在不存在软件不支持的情况,使用哪种后缀看你的喜好。

3)HTML对大小写不敏感,HTML与html是一样的。

4.2 HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入。

1)HTML的简易性,HTML版本升级采用超集方式,从而更加灵活方便。

2)HTML的可扩展性,HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。

3)HTML的平台无关性。HTML可以使用在广泛的平台上,包括PC机和MAC等机不同类型的机器。

4.3 HTML是网络的通用语言,一种简单、通用的全置标记语言,具有通用性。

HTML允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

5.HTML的发展历史

超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)。

HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——1997年1月14日,W3C推荐标准

HTML 4.0——1997年12月18日,W3C推荐标准

HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准

HTML 5——2014年10月28日,W3C推荐标准

享兴趣,传播快乐,增长见闻,留下美好!

亲爱的您,这里是LearningYard学苑。

Share interest, spread happiness, increase knowledge, and leave behind beauty!

Dear you, this is LearningYard Academy.


今天小编为大家带来话说前端(十一)----css的文字属性,欢迎您的访问。

今天来讲一讲文字的属性

Today, Xiaobian brings you the front end (11)-the character attribute of CSS. Welcome to visit.

Let's talk about the attributes of words today.

首先关于颜色:有背景颜色和字体颜色,背景颜色属性为background-color:,我们可以直接给他blue,也可以写成rgb的形式,也可以写成三原色的形式,如:rgb(16,16,16),#cffff。再者就是字体颜色,属性为color,添加的颜色跟背景颜色的格式一样。

First of all, about color: there are background color and font color, and the background color attribute is background-color:. We can give it to him directly, or it can blue written in the form of rgb or three primary colors, such as: rgb(16, 16, 16), #cffff. Furthermore, it is the font color, the attribute is color, and the added color has the same format as the background color.

第二就是字体的样式,在word里头可以有楷体,草书,黑体,同样的在网页上也可以这样显示。用的就是font-family:,但是要记住,这个字体你一定是要下载过的,如果没有下载,那么就会默认显示和黑体。再者就是font-style:,这个样式可以把他设置为斜体。

The second is the font style. In word, there can be regular script, cursive script and bold font, and the same can be displayed on the webpage. Use font-family:, but remember, you must have downloaded this font. If you haven't downloaded it, it will be displayed in bold by default. Furthermore, it is font-style:, which can set it in italics.

第三字体的粗细,用font-weight,正常是400,注意没有单位,400以上就会变大,400一下就会变小,font-size为字体大小,正常写成14px,,上曾下减。

The thickness of the third font, using font-weight, is normally 400. Note that if there is no unit, it will get bigger if it is above 400, and it will get smaller once it is 400. font-size is the font size, which is normally written as 14px, and it has been decreased from top to bottom.

第四就是line-hight,行高,如果行高等于容器的高度,在上下居中,同样的和text-align:center连用可以保证中心居中。

The fourth is line-high, line height. If the line height is higher than the height of the container, it is centered on the top and bottom. The same can be used with text-align: center to ensure the center is centered.

第五text-decoration,可以有下划线:underline,贯穿线line-througn,还有在顶部的线(不常用)

The fifth text-decoration can be underlined: underline, through line-throughput, and the line at the top (not commonly used).

今天的分享就到这里,如果你有什么独特的想法,欢迎给我们留言,让我们相约明天,祝你今天过得开心快乐。

翻译:Google翻译

本文由LearningYard新学苑原创,部分图片文字来自网络,如有侵权请联系。

That's all for today's sharing. If you have any unique ideas, please leave us a message and let's make an appointment tomorrow. I wish you a happy day.


Translation: Google translation


This article is original by LearningYard New Academy, and some pictures and texts are from the Internet. If there is any infringement, please contact.

文案:李仕阳

排版:李仕阳

审核:闫庆红