HTML常用标签总结-CSDN博客

HTML常用标签

标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

特点：
1.数字越大，字体越小
2.一般一个页面只有一个h1标签，一般给logo使用 (SEO)

段落标签

<p>原标题：向中国与葡萄牙语国家最高法院院长会议致贺信</p>
<p>新华社北京3月26日电　中国与葡萄牙语国家最高法院院长会议26日在广州开幕，国家主席致贺信。</p>

水平线标签：

<hr/>

换行标签：

<br>

文本格式化标签

字体加粗 <strong></strong>   <b></b>
字体倾斜 <em></em>   <i></i>
字体下划线： <ins></ins>    <u></u>   underline
字体删除线：  <del></del>   <s></s>

图片标签

<img src="美女姐姐.jpg" alt="这是一个美女哦">

img的属性：

src: 存放图片的路径
alt：当图片丢失或者加载失败的时候提示用户（必须的）
width：设置图片宽度
height:设置图片高度
title：设置图片标题
border：设置图片边框

路径

1.绝对路径
  1.磁盘绝对路径
  2.网络绝对路径
2.相对路径
   1.html文件和图片在同一级目录
   2.HTML文件在图片的上一级目录
   3.HTML文件在图片的下一级目录

<!-- 1.磁盘绝对路径、 -->
<img src="E:/HTML/资料/timg.gif" alt="">

<!-- 网络绝对路径 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545469850&di=444bb5c328bed1b9ca475a4e3e973777&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.boqiicdn.com%2FData%2FBK%2FA%2F1606%2F24%2Fimagick80191466752189_y.jpg" alt="">

html中的注释

<!-- html中的注释： -->

常用特殊符号

空格：   &nbsp;
<  :    &lt;    
>   :   &gt;    
版权符号： &copy;

超链接

<a href="01.特殊符号的使用.html">去上一个页面</a>

超链接在页面打开方式：

_self: 默认的在当前窗口打开新页面

_blank: 在新的窗口打开新页面

控制整个页面的链接在新的窗口打开：标签：base base标签写在head中

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <base target="_blank">
</head>

<a href="https://www.cnblogs.com/chen88/" target="_self">Chen's Blog1</a>
<a href="https://www.cnblogs.com/chen88/" target="_blank">Chen's Blog2</a>

a标签的其他作用：

实现页面间的跳转
实现当前页面的定位
实现下载
```
<a href="111.rar">download</a>
```

列表：

无序列表

<ul>
      <li>零食
        <ul>
          <li>薯片</li>
          <li>薯条</li>
          <li>辣条</li>
          <li>小鱼仔</li>
        </ul>
      </li>
      <li>肉类
        <ul>
          <li>猪肉</li>
          <li>牛肉</li>
          <li><a href="http://www.baidu.com">狗肉</a></li>
        </ul>
      </li>
</ul>

ul中只能放li标签,li标签相当于一个容器，可以放任何标签

有序列表

<ol>
   <li>毒液</li>
   <li>海王</li>
   <li>喜洋洋与灰太狼</li>
   <li>熊出没之奇幻世界</li>
</ol>

ol中只能放li，li中可以放其他任何标签

自定义列表

<dl>
    <dt>服务保障</dt>
    <dd>正品保证</dd>
    <dd>7天无理由放心退</dd>
    <dd>退货返运费</dd>
    <dd>7x15小时客户服务</dd>
    <dd>7天无理由随心换</dd>
  </dl>
  <dl>
    <dt>购物指南</dt>
    <dd>导购演示</dd>
    <dd>订单操作</dd>
    <dd>会员注册</dd>
    <dd>账户管理</dd>
    <dd>收货样品</dd>
    <dd>会员等级</dd>
  </dl>

在dl中只能放dt和dd,dd相当于一个容器

可以放其他任何标签,一般一个dl中只有一个dt

但是可以有多个dd

表格

表格标签

表格： <table></table>
行：  <tr></tr>
单元格： <td></td>

表格常用属性：

border：设置边框
width：设置宽度
height：设置高度
cellspacing： 设置边框与边框之间的间距
cellpadding: 设置内容与边框之间的间距
align: 设置表格的水平位置   left   center   right

表格其他标签：

