HTML学习笔记

最新推荐文章于 2024-04-18 05:00:00 发布

原创最新推荐文章于 2024-04-18 05:00:00 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的结构、标签、注释及特殊符号的使用，讲解了标题、段落、换行、水平线、字体样式、图像、链接、列表、表格、视频音频等元素的语法与应用。

由于学校里实训要做一个javeweb项目，而之前从未接触过java以及html所以，从头学一遍html。

什么是HTML

HTML，全称为Hyper Text Markup Language(超文本标记语言)

超文本包括：文字、图片、音频、视频、动画等

HTML基本结构

javaEE自动生成的HTML文件为

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>

</body>
</html>

这里，这个<!DOCTYPE html>的含义是告诉浏览器，我们要使用什么规范
html的内容必须在<html> </html>之间，不可在<html> </html>之间以外的位置
<head></head>代表网页头部
<body></body>代表网页主体,网页中显示的内容就在这个位置
<title></title>指的是网页的标签名称，
<meta>是描述性标签，它用来描述我们网站的一些信息

HTML的注释和特殊符号

<!--这里是注释 -->

空格

在html文件中如果想要多个空格必须使用   因为在html中，即使你输入了多个空格，在网页中也只有一个空格。

大于号

&gt

小于号

&lt

版权符号

&copy

HTML的基本标签

⚪标题标签

运行图如下

⚪段落标签

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

<body>
java真的
是
太简单了
</body>

html网页显示情况

如果加上<p></p>就可以称为段落

<p>java真的</p>
<p>是</p>
<p>太简单了</p>

⚪换行标签

<br/>表示换行

<body>
java真的<br/>
是<br/>
太简单了<br/>
</body>

运行效果如下

可以发现段落标签和换行标签均可以起到换行的作用，但是段落标签会在换行后留出一行空白

为什么换行标签只有一个，而不是一对呢？

HTML标签是否闭合，可以通过将标签分类进行判断，大致分为有内容标签和无内容标签。像div，p，span这种就属于有内容标签，标签内部可以添加内容，例如：<div>hello world</div>，像input，br，hr这种就属于无内容标签，写法为 <input type="text" />, <br />。

⚪水平线标签

<hr>

<body>
java真的<br/>
是<br/>
<hr/>
太简单了<br/>
</body>

运行效果如下，可以发现多了一条水平线

⚪字体样式标签

粗体：<strong>内容</strong>

斜体:<em>内容</em>

图像标签

图片地址分为相对地址和绝对地址

相对地址就是相对于当前html文件地址，图片的地址
绝对地址是图片在计算机内的地址

推荐使用相对地址，可以使用../来表示当前目录的上级目录

<body>
<img alt="图片" src="../res/img/2.png" title = "宇宙图片" width = "300" height="300">
</body>

效果如下

alt指的是如果图片加载不成功，则共alt里的内容替换这个图片

比如说，路径写错了，那么图片就变成这样了

title指的是鼠标悬停在图片上显示的文字

链接标签

href:必填，表示要跳转到的那个页面

target：表示窗口在哪里打开

_blank 在新页面打开

_self 在当前页面打开

文本超链接

<a href="https://www.baidu.com">点击我跳转到百度</a>

运行效果如下，点击文字后跳转到百度

图片超链接

<a href="https://www.baidu.com">
<img alt="图片" src="../res/img/2.png" title = "宇宙图片" width = "300" height="300">
</a>

点击图片后可以跳转到百度

锚链接

用于快速跳转到当前页面的某个部分

实现：

<a name="top">顶部</a> //锚标记
<a href="#top">回到顶部</a> //点击后返回至锚标记所在位置

还可以跳转至另外一个页面的锚标记处

如跳转至demo1页面的顶部

<a href="demo1#top"></a>

邮箱链接

点击后发送邮件

<a href=""mailto:123456@qq.com></a>

这里还可以使用qq推广，在页面上生成一个qq链接，点击后可以与链接设定的人聊天

实现方法：

1.打开

2.在提示语里输入要提示的内容，生成链接

将链接复制到body部分，即可实现，点击链接，进行qq会话的功能。

列表标签

列表分为有序列表、无序列表和自定义列表

有序列表（order list）

<ol>
<li>Java</li>
<li>PYthon</li>
<li>C/C++</li>
<li>Go</li>
</ol>

效果图如下

无序列表（unordered list）

<ul>
<li>Java</li>
<li>PYthon</li>
<li>C/C++</li>
<li>Go</li>
</ul>

