html 简单常用标签整理

最新推荐文章于 2024-09-12 18:22:06 发布

onejava0821

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量171

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/onejava0821/article/details/87776816

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html 又叫做超文本标记语言，是一种用于创建网页的标准标记语言

我们可以使用html 来创建自己的web站点，html运行在浏览器上，由浏览器来解析。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   </body>
</html>

以上是我在Hbuilder中新建了一个html文件的标准模板，主要由<head>、<body>两大块组成，<head>中主要用来存放网页的基本设置，初始化，像<meta charset="UTF-8">设定了网页的编码格式为utf-8； <title>元素设定了网页的标题

<body>元素包含了可见的页面内容

常用的标签整理：

（1）<h1>标题</h1> ：html中的标签通常都是成对出现的，<h1>标签定义了一个大标题，数字表示字号，从1~6 逐渐减小

（2）<p>这是一个段落</p> : 此标签用来定义此段是一个段落

（3）<br/>:此标签用来表示换行

（4）<b>加粗</b>:此标签用来表示字体加粗，<strong>同样可以加粗，同时还有加强语义的效果

（5）<i>倾斜<i>:此标签可以使得字体变得倾斜，<em> 同样可以使字体变得倾斜

（6）<hr/>:此标签可以用来设置一条水平线，用来分隔

（7）<font>字体</font>:此标签可以用来设置字体的多个选项，

<font color="red" size="2" face="微软雅黑">字体<font> 在语句中我设置了颜色为红色，大小为2（1~7逐渐增大与<h>标签不同），字体为微软雅黑

（8）<img src="#" width="100px" height="100px" alt="图片加载失败"/>:此标签用来设置图片，src表示图片的路径，并将图片的长宽都设置为了100px(图片的长宽也可以设置成百分比)，alt用来设置当图片无法加载时显示的文字

（9）<a href="#" target="_blank">超链接</a> :此标签定义一个可以跳转到其他网页的链接，href中设置目标网站的网址,target设置以什么方式打开（例子中用_blank表示新开一个网页，_self 表示在当前窗口打开）

（10）<ul type="square">
<li>百度</li>
<li>谷歌</li>
</ul>

<ul>标签定义一个无序列表 type属性可以定义每项前标签的样子，li表示其中的项

（11）

<ol>标签定义了一个有序列表 type属性可以定义标签类型（例子中使用了数字），start属性可以定义列表从几开始

（12）

表格是非常常用的一个标签，<table>表示表格标签，align属性表示表格居中，border属性表示显示表格边框，宽度为1px，bgcolor属性表示背景颜色，在tr和td中都可以设置以上属性,此外表格里可以嵌套表格

<tr>表示行，<td>表示列，（例子中创建了一个一行五列的表格）

（13）<colspan>:跨列

<rowspan>:跨行用来合并单元格

<td rowspan="2">用来跨行长度为2

（14）html表单

表单在写注册页面时非常实用

<input type="text" name="username"/>:文本输入框使用get方法提交表单时，会增添username=text中的内容在网址后面

<input type="password" />:密码输入框

<input type="file" />:上传文件

<input type="radio" />:单选按钮 <input type="radio" name="sex" />男 <input type="radio" name="sex" /> 女 (name="sex"可以保证两个单选为一组，不会出现多选的情况）

<input type="checkbox" />:多选框

<input type="date" />:可以自己选择日期

<input type="datetime-local" />:更具体的时间

<input type="tel" />:可以选择电话号码

<textarea></textarea>:文本区域

</select>:下拉选项框

<input type="submit" value="提交"/>:提交按钮，value属性表示名字

<input type="button" value="普通按钮" />：普通按钮

<input type="reset" value="重置按钮"/>：重置按钮

<input type="hidden" value="#" />:隐藏域，用来存放页面上一些ID信息

input:

type属性：指定输入项的类型

name属性：在表单提交的时候，当作参数的名称

id属性：给输入项一个名字，以便后期我们去找到操作它

表单标签：<form action="#" method="post"></form>:将你要提交的信息用form标签包裹起来，action属性决定提交后转到的页面

method 默认get方式提交，使用post方式不会将内容拼接在网页后面，而是将参数封装在请求体中，而且内容大小不受限制，安全性更高

（15）frameset

后台页面显示：

frameset可以将网页切割成自己想要的布局，如上例中，我用cols将页面划分成三部分，大小分别占20%,30%,50%, frame 中的src属性表示一个html文件,name属性表示它的一个名称，比如在超链接中 <a src="#" target="k"></a>，我们将超链接的target设置为k，那么它会打开src指向的html文件，然后将内容展现在name=k 的frame中。