<tbody></tbody>： 表示表格的主体
<thead></thead>: 表示表格头部
<tfoot></tfoot>: 表示表格的底部（表格页脚）不推荐使用这个
th：头部中的内容
caption： 表示表格标题

单元格合并

跨行合并： rowspan
跨列合并： colspan
合并单元格元素：从上到下，从左到右

表单

表单元素： input系列 input标签中有一个属性：type 通过type属性的值的不同来控制input的不同的表现形式

属性：

name属性
checked属性 checked="checked" 用来设置默认选中
value属性：用来设置表单元素的默认值

<!--文本-->
用户名： <input type="text" value="请输入用户名"><br><br>
<!--密码-->
  密码： <input type="password"> <br><br>
<!--单选按钮-->
  性别： <input type="radio" name="gender"checked="checked">男 <input type="radio" name="gender"  >女  <input type="radio" name="gender">不详<br><br>
<!--复选框-->
  爱好： <input type="checkbox" name="one" checked="checked">吃饭  <input type="checkbox" name="one">睡觉  <input type="checkbox" name="one" checked="checked">打豆豆<br><br>
<!--普通按钮-->
  <input type="button" value="注册"><br><br>
<!--提交按钮-->
  <input type="submit" value="立即注册"><br><br>
<!--重置按钮-->
  <input type="reset"><br><br>
<!--图片按钮-->
  <input type="image" src="./images/btn.png"><br><br>
<!-- 文件域 -->
  <input type="file" multiple> 
<!--文本域-->  
  <textarea cols="50" rows="20" ></textarea>
<!-- 下拉菜单-->
<!-- 下拉菜单设置默认选中：seletced="selected"-->
<select >
   <option value=""></option>
</select>
<!--
label标签使用
    label的两种用法：
      1.直接使用label标签包裹要设置的文本和表单元素
      2.使用label标签中的for属性,但是被关联的表单元素需要设置一个id属性
-->
  <label>用户名： <input type="text"></label><br><br>
  <label for="userPwd">密码： </label> <input type="password" id="userPwd"><br><br>
  <label><input type="checkbox">请同意我们的用户协议</label>

emmet语法快速生成代码结构

<!-- div.box -->
 <div class="box"></div>
 <p class="one"></p>
 <span class="text"></span>

 <!-- div#box -->
 <div id="box"></div>


 <!-- 生成带属性 -->
 <!-- a[#] -->
 <a href="#"></a>
 <img src="image/1.png" alt="">


 <!-- 生成嵌套关系的 -->
 <!-- ul>li -->
 <ul>
   <li></li>
 </ul>
 <!-- ul>li>a[#]>img[src="image/1.png"] -->
 <ul>
   <li><a href="#"><img src="image/1.png" alt=""></a></li>
 </ul>
 <!-- ul>li*4>a[#]>img[src="image/1.png"]  -->
 <ul>
    <li><a href="#"><img src="image/1.png" alt=""></a></li>
    <li><a href="#"><img src="image/1.png" alt=""></a></li>
    <li><a href="#"><img src="image/1.png" alt=""></a></li>
    <li><a href="#"><img src="image/1.png" alt=""></a></li>
  </ul>

  <!-- 生成并列关系的 -->
  <!-- div+p -->
  <div></div>
  <p></p>
  <!-- div+p+.one+.two -->
  <div></div>
  <p></p>
  <div class="one"></div>
  <div class="two"></div>


  <!-- div{这是第$个div}*10 -->
  <div>这是第1个div</div>
  <div>这是第2个div</div>
  <div>这是第3个div</div>
  <div>这是第4个div</div>
  <div>这是第5个div</div>
  <div>这是第6个div</div>
  <div>这是第7个div</div>
  <div>这是第8个div</div>
  <div>这是第9个div</div>
  <div>这是第10个div</div>

  <!-- div{这是第$$个div}*10 -->
  <div>这是第01个div</div>
  <div>这是第02个div</div>
  <div>这是第03个div</div>
  <div>这是第04个div</div>
  <div>这是第05个div</div>
  <div>这是第06个div</div>
  <div>这是第07个div</div>
  <div>这是第08个div</div>
  <div>这是第09个div</div>
  <div>这是第10个div</div>

转载于:https://www.cnblogs.com/chen88/p/11577898.html