前端蒟蒻学习【2】

本文是前端初学者的HTML入门教程,从HTML的基本概念到文件构造,详细讲解了HTML的三大标签(html、head、body)及其作用,还介绍了HTML元素、元信息、编码方式等内容,帮助读者快速理解并掌握HTML的基础知识。
摘要由CSDN通过智能技术生成

系列文章目录

前端蒟蒻入门【1】


提示:本文从HTML零基础开始


前言

提示:
绝大多数人都会把前言这部分的内容给忽略掉,觉得这些没有任何意义.
但事实并非如此,这些让你能够粗略的了解到一些简单的东西。


提示:以下是本篇文章正文内容,下面案例可供参考

一、HTML是什么?

很多新人学习的时候不知道HTML叫什么。

当你去问大佬时,大佬是这样的
在这里插入图片描述
而你
在这里插入图片描述
虽然你可能知道这个怎么使用,但是你却不能够说出专业术语
在这里插入图片描述
而如果妹子问起你的时候,你很自信的告诉她:“HTML的英文名称叫做HyperText MarkUP Language,也叫超文本标示语言”
这时候妹子会不会觉得你有点靠谱呢?

二、HTML文件构造

1.

HTML主要是由
html
head
body
这三个标签组成的
HTML对于标记本身的字母是不敏感的
用英文大写字母或者是英文小写字母都是可以的
例如将DOCTYPE改成doctype,HTML改成html
这些都是可以的

在这里插入图片描述
``

下面是对各个标签所表示的含义进行解释

<!doctype html>`
这个标签是告诉浏览器,这份文件是符合HTML5的规范
请使用HTML5的标准来进行解析文件

在这里插入代码片

<html >  <html>

html是一个双标签,主要用来标示这个区间是的数据是HTML文件,所有的HTML文件的拓展名为.html或者是.htm
HTML中加上了属性lang,这个主要是用来标注此份HTML文件所用的语言。
下面是几种常见语言的标注属性

简体中文:zh-cn   日文:ja 	英文:en         韩文:ko

虽然在开始时标记 < html>不加lang属性设定,程序也可以正确执行,但是建议在其中加入属性设定,更符合HTML5的规则。

<head>...</head>

head可以理解为HTML里的头文件,里面主要包含了文件标题、css样式定义、作者信息等一些基本信息
写在head标签中的信息,除了< title> </ title>标签会显示以外,其余都不会在浏览器上显示

<body>  ...</body>

body标签是HTML中的展示标签,一般而言,展示的内容都是在这个标签内实现,这个你浏览器的展示结果哦!

2、认识HTML元素

HTML元素的组成举例:
< a href=www.baidu.com >百度< / a>
上面整一个语句可以成为HTML中的元素

起始标记
<a href= www.baidu.com>

结束标记
</ a>
这是一个结束标签,结束标记是在 < 后面加上 / 符号,最后再加上 >

对于双标签而言,具有起始标记和结束标记
而对于单标签而言,是没有结束标记的

元素属性
上例中的元素属性是href ,跳转页面.

<meta>元素
meta元素必须放在<head>标记内
meta元素的主要目的是提供这个HTML的相关信息
例如编码方式,作者信息,关键词信息或重新导向网址
允许<head>中有多个<meta>元素

属性:
charset
这个是设定这份HTML文件的编码方式,一般设置为" UTF-8"
UTF-8 的英文名称是8-bit Unicode Transformation Format 
这是一个符合多语系的编码规则,使用可变的长度方式存储字符,以节省内存空间
如果我们在浏览网页时出现了乱码的现象
那么很有可能是该网页没有将charset设置成"UTF-8"

name
这个属性有
1. author: 文件作者
2. description:文件的描述
3. keywords:关键字
4. generator:制作此文件所使用的软件
5. revised:文件最新版本信息

使用name属性时,需搭配content属性
这相当于将content的属性关联到name的属性值.

http-equiv
这个属性值有
 1.content-type:可以用charset属性进行取代
 2. refresh:设定经过几秒后自动刷新或者是跳转到指定的网站中
<meta http-equiv="content-language" content="zh-cn">
这个是设定HTML文件语言编码为简体中文

<meta http-equiv="refresh" content="5">
设定这个HTML文件将在5秒后自动重新读取页面

<meta http-equiv="refresh" content="5; www.baidu.com">
设定这个HTML文件将在5秒后自动跳转到百度页面
举例:
<!DOCTYPE html>
<html lang ="en">
<head>
    <meta name="author" content="北辰">
    <meta name="description" content="第一个HTML文件">
    <meata name="keywords" content="北辰">
    <meata name="generator" content="Visual studio code">
    <meta name="revised"  content="1.0">
    <meta http-equiv="content-language" content="zh-cn">
    <meta http-equiv="refresh" content="5; www.baidu.com">
    <title>
        第一个HTML文件
    </title>
</head>
<body>

<h1>蒟蒻的北辰</h1>
</body>


</html>

页面展示:
在这里插入图片描述
在这里插入图片描述

HTML文件的批注
程序写的久了,难免会记不住自己所定义的内容
因此一个好的注释能够帮助你回忆
在HTML中的注释中事宜’ <!– ‘符号为文件批注,到’ — >'结束

总结

这一次写这篇博客,写了两三天,写了一会又停了下来,这对我而言也是一个极为不好的习惯,但有时候真的事情上来了,难以抽身,所以我决定两天起码要出来一篇文章,内容就不再写这么详细

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值