HTML笔记

Forever Nore

已于 2022-09-19 20:48:25 修改

阅读量335

点赞数

分类专栏：前端文章标签： html5

于 2022-09-18 15:25:56 首次发布

本文链接：https://blog.csdn.net/qq_30659573/article/details/126917748

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

网页基本标签
图像标签
链接标签
锚链接
行内元素和块元素
列表
表格
初识表单post和get提交
事件
- 键盘事件
- 鼠标事件

网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--1、标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>

<!--2、段落标签-->
<p>
    这是一整段这是一整段这是一整段这是一整段
    这是一整段这是一整段这是一整段
    这是一整段这是一整段
    这是一整段
    这是一整段
</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

<!--3、换行标签-->

<!--br、hr是自闭合标签，习惯上最好加/结尾-->
第一行 <br/>
第二行
<!--4、水平线标签-->
<hr color="red"/>

<!--5、字体样式标签-->
粗体：<stronge>I LOVE YOU </stronge>
斜体：<em>I LOVE YOU </em>

<hr/>

<!--6、特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<br/>
大于号：&gt;      <br/>
小于号：&lt;     <br/>
版权符号：&copy;

<!--7、注释-->
</body>
</html>

图像标签

常见图像格式：

JPG
GIF
PNG
BMP：位图
…
语法：

<body>
<img src="path" alt="text" title="标题" width="x" height="y">
 	src：图像地址
	alt：图像的替代文字（找不到该图片时，才会显示）
	title：鼠标悬停提示文字
	width:图像宽度
	height:图像高度

</body>

二者在同一个目录下

<body>
<img src="./bj.jpg" alt="text" title="标题" width="x" height="y">
src：图像地址
alt：图像的替代文字（找不到该图片时，才会显示）
title：鼠标悬停提示文字
width:图像宽度
height:图像高度

</body>

在这里插入图片描述

链接标签

文本超链接：点击文本进行跳转

图像超链接：点击图片进行跳转

语法：

<a href="path" target="目标窗口位置">链接文本或图像</a>
href：必填 ，表示要 跳转到那个页面
target:表示窗口在哪里打开，默认是  当前页面打开
       _blank：在 新的标签页打开
       _self:在 自己的网页 中打开

示例：

<body>
<a href="http://www.baidu.com " target="_blank"> 点我</a>

</body>

在这里插入图片描述
在新的页面打开了

练习

<body>

<!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>

<br>

<!--图像超链接-->
<a href="http://www.baidu.com">
    <img src="./bj.jpg" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
</a>

</body>

锚链接

通过#实现页面间的跳转
跳转到另一个页面指定的位置

<body>

<!--
    锚链接
        1.需要一个标记
        2.然后跳转到标记
        3.使用 #
-->
<!--先设置一个标记-->
<a id="top">我是顶部</a>

<!--图片1-->
<p>
    <a href="http://www.baidu.com">
        <img src="./bj.jpg" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--图片2-->
<p>
    <a href="http://www.baidu.com">
        <img src="./bj.jpg" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--图片3-->
<p>
    <a href="http://www.baidu.com">
        <img src="./bj.jpg" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--图片4-->
<p>
    <a href="http://www.baidu.com">
        <img src="./bj.jpg" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--也可以 跳转到 另一个页面的指定位置 : href="2.html#top"-->
<!--使用# +id值 跳转到指定位置！-->
<a href="#top">跳转到顶部</a>

</body>

行内元素和块元素

块元素

无论内容多少，该元素独占一行
p标签、h1-h6…

行内元素

内容·撑开宽度·，左右都是行内元素的可以在排一行
a 标签、strong 标签、em 标签…

列表

列表的分类：
列表元素：

有序列表ol
无序列表ul
自定义列表

<body>

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
</ul>
<!--自定义列表
    dl：标签
    dt:列表名称
    dd：列表内容
-->
<dl>
    <dt>学科</dt>
        <dd>Java</dd>
        <dd>python</dd>
        <dd>运维</dd>
    <dt>位置</dt>
        <dd>北京</dd>
        <dd>珠海</dd>
</dl>

</body>

在这里插入图片描述

表格

为什么使用表格？

简单通用
结构稳定

基本结构：

单元格
行 tr
列 td
跨行 rowspan
跨列 colspan

<body>
<table border="1px"><!--加个边框-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>

    <tr>
        <td>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>
        <td>3-4</td>
    </tr>

</table>

</body>

在这里插入图片描述

<table border="1px"><!--加个边框-->
    <tr>
        <!--让这个单元格跨两列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>

    <tr>
        <!--让这个单元格跨两行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>

    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

</table>

在这里插入图片描述

初识表单post和get提交

表单语法：

<body>

<!--初识表单post和get提交
    method:规定如何发送 表单数据，常用值：：post、get
        get方式提交：可以在url中看到提交的信息
		post方式提交：比较安全，可以->传输大文件
    action:表示向何处发送表单数据,可以是一个网站，或者一个->请求处理地址
-->
<form method="get" action="/user/login">
    <!--文本输入框：text-->
    <p>姓名：<input type="text" name="username"></p>
    <!--密码框：password-->
    <p>密码：<input type="password" name="password"></p>

    <!--提交-->
    <input type="submit">
    <!--重置-->
    <input type="reset">
</form>

</body>