HTML之初识html（一）

Posted on | In | Views:

html？

  • HyperText Markup Lanuage(超文本标记语言)，“超文本”指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。Html的结构包括“头”部分（head）、和“主体”部分（body）。

  • html文件结构

    1
    2
    3
    4
    5
    6
    7
    8
    <html>
        <head>
         <title>标题</title>
      </head>
        <body>
            网页正文
      </body>
    </html>

  • <title></title>中只能是纯文本，任何标记都会原封不动的显示。

html标签

  • html文档和html元素通过html标签进行标记
  • html标签由开始标签和结束标签组成
  • 开始标签：被括号包围的元素名，结束标签：被括号包围的斜杠和元素名
  • 某些html元素没有结束标签

    标签格式

  • 大致分两类：（1）双边标签 ；（2）双边标签
    双边标签
  • 含义：有开始标记以及结束标记，内容放在开始和结束标记之间。如：<p>内容</p>
  • 语法格式：<标签 属性1 = “值1” 属性2 = “值2”>内容</标签>。
单边标签
  • 含义：只有开始标记，无结束标记；单边标记一般是没有内容的。如：<br>。
  • 一般起一个特殊的功能，常用的有10多个标记。
  • 语法格式：<标签 属性1 = “值1” 属性2 = “值2”>

标签编写规范

  • 不区分大小写。如：<body>、<BODY>、<Body>
  • 标签属性可有可无。有些标签无属性，如：<html>、<head>、<title>等
  • 双边标记的内容在开始和结束标签之间，单边标记无内容。
  • HTML标签可相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层。

常用标签

html 文本修饰标签
1
2
3
4
5
6
7
8
9
10
11
<b> 加粗bold </b>
<i> 斜体italic </i>
<u> 下划线underline </u>
<s> 删除线 strike </s>
<sup> 上标 </sup>
<sub> 下标 </sub>
` `
<font>字体标签</font>
属性：Size：规定文本的尺寸大小，取值：从 1 到 7 的数字。浏览器默认值是 3。单位为em，不须写单位。
      Color：颜色值。
      Face：字体，楷体、黑体、宋体...
html 排版标签

  • <p>段落标签

    1
    2
    常用属性：align(水平对齐方式)；取值：left、 center、 right
    eg：<p align="center">水平对齐方式居中对齐</p>

  • <br>换行标签(单边标签)

  • <hr>水平线标签(单边标签)

    1
    2
    3
    4
    5
    6
    属性值如下
    size：水平线的粗细，单位一般为px。
    color：水平线的颜色。
    width：水平线的宽度。
    noshade：去掉水平线的阴影(在HTML中，noshade是没有值的属性)。
             如：<hr noshade>

  • 预排版标签<pre>

    1
    2
    功能：表示计算机源代码或者其他机器可以阅读的文本内容，即：原封不动输出。 
    语法：<pre>内容</pre>

  • 标题标签<h1>....<h6>

    1
    2
    3
    功能：定义各种标题。
    属性：align水平对齐方式，取值：left、center、right。
    语法：<h1  align = "left|center|right"></h1>
无意义的标签

  • <div>：无任何意义，但使用最多；一般要与CSS配合使用；是一个块元素。

    1
    2
    块元素：一般是单独占一行，不管内容多少，总是占一行。
    有哪些？<div>、<p>、<h1>、<h2>、<pre>等。

  • <span>：无任何意义，但使用得最多；要与CSS配合使用；是行内元素。

    1
    2
    3
    行内元素，不会单独占一行;宽度由内容决定。
    多个行内元素，会排在同一行。
    有哪些？<font>、<b>、<i>、<u>、<sub>、<sup>等

  • 在标记嵌套时，一般是块元素中嵌套行内元素。

html元素

  • html元素指的是从 开始标签 到 结束标签 的所有代码。

    开始标签 | 元素内容 | 结束标签
    ——- |———- | ——–
    <p> | This is a title | </p>
    <a href="default.html> | This is a link | </a>
    <br /> | |

元素语法

  • 以开始标签起始，以结束标签终止
  • 元素的内容在开始标签与结束标签之间
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）如：\
  • 大多数 HTML 元素 有属性

嵌套的 HTML 元素

  • 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
  • HTML 文档是由 HTML 元素定义的。 HTML文档实例如下：
    1
    2
    3
    4
    5
    <html>
    <body>
    <p>This is my first paragraph.</p>
    </body>
    </html>

上面的例子包含三个 HTML 元素：\

元素，\ 元素 以及\ 元素。

  • 实例详述
    1
    2
    3
    4
    5
    6
    7
    8
    <p>    元素 : 定义了 HTML 文档中的一个段落,该元素有一个开始标签 <p>，以及一个结束标签 </p>。
           元素内容 : This is my first paragraph。
           
    <body> 元素 : 定义了 HTML 文档的主体。该元素有一个开始标签 <body>，以及一个结束标签 </body>。
           元素内容 : 另一个 HTML 元素（p 元素）。
           
    <html> 元素 : 定义了整个 HTML 文档,该拥有一个开始标签 <html>，以及一个结束标签 </html>。
           元素内容 : 另一个 HTML 元素（body 元素）。

HTML 属性

  • HTML 标签可以拥有属性,属性提供了有关 HTML元素的更多的信息。
  • 属性总是以名称/值对的形式出现，比如：name=”value”。
  • 属性总是在 HTML 元素的开始标签中规定。
  • 属性实例
    1
    2
    HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
    <a href="https://www.baidu.com/">This is a link</a>

本篇笔记主要记录了html的含义，标签，元素以及属性。在后续的学习中会再进行记录。参照了很多的资料，不足之处请谅解。