html标签----CSDN博客

本文链接：https://blog.csdn.net/mmkyyy/article/details/140934340

.

1.标题标签

<title>绵绵网站</title>

（description:描述）

（keywords:关键字）

(&.nbsp;添加空格，直接添加空格，无论有多少个空格都会被识别为一个空格位置)

2.超链接（a标签）

 <a href="http://www.baidu.com" target="_blank" title="百度一下，你就知道">百度</a>

超链接标签可以给文字添加超链接，也可以给图片添加超链接

 <a href="https://www.baidu.com"><img src="../img/baidu.gif" alt=""></a>

超链接有4个状态：

1.未访问：蓝色

2.访问（点击过）：紫色

3.鼠标悬浮的颜色：是什么就是什么（不一定）

4.按着不动：红色

3.图片标签

<img src="./img/bilibili.avif" alt="bilibili" title="这是哔哩哔哩的图片" width="300">

src=""中间写图片的URL地址（来源）
alt=" "1. 中间写的是替换文本（图片显示不出来时所显示的内容）2.关键词，alt要与内容保持一致
title=" " 鼠标悬停所展示的内容
wight=" " 图片的宽 * * * *图片的宽，高只需要设置一个即可，会自动成原比例缩放

（.jpg：颜色识别高）

（.png：半透明）

（.gif：动图）

热点地图：

 <img src="../img/clothes.png" alt="" usemap="#text">
    <map name="text" id="text">
        <area shape="rect" coords="323,53,501,215" href="http://www.baidu.com" alt="" target="_blank">
        <area shape="circle" coords="407,437,107" href="http://www.jd.com" alt="" target="_blank">
        <area shape="poly" coords="97,177,226,181,307,261,275,330,270,507,167,497,54,514,38,327,12,248,97,177" href="http://www.taobao.com" alt="" target="_blank">
    </map>

shape="rect" 形状为矩形的 coords ="左上角,右上角"
shape="circle" 形状为圆形的 coords=" 圆心,半径"
shape="poly" 形状为多边形 coords="每个角的位置"

4.标题标签

 <h1></h1>  ：在页面中只能出现一次（SEO优化）

  <h2></h2>

  <h3></h3>

  <h4></h4>

  <h5></h5>

  <h6></h6>

h2-h6标签可以有多个

特点：1.h1最大，h6最小

2.独占一行

3.默认加粗

5.段落标签

<p></p>

<h1>加强文化和自然保护示</h1>
    <p>为世界文明百花园增添了绚丽的色彩。</p>
    <p>推动构建人类命运共同体作出新的更大贡献。</p>

p段落标签每段独占一行且每段之间有空隙

6.水平线标签（自带阴影）

< hr width="" size="" align="" color="" noshade / >

noshade： noshade 没有阴影

align：对齐方式

size：水平线的大小（粗细）

7.换行标签(强制换行)

（用来输入空行，而不是分割段落）

<br/>

8.无意义标签

<div></div>

<span></span>

div 独占一行，能设置宽高
span 与其他在一行显示，不能设置宽高

9.文本标签

加粗（粗体）：

<strong></strong>
<b></b>

斜体：

<i></i>
<em></em>

下划线：

<u></u>
<ins></ins>

删除线：

<del></del>

上标：

 <sup></sup>
eg： <div>x<sup>2</sup></div>

下标：

<sub></sub>
eg：<div>H<sub>2</sub>O</div>

10.列表标签

1>无序列表:

disc:默认（实心黑圆点） square：矩形黑 circle：空心黑圆

<ul type="disc|square|circle">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>6</li>
</ul>

2>有序列表

start表示从第几个开始

<ol type="a|A|i|I" start="num">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>6</li>
</ol>

3>自定义列表


    <dl>
        <dt></dt>
        <dd></dd>
    </dl>

图文并茂：

<figure>
    <figcaption>这是一张图</figcaption>
    <img src="1.png" width="200">
</figure>

11.预格式标签

保持原样输出

   <pre></pre>

12.表格标签

cellpadding="0"文字和边框之间的间距
cellspacing="0"单元格与单元格之间的间隙
tr里面必须是td

 <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" align="center" valign="middle"><strong>回单类型</strong></td>
            <td width="300px">网上转账汇款</td>
            <td colspan="2" align="center" valign="middle"><strong>指令序号</strong></td>
            <td width="300px">HQH000000000000000138781722</td>
        </tr>
</table>

水平方向 align:"left|center|right"
垂直方向 valign:"top|middle|bottom"
跨行：rowspan
跨列：colspan
注：表格的跨行跨列只能向右，向下跨、

13.表单标签

 <form action="" method="get"  enctype="multipart/form-data"   name="form">
</form>

表单form

action=""表示：将来数据要提交的位置
method=""表示提交方式 1.默认=get 通过地址栏传递 2.post 通过隐藏方式传递数据
enctype="" multipart/form-data表示有文件上传（√） application/x-www-form-urlencoded 表示没有文件上传
name=""名字

1>单行文本框

 请输入您的用户名：<input type="text" name="text" id="text" size="25" maxlength="10" placeholder="不得小于10个字符" value="用户名">

type="text" 是文本框:

name和id 都表示名字必须写且不能重复
size=""表示宽，也就是文本框的长短
maxlength=""表示这个文本框最大可以输入几个字符（字母数字汉字都一样）
placeholder=""表示占位符（提示文本）灰色的字
value=""表示默认真实数据这个里面的数据默认都显示到文本框里了

拓展属性：1. readonly 表示只读用户不能修改其内容

 <input type="text" name="" value="kk" id="" readonly>

