HTML之常用标签

其他 2018-10-23 10:31:29 阅读次数: 0

一.基本结构标签

**###注：下面的（）在HTML文件是以<>形式存在的**

1.（HTML）：表示该文件为HTML文件
2.（HEAD）：包含文件的标题,使用的脚本,样式定义等
3.(TITLE）—（/TITLE）：包含文件的标题,标题出现在浏览器标题栏中
4.(/HEAD)：(/HEAD)的结束标志
5.（BODY）：放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
6。（/BODY）：（BODY）的结束标志
7.（HTML）：（HTML）的结束标志
在这里插入图片描述
在这里插入图片描述

二.文本标签

注：其它主要标签,以下所有标志用在(BODY)---(/BODY)中

1.标题标签: （h1）（/h1）；h1-h6
2.段落标签: ( p) (/p) (段落之间会空一行)
3.加粗标签: (b)(/b),( strong)(/strong)
4.斜体标签: (i)(/i)
5.下划线标签:( u)（/u）
6.删除标签: （s）（/s）
7.换行标签: (br)-----（第一个没有成对出现的标签，单纯的换行，行与行之间无空行）
8.水平分隔符标签: (hr)----
9.预格式化文本标签(保留文本的原有格式): （pre)(/pre)
10.上标和下标标签: (sup)(/sup)， (sub)(/sub)
11.块引用标签: (blockquote)
12.普通的文本: (span)(/span) — 行内标签(只占据文本本身的大小)
13.普通文本的标签:(div)(/div)------行外标签（一个标签占据一行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<h1>1级</h1>
<h2>2级</h2>
<h3>3级</h3>
<h4>4级</h4>
<h5>5级</h5>
<h6>6级</h6>
<!--这里是用作对比的,会发现我们写两行的东西却在一行-->
<b>第一段</b>

<strong>第二段</strong><br>
<i>第一段</i><br>
<u>第一段</u><br>
<s>第一段</s>
<p>第一段</p><hr>
<p>第二段</p>

<!--这里是用作对比的,会发现我们写两行的东西却在一行-->
击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！

<pre>
击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！
</pre>

x<sup>2</sup>+2x+1 = 1
<br/>
这个方程的解： x<sub>1</sub>=0 x<sub>2</sub>=-2

<blockquote >
    击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！

</blockquote>

<span>hello</span><span>world</span><br><br><br>


<div>hello</div><div>world</div>

</body>
</html>

在这里插入图片描述

文本标签的常用样式（属性）

样式均在style中

1.TEXT.ALIGN:LEFT,左对齐(缺省值),
2.TEXT.ALIGN:CENTER,居中
3.TEXT.ALIGN:RIGHT,右对齐.
4.WIDTH:象素值或百分比,对象宽度.
5.HEIGHT:象素值或百分比,对象高度.
6.COLOR:前景色
7.FONT-SIZE:设置字体的大小
8.BORDER:设置边框
9.padding-top: 文本距边框上部的距离
10padding-left: 文本距边框左部的距离

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


<pre style="color: red;font-size: larger;
border: 1px solid aquamarine; text-align:left
padding-top: 20px;
padding-left: 80px">
击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！
</pre>


<br/>

<span style="color: red;font-size: medium ;width: 100px; height: 100px;
 border: 1px solid aquamarine">hello</span>
<span>world</span><br><br><br>


<div style="color: red;font-size: medium ;width: 100px; height: 100px;
 border: 1px solid aquamarine">hello</div><div>world</div>

</body>
</html>

在这里插入图片描述

三.超链接标签

<--a标签-->

href="—":引号内是要跳转到的地址
target="—":引号内常用（_parent）/（_blank)
####_parent：在当前窗口打开
####_blank：新建窗口打开
style=" ": 常见的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<!--跳转到指定的-->
<a href="http://www.baidu.com"
   target="_blank"
   style="color: palevioletred;font-size: xx-large">百度知道</a>
<br>
<br>
<a href="http://www.baidu.com"
   target="_parent"
   style="color: red;font-size: small">百度知道</a>

</body>
</html>

在这里插入图片描述

跳转到当前页面的指定位置（锚点）
上边是真正的链接，href="#–",引号中#后边是要跳转到的地方
下边name后边的内容是为要跳转到地方的打下基础

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

<!--跳转到当前页面的指定位置（锚点）-->

    <a href="#C1">第一个标题 </a>
    <a href="#C2">第2个标题 </a>
    <a href="#C3">第3个标题 </a>
    <a href="#C4">第4个标题 </a>
    
    
    <h1><a name="C1">第一个标题</a></h1><br>
    
    <h1><a name="C2">第二个标题</a></h1><br>
    
    <h1><a name="C3">第三个标题</a></h1><br>
    
    <h1><a name="C4">第四个标题</a></h1><br>
    
    </body>
    </html>

在这里插入图片描述

三.图片标签

<--img标签-->

1.插入图像并设置大小

src=“ ”:指定图片的位置， 可以是url地址， 也可以是本地的图片;
alt=“ ”: 如果图片不能正常加载， 则显示alt里面的文字;
也可以设置图片的一些常用样式，如：width；height；等

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

