前端从零单排HTML系列(1)

241 阅读4分钟

写系列文章的原因

入行前端已经有一段时日,但成长的速度很慢,每天都是策划虐我千百遍,我带他们如初恋,公司的事情很多很忙,但都是写重复的工作没有技术含量,有时候回去很晚,有时候回去很早,于是打游戏、看直播各种消遣就是不想学习,一天突然顿悟,不能这么下去,如果30岁还是这样那我就完了,于是打算每天回去写点东西学点东西,大神们勿喷很基础

html介绍

HTML是用于描述网页文档(网页)的标记语言。
  • DOCTYPE声明定义了文档类型是HTML
  • html>和</ html>之间的文本描述了一个HTML文档
  • head>和</ head>之间的文本提供了关于文档的信息
  • title>和</ title>之间的文本提供了文档的标题
  • body>和</ body>之间的文本描述了可见的页面内容
  • h1>和</ h1>之间的文字描述了一个标题
  • p>和</ p>之间的文字描述了一个段落
  • HTML标签是尖括号包围的关键字(标签名称)
<!DOCTYPE>声明
  • HTML5 <!DOCTYPE html>
  • HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    声明的话尽量有html5的方式去声明因为html已经兼容所有浏览器,并且格式简单易记

HTML 元素

HTML元素使用开始标签写入,并带有结束标签,内容介于两者之间:
< 标记名>内容< /标记名>
HTML 元素是从开始标记到结束标记的所有内容:

嵌套的HTML元素

HTML元素可以嵌套(元素可以包含元素)

所有HTML文档都由嵌套的HTML元素组成

这个例子包含4个HTML元素:

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML 属性

  • HTML元素可以有属性
  • 属性提供了有关元素的附加信息
  • 属性始终在开始标签中指定
  • 属性出现在名称/值对中,如:name =“value”
  • 所有的HTML元素都可以有属性
  • HTML title属性提供了额外的“工具提示”信息
  • HTML href属性为链接提供地址信息
  • HTML width和height属性提供图像的大小信息
  • HTML alt属性为屏幕阅读器提供文本
  • 在W3Schools,我们总是使用小写的 HTML属性名称
  • 在W3Schools,我们总是用双引号引用属性

HTML 标题

HTML标题

标题由<h1><h6>标签定义。

<h1>定义了最重要的标题。<h6>定义最不重要的标题。
浏览器会在每个标题之前和之后自动添加一些空白区域(边距)。

仅将HTML标题用于标题。请勿使用标题将文字变成BIG或粗体。

搜索引擎使用您的标题来索引您的网页的结构和内容。

用户通过标题浏览您的页面。使用标题显示文档结构非常重要。

h1标题应该是主标题,其次是h2标题,然后是不太重要的h3,依此类推。

  • <HR>标记创建在HTML页中的水平线。

  • HTML 元素与HTML标题无关。

    HTML 元素包含元数据。元数据不显示。

    HTML 元素位于标签和标签之间

  • HTML <title>元素是元数据。它定义了HTML文档的标题。

    标题不会显示在文档中,但可能会显示在浏览器选项卡中。

  • HTML 元素也是元数据。

    它可以用来定义字符集和关于HTML文档的其他信息。

HTML段落

  • HTML <p>元素定义了一个段落。
  • HTML <br>元素定义了换行符。
  • HTML <pre>元素定义了预格式化文本。

你不能确定如何显示HTML。

  • 大屏幕或小屏幕以及调整大小的窗口将产生不同的结果。

  • 使用HTML,您无法通过在HTML代码中添加额外的空格或额外的行来更改输出。

  • 浏览器将在显示页面时删除多余的空格和多余的行。

  • 任何数量的空格和任何数量的新行都只能算作一个空格。