【2014-02-10】html学习备注
2026/7/29 17:55:54 网站建设 项目流程

[历史归档]本文原发布于 cstriker1407.info 个人博客,内容为历史存档,仅供参考。
发布时间:2014-02-10| 标题:html学习备注分类:编程 / web / html |标签:html


html学习备注

      • 什么是 HTML?
        • HTML 是用来描述网页的一种语言。
      • HTML 标签
        • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
      • HTML 文档 = 网页
        • HTML 文档描述网页
      • HTML 属性
        • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
      • 空行和空格
      • HTML 块元素
      • HTML 内联元素
      • HTML <div> 元素
      • HTML <span> 元素
      • 实例代码:
      • 实例效果:
    • this is H1
      • this is H2
        • this is H3
            • this is H6

最近想自学一下web开发中需要的各种基础知识,就开始在【 W3school 】上学习各种教程,这里备注下最基本的html笔记。

备注:

部分笔记内容来自【 W3school 】网站,版权归原作者所有。

什么是 HTML?

HTML 是用来描述网页的一种语言。

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

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签闭合标签

HTML 标签对大小写不敏感:

等同于

。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写

HTML 文档 = 网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
HTML 文档是由 HTML 元素定义的。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name=“value”。
属性总是在 HTML 元素的开始标签中规定。
始终为属性值加引号
HTML 提示:使用小写属性
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

空行和空格

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。
编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和****结束)
例子:

,

,

  • ,

HTML 内联元素

内联元素在显示时通常不会以新行开始****。
例子:,, ,

HTML
元素

HTML

元素是块级元素,它是可用于组合其他 HTML 元素的容器。
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。 如果与 CSS 一同使用,
元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。

HTML 元素

HTML 元素是内联元素,可用作文本的容器。
元素也没有特定的含义。
当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。

实例代码:

<!DOCTYPEhtml><html><body>this is body begin;<!--注释:各种标题--><h1>this is H1</h1><h2>this is H2</h2><h3align="center">this is H3</h3><h6>this is H6</h6><!--注释:段落--><p>this is paragraph</p><!--注释:回车换行--><br/><!--注释:超链接--><ahref="http://116.62.110.235/blog">this ia a link</a><br/><ahref="http://116.62.110.235/blog"><imgsrc="http://www.baidu.com/img/bdlogo.gif"/></a><br/><!--注释:使用blank可以在新窗口中打开--><ahref="http://www.w3school.com.cn/"target="_blank">Visit W3School!</a><!--注释:锚点--><aname="tips">基本的注意事项 - 有用的提示</a><ahref="#tips">有用的提示</a><br/><!--注释:图片--><imgsrc="http://www.baidu.com/img/bdlogo.gif"/><!--注释:水平线--><hr/><!--注释:文字效果--><b>This text is bold</b><strong>This text is strong</strong><br/><p>pre 标签很适合显示计算机代码:</p><pre>for i = 1 to 10 print i next i</pre><br/><!--注释:表格--><tableborder="2"><tr><th>title A</th><!-- 表头 --><th>title B</th></tr><tr><td>cell 1,1</td><td>cell 1,2</td></tr><tr><td>cell 2,1</td><td>cell 2,2</td></tr><tr><td>&nbsp;</td><!-- 空格,占位 --><td>cell 3,2</td></tr></table><tableborder="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th>电话</th><td>555 77 854</td></tr><tr><th>电话</th><td>555 77 855</td></tr></table><tableborder="1"><tr><th>姓名</th><thcolspan="2">电话</th></tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr></table><tableborder="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><throwspan="2">电话</th><td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table><!--注释:列表--><ul><li>咖啡</li><li></li><li>牛奶</li></ul><ol><li>牛奶</li><ul><li>蒙牛</li><li>伊利</li></ul><li></li></ol><olstart="50"><li>咖啡</li><li>牛奶</li><li></li></ol><!--注释:表单--><form>user:<inputtype="text"name="user"/><br/>passwd:<inputtype="password"name="passwd"/><br/><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female<br/><inputtype="checkbox"name="bike"/>I have a bike<br/><inputtype="checkbox"name="car"/>I have a car</form><!--注释:框--><fieldset><legend>title</legend>HelloFieldSet</fieldset><!--注释:内联网页--><iframesrc="http://116.62.110.235/blog"width="200"height="200"></iframe></body></html>

实例效果:

this is body begin;

this is H1

this is H2

this is H3
this is H6

this is paragraph

this ia a link
[

](http://116.62.110.235/blog)
Visit W3School! 基本的注意事项 - 有用的提示 有用的提示


This text is boldThis text is strong

pre 标签很适合显示计算机代码:

for i = 1 to 10 print i next i
title Atitle B
cell 1,1cell 1,2
cell 2,1cell 2,2
cell 3,2
姓名Bill Gates
电话555 77 854
电话555 77 855
姓名电话
Bill Gates555 77 854555 77 855
姓名Bill Gates
电话555 77 854
555 77 855
  • 咖啡
  • 牛奶
  1. 牛奶
  • 蒙牛
  • 伊利
  1. 咖啡

  2. 牛奶

user:
passwd:
Male
Female
I have a bike
I have a cartitleHelloFieldSet

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询