效果图如下

自定义列表

<dl>
	<dt>学科</dt>
	
	<dd>Java</dd>
	<dd>Python</dd>
	<dd>Linux</dd>
	<dd>C</dd>
	<dt>城市</dt>
	
	<dd>北京</dd>
	<dd>上海</dd>
	<dd>杭州</dd>
	<dd>深圳</dd>
</dl>

效果图如下

表格标签

<!-- border 表格线宽度 
tr 行row
td 列
-->
<table border="1px">
	<tr>
	<!-- colspan 跨列 align 对齐方式 -->
		<td colspan="4" align="center">1.1</td>
	</tr>
	<tr>
	<!-- rowspan 跨行 -->
		<td rowspan="2">2.1</td>
		<td>2.2</td>
		<td>2.3</td>
		<td>2.4</td>
	</tr>
	<tr>
		<td>3.1</td>
		<td>3.2</td>
		<td>3.3</td>
	</tr>
</table>

效果图如下

视频与音频

视频

<!-- 视频 controls是显示播放 快进等按钮，并提供影片播放  autoplay是打开网页后视频自动播放-->
<video src="../res/video/2.mp4" controls autoplay width="300" height="300"></video>

效果图如下

音频

<!-- 音频 -->
<audio src="../res/audio/1.mp3" controls autoplay>我和你</audio>

效果图

页面结构分析

iframe内联框架

例如在网页里内联一个百度

<!--frameborder指的是框架的宽度，调成0的话为无边框-->
<iframe src="https://www.baidu.com" frameborder="10" width="300px" height="300px"></iframe>

效果图如下

还可以把iframe的src置为空，然后给这个框架起一个名字，在使用<a></a>标签时可以指定在某个框架里打开链接

<iframe src="" name="hello"frameborder="10" width="300px" height="300px"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>

效果图

表单语法

建一个登录页面

<!-- 
表单 
action指的是按下按钮后跳转至的网页
method分为get 和 post
get 方法，可以在url中看到我们提交的内容，不安全，高效
post方法，可以隐藏我们提交的内容，安全，可以传输大文件

-->
<form action="hello.html" method="get">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pass">
<p><input type="submit">
<input type="reset">
</p>

效果图如下

提交查询内容后，自动跳转至hello.html

可以发现我们的用户名和密码在url里泄露了，这时因为使用了get方法的原因

如果换成post方法，则可以隐藏我们提交的内容

表单的元素格式

单选radio

<p>
	<input type="radio" value="boy" name="sex"/>男
	<input type="radio" value="girl" name="sex"/>女
</p>

value为单选框的值

这里注意，两个选项的name必须相同，这样俩个选项才是一个组的，才只能选其中一个。

效果图如下

下拉框select

<p>
	<select name="国家">
	<option value="中国" selected>中国</option><!--selected-->指的是初始默认选项
	<option value="美国">美国</option>
	<option value="俄罗斯">俄罗斯</option>
	</select>
</p>

效果图如下

文本域

<p>
	<textarea rows="10" cols="10">文本内容</textarea>
</p>

效果图如下

文件域

<p>
	<textarea rows="10" cols="10">文本内容</textarea>
</p>

效果图如下

邮箱

会自动检查邮箱的格式

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

表单的应用

隐藏域

加上hidden

<p>名字:<input type="text" name="username" value="初始值" maxlength="8" hidden></p>

只读

加上readonly

<p>名字:<input type="text" name="username" value="初始值" maxlength="8" readonly></p>

禁用

加上disabled

<p>密码:<input type="password" name="pass" disabled></p>

增强鼠标可用性

点击名称:字段后会自动跳转到对应的输入框中

<p>
	<label for="user">名称:</label>
	<input type="text" name="username" id="user"value="初始值" maxlength="8" >
</p>

表单的初级验证

为什么验证？

例如淘宝每天需要处理数以万计的请求，如果用户输入的错误请求也进行响应的话，会造成很大的资源浪费，因此需要验证用户输入的信息的正确性

placeholder

提示用户输入框中需要输入的内容

<p>
	<label for="user">名称:</label>
	<input type="text" name="username" id="user" placeholder="请输入用户名" maxlength="8" >
</p>

required

输入框内容非空

pattern

正则表达式，用于检查输入框中输入的信息是否合法

正则表达式有一些很复杂，可以上网搜索常用的正则表达式，应用即可。

例如电子邮箱的正则表达式为/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/，可以将其应用到邮箱输入框中