美文网首页
HTML基础

HTML基础

作者: Java架构师CAT | 来源:发表于2019-11-22 17:10 被阅读0次

    一、什么是 HTML

    HTML是用来定义网页的一种语言。HTML指的是超文本标记语言 (Hyper Text Markup Language),这里所谓的超文本,实际上就是超越文本的意思。因为网页中不仅可以有文字,还可以包括文字、图片、动画、音乐、视频、超链接等元素。HTML 不是一种编程语言,而是一种标记语言 (markup language);HTML 使用标记标签来描述网页。我们可以说HTML文档就等于网页。

    二、HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。标签定义规范如下:

    1、HTML 标签是由尖括号包围的关键词,比如 <html>;

    2、HTML 标签通常是成对出现的,比如 <p> 和 </p>;

    3、标签对中的第一个标签是开始标签,第二个标签是结束标签;

    4、开始和结束标签也被称为开放标签和闭合标签;

    5、HTML标签也存在单标签,如<br/>、<hr/>;

    标签的语法:

    <标签名 属性1="值1" 属性2="值2" ......>内容部分</标签名><标签名 属性1="值1" 属性2="值2" ....../>

    三、第一个HTML

    打开记事本,在记事本中键入 HTML 代码。在记事本的文件菜单选择“另存为”。当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。保存成功之后直接双击您的 HTML 文件,即可在浏览器中打开。

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        Hello World!    </body></html>

    执行结果如下:

    四、HTML文档结构

    1、<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

    2、<html></html>称为根标签,所有的网页标签都在<html></html>中。

    3、<head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签,<head>与</head>之间的内容不会在浏览器的文档窗口显示(除了title以外),其内容主要是起控制、导入、支持搜索引擎搜索、承载脚本等功能。

    4、在<body>和</body>标签之间的内容是网页的主要内容,最终会在浏览器中显示出来。

    五、HTML常用标签

    1、标题标签是通过 <h1> - <h6> 等标签进行定义的。

    <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>

    2、段落标签是通过 <p> 标签进行定义的。

    <p>这是一段文本</p><p>这是另一段文本</p>

    3、分割线标签<hr/>

    <!-- 在页面中定义一条颜色为红色,宽度为500像素,右对齐的线 --><hr color="red" width="500px" align="right"/>

    4、特殊字符

    在html当中,有几个字符是作为特殊字符而用的,比如 < 和 > 作为标签的 包裹,如果想在页面上输出 这些符号,就需要了解下特殊字符。

    5、图像标签

    在 HTML 中,图像由 <img> 标签定义。<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。定义图像的语法是:

    <img src="url" alt="这是替换文本" />

    6、超链接

    HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式:

    1、通过使用 href 属性 - 创建指向另一个文档的链接

    2、通过使用 name 属性 - 创建文档内的书签(也称为锚点)

    <!-- 定义一个超链接跳转到百度页面 --><a href="http://www.baidu.com/">百度</a><!-- 定义一个超链接打开一个文档 --><a href="test.txt">百度</a><!-- 定义一个锚点 --><a name="tips">这是一个锚点</a><!-- 跳转到锚点 --><a href="#tips">跳转到tips锚点</a>

    相关文章

      网友评论

          本文标题:HTML基础

          本文链接:https://www.haomeiwen.com/subject/xsuqwctx.html