HTML笔记

最新推荐文章于 2024-08-10 15:00:00 发布

若有南墙撞穿便是

最新推荐文章于 2024-08-10 15:00:00 发布

阅读量532

点赞数

分类专栏：笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/Ross415/article/details/120855926

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML

初识HTML

HyperTextMarkupLanguage（超文本标记语言）

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

在这里插入图片描述

HTML5的优势

世界知名浏览器厂商对HTML5的支持
市场的需求
跨平台

W3C标准

W3C
- 万维网联盟 （World Wide Web Consortium） 。
- 成立于1994年，Web领域最权威和最具影响力的国际中立性技术标准机构。
- https://www.w3.org/
- https://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准语言(DOM、ECMAScript)

常见IDE

记事本
Dreamweaver
IDEA
WebStorm
……

< body >、< /body>等成对的标签，分别叫做开放标签和闭合标签。

单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素

在这里插入图片描述

<!-- DOCTPYE :告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 中文 zh 英文 en-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <meta charset="UTF-8">
    <meta name="xingye" context="加油努力">
<!-- meta 描述性标签，表示用来描述网站的一些信息   -->
    <meta name="学习" content="永无止境">
<!-- 一般用来做SEO-->
    <title>Title</title>
</head>
<!--body代表网页主体-->
<body>
Hello world！
</body>
</html>

网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>p代表一个段落</p>
<p>一二三四五</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
换行第一个<br/>
<!--换行标签比较紧凑，段落标签有明显段间距-->
huanhang <br/>

<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体:<strong>我就是那个不一样的烟火<br/></strong>
斜体:<em>fighting</em>

<!--特殊符号-->
空格: 1&nbsp; 100&nbsp;&nbsp;&nbsp;3<br/>
大于号：&gt;<br/>
小于号：&lt;<br/>
版权符号：&copy;<br/>
<!--特殊记忆符号都以"&"开头，在idea中敲出后有提示-->
</body>
</html>

图像、超链接、网页布局

链接标签：

a标签内文字：即显示的文字
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank：在新标签中打开
_self：在自己的网页中打开

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a name="top"></a>
<!--图像学习
src:资源地址 相对地址（推荐使用） 还有绝对地址
../ --上级目录
alt：在图片加载失败的时候，就用文字替代
title：鼠标停留在图片上时，所显示的名字
-->
<img src="D:/java project/HTML/resource/1.jpg" alt="哆啦A梦yyds" title="童年的记忆" width="999" height="9999">

<br/>
<!--超链接-->
<a href="https://www.runoob.com/html/html-links.html" target="_blank" title="自学神奇网站">请加油吧</a>
<br/>

<!--锚链接
1.需要一个标记锚
2.跳转到标记
#页面内跳转
-->
<a href="#top">回到顶部</a>
<br/>
<!--可以在网站后面添加#号跳转到对应网站的对应位置-->
<a href="https://www.baidu.com#down">百度底部</a>

<!--功能性链接
        邮箱链接：mailto
        QQ链接
        -->
<a href="mailto:1817003641@qq.com">点击联系我吧</a>
<a target="_blank" href="https://www.runoob.com/html/html-links.html"/>

<a target="_blank" href="https://sspai.com/">神奇的网站</a>
    <img border="0" src="https://sspai.com/" alt="点击吧" title="嘿嘿">
</a>
</body>
</html>

行内元素和块元素

块元素

无论内容多少，该元素独占一行
```
<p></p><hr/> <h1>...<h6>
```

行内元素：内松撑开宽度，左右都是行内元素的可以排在一行

<a><strrong><em>

列表、表格、媒体元素

1.列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类

无序列表(unordered list)

有序列表(order list)
自定义列表（define list）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
    应用范围：试卷、问答.....
    -->
<ol>
    <li>java</li>
    <li>python</li>
    <li>C++</li>
    <li>java</li>
    <li>java</li>
    <li>java</li>
