HTML的学习记录

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:行内样式,优先级最高

代码:

实现效果:

实体:<

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值