前端基础知识

2019-07-28

前端知识

HTML

HTML全称是超文本标记语言，是网页的基础。之所以被称为标记语言，是因为它每个标签就像标记一样，标记着某个地方会出现哪些内容。所以HTML也可以看成是一块块的。

一个简单的HTML实例

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>简单的HTML实例</title>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>

</html>

其中是用来说明这个文件的格式是html。是可以省略的。
每个标签都是以<标签名>开始，</标签名>结束。除了一些特殊的标签如换行这种可以直接使用
来标识
每个html文件都以标签包裹主体内容
一个html分为头部和主体部分，头是标签所包含的内容，主要用来存放html的标题，图标，所用到的css和jacascript文件链接以及一些信息元
至于css和js是什么等下会说到
然后是html的主体部分，这个部分就是放页面信息的了。
然后介绍几个常用的html标签
a 标签，链接

1	<a href="www.baidu.com">转跳到百度</a>

inpute 标签，输入框与按钮

<inpute type="" name="" value=""/>
type有很多种类型
type="text" 文本类型，输入数据为字符串
type="password" 密码类型，输入数据时会变成黑色点点
type="button" 按钮类型，变成按钮 value 可以改变其显示内容
type="email" 邮箱
type="file" 文件，可以上传文件
type="submit" 提交，可以提交表单中的信息 value可以改变其显示内容

form 标签，表单，后端调试最重要的标签

<form method="get">
	<label for="uname">用户名:</label><input type="text" name="username" id="uname">
	</br>
	<label for="upass">密  码:</label><input type="password" name="password" id="upass">
	</br>
	<input type="submit" value="提交">
</form>

上面是一个常见的表单
form 常用的属性有method 用来规定提交表单的方式，action 用来指定提交表单的页面

当一个表单被提交时，浏览器会根据其方法，将表单内的数据发到对应的服务器上

html的基本讲解到这里就结束了，如果你想进一步了解html推荐到w3cschool或者是菜鸟教程了解

css

然后是css，css是样式文件，它也可以内嵌到html中，在html的标签里，对style 属性进行定义就行了
如果说html是标记哪里有什么东西，那么css就是告诉你这个东西长什么样。你想对它的颜色进行修改，那就修改它的color属性，相对文本对齐方式修改，那就修改它的text-align属性

# 在头文件中修改将会用到的标签的属性
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

# 直接在标签内修改
<h1 style = "text-align:center;">居中标题</h1>

# 从外部引入css样式文件
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

从外部引入css样式文件的话，需要注意一下css文件的语法格式

// 对全部对应标签使用
h1 
{
	各种样式
}

// 对某个类使用 
// 如有个叫texttitle的类 <h1 class="texttitle">标题</h1>
#texttitle
{
	各种样式
}

// 对某个id使用 如：有个id为 password 的输入框
.password
{
	各种样式
}

某个标签如果收到多个控制同一个属性样式那么它的优先级是 id ->类 ->全局，就是说如果它所属的类有个属性把它颜色定义为红色，但是对应id定义的颜色是绿色，那么绿色会将红色的属性覆盖

css 的介绍到此结束，有兴趣的同学也可以去那两个网站去进行学习了解

JavaScript

JavaScript是一门编程语言，它可以用来实现网页的前端逻辑和动画效果
之前就说到，html标记什么地方有什么东西，css说明这个东西是什么样子的，那么JavaScript就是将军。能控制这些东西。他可以给html添加新的标签，可以改变标签的属性和样式。可以处理各种请求。
由于本次教程不涉及JavaScript，大家只要稍作了解，有兴趣的话可以去找其他教程学习。js的介绍就到这里结束了

总结

如果你们想了解更多的前端知识，可以上网查找资料，有很多前端的网站写的已经非常详细了。那么本期教程到此结束，再见