一、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
- 有序2
- 有序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 | 隐藏域 提交用户不可以看见的一些信息 |
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 网页文章
(九) 字符替代
空格
html基础知识结束;下期CSS见。
标签:网页,HTML,href,标签,基础知识,Html,链接,属性 From: https://www.cnblogs.com/zxjsbk/p/17178325.html