HTML标签

前端技术概览

前端主要由 HTML、CSS、JavaScript三种语言完成
其中HTML主要负责内容，CSS负责格式的设置，JavaScript完成一些动作

HTML的初识

HTML的特征

1.空白折叠
    无论多少空格、table或者是换行都会被压缩为一个空格显示
2.对空格或者换行不敏感
    HTML中的语句无论是否换行是否用空格隔开，都不会对结果有影响。但是合理使用空格和换行能使得代码更清晰。
3.标签要严格封闭
    HTML中的每一个标签都需要严格封闭，否则会由浏览器自动封闭，造成布局混乱。

HTML基本格式

<!--声明为HTML5文件-->
<!DOCTYPE html>
<!--HTML标签,整个网页要写在HTML标签中-->
<!--标记网站的主要语言是中文，供搜索引擎使用-->
<html lang="zh-CN">
<!--头标签,用于设置一些格式,和链接一些文件-->
<head>
   <!--设置网页的编码为UTF-8-->
   <meta charset="UTF-8">
   <!--设置网页标题，显示在选项卡中-->
   <title>My first html</title>
</head>
<!--身体标签，所有要展示给用户的内容都写在body标签中-->
<body>
</body>
</html>

head标签中的一些常用标签

meta标签用于设置网站的一些基本属性，关键字，描述，使用编码等一下仅举几个例子。

<meta charset="UTF-8"><!--设置网页编码-->
<meta name="Description" content="我的第一个网页，没啥功能，试试而已"><!--设置网页的概述-->
<meta name="keywords" content="第一个 第一次 网页尝试" ><!--设置网页关键字-->
<meta name='viewport' content="width=device-width, initial-scale=1"><!--设置视图-->

link标签用于连接一些文件，格式或者图片等

<link rel="shortcut icon" href="http://s01.mifile.cn/favicon.ico"><!--设置网页logo-->
<link rel="stylesheet" href="./first_css.css"><!--链接css文件-->

style标签，用于设置页面的格式，如h1标签中字体大小颜色等。但是一般不会使用style标签设置网页格式，而是将格式配置同一写在CSS文件中

    <!--用于设置一些简单格式，实践中几乎不用而是将格式信息同一写入CSS文件-->
    <style type="text/css">
        h1{
            color: red;
        }
    </style>

script标签用于引入js文件或者直接设置网页动作

<!--引入js文件-->
<script type="text/javascript" src="index.js"></script>
<!--直接设置网页行为-->
<script>alert('打开了')</script>

body中一些常用的标签

body中标签的分类

1.普通行内标签
特征：
1.标签内容不独占一行，与其他行内模块分享一行
2.标签不可设置大小
例子：span em strong del i u sub sup a
2.行内块标签
特征：
1.与普通行内标签相同，都不独占一行，而是与其他行内标签共享一行。
2.与普通行内标签不同，行内块标签可以设置大小
例子：img input
3.块级标签
特征：
1.独占一行，不与其他标签共享一行
2.可以设置大小
例子：div h1-h6 p

内容标签

h1-h6标题标签

<!--h1-h6字体大小依次缩小-->
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>

a标签，用于设置超链接

<!--a标签用于设置超链接 href参数设置超链接对象-->
<a href="http://www.baidu.com">百度一下</a>

一些字体相关的标签

<!--一些字体标签-->
<em>斜体</em>
<strong>加粗</strong>
<i>也是斜体</i>
&nbsp;<!--设置一个空格-->
<hr><!--设置一条分割符-->
<br><!--设置一个换行-->
<u>设置下划线</u><!--设置下划线-->
<del>删除线</del><!--设置删除线-->
<sub>下标</sub><!--设置下标-->
<sup>上标</sup><!--设置上标-->

img标签用来放置一些图片

<!--放置一张图片-->
<img width="100" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557415502059&di=8d751950da7f747d4e4366a96428aab0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201601%2F25%2F20160125141749_JuUzW.jpeg" alt="老婆没有了" title="国民老婆">

ps: 在设置标签大小时尽量只给长或者宽一个参数，防止图片失真。

排版标签

常用的排版标签有
div div标签中可以放置任意内容
p p标签中不能放置其他独占一行的标签
span span标签用于放置一个不独占一行，不可以设置大小的一个小盒子

<div>设置一个盒子</div><!--放置一个盒子，该盒子可以设置大小-->
<p>设置一个段落</p><!--放置一个段落-->
<!--p标签中不能有必须独占一行的标签，如<div><p>等，有这些标签会使得浏览器自动将p标签切成两半造成布局混乱-->
<span>一个不独占行的小盒子</span><!--span标签用于放置一些小盒子，不能设置大小，也不独占一行-->

form标签

form标签提供了一个表单控件，可以提交一些信息到目标服务器
form标签的一些属性

form标签的action属性设置数据的提交对象
form标签的methon属性用来设置提交方式
- get 以get的方式提交信息，信息会显示在地址栏
- post 以post的方式提交信息，信息不回显示在地址栏

<form action="http://127.0.0.1:8080" method="get">
    <lable for="firstinput">姓名</lable>
    <input type="text" name="meg" value="默认" id="firstinput">
    <input type="submit" value="提交">
</form>