HTML学习笔记

最新推荐文章于 2023-12-27 10:11:42 发布

维Cboy

最新推荐文章于 2023-12-27 10:11:42 发布

阅读量474

点赞数 1

文章标签： html5

本文链接：https://blog.youkuaiyun.com/weixin_45621536/article/details/117088128

版权

一、概述

1. 元素构成

<P>学习HTML</P>

开始标签：开始标签包含元素的名称，被一对尖括号“<>”包围。它表示元素从这里开始，本例则表示段落由此开始。

结束标签：与开始标签相似，结束标签多了符号“/”。它表示元素在这里结束，在本例中表示段落由此结束。
内容：元素的内容。

一个完整元素=开始标签+内容+结束标签。

2. 属性

<P name="html">学习HTML</p>

属性就是元素的额外信息

属性的值，有三个细节需要注意：

必须在英文状态下，输入引号。
可使用双引号也可使用单引号。但是，双引号和单引号不得在一个属性值里混用。
如果在属性值中已使用了双引号，双引号里面的内容还需要引用，则得使用单引号。

3.元素的嵌套

<!--<strong>斜体-->
<p>学习<strong>HTML<strong>。</p>

4.块级元素和内联元素

块级元素：其代码如块状显示。块级元素通常用于展示页面上层结构化的内容。如：进行，列表，导航菜单，页脚等。中，但可嵌入在其他块级元素中。例如
无论内容多少，该元素独占一行
内联元素：它常出现在块级元素中并包裹着一小部分文档内容。内联元素在形式上通常如行状显示。它通常出现在一堆文字之间。如，超链接元素
，专有元素元素和元素都是内联元素。内容撑开宽度，左右都是行内元素的可以排在一行

5.空元素

一些元素只有一个标签，元素的标签内附有一些额外信息。这样的元素叫做“空元素”。例如

<img src="图片路径">

绝对路径：项目中文件的位置
相对路径：相对于此.html代码文件的位置

HTML的文档结构

<!DOCTYPE html>
<html>
  <head>
    <title>text</title>
  </head>
  <body>
    <p>学习HTML</p>
  </body>
</html>

:文档声明 : 整个完整页面的根元素：头部 :页面标题,在浏览器标签上的页面的最顶部 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210520191252860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyMTUzNg==,size_16,color_FFFFFF,t_70#pic_center) :身体

二、基本知识

1.常用标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号标签:IDEA注释快捷键Ctrl+/，空格&nbsp,大于号&gt, 小于号&rt，版权符号&copy

2.img元素（图片显示）

标签解释：
图像（image）
必要属性
src：图片路径
常用属性
alt：在图片加载失败的时候，就会用文字代替
title:鼠标悬停在图片上时，所显示的名字

<img src="图片路径" alt="加载失败" title="简要描述">

3.a元素（超链接）

必要属性
href:超链接
注意：在 HTML5 中, 如果标签没有 href 属性, 它将是一个占位符的超链接。
常用属性
target：表示窗口在那里打开
_blank：在新标签中打开
_self：在自己的网页中打开

<a href="www.baidu.com" target="_blank">百度</a>

4、锚链接和邮件链接

1.锚链接

1.需要一个标记锚
2.跳转到标记

<a name="top"></a>
<a href="#top">回到顶部</a>
<br/>

也可以在网址后添加#号跳到对应网站的对应位置

<a href="https://www.baidu.com#down">百度底部</a> <br/>

2.邮件链接

mailto

<a href="mailto:zhangrr601@163.com?cc=someone@163.com&bcc=somebody@163.com" rel="nofollow">发送邮件</a>

在这里插入图片描述

5.列表标签

标签解释：

:无序列表（Unordered List）,
1. : 有序列表（Ordered List）,
2. :列表项（List Item ）

无序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

有序列表

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        </ul>

自定义列表

<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容-->
<dl>
    <dt>学科</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dt>语言</dt>
    <dd>中文</dd>
    <dd>英语</dd>
    <dd>日语</dd>
</dl>

效果图：
在这里插入图片描述

6.表格

