HTML不是一种编程语言,而是一种标记语言(别人问学过什么编程语言的时候千万不要说HTML!!)
web的第一门编程语言:Javascript
HTML文件的后缀名:.html或者.htm
现在大家都在用的是2014年10月诞生的HTML5
HTML的特点:
1.简易性 2.可拓展性 3.平台无关性 4.通用性
拓展:
网页三要素:HTML、CSS、Javascript
HTML与CSS之间的关系:
HTML就像是一个人,而CSS就像是衣服和化妆品,用来装饰HTML。
结构(HTML,网页框架搭建,用于描述页面的结构)
表现(CSS用于控制网页中元素的样式,如颜色,字体,背景)
行为(JavaScript用于响应用户操作,动态+事件)
VSCode页面如下:
如何更改VSCode主题颜色:
可根据自己的需要进行选择
如何在VSCode中安装插件:
1.在左侧的菜单栏中点击拓展
2.在搜索框中输入想要安装的插件
3.点击出现对应插件右下角的安装按钮
VSCode插件推荐
Chinese (Simplified) Language Pack for Visual Studio Code-对VSCode进行汉化
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签,包括HTML5片段
Live Server - 启动一个开发本地服务器,为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
为了美观,推荐更改底部的缩进格式:
1.点击底部的空格
2.使用“Tab”缩进
3.选择“2”
4.底部变成下图,设置成功
如何在VSCode新建一个文件:
1.点击左侧的资源管理器
2.红圈2圈出来的是新建文件,旁边的是新建文件夹
3.输入新文件的名字,记得末尾是.html
文件创建成功后,在页面打一个英文的!按回车或者选择第一个,便可生成一个html5的基本框架
以下来解析一下基本框架里的内容:
<!DOCTYPE html>
文档头信息
html5的标准网页声明,声明当前的网页是按照HTML5标准编写的(一定要将h5的文档声明写在网页的最上边)
如果不写文档声明,就表示页面采用浏览器本身的解析标准,这样会造成页面在不同的浏览器可能出现不同的显示效果。
<html lang="en">
属性lang是单词language的缩写,意思是语言,”en”代表英语,”zh-CN”代表中文。
html根标签,一个页面中有且只有一个根标签,网页中的所有内容(包含HTML文档的所有元素,所有的html标签 )都应该写在html根标签中
它只有两个子标签:head:浏览器设置 ,body:可视区展示
<head>
head标签,用来帮助浏览器解析页面的,主要用于设置或者导入外部文件(可以在任何地方引用文件,但一般都在head内引用,因为有文档上下执行的顺序)
<meta charset="UTF-8">
用来声明当前文档的编码方式为utf-8
meta标签用来设置网页的一些元数据,比如网页的字符集,关键字、简介
meta是一个自结束标签(编写一个自结束标签时,可以在开始标签中添加 一个/ )
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport 设备的屏幕
width属性控制设备的宽度,假设网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现
<title>Hello HTML</title>
浏览器选项卡上的名字
<body></body>
body标签用来设置网页的主体内容,在这个结构中可以来编写HTML的注释
▲ 养成良好的注释习惯在写代码里极其重要!! (方便自己后续查看,也方便别人理解)
html中只有一种注释,即 <!--注释内容-->
注释快捷键:ctrl+/(即问号的那个键)
进入下一行快捷键:ctrl+enter
编写代码如下:
在页面中显示如下:
单标签元素,仅有一个标签:
<meta /> 、<img />、<br/>
双标签元素,由开始标签和结束标签组成:
<div></div>
<p></p>
标签可以进行嵌套使用,即可以将一个标签写入到另外一个标签内。
<p>段落<strong>加强</strong>标签</p>
注意!!不要出现错乱嵌套
<p>非法<strong>交叉</p>嵌套</strong>
▲写了开始标签记得写结束标签!!
HTML标签都拥有自己的属性,属性应该出现在元素的开始标签内部
核心属性:绝大多数标签都具有的属性。title、id、class、style。
title:鼠标悬停后的提示信息
编写代码如下:
实现效果:
id:唯一标识(相当于人的身份证号,不可以重复)
<div id="1">块级元素</div>
class:标识一类元素(相当于人的姓名,可以重复)
<div class="1">块级元素</div>
style:行内样式,优先级最高
代码:
实现效果:
实体:<