HTML常用标签

标题标签

 	<h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>
    <h5>我是五级标签</h5>
    <h6>我是六级标签</h6>

标签语义:作为标题使用,重要性依次递减
特点:

  1. 标题文字会变粗,字号变大
  2. 一个标题独占一行

段落标签

<p>我是一个段落</p>

**标签语义:**可以将HTML文档分割成若干段落
特点:

  1. 文本在一个段落中会根据浏览器窗口大小自动换行
  2. 段落之间会有比较大的空隙

换行标签

<br/>

标签语义: 强制换行
特点:

  1. 单标签
  2. 只是简单的换行,跟段落的大间距不一样

文本格式化标签

语义标签说明
加粗<strong> </strong>或者<b></b>推荐使用<strong>标签
倾斜<em></em>或者<i></i>推荐使用<em>标签
删除线<del></del>或者<s></s>推荐使用<del>标签
下划线<ins></ins>或者<u></u>推荐使用<ins>标签

加粗

我是一个<strong>加粗</strong>的文字
我是另一个<b>加粗</b>的文字

标签语义: 突出重要性,比普通文字更重要 推荐使用strong标签

倾斜

我是一个<em>倾斜</em>的文字
我是另一个<i>倾斜</i>的文字

标签语义: 倾斜标签,推荐使用em标签语义更加强烈

删除线

我是一个<del>删除</del>的文字
我是另一个<s>删除</s>的文字

标签语义: 删除线标签,推荐使用del标签语义更加强烈

下划线

我是一个<ins>下划线</ins>的文字
我是另一个<u>下划线</u>的文字

标签语义: 删除线标签,推荐使用ins标签语义更加强烈

div和span标签

<div><span>没有语义,就是一个盒子装内容用

<div>我是一个div标签 我独自占一行</div>
<span>我是一个span标签</span>

特点:

  1. <div>标签用来布局,但一行只能放一个div 大盒子
  2. <span>标签用来布局 一行可以多个<span> 小盒子

图像标签和路径

图像标签

<img src="url" />

src是<img>标签的必须属性,用于指定图像文件的路径和文件名
图像标签其他属性

属性属性值说明
src图片路径必须属性
alt文本替换文本,图像不能显示的文字
title文本提示文本,鼠标放在图像上显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

目录文件夹和根目录

目录文件夹: 普通文件夹,放的是网页相关素材 存放的html、图片等
根目录: 打开文件夹最外面一层

VSCode打开目录文件夹

  1. 方法一: 文件–打开文件夹–选择目录文件夹
  2. 方法二:直接将目录文件夹拖拽到VSCode应用中打开即可

路径

相对路径

引用文件所在位置为参考,建立出的目录路径

相对路径分类符号说明
同一级路径图像位于HTML文件同一级 如:<img src="xxx.png" />
下一级路径/图像位于HTML文件下一级 如:<img src="images/xxx.png" />
上一级路径…/图像位于HTML文件上一级 如:<img src="../xxx.png" />

绝对路径

是指目录下的绝对路径

  1. 右键文件查看文件在电脑的路径(不常用)
  2. 使用网路图片地址

超链接标签

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="index.html" target="_blank">内部网页</a>
<a href="#">空链接</a>
<a href="img.zip">下载链接</a>
<a href="http://www.baidu.com"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590582215812&di=94f22a7f7c0f37a82e559741465a84b5&imgtype=0&src=http%3A%2F%2Fp6.storage.canalblog.com%2F61%2F25%2F833312%2F72004673.gif"/></a>
<!-- 锚点链接 -->
<a href="#one"></a>
<h1 id="one">我是个大标题</h1>
属性作用
href指定链接目标的url地址 必须设置
target指定链接页面打开方式 _self为默认值当前窗口打开,_blank 打开新窗口

链接的分类

  1. 外部链接
  2. 内部链接
  3. 空链接
  4. 下载链接:文件或者压缩包
  5. 网页元素的链接:如文本 图像 表格 音频 视频等都可以添加超链接
  6. 锚点链接:可以快速定位到当前页面中的某个位置
    • 设置属性值#名字的形式 如<a href="#one">跳到大标题去</a>
    • 找到目标位置,添加id属性=对应名字 如<h1 id="one">我是个大标题</h1>

表格标签

表格主要作用

主要是用来显示展示数据,可以规整的显示数据,可读性更好,条理清晰

表格的基本语法

<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>静静</td>
            <td></td>
            <td>18</td>
        </tr>
    </table>
  • <table></table>用于定于表格标签
  • <tr></tr>用于定于表格中的一行 必须嵌套在 <table></table>中使用
  • <td></td> 用于定义表格中单元格 必须嵌套在 <tr></tr>中使用
    注: td(table data)即单元格内容数据

表头单元格

表头单元格也是单元格,通常在第一行,加粗显示

<table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>静静</td>
            <td></td>
            <td>18</td>
        </tr>
    </table>

表格属性

不咋常用,一般通过CSS来设置

属性名属性值描述
alignleft、center、right规定单元格相对周围元素的对齐方式
border1或""规定单元格是够用用边框,默认""表示没有边框
cellpadding像素值规定单元格边框与内容之间的空白,默认1像素
cellspacing像素值规定单元格之间的空白,默认2像素
width像素值或者百分比规定表格的宽度
<table align="center" border="1" cellpadding="20" cellspacing="0" width=500>
     <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
     <tr> <td>静静</td> <td></td> <td>18</td> </tr>
     <tr> <td>小明</td> <td></td> <td>20</td> </tr>
</table>

在这里插入图片描述

表格结构标签

表格实际使用中可能会很长,这时候可以将表格分割成表格头部表格主体两部分
分别用<thead>标签 表格头部区域、<tbody>标签 表格主体区域

