HTML （懒人学习版）

#html,久远的记忆突然袭击我，这个在大二学了一年的东西，刚开始因为一个朋友要生日了，在寒假时自学了一会，勉强搞了一个生日蛋糕的html送给它，后面学习的时候渐入佳境，但是，写好的程序只能在电脑上运行了，因为加了javascripe和数据库，没有java是运行不了的，而html这个超文本标记语言就挺好的，即便在手机上也可以用qq浏览器啥的打开，虽然简单，但是挺有用的，每当过年过节或者生日啥的，或者自己搞着玩都是很好的#

HTML基础学习

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网络应用的标准标记语言。它是网络开发的基础，无论是前端开发、网页设计还是数字营销，掌握HTML都是必不可少的。

基本格式认识

这就是一个简单的html文件，那么，输出的结果就是

helloworld就是这个网页的标题，然后，body里面就是网页的内容部分。

<!DOCTYPE html> 声明了文档类型和HTML版本。
<html> 是根元素，包含整个HTML文档的内容。
<head> 包含文档的元数据，如标题、字符集声明、链接外部资源等。
<body> 包含网页的可见内容，如文本、图片、链接等

HTML文档结构

HTML 开始和结束的标签是

头部标签

标题标签：<title>……</title>

网页元信息标签：<meta/>

主体标签

<body>……</body>，浏览器正文中显示的内容

基本语法

（1）标签的分类

①双标签：<标签名>内容< / 标签名>“ / ” 不可省

②单标签：<标签名 /> “/”可省

③注释标签：<! - -注释内容 - -> 不显示

（2）标签属性

<标签名属性名= "属性值" > 内容 </ 标签名>

属性值要用英文引号括起来

标签学习

html这个超文本标记语言一般都是由标签构成的，我们在标签里面输入内容，它再显示出来，不同的标签有不同的展示内容，这里只是浅浅的学一下比较疏浅的入门知识，想要详细的了解的话可以去 “w3school“里面去深度学习。

在上图的基础上，我加上一写标签内容，然后再详细的解释一下标签的意思吧。

标题标签

代码部分

网页部分

这里我们可以看到“八嘎”这个词是逐渐的变小，这就是标题从标题一到标题六的变化

标题标签 <hn> 「 <h1>级别最高，<h6>级别最低」

而后面<p></p>这个是段落标签，每一个<p></p>都表示一个段落。

图像标签

代码：

内容：

解释

src: 图片的路径或URL
alt: 图片的替代文本，当图片无法显示时显示
width 和 height: 设置图片的显示宽度和高度

<br>表示换行

超链接标签

格式：<a href="目标地址" target="值">内容</a>

href属性：目标资源的属性

"#" 表示空链接

（1）" http ://xxxxx"用于链接到本地浏览器的网页

（2）" ftp ://xxxxxx"用于链接到本地服务器中的文件

（3）" mailto :xxxxx"用于链接到电子邮件

2.target属性

" _self "表示在当前标签页中加载目标资源，默认，可省

" _blank "表示在新的标签页中加载目标资源

代码

网页

图片设置为超链接，这个也挺简单的

就是套娃吧，差不多的意思。

链接

在HTML中，<link> 标签用于建立当前文档与外部资源之间的联系，比如引入外部CSS样式表。<link> 标签位于文档的 <head> 部分。以下是如何在HTML中使用 <link> 标签的示例：

视频、音频标签

代码：

<!DOCTYPE html>
<html>
    <!-- 头部结构 -->
    <head>
        <title>helloworld</title>
    </head>

    <!-- 主体结构 -->
    <body>
        <h1>你好，我是琼楼！</h1> <!-- 添加一个标题 -->
        
        <!-- 音频 -->
        <h2>音频示例</h2>
        <audio controls> <!-- 添加控制栏 -->
            <source src="audio.mp3" type="audio/mpeg"> <!-- 指定音频文件 -->
            您的浏览器不支持 audio 元素。
        </audio>
        
        <!-- 视频 -->
        <h2>视频示例</h2>
        <video width="320" height="240" controls> <!-- 设置视频宽度和高度，并添加控制栏 -->
            <source src="video.mp4" type="video/mp4"> <!-- 指定视频文件 -->
            您的浏览器不支持 video 元素。
        </video>
    </body>
