初识HTML|之魔神降世篇|（超详细讲解）

最新推荐文章于 2024-07-30 23:06:43 发布

程序员老茶

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量536

点赞数

分类专栏： # HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_53431712/article/details/130102418

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

🙈作者简介：练习时长两年半的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属性更改

<!--无序列表-->
<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全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术

程序员老茶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
初识HTML|之魔神降世篇|（超详细讲解）

HTML入门常用标签，单/双标签，文字，图片，表格等等
复制链接

扫一扫

专栏目录