HTML基本标签及用法

最新推荐文章于 2023-09-05 17:56:17 发布

代码不会头发来凑

最新推荐文章于 2023-09-05 17:56:17 发布

阅读量429

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_48622530/article/details/126074474

版权

HTML基本标签及用法

文章目录

HTML基本标签及用法

html的文档结构

html的文档结构主要是有3部分组成的：
- < html >< /html>
< html>标记用于html文件的最前面，用来表示html文件的开始。而的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
- < head >和< /head>
< head>和< /head>构成html文件的头部部分，在此标记对之间可以使用< title> < /title>和< script> < /script>等等标记对，这些标记都是描述html文档相关信息的标记对，< head> < /head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
- < body>和< /body>
< body>和< /body>是html文档的主体部分，在此标记可以包括“< p>”,“< /p>”,“< h1>”,“< br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

META标记

META标记是html语言的head部分的一个辅助性的标记的，他位于head和title标记之间，他提供给用户不可见的信息。meta标记的用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。

TITLE标签

在头部的< head>< /head>中，有另一组标签< title>< /title>。打在< title>< /title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。

实例：

<title>这是我的html页面</title>

文字上的分隔标签

强制断行标记	< br>
强制分段标记	< p>
空格	&nbsp；

字体标签

设置字体标签	< font size=“2” color=“red” face=“黑体”>内容< /font>
加粗	< b>< /b>
斜体	< i>< /i>
底线	< u>< /u>
用粗体等宽字体显示文字	< kbd>< /kbd>>
用较小的固定宽度显示字体	< var>< /var>>

背景标签

   <html>
    <head><title>背景颜色</title> </head>
     <body  bgcolor="red">
     <font  size="4"  face="黑体"  color="red">背景颜色</font>
     </body> </html>

分隔线标签

使用:上一部分< hr>下一部分

<html>
    <head>
     <title>背景颜色</title>
    </head>
     <body>
         abcdefg。<br>
     	<hr  color="red"  width="240"  size="2" noshade>
       higklmn。
     </body>
   </html>

<IMG签>

语法：< img src=“boy.jpg” alt=“haha” align=“left” border=“0” height=“56px” width=“32px”>

<html>
    <head>
     <title>图片</title>
    </head>
     <body>
       <img  src="boy.jpg"  alt="haha" align="left" border="0“   height="56px"    width="32px">
     </body>
   </html>

序列标签

无序列表< ul>
有序列表 < ol>
自定义列表 < dl>

1.无序列表
例子：
 <html>
    <head>
     <title>无序列表</title>
    </head>
      <ul>
      <li>姓名：jock
      <li>生日：2000/11/9
      <li>星座：天蝎座
      </ul>
     </body>
   </html>
  
  说明：其中<ul>就是无序列表，没增加一列内容，就需要加一个<li>;
      可以为 <ul>添加属性type="disk"(实心点)
     				 type="square"(小正方形)
     				 type="circle"(空心点)


2.有序列表
例子：
<html>
    <head>
     <title>有序列表</title>
    </head>
      <ol>
      <li>姓名：jock
      <li>生日：1989/4/9
      <li>星座：天蝎座
      </ol>
     </body>
   </html>

说明：其中<ol>就是无序列表，没增加一列内容，就需要加一个<li>;
    可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马)；
   
例子： 可以指定序列的开始数目。
<html>
    <head>
     <title>有序列表</title>
    </head>
      <ol start="8">
      <li>姓名：jock
      <li>生日：1989/4/9
      <li>星座：天蝎座
      </ol>
     </body>
   </html>

3.自定义列表
 例子：
    <html>
    <head>
     <title>有序列表</title>
    </head>
      <dt>咖啡</dt>
       <dd>黑色热饮</dd>
       <dt>牛奶</dt>
        <dd>白色冷饮</dd>
     </body>
   </html>

特殊字符

&lt	<
&gt	>
&nbsp	空格
&quot	“ ”

表格

< able>< /table>	表格
< tr>< /tr>	行
< td>	列
rowspan	上下合并
colspan	横向合并

input标签


text	文本框
button	按钮
submit	提交
reset	重置
password	密码
checkbox	多选
radio	单选
file	上传文件
date	选取日、月、年
month	选取月、年
week	选取周、年
time	选取时间（小时和分钟）
datetime	选取时间、日、月、年
datime-local	选取时间、日、月、年（本地时间）

写法：< input type=“text” value=“”/>

在< from>表单里的使用

<!DOCTYPE HTML>
<html>
<body>

<form >
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p>

</body>
</html>

邮箱输入框	< input type=“email” name=“user_email” />
数字输入框	< input type=“number” name=“points” min=“1” max=“10” />
数字范围输入框	< input type=“range” name=“points” min=“1” max=“10” />
颜色选择框	< input type=“color” name=“colortext”/>

下拉列表

Select标签

<select>
        <option   value="qxz"  selected/>请选择
        <option   value=“A”/>苹果
        <option   value=“B”/>香蕉
        <option   value=“C”/>橘子
        <option   value=“D”/>西瓜
   </select>

带有预选值的下拉列表。

<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>