</ol>

<hr/>

<!--无序列表
    应用范围：导航、侧边栏
    -->
<ul>
    <li>Java</li>
    <li>java</li>
    <li>python</li>
    <li>C++</li>
    <li>java1</li>
    <li>java2</li>
    <li>java3</li>
</ul>

<hr/>

<!--自定义列表
    dl:标签
    dt：列表名称
    dd：列表内容
    -->
<dl>
    <dt>我爱编程</dt>
    <dd>我</dd>
</dl>

</body>
</html>

2.表格

使用表格：
- 简单通用
- 结构稳定
表格的基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
    行：tr
    列：td
    -->
<table border="=1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="5">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!--   rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
        <td>2-6</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

</table>

</body>
</html>

3.媒体元素

视频和音频：video、audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--视频
    src：路径
    controls：控制面板
    autoplay：自动播放
    -->
<vedio src="xxx/xxxx/xxxx" controls autoplay></vedio>

<!--音频-->
<audio src="D:\java project\HTML\resource\朴树 - 生如夏花.mp3" controls autoplay></audio>
</body>
</html>

页面结构

元素名	描述
header	标题头部区域的内容
footer	标记脚部区域的内容
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或者应用
nav	导航类辅导内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<!--页面结构-->
<head>
    <h2>页面头部</h2>
</head>

<section>
    <h2>页面主体</h2>
</section>

<footer>
    <h2>页面脚部</h2>
</footer>
</body>
</html>

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

iframe内联框架

ifram标签，必须要有src属性：引用页面的地址

给标签加上name属性后，可以做a标签的target属性：在内联窗口打开链接

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>

<iframe src="path" name="主框架"></iframe>

<hr/>

<iframe src="https://www.bilibili.com/video/BV11Q4y1B7Ae?spm_id_from=333.851.b_7265636f6d6d656e64.5"
        scrolling="no" border="0" frameborder="no"
        framespacing="0" allowfullscreen="true"
        width="700" height="700"></iframe>
<p><a href="https://space.bilibili.com/328271007/video" target="好看的视频" rel="hai">bilibili.com</a> </p>
</body>
</html>

表单及其应用

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签来设置:

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

First name:
Last name:

浏览器显示如下：

First name:
Last name:

**注意:**表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签来定义:

Password:

浏览器显示效果如下:

Password:

**注意:**密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

标签定义了表单单选框选项

Male
Female ### 复选框（Checkboxes）

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

I have a bike
I have a car

提交按钮(Submit Button)

定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

Username:

标签	说明
input	大部分表单元素对应的标签有Text、password、checkbox、radio、submit 、reset、file、hidden、image和button，默认为text，可以提交用户名、密码等等
select	下拉选择框
textarea	文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--form表单
    action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
    get方式提交:zai url中看到我们提交的信息，不安全，高效
    post：比较安全，可以传输大文件-->
<form action="Demo.html" method="get">
<!--    文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"> </p>
<!--    密码框：input type="password"-->
    <p>密码：<input type="password" name="password"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

文本框和单选框

属性	说明
type	指定元素的类型；text、password、checkbox、radio、submit 、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值，radio必须提供
size	指定表单元素的初始宽度。当type为text或者password时候，以字符为单位；其他type以像素为单位
maxlength	type为text或者passw时，输入的最大字符数
check	type为radio或者checkbox时，指定按钮是否被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<form action="Demo01.html" method="post">
        <!--  文本输入框：input type="text
            value="前端“ 默认初始值
            maxlength="8"
            size=“30” 文本框的长度
            -->
    <p>名字：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="password"></p>