2.disabled 表示禁用，选框的颜色会变成灰色(即使使用checked默认选中，也不会被提交

<label for="lan">篮球</label>
<input type="checkbox" id="lan" value="篮球" name="love[]" disabled  checked>
<label for="zu">足球</label>
<input type="checkbox" id="zu" name="love[]" value="足球" >

3.required表示必填项

2.多行文本框

 <textarea name="" id=""  rows="5" cols="30"></textarea>

rows是能显示的行数
cols是能显示的列数

3>密码框

请输入您的密码 ：<input type="password" name="pwd" id="" size="25" placeholder="请输入您的密码，不得使用汉字">

name和id 都表示名字必须写且不能重复
size=""表示宽，也就是文本框的长短
maxlength=""表示这个文本框最大可以输入几个字符（字母数字汉字都一样）
placeholder=""表示占位符（提示文本）灰色的字
value=""表示默认真实数据这个里面的数据默认都显示到文本框里了

4>按钮

<input type="submit" value="提交">
<input type="reset">
<input type="button" value="普通按钮">

type="submit" 提交按钮
type="reset" 重置按钮
type="button" 无意义按钮

5>单选框

<label for="men">男：</label>
<input type="radio" value="男" name="sex" id="men" >
<label for="women">女：</label>
<input type="radio" value="女" name="sex" id="women">

单选框type="radio"
若想汉字与按钮关联的话加label标签 id要与for的值保持一致

6.多选框

 <label for="read">阅读：</label>
 <input type="checkbox" name="love[]" id="read">

 <label for="daima">代码：</label>
 <input type="checkbox" name="love[]" id="daima">

 <label for="music">音乐：</label>
 <input type="checkbox" name="love[]" id="music">

love[]表示当前数据为数组类型

7.下拉菜单

 <select name="" id="" size="1">
               <optgroup label="北方">
                         <option value="">1</option>
                         <option value="">2</option>
                         <option value="">3</option>
                         <option value="">4</option>
                 </optgroup>
                  <optgroup label="南方">
                           <option value="">a</option>
                           <option value="">b</option>
                           <option value="">c</option>
                  </optgroup>        
 </select>

optgroup label="" 表示分组
size 表示下拉菜单默认可见行数

8.文件上传

 <input type="file" name="" id="" >

a-文件上传时 form里的method="post" 必须写post
b-form里的enctype=1.application/x-www-form-urlencoded 默认的设置，没有文件上传可以不加 2. multipart/form-data 有文件上传

若想上传成功，a- b- 必须写

9.隐藏域

 <input  type= " hidden"   name="cang"   value="" />

隐藏域不会在页面的显示隐藏域的值仍会被提交到服务器

14.拓展input的type属性值：

1.search搜索域 eg：百度

<input type="search" name="" id="">

2. date 日历(日期框)

<input type="date" name="" id="">

3.datetime-local 本地时间 (几年几月几日几时几分)

<input type="datetime-local" name="" id="">

4.month月(几年几月)

 <input type="month" name="" id="">

5.week周 (第几年第几周)

<input type="week" name="" id="">

6.url地址，网址 (有提示文本：请输入正确的网址)

 <input type="url" name="" id="">

7.email邮箱 (有提示文本：请输入正确的邮箱)

   <input type="email" name="" id="">

8.range范围(有拖拽条) value表示从几开始 step表示一步走多少 max表示最大长度

   <input type="range" name="" id="" value="2" step="10" max="100">

9.number数字(有上下调动的小三角)

 <input type="number" name="" id="">

10.color 颜色，拾色器(可选颜色)

 <input type="color" name="" id="">

15.fieldset 可将表单中的内容分组

<form>
     <fieldset>
         <legend>输入相关信息</legend>
         username: <input type="text" />
         password: <input type="password" />
      </fieldset>
</form>

效果：

16.frameset 框架集

<frameset rows="10%,*">
        <frame name="" src="./31-top.html" frameborder="0" noresize="noresize" scrolling="no"></frame>
        <frameset cols="10% , * ,20%">
                <frame name="one" src="./32-left.html" frameborder="0" noresize="noresize" scrolling="no"></frame>
                <frame name="two" src="./middle.html" frameborder="0" noresize="noresize" scrolling="no"></frame>
                <frame name="three" src="./34-right.html" frameborder="0" noresize="noresize" scrolling="no"></frame>
        </frameset>
               
</frameset >

rows表示上下分为几块 cols表示左右分为几块
* 表示剩余的全部
frameborder="0"表示是否显示框架边框 0不显示 1显示
noresize="noresize" 表示不让调整窗口大小
scrolling="yes|no|auto" 表示是否显示滚动条
跳转的话：步骤
1.起名字(想跳转到那一块就给那一块起名字)
2.跳转到指定的name窗口<a target="two" href="./属性.html">html属性</a>

17.iframe

1.内连框架(在页面中嵌入一个页面)

 <iframe src="./37-iframe2.html"  frameborder="0"></iframe>

2.iframe跳转

 <a target="_parent" href="http://www.baidu.com">哈哈哈</a>

target 表示跳转

target="_blank"表示在新窗口打开
tatget="_self"表示在自身窗口打开
target="_parent"表示在父级窗口打开(配合iframe使用)
target="_top" 表示在顶级窗口打开(配合iframe使用)
target=自定义表示在指定窗口打开(在frameset中起名字)

18.details表示详情标签

<details>
        <summary>点击查看更多</summary>
        <p>哈哈哈哈</p>
 </details>

summary表示想要展示的语句 (有一个向下的可以自己点击的黑色小三角)
<p>哈哈哈哈</p> 这句话可以随便写，代表是隐藏的语句可以使用任何标签