前端基础

2019-07-22

阅读量 -

文章共计 - 1.2k 字 阅读需要 - 5 分钟

前端基础

2019-07-22
感觉很久没写博客了，很久没有静下心来学习了。开始从开发的角度取写一些站，和框架工具。 把全栈的知识补一补。
华丽的分割线

0x00- - 简介

说到前端，想到的无非就是三个兄弟：HTML CSS JavaScript。
所以就按照顺序把这三个兄弟都熟悉一遍，相对来讲Html和CSS会简单一些，重点在Js上多下一些功夫。

0x01- - HTML

Html又被称作超文本标记语言，是我们在构造web网页的一种基础的标准语言。浏览器会将其解析成我们所看到的网页格式。
在接触过Markdown语法之后，其实感觉HTML语言是和其十分类似的。不同的是作为标记的标签在html中是成对出现的，是一种标记标签 (markup tag)。

HTML还有一个兄弟叫做HTML5。emmm一开始也分不清这两个东西，类似于python2 和python3的感觉吧，h5的语法和声明上和html略有不同，增加了很多人性化的标签。可以看作是一个更新的版本吧。

声明
<!DOCTYPE html>
一般在.htm .html文件的开头，总会有这样一句。用于声明该文件为html5文件。
不同版本的html语言所用的声明有所不同。

<html> </html>
这对标签声明了html页面的主体部分，展示html的根元素。

<head> </head>
head标签声明了html头部分，描述文档的数据内容。

<body> </body>
body标签声明了html内容的主体部分，展示所呈现给浏览器可视化的部分。

这几部分的声明就可以构造出一个简单的标准html页面，例如我们写出一个hello world的页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title> Hello Html </title>
    </head>
    <body>
        <h1>Hello world </h1>
    </body>
</html>

保存为html格式后直接用浏览器打开即可看到我们的第一个html页面。

元素

<title> </title>
title是页面的标题，显示在浏览器的工具栏处

<base> </base>
base标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

<link> </link>
link标签常用于资源引用，例如css样式

<link rel="stylesheet" type="text/css" href="xxx.css">

<style> </style>
样式标签

<meta>
meta标签描述了一些基本的元数据。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">

<script> </script>
表示js脚本的标签

<hn> </hn>
h标签是html标题，一共有6个等级，1-6代表不同等级的标签。

<p> </p>
p标签表示这是一个段落

<a> </a>
a标签表示这是一个超链接

<img src>
img标签表示这是一个图片

<hr>
这个标签表示是一个水平线

<br>
换行符标签

<b> <em> <i> <small> <strong> <sub> <sup> <ins> <del>
文字类标签，表示加粗、着重、斜体、小号字体、加重语气、上下标、插入、删除

<code> <q>
这几类不常使用的标签，表示代码、引用（非常少见）

<table> <th></th><td> <tr> </tr> </td> </table>
表格标签

<ui><li></li><ui>
列表标签 ui表示无序，ol表示有序

<div></div> <span></span>
容器标签，可以将各种元素放入其中组成一个容器，拥有同样的样式和属性。
div多用于整体，span多用于文本。

<form></form>
表单元素，用于装载用户输入内容。

<iframe></iframe>
表示窗口框，可在一个页面上显示多个窗口。

属性

元素在其标签内可以拥有不同的属性，来进行进一步的功能或格式的美化

<a id=>
id属性表示一个书签标记，在一个html页面中id应该为唯一的。可用于跳转和定位等。

<a href=>
href属性表示链接的url

<a target=>
使用target=_blank可以实现在新的窗口打开页面。

<img alr=>
alt 属性用来为图像定义一串预备的可替换的文本。当图片无法加载的时候作为备用替换上去

☡ 留言板 ☡