<!--    单选框标签：input type ="radio"
        value:单选框的值
        name：表示组
        -->
    <p>性别：
        <input type="radio" value="man" name="sex">男
        <input type="radio" value="woman" name="sex">女
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<form action="Demo01.html" method="post">
    <!--  文本输入框：input type="text
        value="前端“ 默认初始值
        maxlength="8"
        size=“30” 文本框的长度
        -->
    <p>名字：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="password"></p>

    <!--    单选框标签：input type ="radio"
            value:单选框的值
            name：表示组
            -->
    <p>性别：
        <input type="radio" value="man" name="sex">男
        <input type="radio" value="woman" name="sex">女
    </p>

    <!-- 多选框：input type="checkbox"   -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="happy">睡觉
        <input type="checkbox" value="code" name="good">敲代码
        <input type="checkbox" value="chat" name="boring">聊天
        <input type="checkbox" value="game" name="waste time">玩游戏
    </p>

    <!--    按钮：
        input type=“button” 普通按钮
        image：图像按钮
        submit：提交按钮
        reset：重置按钮
        -->
    <p>
        <input type="button" name="butt" value="点击加长">
        <input type="image" src="../resource/1.jpg" width="200px"
        height="200px">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

列表文本框和文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<form action="Demo01.html" method="post">
    <!--  文本输入框：input type="text
        value="前端“ 默认初始值
        maxlength="8"
        size=“30” 文本框的长度
        -->
    <p>名字：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="password"></p>

    <!--    单选框标签：input type ="radio"
            value:单选框的值
            name：表示组
            -->
    <p>性别：
        <input type="radio" value="man" name="sex">男
        <input type="radio" value="woman" name="sex">女
    </p>

    <!-- 多选框：input type="checkbox"   -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="happy">睡觉
        <input type="checkbox" value="code" name="good">敲代码
        <input type="checkbox" value="chat" name="boring">聊天
        <input type="checkbox" value="game" name="waste time">玩游戏
    </p>

    <!--    按钮：
        input type=“button” 普通按钮
        image：图像按钮
        submit：提交按钮
        reset：重置按钮
        -->
    <p>
        <input type="button" name="butt" value="点击加长">
        <input type="image" src="../resource/1.jpg" width="200px"
               height="200px">
    </p>

<!--    文本域：
        textarea name="textarea" cols="40" rows="10"
        -->
    <p>反馈：
        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
    </p>

<!--文件域：
     input type="file" name="files"   -->
    <p>
        <input type="file" name="files">
        <input type="tutton" name="upload" value="上传">
    </p>


    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<form action="Demo01.html" method="post">
    <!--  文本输入框：input type="text
        value="前端“ 默认初始值
        maxlength="8"
        size=“30” 文本框的长度
        -->
    <p>名字：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="password"></p>

    <!--    单选框标签：input type ="radio"
            value:单选框的值
            name：表示组
            -->
    <p>性别：
        <input type="radio" value="man" name="sex">男
        <input type="radio" value="woman" name="sex">女
    </p>

    <!-- 多选框：input type="checkbox"   -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="happy">睡觉
        <input type="checkbox" value="code" name="good">敲代码
        <input type="checkbox" value="chat" name="boring">聊天
        <input type="checkbox" value="game" name="waste time">玩游戏
    </p>

    <!--    按钮：
        input type=“button” 普通按钮
        image：图像按钮
        submit：提交按钮
        reset：重置按钮
        -->
    <p>
        <input type="button" name="butt" value="点击加长">
        <input type="image" src="../resource/1.jpg" width="200px"
               height="200px">
    </p>

<!--    下拉框，列表框-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="USA">美国</option>
            <option value="Russia">俄罗斯</option>
            <option value="UK">英国</option>
            <option value="France">法国</option>
        </select>

    </p>
    <!--    文本域：
            textarea name="textarea" cols="40" rows="10"
            -->
    <p>反馈：
        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
    </p>

    <!--文件域：
         input type="file" name="files"   -->
    <p>
        <input type="file" name="files">
        <input type="tutton" name="upload" value="上传">
    </p>
<!--邮件：会简单验证是否是邮箱地址
    url：会简单验证是否是网络地址
    number：数字验证
    -->
    <p>
        邮箱：<input type="email" name="email">
        url：<input type="url" name="url">
    </p>

