初识HTML|之魔神降世篇|（超详细讲解）
作者简介：练习时长两年半的Java up主
个人主页：老茶icon
ps:点赞是免费的，却可以让写博客的作者开兴好久好久
系列专栏：Java全栈，计算机系列（火速更新中）
格言：种一棵树最好的时间是十年前，其次是现在
动动小手，点个关注不迷路，感谢宝子们一键三连
目录
- 课程名：HTML
-
- 内容/作用：知识点/设计/实验/作业/练习
- 学习：HTML基础知识
- HTML
-
- 超文本
- 标记
-
- 标签的属性
- 浏览器
- 页面的基本组成结构
- HTML中表示颜色的方式
-
- 颜色的单词
- 颜色的十进制RGB
- 颜色的十六进制RGB
- 常用标签
-
- 标签的类型
-
- 块级元素
- 行内元素
- 单标签
- 双标签
-
- 文字
- 图片img
- 列表ul/ol/li
-
- 无序列表ul
- 有序列表ol
- 表格table
-
- 合并行rowspan="n"
- 合并列colspan="n"
- a标签
-
- 超链接
- 锚点
- 浮动框架iframe
- marquee标签
- 多媒体
-
- 音频
- 视频
- 表单与表单元素
- div标签
- 总结
课程名：HTML
内容/作用：知识点/设计/实验/作业/练习
学习：HTML基础知识
HTML
Hyper Text Markup Language 超文本标记语言
超文本
可以理解为超级文本：超越了文本的限制，如图片、音频、视频等。
也可以理解为超链接文本：通过某个连接，可以访问互联网中的任意地址。
标记
可以称为标签。用<>括起来的一个特定的单词。
标签分为单标签和双标签。
单标签：
双标签：
标签中可以加入属性，双标签中可以继续嵌套标签。
用HTML标签写出的文件保存为.html文件，称为页面文件。
标签的属性
在标签中，通过加入 属性名=“属性值” ,就可以让某个标签拥有指定的特征。
<标签名 属性1="值" 属性2="值" >标签名>
<html>
<head>
<meta charset="utf-8"/>
head>
<body>
<img src="图片路径">
body>
html>
浏览器
浏览器是用于"运行"HTML页面的平台。
用HTML语言写出来的网页文件，需要浏览器对其解释渲染。
浏览器与HTML文件的关系类似于JVM与java文件的关系。
常用浏览器
Chrome 谷歌浏览器
Edge Windows自带的浏览器，IE的升级版
FireFox 火狐浏览器
safari ios平台自带浏览器
页面的基本组成结构
DOCTYPE html>
<html>
<head>
<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 青色
常用标签
页面中的标签，也称为页面中的元素或节点。所有的元素可以分为两大类。
标签的类型
块级元素
如果一个标签占满整行，称这个标签为块级元素。
行内元素
如果一个标签占一行中的一部分，称这个标签为行内元素。
单标签
| 常用单标签 | 作用 | 类型 |
|---|---|---|
|
表单元素 | 行内元素 |
|
图片 | 行内元素 |
|
换行 | 块级元素 |
|
水平线 | 块级元素 |
双标签
文字
| 常用标签 | 作用 | 类型 |
|---|---|---|
~ |
一级标题~六级标签，文字加粗，一级标题最大 | 块级元素 |
|
段落 | 块级元素 |
|
行内标签 | 行内元素 |
|
文字下标 | 行内元素 |
|
文字上标 | 行内元素 |
|
文字加粗 | 行内元素 |
|
文字倾斜 | 行内元素 |
|
下划线 | 行内元素 |
|
已过时。字体 |
iconfont-阿里巴巴矢量图标库
HTML Emoji | 菜鸟教程 (runoob.com)
图片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标签
显示文字，行内元素
| 核心属性 | |
|---|---|
| href | 访问某个链接。如果要访问锚点，#开头 |
| target | _self:默认自身页面访问，_blank:空白页面访问，_parent:父页面访问，某个iframe的name:在指定的iframe中访问 |
| name | 定义锚点 |
超链接
<a href="http://baidu.com">跳转到baidua>
<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标签
<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全栈开发 |
| 数据结构与算法 |
| 计算机组成原理 |
| 操作系统 |
| 数据库系统 |
| 物联网控制原理与技术 |