HTML常用标签整理

最新推荐文章于 2023-08-31 08:16:30 发布

爱喝椰汁的木木

最新推荐文章于 2023-08-31 08:16:30 发布

阅读量287

点赞数 2

分类专栏：前端部分文章标签： html html5

本文链接：https://blog.csdn.net/qq_45503643/article/details/112919038

版权

前端部分专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML（超文本标记语言，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言

HTML：描述的是网页结构

<!--D　document　T　type　D　definition　　约束-->
<!DOCTYPE html>
<!--根标签　是双标签　-->
<html lang="en">
<!--头部标签-->
<head>
    <!--meta 中指定的是网页编码格式-->
    <meta charset="UTF-8">
    <!--定义选项卡中的内容 title是选项卡标题-->
    <title>小米</title>
</head>
<!--
HTML：描述的是网页结构
CSS：美化页面
JavaScript：和用户进行交互 10
Jquery：对JS的封装 3
１，HTML　HyperTextMarUP　Language超文本标记语言，内部提供了一系列标签来描述网页
    网页的组成部分　文字　图片　多媒体
    HTML文件是纯文本文件　CSS文件也是纯文本； .java也是纯文本文件 纯文本文件可以使用文本编辑器（记事本）打开
２，基本骨架　骨架
    ＜html＞
        <head></head>
        <body></body>
    ＜/html＞
-->
<!--身体，浏览器中展示的内容都在body中-->
<body>
</body>
</html>

常用标签：

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
h1-h6 权重依次降低字体依次减小

特点：标题标签独占一行，不允许其他标签和他同行

HTML 对尖括号是敏感的，HTML对换行空格无感

换行标签

<br> 单标签

段落标签

<p>段落标签</p> 双标签成对

段落标签也是独占一行,上下有间距

 一个就是一个空格

语义化标签

<strong>加粗</strong>
<b>加粗</b>

<del>删除</del>
<s>删除</s>

<ins>下划线</ins>
<u>下划线</u>

<em>倾斜</em>
<i>倾斜</i>

图片标签

片标签是单标签

<img src="" alt="">

  属性="属性值"
    src: 表示的图片地址
      本地图片
        相对路径/绝对路径
      在线图片
    alt:表示图片展示异常的时候，显示的文字
    title:当鼠标放到图片上时显示的文字
    width:设置图片宽度
    height：设置图片的高度，图片会失真 像素px
    border: 给图片设置边框

列表标签

<!--unorder list 无序列表-->
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<!--order list 有序列表-->
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

注意：ul ol 里面只能写li（list）每个li独占一行
在这里插入图片描述

表格标签

table表格标签
    tr row 表示一行
    td表示单元格 通过td来显示列的 效果
table标签的属性：
    width：宽度
    height:高度 基本单位都是像素 px
    border:边框 基本单位都是像素 px
    cellspacing:设置的是单元格和单元格之间的距离
    cellpadding:单元格文字和四边的间距
    align：table显示的位置,不是文字的位置
        取值 center 中间
             left 左边 默认
             right 右边
             caption：表示表格标题
             thead:表示表头部分
             th :表示的是表头，默认是加粗居中
             tbody:表示表格的身体部分

<table border="1" cellspacing="0" width="400" height="200" cellpadding="30" align="center">
    <caption>学生信息表</caption>
    <thead>
    <!--行 row-->
    <tr>
        <!--th 表示是表头-->
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>tom</td>
        <td>男</td>
        <td>59</td>
    </tr>
    <tr>
        <td>jack</td>
        <td>男</td>
        <td>80</td>
    </tr>
    </tbody>
</table>

浏览器效果：
在这里插入图片描述

表格单元格的合并

 合并：
    行的合并 上下合并  rowspan加在上面的单元格属性位置 取值表示要合并的单元格数量
    列的合并 左右合并  colspan加在左边的单元格属性位置 取值表示要合并的单元格数量
    多余的单元格删除