<!--这里我的图片url地址不对，所以他会显示alt中的内容-->
<img src="https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/82836618" alt="这是csdn的logo图片"><br>
<img src="img01.jpg" alt="img01.jpg"><br>
<img src="img01.jpg" alt="img01.jpg" width="460px" height="96px"><br>
</body>
</html>

在这里插入图片描述

2.设置图像相对于描述文字的的对齐方式(html)中已弃用， 通过css样式实现功能
(align)

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


linux桌面: <img  align="top" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
<br/>
<br/>
linux桌面: <img align="middle" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
<br/>
<br/>
linux桌面: <img align="bottom" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
</body>
</html>

在这里插入图片描述

3.将图像浮动到文本的周围
(align)

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



linux桌面: <img align="left" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
<br/>
<br/>
<br/>
<br/>
linux桌面: <img align="right" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
</body>
</html>

在这里插入图片描述

4.图像超链接。即通过点击图片进入相应的界面
<a,img>两个标签结合使用即可
这里有两个链接，但第二个是图片链接

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

<a href="http://www.baidu.com" style="font-size: x-large;color: red"> 百度知道</a>
<br/>
<br/>
<br/>
<a href="http://www.baidu.com"> <img src="img02.jpg"></a>

</body>
</html>

在这里插入图片描述

五.序列化标签

1.<--ul无序化标签--><--li标签-->

案例1：实现水平导航栏

下面代码各部分作用
（ul）表明为无序标签
ul中设置的样式是为了去掉描述文字前的标号
（li）定义列表项目
li中的样式：
display：inline-block:由于默认情况下列表项目会在一列列出，而我们想让其在一排列出，就需要设置样式display为：inline-block，使其变为行内元素， 并且可以设置高度和宽度
background:设置背景颜色

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

<ul style="list-style-type: none">
    <li style="display: inline-block; width: 20%; background: azure;">HTML</li>
    <li style="display: inline-block; width: 20%; background: azure;">CSS</li>
    <li style="display: inline-block; width:20%; background: azure;">JS</li>
    <li style="display: inline-block; width: 20%; background: azure;">python</li>
</ul>


</body>
</html>

在这里插入图片描述
案例2：实现竖直导航栏
display:block将各列表设置为在一列

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

<ul style="list-style-type: none">
    <li style="display: block; width: 20%; background: azure;">HTML</li>
    <li style="display: block; width: 20%; background: azure;">CSS</li>
    <li style="display: block; width:20%; background: azure;">JS</li>
    <li style="display: block; width: 20%; background: azure;">python</li>
</ul>



</body>
</html>

在这里插入图片描述

2.<--ol有序化标签--><--li标签-->

案例：实现竖直导航栏

下面代码各部分作用：
（ol）表明为无序标签
type：指定有序列表符号的类型
（li）定义列表项目
type：指定有序列表符号的类型
li中的样式(style)：
background:设置背景颜色
color:设置字体颜色,也可以设置高度和宽度
text-decoration: none; —去掉原有标签的文本装饰

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

<ol type="A">
    <li type="1" style="color: black;text-decoration: none;">html </li>
    <li style="color: black;text-decoration: none">css </li>
    <li style="color: black;text-decoration: none">js </li>
    <li style="color: black;text-decoration: none;background: red;width: 20%">python </li>
</ol>

</body>
</html>

在这里插入图片描述

3.<--dl嵌套标签--><--dt标签--><--dd标签-->

下面代码各部分作用：
(dl):表明该标签为嵌套标签
(dt):嵌套的第一层
(dd):嵌套的第二层

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

<dl>
    <dt>HTML</dt>
    <dd>li</dd>
    <dd>span</dd>
    <dd>div</dd>
    <dd>hr</dd>
    <dd>sub</dd>
    <dt>CSS</dt>
    <dd>text-decoration</dd>
    <dd>color</dd>

</dl> 
</body>
</html>

六.表格标签

<--table标签-->

1.基本格式

(table) :定义表格，可以设置一些常用样式
border=“1px”：—设置边框
cellpadding=“3”： -----设置表格的内边距
cellspacing=“5” ----设置表格的外边距
(caption):表格的标题
(th):表格的表头，大多数浏览器会把表头显示为粗体居中的文本
(tr)：表格若干行
(td)：每行若干单元格，指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="80%;" border="1px" cellpadding="5px" cellspacing="5px">
    <caption style="color: red;font-size: xx-large">课表</caption>
    <tr>
        <th>周1</th><th>周2</th><th>周3</th><th>周4</th><th>周5</th>
    </tr>
    <tr>
        <td style="text-align:center">数</td><td>数</td><td>数</td><td>数</td><td>数</td>
    </tr>
    <tr>
        <td style="text-align:center">语</td><td>语</td><td>语</td><td>语</td><td>语</td>
    </tr>
    <tr>
        <td style="text-align:center">英</td> <td>英</td><td>英</td><td>英</td><td>英</td>
    </tr>
    <tr>
        <td style="text-align:center">体</td><td>体</td><td>体</td><td>体</td><td>体</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

