[前言]：
前端指的是网页开发
“网页” 只是指看到的页面(界面部分，也包含了一些和用户以及和服务器之间的交互逻辑)
前端开发所用到的技术，主要是三个核心方面：
1.HTML：描述网页的基本结构
2.CSS：描述网页的样式
3.JavaScript：描述网页和用户之间的交互动作

本篇主要简单介绍 html 的部分基础知识

定义

html 是一个编程语言，"描述性"语言，不能表达"条件、循环"这样的逻辑结构，它能够描述一个页面是长啥样的
html 不需要编译，直接由浏览器来解析

部分基础标签

HTML标签是由尖括号括起来的词，如 < html> ， < body> ；标签通常成对出现
一对中的第一个标签是开始标签；第二个标签是结束标签

1.总标签

<html>

</html>

如 < html> 是开始标签(起始标签)，而 < /html> 是结束标签(闭合标签)

2.head 和 body

HTML文档结构至少要包括 head，body两部分

<head>

</head>
<body>

</body>

head:
head 中存放 html 的一些属性信息，或者引用的外部资源(CSS，JS，图片…)
head 一般不会影响到界面显示，只是起到一些设置属性的效果

body:
body 存放界面要显示的内容(元素)

3.title

表示页面的标题
例：

<html>
<head>
<title> 我是一个页面~</title>
</head>

<body>
hello world
</body>
</html>

4.div & span

单纯的表示一块区域
例：

<html>
<head>
<title> 我是一个页面~</title>
</head>

<body>

<div>hello</div>
<div>hello</div>
<div>hello</div>

<span>hello</span>
<span>hello</span>
<span>hello</span>

</body>
</html>

刷新页面：

div：默认情况独占一行 (块级元素)
span：默认情况不独占一行 (内联元素)

其他的 html 标签大多都可以归类到这两类中

chrome 开发者工具

在页面中按 F12

每个 html 标签，本质上都是一个"矩形"区域
在开发者工具中，能清楚地看到矩形区域的位置和大小 (以像素为单位)

外边距：

标题标签

正文中的标题，不是页面的标题
< h1> 一级标题
< h2> 二级标题
< h3> 三级标题
< h4> 四级标题
< h5> 五级标题
< h6> 六级标题

上述六个标题的默认样式不一样
标题编号越小，字体就越大越粗，可以通过 CSS 来修改样式

例：

<html>
<head>
<title> 我是一个页面~</title>
</head>

<body>

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

</body>
</html>

刷新页面：

链接标签

< a> 表示链接 (link)，一点击就能跳转到某个页面
通过 href 属性来确定跳到哪里去~
属性都是放在开始标签中的，每个标签都可以有很多属性

例：

<html>
<head>
<title> 我是一个页面~</title>
</head>

<body>

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<a href="http://www.sogou.com">点我跳转啦~</a>

</body>
</html>

刷新页面：

其他标签

< image>标签
不需要闭合标签；表示一张图片
通过 src 属性，来确定照片的地址

若一个页面中带有 image 标签，浏览器就会自动给服务器再次发送 http 请求来试图获取资源

例：

<html>
<head>
<title> 我是一个页面~</title>
</head>

<body>

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<a href="http://www.sogou.com">点我跳转啦~</a>

<image src="https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569">

</body>
</html>

刷新页面：

form 标签
表单，用户和服务器之间交互的重要途径
表单里允许用户输入一些数据，借助表单能把数据提交到服务器上，进而服务器就可以处理了

例:

<html>
<head>
<title> 我是一个页面~</title>
</head>

<body>

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<a href="http://www.sogou.com">点我跳转啦~</a>

<p>我是个 p 标签</p>

<image src="https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569">

<form>
    <input type="text" placeholder="请输入姓名" name="userName">
    <input type="text" placeholder="请输入密码" name="password">
</form>

</body>
</html>

刷新页面：

由上述结果，我们可以看出，input 是行向排列的
可以使用一个 div 包裹起来，达到纵向排列的效果
部分修改内容：

<form>
    <div style="margin-bottom: 8px"><input type="text" placeholder="请输入姓名" name="userName"></div>
    <div style="margin-bottom: 5px"><input type="text" placeholder="请输入密码" name="password"></div>
    <div><input type="submit" value="提交"></div>
</form>

再次刷新：

连接服务器

<form method="get" action="http://www.sogou.com"> 
    <div style="margin-bottom: 8px"><input type="text" placeholder="请输入姓名" name="userName"></div>
    <div style="margin-bottom: 5px"><input type="text" placeholder="请输入密码" name="password"></div>
    <div><input type="submit" value="提交"></div>
</form>

通过 fiddler 抓包查看：

请求：

form 是把输入框中的数据以键值对的方式提交给指定服务器，指定服务器的地址通过 action 字段来决定；get 表示构造的请求的方法是啥 action 表示数据提交到哪个服务器上；method 改成 post 之后，浏览器通过 form 就是给服务器发送了 post 请求
form 中 method 只支持 get 和 post

方法 method 字段决定：
1.url 中的参数 key 是 input 标签的 name 属性决定的
2.url 中的参数 value 是用户在输入框输入的

下篇介绍版本3 的 Http 服务器~~

Html 部分基础标签

定义

部分基础标签

chrome 开发者工具

标题标签

链接标签

其他标签

连接服务器

相关文章

热门标签

最新文章

目录