HMTL基础总结

发表于

最近要做项目需要学点前端相关的知识，于是呢我又要开始我的前端学习了—（手动滑稽^-^）
废话不多少开始我的前端学习吧！

以下总结来自w3Shcool（w3Shcool）

1.HTML简介

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

  • HTML指的是超文本标记语言(Hyper Text Markup Language)；

  • HTML不是一种编程语言，而是一种标记语言(markup language);

  • 标记语言就是一套标记标签（markup tag）；

  • HTML 使用标记标签；

    HTML标签

    • HTML标签是由尖括ier号包围的关键字，比如 < html>

    • HTML标签通常是成对出现的，比如<b></b>

    • 标签对中的第一个开始标签，第二个标签是结束标签

    • 开始和结束标签也被称为开放标签和闭合标签

      HTML文档=网页

      • HTML 文档描述网页
      • HTML 文档包含HTML 标签和纯文本
      • HTML 文档也被称为网页

实践一下：

1
2
3
4
5
6
7
8
9
<html>
<body>

<h1>我是一个憨批</h1>

<p>我不是一个憨批。</p>

</body>
</html>

显示结果：
在这里插入图片描述
例子解释

  • <html>与 </html> 之间的文本描述网页
  • <body> 与</body>之间的文本是可见的页面内容
  • <h1>与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

2.HTML编辑器选择

因为我也就是做项目需要用到一点，也没必要选择多么专业的编辑器Notrpod就ok了

  • 步骤一：打开Notepod
  • 步骤二：在Notepod 中输入HTML代码
  • 步骤三：保存 HTML
  • 步骤四：在浏览器上运行这个HTML文件
    在这里插入图片描述

3. HTML 基础

  • HTML标题(heading)是通过<h1>-<h6>等标签来定义的。

    < h1>是最大标题，< h6>是最小的 标题。
    < !–”注释”>用来注释

  • HTML段落是通过<p>标签来进行定义的。

    HTML 折行
    < p>This is< br/>a para< br/>graph with line breaks< /p>

    • HTML连接是通过<a>标签来定义的。
1
<a href="https://hanghangbo.github.io/HangHangbo/"> This is a link <a>

在href 属性中指定连接的地址。 

- HTML图像是通过&lt;img&gt;标签来定义的  
1
<img src="xxxxx.jpg" width="xxx" height="xxx" />

图像的名称和尺寸都是以属性的形式提高

4. HTML元素

HTML的元素就是从开始标签(start tag)到结束标签(enf tag)的所有代码。

开始标签长被称为开放标签（opening tag），结束标签常被称为闭合标签（closing tag）

HTML 元素语法：

  • HTML 元素以开始标签起始
  • HTML元素以结束标签终止
  • 元素的元素是开始标签与结束标签的内容
  • 某些HTML元素具有空内容
  • 空元素在开始标签中进行关闭
  • 大多数HTML元素拥有属性

镶嵌的HTML 元素：

大多数HTML元素可以嵌套（可以包含其他HTML元素）

HTML实例解释：

  • <p>元素

    定义HTML文档中的一个段落
    这个元素拥有一个开始标签<p>,以及一个结束标签</p>
    元素内容是两者中间部分

    • <boby>元素
      定义了HTML文档的主体。
      这个元素拥有一个开始标签<boby>和一个结束标签</boby>
      元素内容就是另个元素<p>
    • <html>元素

      定义了整个html文档
      这个元素拥有一个开始标签<html>以及一个结束标签</html>
      元素内容就是boby元素

不能忘记结束标签
空的HTML元素
没有内容的HTML元素都被称为空元素，空元素始在开始标签周昂关闭的。
<br>就是没有哦关闭标签的空元素（<br>标签定义换行）。
在XHTML，XML以及未来的HTML中，所有的元素都必须关闭。
在开始标签中添加斜杠，例如<br/>，就是关闭空元素的方法，即使<br>在所有浏览器中都是有效的，但使用<br/>其实是更长远的保障。

5.HTML属性

属性为HTML元素提供附属信息。属性总数以对称/值对的形式出现，比如：name=”value“。
属性总是在HTML元素的开始标签中规定。

1
2
3
4
5
6
//链接
<a href="https://hanghangbo.github.io/HangHangbo/">This is my blog！</a>
//定义标题开始，slign 可以居中
<h1 align="center">
//换背景颜色
<body bgcolor="yellow">

6.HTML样式

style 属性用于改变HTML的样式

  • 改变显示的字体的颜色 ，大小等；
  • 改变背景颜色等。
  • style 属性淘汰了旧的“align”属性

    改为< h1 style=”text-align:center”>This is a header</h1>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
    <body style="background-color:PowderBlue;">

    <h1>Look! Styles and colors</h1>

    <p style="font-family:verdana;color:red">
    This text is in Verdana and red</p>

    <p style="font-family:times;color:green">
    This text is in Times and green</p>

    <p style="font-size:30px">This text is 30 pixels high</p>

    </body>
    </html>

效果如图：
在这里插入图片描述

7.HTML 链接

链接的HTML代码很简单，例如：

1
<a href="https://hanghangbo.github.io/HangHangbo/"> 我的播客主页</a>

点击这行代码生成的链接会直接吧用户带到我的在播客主页
href属性规定链接大的目标。开始标签和结束标签之间的文字被作为超链接来显示。

target属性
使用Target属性，你可以定义被链接的文档在何处显示。

1
<a href="https://hanghangbo.github.io/HangHangbo/" target ="_blank"> 我的播客主页</a>

上面这行代码显示为：我的博客主页

HTML链接 - name 属性
name 属性规定锚（anchor）的名称，可以使用name属性创建HTML页的书签。

书签不会以任何特殊的方式显示，对读者是不可见的。（可以用id代替name，命名同样有效）
在HTML文档中对锚进行命名（创建一个书签）

1
<a name="tips">基本的注意事项 - 有用的提示</a>

在同一个文档里创建一个指向该锚的链接 

1
<a href="#tips">有用的提示</a>

在其他页面中创建指向该锚的链接

1
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了