前端基础之html：day01

序言：从2018年6月23号大学毕业之后，顺利进入一家上市公司，也是从事软件开发，但是自己对前端的学习却热衷不已，想着能够掌握前端的技术并且从事前端工作，因为它会给人带来一种前所未有的成就感，其实此前已经学过一遍前端的知识，但是由于从事的工作不是前端，长时间不用导致一些基础都已经忘得差不多了，所以从今天开始想通过博客来记录自己的前端学习之路。

正文：

1.什么是html?

html是超文本标记语言的简写，它用于告诉浏览器如何构造你的页面。

2.什么是http协议？

http协议是超文本传输协议的缩写，它用于传输www方式的网页。

3.url

url称为统一资源定位符，url就像每家每户都有一个门牌地址一样，每一个网页都有一个确定Internet地址，当在网页的地址栏中输入一个地址或者点击一个超链接时，url就确定了要浏览的地址。浏览器通过超文本传输协议将web服务站点的网页代码提取出来，同时翻译成网页。

一般来讲，url的地址格式如下：

协议：//ip:port/path 例如：http://192.168.1.101:80/test/index.html

4.初始化代码的分析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

用于告诉浏览器当前渲染的页面为html页面

<html>

html的根元素，用来包含html文档的所有元素

<head>

包含头部的内容不会被显示在浏览器的页面中，这里通常包含页面的编码格式、作者、描述信息以及js和css导入的一些信息。

用来声明当前文档的编码格式为utf-8

<title>

用来声明当前页面的标题，内容会显示在浏览器的选项卡中

<body>

所有将要显示在浏览器内容区域的信息都被包含于此标签中

5.相对路径与绝对路径

绝对路径：从盘符开始的路径

D:\webUI\day01\demo\index.html

相对路径：相对于当前文件的路径index.html

images/1.png 等同于./images/1.png

.代表当前文件所在的文件夹

../代表当前文件夹的上一级文件夹

../../代表当前文件夹的上一级文件夹的上一级文件夹

6.三种常用类型的语言

1>标记语言

本身没有逻辑能力和执行能力，只能够被读取，例如：html、xml

2>脚本语言

本身具有逻辑能力和执行能力，能够被解析执行，例如：JavaScript、php

3>编译语言

本身具有逻辑能力和执行能力，需要编译运行，例如：Java 、c、c#、c++

7.标签与元素的区别：

标签：比如<p>就称为一个标签

元素：包含开始标签和结束标签以及其中包含的内容总体称为元素

8.元素的分类

常见的元素分类是将元素分为四类：

1>块级元素：

特性：独占一行空间，默认宽度占满整个父级元素，高度由其内容所决定。

例：<div>hello world<div>

<p>ni hao zhong guo</p>

2>行内元素：

特性：不独占一行空间，不能设置宽高和上下边距，一般被嵌套在块级元素中，通常作为段落的一部分出现

例：<strong>You are strong</strong>

3>空元素：

特性：只包含单个标签，通常用于在文档中插入部分内容，例如：img

之所以将其称为空元素，是因为没有办法将内容写入标签内

4>替代元素：

特性：替代元素已经脱离了css的范畴，它们的表现不依赖于css

例：<img>、<object>、<video>、<input>等

9.元素的属性

与元素相关的特性称为属性，属性由键值对组成，属性的作用是对元素进行标识或对元素进行修饰

大多数的元素都具有的四个属性：（核心属性）

id：唯一标识

class：标识一类元素

style：样式

title：描述信息

10.字符实体

用于将html页面预留的一些字符展示出来

例：空格  

< <

> >

& &

" "

' '

11.常用标签

段落：<p>I am a paragraph</p>

标题：<h1>一级标题</h1>

强调：<em> 斜体，意为强调，突出文章重点

<strong>加粗，意为强调，内容更为有用

<b>加粗

<i>斜体

<u>下划线

三种标题：

ol>li*4:列表：有序列表

start:从数字几开始；reversed:反转

ul>li*4:列表：无序列表

dl>dt dd :H5中新增的自定义列表

总结：多用、多看、多想，这些知识必将烂熟于心。

前端基础之html：day01

猜你喜欢