Html 部分基础标签
Posted 一朵花花
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html 部分基础标签相关的知识，希望对你有一定的参考价值。
[前言]：
前端指的是网页开发
“网页” 只是指看到的页面(界面部分，也包含了一些和用户以及和服务器之间的交互逻辑)
前端开发所用到的技术，主要是三个核心方面：
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 部分基础标签的主要内容，如果未能解决你的问题，请参考以下文章