<!--    数字验证：
        max：最大
        min：最小
        step：每次点击增加或者减少的数量-->
    <p>
        商品数量：<input type="number" name="数量" max="1000" min="0" step="1">
    </p>

<!--    滑块-->
    <p>
        音量：<input type="range" min="0" max="100" name="voice" step="2">
    </p>

<!--    搜索框-->
    <p>
        搜索：<input type="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

表单的应用

属性	说明
readonly	只读，不可更改
disable	禁用
hidden	隐藏，虽然不可见但可提交
id	标识符，可以配合lable的for属性增加鼠标的可用性
palcehoder	text文字域等输入框内的提示信息
required	不能为空
patten	正则表达式验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<form action="Demo01.html" method="post">
    <!--  文本输入框：input type="text
        value="前端“ 默认初始值
        maxlength="8"
        size=“30” 文本框的长度
        -->
    <p>名字：<input type="text" name="username" placehoder="请输入用户名"> </p>
    <p>密码：<input type="password" name="password"></p>

    <!--    单选框标签：input type ="radio"
            value:单选框的值
            name：表示组
            -->
    <p>性别：
        <input type="radio" value="man" name="sex">男
        <input type="radio" value="woman" name="sex">女
    </p>

    <!-- 多选框：input type="checkbox"   -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="happy">睡觉
        <input type="checkbox" value="code" name="good">敲代码
        <input type="checkbox" value="chat" name="boring">聊天
        <input type="checkbox" value="game" name="waste time">玩游戏
    </p>

    <!--    按钮：
        input type=“button” 普通按钮
        image：图像按钮
        submit：提交按钮
        reset：重置按钮
        -->
    <p>
        <input type="button" name="butt" value="点击加长">
        <input type="image" src="../resource/1.jpg" width="200px"
               height="200px">
    </p>

    <!--    下拉框，列表框-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="USA">美国</option>
            <option value="Russia">俄罗斯</option>
            <option value="UK">英国</option>
            <option value="France">法国</option>
        </select>

    </p>
    <!--    文本域：
            textarea name="textarea" cols="40" rows="10"
            -->
    <p>反馈：
        <textarea name="textarea" cols="40" rows="10">文本内容</textarea>
    </p>

    <!--文件域：
         input type="file" name="files"   -->
    <p>
        <input type="file" name="files">
        <input type="tutton" name="upload" value="上传">
    </p>
    <!--邮件：会简单验证是否是邮箱地址
        url：会简单验证是否是网络地址
        number：数字验证
        -->
    <p>
        邮箱：<input type="email" name="email">
        url：<input type="url" name="url">
    </p>

    <!--    数字验证：
            max：最大
            min：最小
            step：每次点击增加或者减少的数量-->
    <p>
        商品数量：<input type="number" name="数量" max="1000" min="0" step="1" required>
    </p>

    <!--    滑块-->
    <p>
        音量：<input type="range" min="0" max="100" name="voice" step="2">
    </p>

    <!--    搜索框-->
    <p>
        搜索：<input type="search">
    </p>

<!--    增强鼠标的可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
<!--    正则表达式-->
    <p>自定义邮箱：
        <input type="text" name="myEmail" pattern="^[A-Za-z0-9\u4e00-\u9fa5]
              +@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">

    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

若有南墙撞穿便是

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记

HTML初识HTMLHyperTextMarkupLanguage（超文本标记语言）超文本包括：文字、图片、音频、视频、动画 HTML5的优势世界知名浏览器厂商对HTML5的支持市场的需求跨平台W3C标准W3C万维网联盟（World Wide Web Consortium）。成立于1994年，Web领域最权威和最具影响力的国际中立性技术标准机构。https://www.w3.org/https://www.chinaw3c.org/W3C标准包括结构化
复制链接

扫一扫

专栏目录