HTML框架

在VSC上写下html，就会有一个小窗，选html:5

然后就可以快速得到一个html的框架

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

然后我们对这个框架里面的内容稍做解释

  1. <!DOCTYPE html>负责告诉浏览器文档的标准:HTML/XML
  2. lang="en"，用于指定页面的语言类型
  3. <head>头标签里面表示页面的配置
  4. <meta>表示元配置，即页面的基本配置
  5. <body>表示网页的主体

元素与属性

在生成的框架中，可以看到html的标签基本上是成对出现的，比如<title></title>，夹在中间的就是这个标签类型的元素，标签在html中的作用就是定义语义

而不成对出现的元素称为空元素，比如<img>

HTML中元素是可以嵌套的，但是嵌套必须是有序的，必须是包含的

比如以下例子就是错误的

<p>小鸡腿儿最<strong>可爱</p></strong>

HTML中有两个重要的元素概念：块级元素和内联元素，块级元素比如<p></p>，会把内容挤到下一行，而内联元素比如<span></span>，内容会在同一行展现

而HTML中的元素是可以赋予属性的，属性为元素赋予额外信息，举个例子

<p style=”font-size:20px;color:red”>小鸡腿儿最可爱</p>

效果如下

小鸡腿儿最可爱

style是一种属性，里面的写法和css是相同的，但是元素可以附加不止一种属性，但是属性之间要用空格隔开，比如我们在<a>标签的元素里再加入链接href

<a style=”font-size:15px; color:red” href=”cicily96.gitee.io”>小鸡腿儿最可爱</a>

就可以得到一个链接

小鸡腿儿最可爱

注释与特殊字符

html中注释的写法是

1
<!-- <p>这是注释</p> -->

在html中还有一些特殊的符号，因为在html中本身具有作用，所以不能够直接写出来，需要用一些特殊的符号代替

原义字符 等价字符引用
< &lt;
> &gt;
“ &quot;
‘ &apos;
& &amp;

头标签<head>

头标签一些重要的常用元素有

  1. title：网页的标题，显示在浏览器标签上
  2. meta：提供页面的基本信息
  3. base：为页面所有链接定义默认地址
  4. link：定义文档与外部资源的关系

meta标签

https://www.runoob.com/tags/tag-meta.html

link的使用这里以css文件的引入为例

1
<link rel="stylesheet" href="styles.css">

rel=”stylesheet”表明这是文档的样式表

记录完毕

小鸡腿儿的HTML文章
CicilyHTML学习记录1
CicilyHTML学习记录2
CicilyHTML学习记录3