初识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全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员老茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值