zoukankan      html  css  js  c++  java
  • HTML的简单介绍

    一 什么是html

      HTML 指超文本标签语言。是HyperText Markup Language首字母的简写。通过它,可以实现图片、链接、音乐以及程序等等多种元素。现如今,HTML已经是程序员必须掌握的一项基本功。

    二 html结构

      HTML的结构一般包括<head>标签和<body>标签,<head>和<body>这2个标记符分别表示网页的头部和正文。头部中可包含页面的标题、关键词、描述说明等内容,它本身不作为内容来显示,但影响网页显示的效果。<body></body>当中是网页实际显示的内容,正文标记符又被称为实体标记。页面当中通常包含有很多指向其他相关页面或其他节点的指针,通过点击,可以很方便地获取新的网页,这是HTML获得广泛推广运用最重要的原因之一,而由这些相互之间存在关联的页面组成的有机集合便是网站。

    三 html5编辑规范 

      1、文件拓展名默认使用htm,便于操作系统或者程序辨认文件,而图片则基本上存为gif或jpg

      2、浏览器默认忽视回车符,不过为了方便阅览,人们还是会习惯地在写完一段代码后进行回车

      3、标记符号用尖括号括起来,带斜杠的元素表示该标记说明结束,大多数标记符必须成对使用,用以说明起始和结束。

      4、必须使用半角而不是全角字符

      5、HTML注释<!--注释内容-->的内容不给予显示。

    四 html基础

      1 html<a> 标签

      HTML 链接是通过标签 <a> 来定义的.a标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。

      PS:

      href是Hypertext Reference的缩写,用于指定超链接目标的url,是css代码的一种。

      链接到外部地址

    <body>
        <a href="http://www.baidu.com" target='_blank'>百度</a>
    </body>

      链接到当前页的内部地址

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
    </head>
    <body>
        <a href="#d1">第一章</a>
        <a href="#d2">第二章</a>
        <a href="#d3">第三章</a>
        <div id="d1" style="height: 800px">第一章</div>
        <div id="d2" style="height: 800px">第二章</div>
        <div id="d3" style="height: 800px;">第三章</div>
    </body>
    </html>

      2 html段落

      <p> </p>

      3 html <img> 标签

      请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
    </head>
    <body>
        <img src="http://news.sciencenet.cn/upload/news/images/2017/11/2017112512174940.jpg" alt='一架飞机' title='飞机'>
    </body>
    </html>

      浏览器直接会显示一张图片。

      4 html<meta>标签

      4-1 使用说明  

      元数据(Metadata)是数据的数据信息。

      <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。

      META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。

      元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。

      4-2 属性

      

      4-3 示例

      

      

      5 html <link>标签

      5-1 标签定义及使用说明

      <link> 标签定义文档与外部资源的关系。

      <link> 标签最常见的用途是链接样式表。

      

      注意: link 元素是空元素,它仅包含属性。

      注意: 此元素只能存在于 head 部分,不过它可出现任何次数。

      5-2 属性

    属性描述
    charset char_encoding HTML5 不支持该属性。 定义被链接文档的字符编码方式。
    href URL 定义被链接文档的位置。
    hreflang language_code 定义被链接文档中文本的语言。
    media media_query 规定被链接文档将显示在什么设备上。
    rel alternate
    archives
    author
    bookmark
    external
    first
    help
    icon
    last
    license
    next
    nofollow
    noreferrer
    pingback
    prefetch
    prev
    search
    sidebar
    stylesheet
    tag
    up
    必需。定义当前文档与被链接文档之间的关系。
    rev reversed relationship HTML5 不支持该属性。 定义被链接文档与当前文档之间的关系。
    sizesNew HeightxWidth
    any
    定义了链接属性大小,只对属性 rel="icon" 起作用。
    target _blank
    _self
    _top
    _parent
    frame_name
    HTML5 不支持该属性。 定义在何处加载被链接文档。
    type MIME_type 规定被链接文档的 MIME 类型。

     

      6 html <div>和<span>

      6-1<div>

      HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

      <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

      如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

      <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

      6-2 <span>

      HTML <span> 元素是内联元素,可用作文本的容器。

      <span> 元素也没有特定的含义。

      当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

      7 html <label>标签

      示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <label for="1">姓名</label>
    <input type="text" id="1">
    <label for="2">年龄</label>
    <input type="text" id="2">
    </body>
    </html>

    五 html特殊符号

      例如

        不换行空格  &nbsp, 是Non-Breaking Space的简写。

    六 补充

      标签之前嵌套的规则:

      block element 可以嵌套 block element 和 inline element

      inline element 只能嵌套inline element

      

  • 相关阅读:
    centos redis 安装 php-redis扩展安装 及使用
    mysql 大数据分页查询优化
    nginx https ssl 配置
    mysql 集群 数据同步
    linux 挂载U盘
    centos yum 没有可用软件包 nginx。
    nginx 负载均衡 反向代理
    nginx 配置
    mac 多php版本安装
    Foundation框架
  • 原文地址:https://www.cnblogs.com/654321cc/p/7772568.html
Copyright © 2011-2022 走看看