zoukankan      html  css  js  c++  java
  • HTML学习笔记

    HTML概述

      HTML(HyperText Markup language,超文本标记语言) 是用来描述网页的一种语言,包括“头”部分(外语:Head)、和“主体”部分(外语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言,而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页

    HTML标签
      HTML文档是由HTML元素组成的文本文件,HTML元素是预定义的正在使用的HTML标签。HTML标签通常成对出现,比如<b>和</b>。一对标签的前面一个是开始标签,第二个是结束标签,在开始和结束标签之间的文本是元素内容。HTML标签是大小写无关的,<b>跟<B>表示的意思是一样的。

    • <!-- This is a comment --> 注释标签
    • <html>和</html>标签标志HTML文档的开始和终止
    • <head>和</head>标签之间文本的是头信息,在浏览器窗口中头信息是不被显示的
    • <title>和</title>标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏
    • <body>和</body>标签之间的文本是正文,会被显示在浏览器中
    • <h1>到<h6>标签标示标题元素,<h1>定义了最大的标题元素,<h6>定义了最小的。HTML自动在一个标题元素前后各添加一个空行。
    • <p>和</p>定义段落,HTML自动在一个段落前后各添加一个空行。
    • <br>标签不管放在什么位置,都能够强制换行。<br>标签是一个空标签,它没有结束标记。
    • <hr>标签标示水平线
    • <b>和</b>标签之间的文本会以加粗字体显示

    标签属性
      标签属性能为页面上的HTML元素提供附加信息,通常是附加给HTML元素的开始标签的,由属性名和值成对出现,就像这样:name="value"。属性值应该被包含在引号中,双引号是最常用的,但是单引号也可以使用。在很少情况下,比如说属性值本身包含引号,使用单引号就很必要了,比如:name='John "ShotGun" Nelson'。例如,标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性,你可以告诉浏览器:你页面的背景色是红色的,就像这样:<body bgcolor="red">。

    字符实体
      在HTML中,有些字符拥有特殊含义,比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话,必须在HTML代码中插入字符实体。一个字符实体拥有三个部分:一个and符号(&),一个实体名或者一个实体号,最后是一个分号(;);想要在HTML文档中显示一个小于号,我们必须这样写:&lt;或者&#60;注意:实体名是大小写敏感的。在HTML中,最常见的字符实体就是不可拆分空格。通常,HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格,其中9个会被去掉。想要在HTML中插入空格,可以使用实体:&nbsp;

    HTML链接
      标签<a>被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。使用target属性,你可以定义从什么地方打开链接地址,下面这段代码打开一个新的浏览器窗口来打开链接:<a href="http://www.baidu.com" target="_blank">baidu</a></p>。name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。想要直接链接到“tips”章节的话,在URL地址的后面加一个“#”和这个锚的名字,就像这样:<a name="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>;一个链接到本页面中某章节的命名锚是这样写的:<a name="#tips">Jump to the Useful Tips Section</a>。

    HTML框架
      使用框架,可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面,它们是相互独立的。使用框架的不利因素有:网站开发者需要关心更多HTML文档的情况;打印整个页面变得困难。
      frameset标签:<frameset>标签定义了如何将窗口拆分成框架;每个frameset标签定义了一组行和列;行/列的值指明了每个行/列在屏幕上所占的大小。
      frame标签:<frame>标签定义了每个框架中放入什么文件。如果不想让用户改变大小,可以在<frame>标签中加入:noresize="noresize"。

    HTML表格
      <table> 标签定义 HTML 表格,简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成,tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。表格被划分为行(使用<tr>标签),每行又被划分为数据单元格(使用<td>标签)。td表示“表格数据”(TableData),即数据单元格的内容。数据单元格可以包含文本,图像,列表,段落,表单,水平线,表格等等。如果不指定border属性,表格将不显示边框。有时候这很有用,但是多数时候我们希望显示边框。可以在空单元格里加入不可分空格来占位,这样边框能正常显示。使用“&nbsp;”来支撑没有内容的单元格

    HTML表单
      表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。表单是用<form>元素定义的。

    HTML图像
      在HTML里面,图像是由<img>标签定义的。<img>是空标签,即只拥有属性,而没有结束标签。想要在页面上显示一个图像,需要使用src属性。“src”表示“源”的意思。src属性的值是所要显示图像的URL。alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。alt属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯,它有助于更好地显示信息,而且,对纯文本浏览器很有用。

    HTML背景
      <body>标签有两个属性可以指定背景。背景可以是颜色,也可以是图像。

      bgcolor属性将背景设置为颜色,它的值可以是一个十六进制数、RGB值或者一种颜色名称。上面三条语句都可以把页面背景设置成黑色。

    • <body bgcolor="#000000">
    • <body bgcolor="rgb(0,0,0)">
    • <body bgcolor="black">

      background属性将背景设置为图像,它的值是你所要使用图像的URL地址(相对地址或绝对地址)。如果这个图像的大小不及浏览器窗口,它将平铺占满窗口。

    • <body background="clouds.gif">
    • <body background="http://www.w3schools.com/clouds.gif">

      <body>标签的bgcolor、background和text属性在最新的HTML标准(HTML4和XHTML)中已被废弃。W3C在他们的推荐中已删除这些属性。在HTML的未来版本中,层叠样式表(CSS)将被用来定义HTML元素的布局和显示属性。一般的网站很少使用背景图像。最常用的背景颜色是黑色、白色和灰色

    HTML编辑器

    • 记事本:用记事本编辑HTML,编辑完后保存为.html或.htm格式即可,再用浏览器查看显示效果
    • 在线HTML编辑器
    • Eclipse

      在线HTML编辑器KindEditor:KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

  • 相关阅读:
    Linux磁盘分区(二):删除
    Linux磁盘分区(一):添加
    Linux下查看系统版本号信息的方法
    php计算多个集合的笛卡尔积实例详解
    linux下php7安装memcached、redis扩展
    Linux积累 命令之cat和wc
    php数据结构与算法
    主流PHP框架间的比较(Zend Framework,CakePHP,CodeIgniter,Symfony,ThinkPHP,FleaPHP)
    [深入学习Redis]RedisAPI的原子性分析
    Cookie例子
  • 原文地址:https://www.cnblogs.com/gaohongchen01/p/4009589.html
Copyright © 2011-2022 走看看