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属性值为要跳转的链接地址
二,HTML表单
form表单
三,内联框架
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:元素以内联块元素显示