一篇文章基础HTML总结
目录
一、简介
1、HTML(Hyper Text Markup Language)中文译为:超文本标记语言
2、开发工具
VS Code使用前要求
VS Code创建网页的步骤
VS Code的基本快捷键
VS Code的其他快捷键
3、注释
作用:
4、标签
二、HTML标签
1、排版标签
标题标签
段落标签
换行标签
水平线标签
2、文本格式化标签
3、媒体标签
图片标签
路径
音频标签
视频标签
链接标签
4、列表标签
无序列表
有序列表
5、表格标签
合并单元格
6、表单标签
input系列标签
input系列标签-文本框
value属性和name属性作用介绍
input系列标签-密码框
input系列标签-单选框
input系列标签-复选框
input系列标签-文件选择
input系列标签-按钮
button按钮标签
select下拉菜单标签
textarea文本域标签
label标签
7、语义化标签
8、字符实体
HTML的空格合并现象
常见字符实体
一、简介
1、HTML(Hyper Text Markup Language)中文译为:超文本标记语言
构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如:颜色、大小等) |
行为 | JavaScript | 网页模型的定义与页面交互 |
2、开发工具
VS Code使用前要求
VS Code创建网页的步骤
![](/assets/blank.gif)
VS Code的基本快捷键
1. 快速生成标签:英文 + tab2. 保存文件:ctrl + s注意1:写完文件之后务必需要保存文件,否则网页无变化注意2:可以设置自动保存省去每次保存的麻烦3. 快速查看网页效果:右击 → Open in Default Browser快捷键:alt + b注意: 必须安装了open in browser 插件4. 快速生成结构标签:! + tab注意1: !必须是英文的 ,中文!无效注意2: 必须保证当前文件后缀名是.html ,否则无效
VS Code的其他快捷键
1. 快速复制一整行:ctrl + c2. 快速粘贴一整行:ctrl + v3. 快速删除(剪切)一整行:ctrl + x
3、注释
作用:
快捷键: 在VS Code中:ctrl + /
4、标签
二、HTML标签
1、排版标签
标题标签
![](/assets/blank.gif)
段落标签
<p>我是一段文字</p>
换行标签
<br>
水平线标签
<hr>
2、文本格式化标签
标签 | 说明 |
---|---|
b | 加粗 |
u | 下划线 |
i | 倾斜 |
s | 删除线 |
标签 | 说明 |
---|---|
strong | 加粗 |
ins | 下划线 |
em | 倾斜 |
del | 删除线 |
实际项目开发中选择标签的原则:标签语义化
3、媒体标签
图片标签
<img src=" 目标图片的路径 " alt=" 当图片加载失败时,显示的 替换文本 " title=" 当鼠标悬停时,才显示的文本 " width="200" height="100">
路径
盘符开头:D:\day01\images\1.jpg
VS Code快捷操作 :直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可!VS Code快捷操作 :直接敲./后,会自动提示当前目录下有哪些文件夹,直接一层层选择即可!VS Code快捷操作 :直接敲../后,会自动提示上级目录下有文件,直接选择即可!
音频标签
<audio src="./music.mp3" controls></audio>
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
视频标签
<video src="./video.mp4" controls></video>
属性名 | 功能 |
---|---|
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器需配合muted实现静音播放) |
loop | 循环播放 |
链接标签
<a href="./目标网页.html">字</a>
链接标签的target属性
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
空链接(拓展补充)
4、列表标签
无序列表
![](/assets/blank.gif)
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,用于包含每一行的内容 |
有序列表
![](/assets/blank.gif)
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序列表的每一项,用于包含每一行的内容 |
自定义列表
![](/assets/blank.gif)
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
无序列表最常用,有序列表偶尔用,自定义列表底部导航用
5、表格标签
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
![](/assets/blank.gif)
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 |
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
合并单元格
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行的单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列的单元格水平合并 |
6、表单标签
input系列标签
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 多选框,用于多选多 |
input | file | 文件选择,用于之后上传文件 |
input | submit | 提交按钮,用于提交 |
input | reset | 重置按钮,用于重置 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
input系列标签-文本框
属性名 | 说明 |
---|---|
placeholder | 占位符。提示用户输入内容的文本 |
value属性和name属性作用介绍
input系列标签-密码框
input系列标签-单选框
属性名 | 说明 |
---|---|
name | 分组。有相同name属性值的单选框为一组,一组中同时只能有一个被选中 |
checked | 默认选中 |
input系列标签-复选框
属性名 | 说明 |
---|---|
checked | 默认选中 |
input系列标签-文件选择
属性名 | 说明 |
---|---|
multiple | 多文件选择 |
input系列标签-按钮
标签名 | type属性值 | 说明 |
---|---|---|
input | submit | 提交按钮。点击之后提交数据给后端服务器 |
input | reset | 重置按钮。点击之后恢复表单默认值 |
input | button | 普通按钮。默认无功能,之后配合js添加功能 |
![](/assets/blank.gif)
button按钮标签
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮。点击之后提交数据给后端服务器 |
button | reset | 重置按钮。点击之后恢复表单默认值 |
button | button | 普通按钮。默认无功能,之后配合js添加功能 |
select下拉菜单标签
textarea文本域标签
label标签
![](/assets/blank.gif)
7、语义化标签
没有语义的布局标签-div和span
8、字符实体
HTML的空格合并现象
常见字符实体
![](/assets/blank.gif)
一篇文章基础HTML总结相关推荐
- python基础知识-一篇文章搞定Python全部基础知识
原标题:一篇文章搞定Python全部基础知识 前言: 1.Python软件安装 第一章.字符串及数字变量 1.变量 要点提炼:Python变量为强类型动态类型.换言之,变量很任性,你给他int,他就是 ...
- 一篇文章让你从JAVA零基础入门`OOP`编程12.19
一篇文章让你从JAVA零基础入门OOP编程 前言: 此文为玄子,复习ACCP-S1课程后,整理的文章,文中对知识点的解释仅为个人理解. 配套PPT,站点源码,等学习资料 一.预科 1.1 JAVA 介 ...
- java学到能看懂代码_一篇文章能够看懂基础源代码之JAVA篇
一篇文章能够看懂基础源代码之JAVA篇 发布时间:2020-05-19 11:20:32 来源:51CTO 阅读:305 作者:栖木之地 java程序开发使用的工具类包:JDK(java develo ...
- 一篇文章让你从JAVA零基础入门`OOP`编程12.20
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.png)] 一篇文章让你从JAVA零基础入门OOP编程 前言: 此文为玄子,复习ACCP-S1课程后, ...
- 一期完结《一篇文章让你从JAVA零基础入门`OOP`编程》12.21
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.jpg)] 一篇文章让你从JAVA零基础入门OOP编程 前言: 此文为玄子,复习ACCP-S1课程后, ...
- 前端基础——一篇文章带你了解HTML语法
前言 在做web开发时,我们必不可少的要使用到Html,因为它包含了最基础的网页结构,虽然Html只能帮助我们构建静态网页,但是却是我们最不能缺少的部分,如果把网页比作一个房子,那么Html就是地基, ...
- 干货!一篇文章集合所有Linux基础命令,适合所有菜鸟学习和老手回顾!
阿里云 干货!一篇文章集合所有Linux基础命令,适合所有菜鸟学习和老手回顾! 1 文件{ ls -rtl # 按时间倒叙列出所有目录和文件 ll -rt touch file # 创建空白文件 ...
- 一期完结《一篇文章让你从HTML零基础入门前端开发》12.28
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRcXH9FM-1672214813897)(./assets/%E7%8E%84%E5%AD%90Shaer-%E4% ...
- HTML完结《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.24
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.jpg)] 一篇文章让你从HTML零基础入门前端开发 前言: 此文为玄子,复习ACCP-S1课程后,整 ...
最新文章
- 磁盘和文件系统管理(一)
- Android 4.0的图形硬件加速及绘制技巧
- 【Linux】11.将ubuntu电脑设置为一台可远程ssh或sftp访问的服务器
- 密织“地网” 南充“试水”智慧安防
- win7计算机风格恢复,Win10怎么恢复Win7开始菜单风格?
- soj#547 bzoj5046 分糖果游戏
- 如何自己动手写一个搜索引擎?我是一份害羞的教程
- matlab 矩阵拼接
- java引入bean代码_通过java代码装配bean
- 训练日志 2018.9.8
- 可任意自定义的UITableViewCell(转)
- Linux 端口侦听不到,在linux上,如何在不尝试连接的情况下检查端口是否处于侦听状态...
- [转载] 实现宿主机和VirtualBox下虚拟机ping相通教程
- 公司注销代理合同模板
- 思科模拟器-利用VTP管理VLAN
- 前端面试题及答案(字节跳动)(二)
- 说说如何在项目中引入 jBPM4 工作流框架以及遇到的坑儿
- 新建tag 查看本地Tag 查看远端Tag 基于远端Tag新建分支 删除远端Tag 等操作
- Matlab过零补偿角,无刷直流电机反电动势过零检测及其相位补偿.pdf
- 发表说说代码php,PHP随机发送QQ说说[多用户]
热门文章
- QT xml转ini的实现(从C#转到QT)
- adb shell appops(系统服务:appops)
- CSS样式-网页响应式设计
- Monjes Budistas - Live Mantra(2008)[古典红底红花边]
- dell笔记本外接显示器_笔记本就一个 hdmi 的接口,如何外接 2 个 dell 显示器?...
- 深度学习机器学习面试题(理论基础)
- FFmpeg:‘UINT64_C‘ was not declared in ths scope
- 线性系统粗浅认识——第七次作业
- Qt动态图表更新实现
- 使用yagmail模块群发工资条