<table align="center" border="1" cellpadding="20" cellspacing="0" width=500>
     <thead>
         <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
     </thead>
     <tbody>
         <tr> <td>静静</td> <td></td> <td>18</td> </tr>
         <tr> <td>小明</td> <td></td> <td>20</td> </tr>
     </tbody>
</table>

合并单元格

多个单元格合并为一个单元格
合并单元格方式:

  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并 colspan = “合并单元格的个数”
    在这里插入图片描述
    目标单元格
  • 跨行: 最上侧单元格作为目标单元格写合并代码
  • 跨列: 最左侧单元格作为目标单元格写合并代码

合并单元格步骤

  1. 确定单元格是跨行还是跨列
  2. 找到目标单元格 写上 合并方式=合并数量 比如:<td colspan = "2"></td>
  3. 删除多余单元格
<table align="center" border="1" cellpadding="20" cellspacing="0" width=500>
    <tr align="center"><th colspan="3">个人简介</th><</tr>
    <tr> <td></td> <td></td> <td></td> </tr>
    <tr> <td rowspan="2"></td> <td></td> <td></td> </tr>
    <tr> <td></td> <td></td> </tr>
</table>

效果
在这里插入图片描述

列表标签

作为布局使用,更加整齐有序
列表分为三大类:无序列表有序列表自定义列表

标签名定义说明
<ul></ul>无序列表只能包含<li>标签,无序,使用较多
<ol></ol>有序列表只能包含<li>标签,有序,使用较少
<dl></dl>自定义列表只能包含<dt><dd>

无序列表

<ul>标签标示无序列表,一般以项目符号呈现列表,列表项使用<li>标签定义

<ul>
    <li>iOS</li>
    <li>Android</li>
    <li>Web</li>
</ul>
  1. 没有顺序之分,都是并列的
  2. <ul></ul>里只能放<li><li>标签 不允许放其他标签和文字
  3. <li></li>标签里可以放任何元素
  4. 自带样式属性(无用),实际开发中会用CSS来设置

有序列表

<ol>标签表示有序列表,列表排序以数字显示,其他属性跟无序列表一样

<ol>
    <li>金牌 100</li>
    <li>金牌 88</li>
    <li>金牌 66</li>
</ol>

自定义列表

<dl>标签用于自定义列表,该标签会与<dt>(定义项目/名字)<dd>(描述每个项目/名字)一起使用

<dl>
    <dt>名词</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>
  1. <dl></dl>里面包含<dt>dd
  2. <dt><dd>没有数量限制,一般一个<dt>对应多个<dd>

使用场景: 常用于对术语或者名词进行解释和描述,定义列表的列表项没有任何项目符号
在这里插入图片描述

表单标签

完整表单组成:表单域表单控件提示信息构成

表单域

包含表单元素的区域
在HTML标签中,<form>标签用于定义表单域,用于实现用户信息的收集和传递数据给服务器

<form action="url地址" method="POST" name="表单域名称">
    各种表单控件
</form>
属性属性值作用
actionurl地址指定接收并处理表单数据的服务器地址
methodget/post提交方式get或post
name名称指定表单的名称,以区分同一页面中的多个表单域

表单控件

允许用户在表单中输入或者选择的控件

input表单元素

<input>标签为单标签 , 在<input>标签中包含一个type属性 根据不同属性值,输入字段拥有多种形式 例如:文本字段密码框复选框单选框按钮

<input type="属性值" />
属性值描述
text单行文本输入,默认宽度为20个字符
password密码字段 字符被掩码
hidden隐藏的输入字段
button可点击按钮,常用于JavaScript启动脚本
radio单选按钮 必须拥有相同name才能实现多选一
checkbox复选框
file输入字段和“浏览”按钮,供文件上传
image图像形式的提交按钮
reset重置按钮,清除表单所有数据
submit提交按钮,发送给后台服务器
<form action="url地址" method="GET" name="表单域名称">
    用户名: <input type="text" name="username" value="xiaoming" maxlength="10" placeholder="请输入用户名"> <br/>
    密码: <input type="password" name="pwd"> <br/>
    性别: <input type="radio" name="sex" checked="checked"><input type="radio" name="sex"><br>
    爱好: <input type="checkbox" name="hobby"> 吃饭 
          <input type="checkbox" name="hobby"  checked="checked"> 睡觉 
          <input type="checkbox" name="hobby"> 打豆豆<br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重新填写">
    <input type="button" value="获取短信验证码"> <br>
    <input type="file">
</form>
属性属性值描述
name用户自定义定义input元素的名称 要求单选按钮复选框要有相同的name值
value用户自定义规定input元素的值 主要是给后台人员用
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符的最大长度

label标签

<label>标签为input元素定义标注(标签)
<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器会自动将焦点转到或者选择对应的表单元素上,增加用户体验
for属性应当与id一样

<input type="radio" name="sex" id="man" ><label for="man"></label> 
<input type="radio" name="sex" id="woman"><label for="woman"></label> 

select表单元素

多个选项提供给用户选择,节约空间可以采用<select>标签定义下拉列表
<select>中至少包含一对<option>
<option>中定义selected属性指定默认选中项

<form action="url地址" method="GET" name="表单域名称">
    技能:
     <select>
        <option>iOS</option>
        <option>Android</option>
        <option selected>Web</option>
        <option>PHP</option>
        <option>Flutter</option>
        <option>Vue</option>
    </select>

</form>

textarea表单元素

<textarea>定义多行文本的输入控件
属性: cols每行多少文字 rows显示多少行(都没啥用) 实际开发用CSS指定文本框区域

<form>
    反馈:
    <textarea cols="50" rows="5"> 请输入需要反馈的内容</textarea>
</form>

完整的教程可以查看文档
MDN Web文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值