<table border="1" cellspacing="0" width="500" height="300" align="center">
    <caption>信息表</caption>
    <tr>
        <td rowspan="3">日期</td>
        <td colspan="4">配送方式</td>

    </tr>
    <tr>
        <td rowspan="2">姓名</td>
        <td colspan="3">地址</td>
    </tr>
    <tr>
        <td>省份</td>
        <td>市区</td>
        <td>地址</td>
    </tr>
    <tr>
        <td>2020-11-03</td>
        <td>鸣人</td>
        <td>郑州</td>
        <td>高新</td>
        <td>莲花街</td>
    </tr>
    <tr>
        <td>2020-11-03</td>
        <td>二柱子</td>
        <td>郑州</td>
        <td>高新</td>
        <td>莲花街</td>
    </tr>
</table>

浏览器效果图：

在这里插入图片描述

链接标签

<a href=""></a>

a超链接标签
   1，跳转到外网
   2，跳转到本地项目其他页面
   3，在当前页面内跳转，锚点跳转
   4，跨页面锚点跳转
   属性：
   href：表示要跳转的路径
	target的取值
    _self：在当前选项卡中打开 默认取值
    _blank:在新的选项卡中打开

button 按钮标签

<button>提交</button>

form表单元素

form表单收集用户信息
input标签
type的取值
   	 text:普通的文本框
    password：表示密码框，输入内容是隐藏的
    radio;表示单选框，实现单选的功能需要指定相同的name属性值
           checked属性是默认勾选的内容
    checkbox：表示复选框，也需要一个相同的name属性值
            checked属性是默认勾选的内容
    button ：按钮，效果和<button>注册</button>一样，通过value设置按钮显示内容
    reset：重置表单
    file:文件上传时选择文件
select标签表示选择框
option表示每一项
textarea标签文本域，col控制列 宽度 rows行数控制高

<form action="">
    用户名：<input type="text"> <br>
    密&nbsp;码：<input type="password"><br>
    性&nbsp;别：<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 <br>
    擅&nbsp;长：<input type="checkbox" name="hobby">Java
    <input type="checkbox" name="hobby">HTML
    <input type="checkbox" name="hobby">JS
    <input type="checkbox" name="hobby">MySQL <br>

    身份证照片：<input type="file"><br>
    祖&nbsp;籍：<select name="">
    <option value="">--请选择--</option>
    <option value="" selected>河南省</option>
    <option value="">山东省</option>
    <option value="">广东省</option>
</select> <br>

    自我介绍：<textarea name=""  cols="30" rows="10"></textarea> <br>

    <button>注册</button>
    <input type="button" value="提交">
    <input type="reset" value="重置">
</form>

浏览器效果图：
在这里插入图片描述

input标签type取值

input标签
  h5中type的取值
    date:表示日期
    color:颜色选择
    number:只能写数字，
    range:滑块，用于音频视频的进度条
类型为text的新属性
    placeholder：时提示信息

<form action="">
    <input type="date"> <br>
    <input type="color"> <br>
    <input type="number"> <br>
    <input type="range"> <br>

    手机号：<input type="text" placeholder="请输入手机号码">
</form>

浏览器效果图：
在这里插入图片描述

label标签

id表示标签元素的唯一性标识，不能重复
label 标签中嵌套表单元素，当点击label的任何一个地方，表单元素都会聚焦
for 属性值时表单元素的id值

<label for="username"> 用户名：<input type="text" id="username"> </label>

容器标签

放标签的容器
div 容器标签 里面可以放任何的标签，每个DIV独占一行
span 允许多个span占一行

<div></div>
<span></span>

新增的容器 效果和DIV一样
    header：头部
    aside ：侧边栏
    footer：底部
    nav:导航
    article 文章

音视频标签

	audio:播放音频 controls是控制条
    video:播放视频
    兼容问题

<audio src=""></audio>
<video src=""></video>

iframe标签

iframe，在网页内显示其他网页

<iframe src="" frameborder="0"></iframe>

爱喝椰汁的木木

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签整理

TML（英语：超文本标记语言，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言HTML：描述的是网页结构<!DOCTYPE html><html lang="en"><head> 
复制链接

扫一扫

专栏目录