</html>

解释：

<audio> 标签：用于嵌入音频内容。

controls 属性：添加音频播放的控制栏（如播放、暂停按钮）。
<source> 标签：指定音频文件的路径和类型。

<video> 标签：用于嵌入视频内容。

width 和 height 属性：设置视频的宽度和高度。
controls 属性：添加视频播放的控制栏（如播放、暂停按钮）。
<source> 标签：指定视频文件的路径和类型。

扩展：

添加音频的另外两种方法：

< bgsound src="音频地址" loop="infinite">

仅适用于IE浏览器

loop属性表示播放的次数，若值为 infinite或-1 则表示无限循环。

< embed src="音频地址" autostart="true" loop="true">

autostart属性表示是否自动播放，若值为true则表示自动播放

loop属性表示播放的次数，若值为 true 则表示无限循环。

表格标签

表格主体 <table>

行标签 <tr>

单元格标签 <td>

表头标签 <th>

标题标签 <caption>

下面是代码：

<!DOCTYPE html>
<html>
    <!--头部结构-->
<head>
    <title>helloworld</title>
</head>
    <body>
        
        <!-- 表格 -->
        <table border="1"> <!-- 给表格添加边框 -->
            <caption>水果类型</caption> <!-- 表格标题 -->
            <tr> <!-- 表格行 -->
                <th>水果名称</th> <!-- 表头单元格 -->
                <th>颜色</th>
                <th>产地</th>
            </tr>
            <tr> <!-- 第一行数据 -->
                <td>苹果</td> <!-- 表格单元格 -->
                <td>红色</td>
                <td>中国</td>
            </tr>
            <tr> <!-- 第二行数据 -->
                <td>香蕉</td>
                <td>黄色</td>
                <td>菲律宾</td>
            </tr>
            <tr> <!-- 第三行数据 -->
                <td>橙子</td>
                <td>橙色</td>
                <td>美国</td>
            </tr>
            <tr> <!-- 第四行数据 -->
                <td>葡萄</td>
                <td>紫色</td>
                <td>智利</td>
            </tr>
            <tr> <!-- 第五行数据 -->
                <td>西瓜</td>
                <td>绿色</td>
                <td>中国</td>
            </tr>
        </table>
    你好，我是琼楼！
</body>
</html>

运行的结果就是

表单标签

创建表单

action属性：表单数据提交的目标地址

<label> 标签

for属性：将label标签与表单元素绑定

<input> 标签

type属性：元素的类型

id属性：唯一表示元素

name属性：元素的名称

代码：

<!DOCTYPE html>
<html>
    <!-- 头部结构 -->
    <head>
        <title>helloworld</title>
    </head>

    <!-- 主体结构 -->
    <body>
      

        <!-- 表单 -->
        <form action="/submit" method="post">
            <fieldset> <!-- 表单分组 -->
                <legend>登录信息</legend> <!-- 表单标题 -->
                <label for="username">用户名：</label> <!-- 标签 -->
                <input type="text" id="username" name="username" required> <!-- 文本输入框 -->
                <br><br> <!-- 换行 -->
                <label for="password">密码：</label> <!-- 标签 -->
                <input type="password" id="password" name="password" required> <!-- 密码输入框 -->
                <br><br>
                <input type="submit" value="登录"> <!-- 提交按钮 -->
            </fieldset>
        </form>
    </body>
</html>

这是不完善的代码，比如action ="/submit" 这个submit是我自己设置的另一个url,这里其实可以和java的servlet挂钩，就是表单的数据提交到哪里。

总结

好了，就写到这吧，大概就这样，比较基础的，其他的想要弄交互的就涉及到后端，如果想要画面好看就要参考css样式，想要有功能性的提升就要学号javascript