html基础汇总

来源：互联网发布：查中药的软件编辑：程序博客网时间：2024/06/07 17:39

html主要可以分为三大部分

一：基础标签的使用

我们先从最基本的标签说起

表头<title>的一个样式的修改<h1><h2><h3><h4><h5><h6>从大到小的排列顺序

一般而言我们用来修饰表头都是用<h3>

既然说到标题那就有主体部分吧<body>

而主体最多的就是段落

引出我们的段落标签<p></p>

它是一个块级标签会自动换行

这里我们提一下换行标签<br>

大家都知道我们在浏览网页的时候，当我们点击一段文字的标题时，会链接这文章的内容，这就是跳转标签

而这个功能的实现，离不开<a>标签，因为我们在a标签里面加上了href属性，这是一个绑定地址栏的标签，而跳转

又分为页面内的跳转，和页面外的跳转，这里我举一个通俗的例子，大家应该都逛过淘宝，当我们浏览这个商品的时候，如果翻到底部，会有一个回到顶部的一个标签

而这个标签就是业内的跳转，同样，一般而言，商品下面都会有其他商品的链接，而这个就是页外跳转，关于跳转我就说到这里

下面来说一个关于照片的标签<img>image的缩写（这里做一个友情提示，其实学程序就是英语+数学，学英语还是有一定的优势的，因为在h5的许多新特性标签，都是见明其意的）主要有两个主要的属性src地址栏（可以是远程代码，也可以是本地地址）alt，当这个地址栏失效的时候，alt主要就是做一个解释说明的作用，当然还有一个修改照片的属性，宽高 width height 不过我并不推荐在这里面直接进行修改，一般而言我们都是在css里面进行修改的

下面我们来讲一些列表的使用，列表主要有三种

<ul>无序列表

它里面还有一些属性的修改

type在无序列表主要有三个属性值disc实心圆一般也是默认circle空心圆，square实心正方形

<li>列表项

<ol>有序列表

type在有序列表中主要有五种表达方式

1阿拉伯数字

1.2.3.4.5.....

a小写字母

a.b.c.d.e..

A大写字母

A.B.C.D.E..

I大写罗马数字

I II III IV..

i小写罗马数字

i ii iii iv...

还有一个start属性，代表从第几个开始，可以为负值，但必须是整数

格式就是这样

-3 <li></li>

......

...

<dl>自定义列表

<dt>标题

<dd>内容

其实每种列表我想大家应该都会用，但是最常用的还是列表的嵌套，并不会单独用那个列表

我举一个例子来说民列表的嵌套

做一个菜单

首先它要有菜种，然后是具体菜的名字

<ul type="circle">    <li>湘菜</li>    <ol type="1">        <li>湘菜一</li>        <li>湘菜二</li>        <li>湘菜三</li>    </ol>    <li>川菜</li>    <ol type="a">        <li>川菜一</li>        <li>川菜二</li>        <li>川菜三</li>    </ol>    <li>鲁菜</li>    <ol type="i">        <li>鲁菜一</li>        <li>鲁菜二</li>        <li>鲁菜三</li>    </ol></ul>

这里主要就用到了无序列表和有序列表的嵌套，还有很多种，但是在这里我就不做多多演示了

二：表单

表单的使用，一般而言，主要用在登录页面的较多

我先说一下表单的标签吧

<form>它里面主要有两种属性

action用来填写地址，还有一个信息提交现显示方式method，分为get（他会将提交的信息直接显示在地址栏中，一般而言都是用提交一些比较小的信息量） post（他会隐藏提交信息）

下面来说一个我们见的最多的一个东西

登录页面

我来解释这个基本的登录

label这个标签，主要就是，当你点击label会激活对应的文本框(因为for属性对应着id属性)

type="text" 你输入的东西会被看到，因为它是一个文本框

type="password"输入的东西不会被看到，因为它是一个密码框

maxlength代表你输入的最大值

之所以加name属性，主要就是你提交信息的时候，因为name属性，它会提交到服务器中，如若没有，提交不到服务器中

size属性主要是找你文本框（密码框）的大小 value就是一个你赋给文本的一个初始信息

下面来说一些单选框和多选框的信息

大家都知道当让我们主页某页面的时候，都会有一个性别选择

但是只能选一项，这就是单选框（在这单选框是应用最广泛的地方）

代码是这样写的

<input type="radio" name="sex" value="男">男

<input type="radio" name="sex1" value="女">女

在这里我提一下，若是单选，name属性一定不能一样，否则两个选项都可以选

来解读一下这行代码

首先呢单选 type=radio，别问为什么就是这样规定的

name就是提交信息的时候会提交到，和面如果碰到类似name便不会再提了 value

方便我们看得更清楚，选择的是男的，这里只是一个编号，并不一定哟按照我这样写，我只是为了方便理解

如果你想默认某项选择的话，可以加上checked属性

多选框

一般用于选择兴趣爱好，购物车，等等

<input type="checkbox">英雄联盟

<input type="checkbox">剑灵

多选框就是type="checkbox"这个没什么好说的

和这有关系的就是下啦列表

在我们注册信息的时候，常常会有你是哪个省的哪个下拉选项，其实哪个就是下拉列表的一种应用

</select>

option标签就是一种选项

下面就来说一些常用的按钮

按钮一般用于提交信息，就是我们一般常用的登录，注册等等

也是在input里面

submit见名思意提交的意思 value就是这个按钮的功能

reset 重置，清空当前页面你提交的信息

button，就是一个普通按钮，没有任何的功能

还有最强大的一个标签

就是<button></button>他可以插入任何内容标签总之特别强大

三：表格

表格主要有两种作用，一种，是单纯的做表格使用

还有一种，就是做一个页面的布局，这里就牵扯到表格的嵌套

我们先来说第一中，基本的表格

<caption>表示这个表格的标题

tr代表一行

td代表一列

这是一个最基本的标签，所有复杂的表格都是在这个基础上做成的

我们来一个简单的九宫格

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

下面我们来做一个稍微正式的一个个人信息调查表

首先我们先写出它的大致框架，然后在填充具体东西

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

可以看出，在这表格我们新加入了三个标签

<thead>表头部分

<tbody>主体部分

<tfoot>结尾部分

至此，第一部分九完成了，当然第二部分，就是基于第一部分，主要就是表格的嵌套，说直白点，就是表格套表格

参考网站，你可以找一些比较老的网站，他们一般都用这种表格来进行布局，你可以在网页直接按f12就可以看到

好了关于html的一些基本东西，我就说到这里，如果还有其他的没说的，大家可以帮忙说一下

阅读全文

0 0