🙈作者简介:练习时长两年半的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> | 已过时。字体 |
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全栈开发 |
数据结构与算法 |
计算机组成原理 |
操作系统 |
数据库系统 |
物联网控制原理与技术 |