表格的基本结构：
单元格
行 tr
列 td
跨行 rowspan
跨列 colspan

<table border="1px">
    <tr>
        <td colspan="3">学习成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">维CBoy</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

效果图:
在这里插入图片描述

7.视频和音频

标签解释：
视频： video
音频：audio
常用属性
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--音频和视频
src :资源路径
controls：控制条
autoplay:自动播放
-->
<video src="../resources/video/1.mp4" width="500" height="300" controls="controls" autoplay="autoplay" ></video>

<audio src="../resources/audio/DAOKO,米津玄師%20-%20打上花火.mp3" controls="controls" autoplay="autoplay"></audio>
</body>
</html>

效果图:
左边是视频，右边是音频注意：测试的时候可能会遇到没有实现自动播放，收到的解答得知原因是部分浏览器拒绝自动播放，
1，没音频轨道，或者设置了 muted 属性
2，在视图里面是可见的，要插入到 DOM 里面并且不是 display: none 或者 visibility: hidden 的，没有滑出可视区域
换句话说，只要你不开声音扰民，且对用户可见，就让你自动播放，不需要你去使用 GIF 的方法进行 hack。这种实现主要对于视频的，自动播放但是却是静音的，需要你点击喇叭才能有声音，这对于音频答题就跟没说一样。

<video  muted="src" src="../resources/video/1.mp4" width="500" height="300" controls="controls" autoplay="autoplay" ></video>

希望有大佬能教一下如何让视频和音频可以有声音的自动播放

8.页面结构

在这里插入图片描述不够在后端开发的时候通常是header、footer、section分别放在不同的jsp文件里，方便头部和脚部的复用。

9.iframe内联框架

<iframe src="path" name="mainFrame" ></iframe>

ifram标签，必须要有src属性即引用页面的地址
给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
<iframe src="path" name="mainFrame" frameborder="" width="" height=""></iframe>
-->
<iframe src="http://www.baidu.com" name="mainFrame" frameborder="0" width="400" height="300"></iframe>
<a href="http://www.baidu.com" target="hello">点击跳转</a>
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>

效果图:
在这里插入图片描述

10.表单（重点）

from标签，action属性为所提交的目的地址，method选择提交方式
可以选择使用post或者get方式提交

get效率高，但在url中可以看到提交的内容，不安全，不能提交大文件
post比较安全且可以提交大文件

在这里插入图片描述一些其他常用属性设置
`

Title

注册

<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>性别：
    <input type="radio" name="sex" value="boy" >男
    <input type="radio" name="sex" value="girl">女
</p>

<!--
单选框
name是分组
-->

<p>
    <input type="checkbox" name="hobby" value="sleep">睡觉
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="chat">聊天
    <input type="checkbox" name="hobby" value="game">游戏
</p>

<p>
    <input type="button" name="帅">
</p>
<p>
    <input type="submit" name="submit" value="提交" >
    <inpuT type="reset">
</p>

<p>
    <input type="file" name="files">
    <input type="button" name="upload" value="上传">
</p>

<p>邮箱：
    <input type="email" name="email">
</p>

<p>url：
    <input type="url" name="url">
</p>

<p>数字:
    <input type="number" name="num" max="100" min="0" step="10">
</p>

<p>音量：
    <input type="range" name="range" min="0" max="100" step="2">
</p>

<p>搜索：
    <input type="search" name="search">
</p>

<select name="列表名称" id="">
    <option value="国籍">中国</option>
    <option value="国籍">美国</option>
    <option value="国籍" selected>瑞士</option>
    <option value="国籍">德国</option>
</select>

<textarea name="textarea"  cols="30" rows="10"></textarea>

效果图
在这里插入图片描述

二、学习资源推荐

视频：遇见狂神说：https://www.bilibili.com/video/BV1x4411V75C，适合后端开发人员学习；千峰教育：https://www.bilibili.com/video/BV1Bb411v7w8 ，适合前端人员学习
网站：HTML中文网：https://www.html.cn； W3Cschool：https://www.w3cschool.cn/group/frontend.html

如有好的资源希望分享到评论区共同学习