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属性值为要跳转的链接地址

<link rel="stylesheet" href="">链接一个css文件,href属性值为css文件路径
<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

<iframe src="https://www.hao123.com/" frameborder="0"></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:元素以内联块元素显示

 

 

 

 

 

 
 

 

posted @ 2019-06-25 00:42  天涯——咫尺  阅读(159)  评论(0编辑  收藏  举报