HTML| 青训营笔记

133 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

HTML简介

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

文档结构

html的结构如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字节跳动青训营</title>
</head>
<body>
    <h1>HTML</h1>
</body>
</html>
复制代码

<! doctype html>

<! doctype html> 指明了文件使用的 HTML版本,决定了浏览器使用哪一种渲染模式

html

<html>说明该文件是用超文本标记语言来描述的,它是文件的开头;而</html>则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记

head

<head></head>这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和<meta>标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单。

body

<body> 存放一些用户可见的内容,如段落如片等 网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记

title

文档的标题,例如:

<title>字节跳动青训营</title>

会在浏览器标签页上显示字节跳动青训营的字样。

meta

常见属性:

  • charset:这个属性声明了文档的字符编码。如果使用了这个属性,其值必须是与ASCII大小写无关的"utf-8"(又称万国码)
  • name:name和content属性可以一起使用,以名-值对的方式给文档提供元数据,其中name作为元数据的名称,content作为元数据的值。

icon

<link rel="icon" href="images/icon.png">

文本标签

div

用的最多的标签之一,类似于一个大盒子,块级元素之一。 其他块级元素有:<h1>,<p>,<pre>,<ul>,<ol>,<table>

span

用的最多的标签之一,类似于大盒子里面的小盒子,行内元素之一。 其他行内元素有:<i>,<b>,<del>,<ins>,<td>,<a>

标题标签

<h1>~<h6> 对应6种等级的标题,从高到低,<h1>最高,<h6>最低 。

<p>标签

文章的段落,块级元素。

<br>标签

换行(回车)符号。

图片标签

<img>元素将一份图片插入文档,默认行内元素。

<src>属性

包含了图片的文件路径 。

alt属性

对图像文本的描述。

height属性

图像的高度。

width

图片的宽度。

超链接

<a>元素,通过herf属性可以创建通向其他网页、文件的位置,或者URL链接。