初识HTML|之魔神降世篇|（超详细讲解）
🙈作者简介：练习时长两年半的Java up主
🙉个人主页：老茶icon
🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连
目录
课程名：HTML
内容/作用：知识点/设计/实验/作业/练习
学习：HTML基础知识
HTML
Hyper Text Markup Language 超文本标记语言
超文本
可以理解为超级文本：超越了文本的限制，如图片、音频、视频等。
也可以理解为超链接文本：通过某个连接，可以访问互联网中的任意地址。
标记
可以称为标签。用<>括起来的一个特定的单词。
标签分为单标签和双标签。
单标签：<meta 属性名="属性值"/>
双标签：<body 属性名="属性值"></body>
标签中可以加入属性，双标签中可以继续嵌套标签。
用HTML标签写出的文件保存为.html文件，称为页面文件。
标签的属性
在标签中，通过加入 属性名=“属性值” ,就可以让某个标签拥有指定的特征。
<标签名 属性1="值" 属性2="值" ></标签名><html><head><!--charset就是一个属性， utf-8就是该属性的值--><meta charset="utf-8"/></head><body><!--src就是一个属性--><img src="图片路径"></body>
</html>
浏览器
浏览器是用于"运行"HTML页面的平台。
用HTML语言写出来的网页文件，需要浏览器对其解释渲染。
浏览器与HTML文件的关系类似于JVM与java文件的关系。
常用浏览器
Chrome 谷歌浏览器
Edge Windows自带的浏览器，IE的升级版
FireFox 火狐浏览器
safari ios平台自带浏览器
页面的基本组成结构
<!-- HTML中的注释 -->
<!-- DOC文档TYPE类型 说明当前页面的文档类型 HTML5-->
<!DOCTYPE html>
<html><head><!-- meta元 设置页面的属性 charset字符集 utf-8表示支持中文的编码格式 --><meta charset="utf-8"><title>页面标题</title></head><body>页面主题内容sdfsdfsdf</body>
</html>
HTML中表示颜色的方式
颜色的单词
red、green、blue、pink、gold、gray、orange、brown、purple、skyblue…
颜色的十进制RGB
RGB表示红绿蓝，每个颜色通过0-255范围内的数字表示其颜色的深浅
RGB(0,0,0) 黑色
RGB(255,255,255) 白色
RGB(255,0,0) 红色
RGB(255,0,255) 紫色
颜色的十六进制RGB
#000000 黑色
#FF0000 红色，可以简写为#F00
#00FF00 绿色
#00FFFF 青色
常用标签
页面中的标签，也称为页面中的元素或节点。所有的元素可以分为两大类。
标签的类型
块级元素
如果一个标签占满整行，称这个标签为块级元素。
行内元素
如果一个标签占一行中的一部分，称这个标签为行内元素。
单标签
| 常用单标签 | 作用 | 类型 |
|---|---|---|
<input /> |
表单元素 | 行内元素 |
<img src="图片路径" alt="替换图片的文字" title="鼠标悬停时提示文件" width="图片宽度" height="图片高度"/> |
图片 | 行内元素 |
<br/> |
换行 | 块级元素 |
<hr/> |
水平线 | 块级元素 |
双标签
文字
| 常用标签 | 作用 | 类型 |
|---|---|---|
<h1></h1>~<h6></h6> |
一级标题~六级标签，文字加粗，一级标题最大 | 块级元素 |
<p></p> |
段落 | 块级元素 |
<span></span> |
行内标签 | 行内元素 |
<sub></sub> |
文字下标 | 行内元素 |
<sup></sup> |
文字上标 | 行内元素 |
<b></b> |
文字加粗 | 行内元素 |
<i></i> |
文字倾斜 | 行内元素 |
<u></u> |
下划线 | 行内元素 |
<font color="" size="" face=""></font> |
已过时。字体 |
iconfont-阿里巴巴矢量图标库
HTML Emoji | 菜鸟教程 (runoob.com)
图片img
<img>单标签，行内元素
<img src="图片路径" alt="无法显示图片时的文字" title="鼠标悬停时的文字" width="宽度" height="高度">
图片路径可以使用相对路径或绝对路径
- 绝对路径：文件在计算机中的完整路径
- 相对路径：从当前页出发，找到图片所在位置
- 使用"…/"跳出当前目录
- 使用"xxx/"进入xxx目录
列表ul/ol/li
双标签，都是块级元素，li写在ul或ol标签中
通常使用列表实现页面的水平导航、垂直导航
无序列表ul
默认每个li前用实心圆修饰，通过type属性更改
- square 正方形
- dist 默认实心圆
- circle 空心圆
- none 去掉修饰
有序列表ol
默认每个li前用数字修饰，通过type属性更改
- a/A
- i/I
- 1
<!--无序列表-->
<ul><li></li><li></li><li></li>
</ul>
<!--有序列表-->
<ol><li></li><li></li><li></li>
</ol>
表格table
双标签，table是块级元素，tr、th、td是行内元素
| 表格相关标签 | 作用 |
|---|---|
| table | 定义表格 |
| tr | 表格中的行 |
| td | 一行中的单元格 |
| th | 特殊的td，文字加粗居中，使用th实现表头 |
合并行rowspan=“n”
给td添加该属性，表示n行合1行
合并列colspan=“n”
给td添加该属性，表示n列合1列
<table border="1" width="400px"><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td rowspan="2">上午</td><td>语文</td><td>数学</td><td>英语</td><td>数学</td><td>语文</td></tr><tr><td>数学</td><td>语文</td><td>数学</td><td>语文</td><td>英语</td></tr><tr><th colspan="6">午休</th></tr><tr><td rowspan="2">下午</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>语文</td></tr><tr><td>英语</td><td>数学</td><td>语文</td><td>数学</td><td>语文</td></tr>
</table>
a标签
<a>显示文字</a>，行内元素
| 核心属性 | |
|---|---|
| href | 访问某个链接。如果要访问锚点，#开头 |
| target | _self:默认自身页面访问，_blank:空白页面访问，_parent:父页面访问，某个iframe的name:在指定的iframe中访问 |
| name | 定义锚点 |
超链接
<!-- 访问某个域名 -->
<a href="http://baidu.com">跳转到baidu</a>
<!-- 访问当前项目中的页面 -->
<a href="列表与表格.html">跳转到表格页面</a>
<!-- 访问资源 -->
<a href="../imgs/flower.webp">跳转到图片</a>
锚点
1.设置锚点
<a name="锚点名"></a>
2.访问锚点
<a href="#锚点名">访问锚点</a>
浮动框架iframe
在页面中嵌入一个页面。
<a target="某个iframe的名称" href="某个路径">访问</a><iframe width="100%" height="600px" name="该iframe的名称"></iframe>
marquee标签
<!--scrollamount移动速度-->
<!--direction方向 left right up down-->
<!--behavior行为 alternate往复移动 scoll重复滚动 slide滑到顶端-->
<marquee scrollamount="10" direction="right" behavior="scoll">一段文字
</marquee>
多媒体
公用属性
- controls：显示控制器
- muted：静音
- autoplay：自动播放。chrome浏览器视频需要添加muted属性后才能使用autoplay
- loop：循环
音频
<audio controls autoplay muted loop><source src="音频文件路径"></source>
</audio>
视频
<video controls autoplay muted loop><source src="视频文件路径"></source>
</video>
表单与表单元素
div标签
总结
好好学习，天天向上。
| 往期专栏 |
|---|
| Java全栈开发 |
| 数据结构与算法 |
| 计算机组成原理 |
| 操作系统 |
| 数据库系统 |
| 物联网控制原理与技术 |
