小白web前端开发--学习笔记一

web 前端开发—-学习笔记一

1. 开发网页的三种技术

  • Html——-超文本标记语言–>负责网页的结构

  • Css——–层叠样式表–>站在美学的角度进行美化

  • JavaScript——JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。–>站在用户体验的角度设计网页的交互效果

2. Html

2.1 什么是Html?

超文本标记语言(HyperTextMarkup Lanuage,简称:HTML)是一种用于创建网页的标准标记语言。

文本: 就是.txt文本。

超文本: 是一种可支持文本 、图片、链接、音乐、程序的文本。

html当中,不存在编程语言的语法,而是充斥着各式各样的标签。

标签分为单标签和双标签。例:

<meta>-->是单标签
<html></html>-->是双标签。双标签结尾总是以"/"开始,表示这个标签的结尾。

html运行环境:浏览器 。浏览器是用来打开网页的。

在浏览器中我们见到的所有的网页本质上都是一个文本,而这文本又
称之为 html。

2.2 开发环境

只要你有一台电脑,能够正常运行就可以了。

一般开发少量的网页,用轻量级的文本编辑器就完全足够了。例如:sublime text3 ,notepad++ 等。

下载链接:Sublime text3官网下载
Notepad++官网下载

如果是开发比较大的项目,就用webstorm这个软件就行了。

如果你安装了Emmet插件,开发的效率会提高很多。不会安装插件的,自己去百度一下。

一个前端程序猿的Sublime Text3的自我修养

这是关于sublimet text3安装一些前端开发的插件的博客,里面有好多的对前端开发有用的插件。如果你有需要,可以去看一看。

2.3 html5文档结构的说明

html5文档声明头 ,想要完整的使用html5语法,必须使用文档声明头,声明当前文件是html5文件。

<html></html> 

双标签–定义html文档内容的结构 所有的html文档的内容都需要写在这对标签内部。

<head></head> 

头部–通常情况下,里面写的内容是对于当前网页的一些
预定义信息设置。

<body></body> 

身体–网页里面要显示给用户看的内容,全部写在body里面

2.4 网页预定义信息

<meta charset="UTF-8">
<meta name="author" content="李白">
<meta name="keywords" content="key">  

设定当前网页的编码格式。
meta标签是一个单标签,通过charset 属性,将其属性值设置为需要
的编码,即可为当前的网页设置编码格式。

seo优化–百度会对收录的所有的网站有一个评分系统
评分越高,越靠前。

<title>网页标题</title>

通常情况下, tilte要放在meta字符集设置的下面,防止出现乱码。

<link rel="stylesheet" href="style.css"> 引入外部的css文件

<style>
    /*css代码*/
</style>

<script src="01.js"></script>

<script>
    // js代码
</script>

引入外部的js脚本文件,需要注意的是,两个script标签中间不能存在任何内容换行都不可以。

2.5 常用的标签

<hr>换行分割线
<br>换行
<h1>-<h6>多级标题
<!---->注释

html的标签还有很多,想要了解更多的自己去百度。

在html中,一些语义不是太明显的标签我们可以用来做挂件。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值