2.合并单元格
往往我们在建立单元格的时候，有些单元格的内容一样，那么我们可以将其合并为一个单元格。
合并的格式有两种：
1）将在一排的某几个单元格合并为一个
colspan=“n”-------该语句放在要合并的几个单元格中开始的哪一个，n代表的是要合并的单元格的个数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="60%;" border="1px" cellpadding="5px" cellspacing="5px">
    <tr>
        <td>主机名</td>
        <td style="text-align: center" colspan="3">IP</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

</table>
</body>
</html>

在这里插入图片描述

2）将在一列的某几个单元格合并为一个
rowspan=“n”-------该语句放在要合并的几个单元格中开始的哪一个，n代表的是要合并的单元格的个数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="60%;" border="1px" cellpadding="5px" cellspacing="5px">
    <tr>
        <td>主机名</td>
        <td>server1</td>
        <td>server2</td>
        <td>server3</td>
    </tr>


    <tr>
        <td style="text-align: center" rowspan="3">IP</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

    <tr>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

</table>
</body>
</html>

在这里插入图片描述

七.表单标签

<--form标签-->

1.(form) 用于创建供用户输入的HTML表单。
属性：
action=" " :规定表单提交时向何处发送数据。

method=“post/get”: 规定发送表单数据的HTTP方法。

name=" ": 表单名。

target=" ": 规定打开action的url的方式。

2.（textarea） 标签定义了多行文本输入控件

3.(input) 标签声明允许用户输入数据的input控件，输入数据的方式有很多，取决于type属性。
type: number、time、year、month、data、url、email、image、range、file、search、submit、button、text、tel（电话号码字段）、radio、checkbox。
例：一些type属性的用法参考下列代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form  method="get">
    <!--文本域-->
    <span>用户名: </span><input type="text"><br/>
    <!--密码域，输入时可以不显示输入的内容-->
    <span>密码:</span><input type="password"><br/>
    <!--文本域-->
    <span>个人简介:</span><textarea></textarea><br/>
    <!--提交文件-->
    <span>个人简历：</span><input type="file"><br/>
    <!--日期-->
    <span>出生日期:</span><input type="date">
    <!--提交按钮，value后的值为想要在按钮中显示的内容，若不设置则会显示默认值-->
    <input type="submit" >
    <input type="reset" value="重置">
</form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--单选按钮-->
<span>性别:</span>
<!--name和value是为了将用户选择的信息传递给服务器， gender=1-->
<!--name一样是为了在选择一个以后,若再选,会覆盖掉原来的选项-->
<span style="font-size: small">男</span><input type="radio" name="gender" value="1">
<span style="font-size: small">女</span><input type="radio" name="gender" value="2"><br/>

<!--多选按钮-->
<span>你喜欢的书籍:</span>
<ul>
    <li><input type="checkbox" name="java"><span>java</span></li>
    <li><input type="checkbox" name="python1"><span>python1</span></li>
    <li><input type="checkbox"><span>python2</span></li>
    <li><input type="checkbox"><span>python3</span></li>

</ul>
</body>
</html>

在这里插入图片描述

一些特殊的表单标签:
1.(select):–下拉列表–
(option)标签内为可选择的内容,option中的第一个为默认选项

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

<select>
    <option>--选择省份--</option>
    <option>陕西</option>
    <option>山西</option>
    <option>河南</option>
    <option>河北</option>
</select>
</body>
</html>

在这里插入图片描述

2.(fieldset):–围绕数据的标签–
(legend)标签内为可围绕的内容

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

<fieldset>
    <legend style="width: 20%">个人简介</legend>
    <h1>用户登陆</h1>
    <hr/>
    用户名: <input type="text"><br/>
    <input type="submit" value="登陆">
</fieldset>
</body>
</html>

在这里插入图片描述

练习


1.结合表单标签和表格标签,使用一些属性,设计一个表格 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table style="width: 80%; background-color: aqua" border="1px" cellpadding="5px" cellspacing="0px">
    <caption></caption>
    <tr>
        <td><span>姓名:</span></td>
        <td><input type="text"></td>
        <td><span>性别:</span></td>
        <td><select style="width: 81%">
            <option>--请选择性别--</option>
            <option>男</option>
            <option>女</option>
        </select></td>
    </tr>

    <tr>
        <td><span>手机号码:</span></td>
        <td><input type="text"></td>
        <td><span>电子邮箱:</span></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><span>教育程度:</span></td>
        <td><input type="text"></td>
        <td><span>工作单位:</span></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><span>手机号码:</span></td>
        <td><input type="text"></td>
        <td><span>电子邮箱:</span></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><span>工作城市:</span></td>
        <td><input type="text" ></td>
        <td><span>期望工资:</span></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><span>自我介绍:</span></td>
        <td colspan="3"><input type="text" style="width: 550px"></td>
    </tr>
    <tr>
        <td><span>特长:</span></td>
        <td colspan="3"><input type="text" style="width: 550px"></td>
    </tr>
    <tr>
        <td><span>地址:</span></td>
        <td colspan="3"><input type="text" style="width: 550px"></td>

    </tr>
</table>

</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/forever_wen/article/details/82833433
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022