HTML基础知识

一，H5的文档申明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试首页</title>
</head>
<body>
</body>
</html>

<head>标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和js文件等，设置的内容不会显示在网页上，

标题的被人会显示在标题栏上。

<body>标签定义文档的主体，也就是页面显示的内容，body元素包含文档的所有内容（比如文本，超链接，图像，表格和列表等等）

注释标签，快捷键：ctrl + /

<h1></h1>标题标签，有h1--h6

<p></p>段落标签，段落里面不会连续显示多个空格，也不会往前缩进和换行

<br>换行标签

<hr>下划线标签

<div></div>块标签，表示一块内容，没有具体的语义，div标签可以把文档分割成独立的不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其相关联

<span></span>行内元素，表示一行中的一小段内容，没有具体的语义

<em></em>,<i></i>标签里面的字体倾斜

<strong></strong>,<b></b>标签里面的字体加粗

<img src="" alt="">图片标签，向网页中嵌入一幅图片，自带src（图片所在路径）和alt（图片显示不出来时显示）属性，还可在里面添加宽和高的属性，来调整图片的大小

<a href=""></a>链接标签，向网页中插入一个链接，可以跳转到相应链接网址，href属性值为要跳转的链接地址

<ul></ul>无序列表，没有1，2，3。。。。开头，列表一般搭配<li></li>标签使用，可用快捷键迅速创建多个数据：ui>li*5，如果列表还要插入如图片等，那么可以这样用：ul>(li>img)*5

<ol></ol>有序列表，有1，2，3。。。。开头

<table border="1"></table>一个表格标签里有多个tr（行），th（表头），td（表格单元）组成,border="1"表示在页面显示边框

二，HTML表单

form表单

<form action=""></form>用于为用户输入创建HTML表单，表单能够包含input元素，

比如文本字段，复选框，单选框，提交按钮等，

属性：action：定义表当数据提交地址

　　 method：定义表单提交的方式（常见的有get，post）

标签：label：为表单元素定义文字标注，有for属性，相当于id属性，一般配合input使用

　　 input：定义通用的表单元素，里面有type属性，submit表示提交输入的值，button表示单纯的按钮，file表示上传文件，radio表示单选框，checkbox表示复选框，reset表示重置按钮，text表示单行文本输入框，password表示密码输入框，image表示图片，hidden表示一个隐藏的表单域，用来储存值

　　 textarea：定义多行文本输入框

　　 select：定义下拉表单元素

　　 option：与select配合使用，定义下拉表单元素中的选项

三，内联框架

iframe

将其他网页的内容链接到当前页面显示

四，HTML元素分类

块元素

页面布局中常用的标签有：div，p，ul，li，h1-h6，dl，dt，dd等都是块元素，它在布局中的行为：

1.支持全部的样式；

2.如果没有设置宽度，默认的宽度为父级宽度的100%；

3.盒子占据一行，即使设置了宽度；

内联元素

也被称为行内元素，布局中常用的标签有：a，span，em，b，strong，i等等都是内联元素，它们在布局中的行为：

1.支持部分样式（不支持宽，高，margin上下，padding上下）；

2.宽高由内容决定；

3.盒子并在一行；

4.代码换行，盒子之间会产生间距；

5.子元素时是联元素，父元素可以用text-align 属性设置子元素水平对齐方式；

内联块元素

也叫行内块元素，时新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素，他们在布局的表现的行为：

1.支持全部样式；

2.如果没有设置宽高，宽高由内容决定；

3.盒子并在一行；

4.代码换行，盒子之间会产生间距；

5.子元素是内联块元素，父元素可以用text-align 属性设置子元素水平对齐方式；

display属性：用来设置元素的类型及隐藏的，常用的属性有：

none：元素隐藏且不占位置；

block：元素以块元素显示；

inline：元素以内联元素显示；

inline-block：元素以内联块元素显示