目录
一、概述
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>
:文档声明 : 整个完整页面的根元素 :头部
二、基本知识
1.常用标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号标签:IDEA注释快捷键Ctrl+/,空格 ,大于号>, 小于号&rt,版权符号©
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),
- : 有序列表(Ordered List),
- :列表项(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比较安全且可以提交大文件
一些其他常用属性设置
`
注册
<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>
![属性详解](../resources/image/4.png)
效果图
二、学习资源推荐
- 视频:遇见狂神说: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
如有好的资源希望分享到评论区共同学习
三、心得总结
对于HTML的学习需要勤于动手,对于不懂得问题需要去查询,而不是抛之脑后。前端东西多而杂,建议写博客总结