首页 > 其他分享 >Html基础知识-标签

Html基础知识-标签

时间:2023-03-04 17:00:10浏览次数:36  
标签:网页 HTML href 标签 基础知识 Html 链接 属性

一、HTML介绍
HTML是一种标记语言,不是编程语言,为了快速上手,其他的可以自己查询,下面是我使用VScode生成的第一个HTML网页。

二、HTML标签介绍
标签分为单标签和双标签,<br> 换行:单标签 <strong></strong> 加粗:属于 双标签
(一)排版标签

标签 说明
<h1>~<h6> @加粗@独占一行@越来越小
<p>~</p> @存在间隙@独占一行
<br> @强制换行
<hr> @水平线

(二)排版标签

标签 说明
<b>~</b> / <Strong>~</Strong> @加粗
<u>~</u> / <ins>~</ins> @下划线
<i>~</i> / <em>~</em> @倾斜
<s>~</s> / <del>~</del> @删除线
<sup>~</sup> @上标
<sub>~</sub> @下标

(三)媒体标签

<img src="图片路径" alt="如果图片无法加载显示的内容">
小知识:绝对路径如:./img.png 或 www.baidwu.com 相对路径 ../../... 相对于当前目录来说。

(四) 超链接标签
<a href="链接地址" target="_self"></a>

target属性值 说明
_self 默认方式,即在当前窗口打开链接
_blank 在一个全新的空白窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层里打开链接

href="#" : 代表空连接
href="www.baidwu.com" 外部链接
href="abc.html" 内部链接
href="abc.exe" / href="abc.zip" 文件链接

(五) 列表标签
(1)无序列表> >

展示:

  • 无序1
  • 无序2
  • 无序3
type属性值 列表项的序号类型
disc 默认值,实心圆“●”
circle 空心圆“○”
square 实心正方形“■”

(2)有序列表

展示:

  1. 有序1
  2. 有序2
  3. 有序3
type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……

(3)自定义列表

展示:

自定义
自定义

(五) 音视频标签

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

属性 说明
src 地址
controls 控件
autoplay 自动
loop 循环

(六) 表格标签(*)

合并单元格: 跨行合并:保留最左边 跨列合并: 保留最上边数据
rowSpan = "2" 跨行合并
clospan = "2" 跨列合并

(七) 表单标签(*)

应用场景:邮箱登录,注册界面等

(1)input标签

type 属性
text 文本框
password 密码框
radio 单选 使用name属性分组
chexbox 多选
submit 提交数据
reset 复位
button 普通按钮
image 图像
file 文件 使用multipole属性实现文件多选
hidden 隐藏域 提交用户不可以看见的一些信息
email email
date 日期
datetime-local 日期时间
time 时间
range 进度条
其他属性
checked 默认选择
readonly 只读
disabled 禁用
autofocus 默认光标的位置
disabled 进度条
required 不能为空
size 长度
maxlength 最大长度
placeholsder 提示字

(2)button标签
type 属性:submit/reset/button 也可以使用

(3)下拉菜单(重要)
select 标签代表下拉菜单
option 里边代表一个数据 selected属性是默认选中!

(4)文本域(重要)

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

(5)lebel标签(重要)
使用方法:
1 在label标签把内容包裹起来
2 在表单标签上添加id属性
3 在label标签的for属性中设置id属性值

1 把内容和表单标签都包起来
2 label标签的for属性删除

(八) 语义化标签(网页布局会用 div span )
div 会换行 span 不换行

手机端会用的和 div功能一致:(以后更新)
header 网页头
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

(九) 字符替代
空格 &nbsp;

html基础知识结束;下期CSS见。

标签:网页,HTML,href,标签,基础知识,Html,链接,属性
From: https://www.cnblogs.com/zxjsbk/p/17178325.html

相关文章

  • 02 网络基础知识
    以下内容来源于B站up主“零檬信息技术”,如有侵权,请联系本人删除!传输层https使用TCP协议 默认端口为443网络层主机IP地址寻址 DNS解析数据链路层 加MAC......
  • mybatis动态标签——sql标签
    mapper接口EmpgetEmpById(@Param("id")Integerid); mapper.xml<!--sql片段:可以记录一段sql,在需要用的地方使用include标签进行引用--><......
  • mybatis动态标签——foreach批量添加和删除
    <!--【foreach标签】collection:设置要循环的数组或集合item:用一个字符串表示数组或集合中的每一个数据separator:设置每次循环的数据之间的分隔符......
  • mybatis动态标签——choose、when、otherwise
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-//mybatis.org//DTDMapper3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><m......
  • mybatis动态标签——trim
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-//mybatis.org//DTDMapper3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><m......
  • 计算机基础知识
    目录一、路径1、绝对路径2、相对路径二、计算机的本质三、计算机的五大组成部分详细介绍1.控制器2.运算器3.存储设备4.输入设备5.输出设备四、计算机三大核心硬件1.cpu2.......
  • mybatis动态标签——where、if
    mapper接口publicinterfaceEmpMapper{List<Emp>getEmp(Empemp);}mapper.xml<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-//myb......
  • [前端] html和原生js实现鼠标拖动和触摸拖动以及点击后跟随鼠标移动
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>悬浮窗拖动点击事件</title><style>div{width:100px;......
  • Java基础——IO基础知识
    字节流可以处理任何类型的数据(图片、MP3、视频等文件),字符流只能处理字符类型(文本文件)的数据。      ......
  • html 1.0
    <html><head> <title></title></head><body><h3align="center"><b>必吃美食</b></h3><tablealign="center"cellpadding="10"style="border:double;"><tableb......