HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

一壶烈酒可慰风尘

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量137

点赞数

分类专栏：前端学习笔记文章标签： html

本文链接：https://blog.csdn.net/qq_44375810/article/details/109687150

版权

前端学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

Hyper Text Markup Language(超文本标记语言)
超文本：文字、图片、音频、视频、动画等

W3C

World Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构

W3C标准

结构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

1.网页基本信息

<!-- DOCTYPE :告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">

<!-- head :代表网页头部 -->
<head>

<!--    meta :描述性标签，它用来描述我们网站的一些信息-->
    <meta charset="UTF-8"/>
    <meta name="keyWord" content="123456"/>
<!--    title :网页标题-->
    <title>我的第一个网页</title>

</head>

<!-- body :网页主体-->
<body>
hello.word~
</body>
</html>

2.网页基本标签

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>基本网页标签</title>
</head>

<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h1>二级标题</h1>
<h1>三级标题</h1>
<h1>四级标题</h1>
<h1>五级标题</h1>
<h1>六级标题</h1>

<!-- 段落标签 -->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！。</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

<!-- 换行标签 -->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！。<br/>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

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

<!-- 字体样式标签 -->
粗体：<strong>我是粗体</strong> <br/>
斜体：<em>我是斜体</em>    <br/>

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

</body>

</html>

3.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!-- src ：图片地址（必填）
     绝对地址，相对地址（推荐使用）
     ../  --上一级目录
     alt ：图片名字（必填）
 -->
<img src="../sources/images/1.jpeg" alt="证件照" title="悬停文字" width="200" height="300"/>
</body>
</html>

4.超链接

页面间链接（从一个页面链接到另一个页面）
锚链接
功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--a 标签
href :必填，表示要跳转到那个页面
target :表示窗口在哪里打开(默认为_self)
-->
<a href="https://www.baidu.com" target="_blank">点我进入百度</a>
<br/>
<a href="myFirstHTML.html" target="_self">
    <img src="../sources/images/1.jpeg" alt="证件照" height="300" width="200"/>
</a>
<br/>
<a name="top">顶部</a>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>
<img src="../sources/images/2.JPG" alt="证件照" height="300" width="200"/><br/>

<!--锚链接
1. 需要一个锚标记
2. 跳转到锚标记（#）
-->
<a href="#top">返回顶部</a>
<br/>
<a name="down">底部</a>
<br/>
<!--功能性链接
邮件链接：mailto
QQ链接
-->
<a href="mailto:1580909730@qq.com">点我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，HTML!" title="你好，HTML!"/></a>

</body>
</html>

5.块元素和行内元素

块元素：

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

行内元素：

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

6.列表

什么是列表：

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

列表的分类：

无序列表
有序列表
定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!-- 有序列表 ol
     li 列表内容
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
    <li>架构</li>
    <li>Php</li>
</ol>

<hr/>
<!-- 无序列表 ul
     li 列表内容
-->
<ul>
    <li>操作系统</li>
    <li>数据结构</li>
    <li>计算机组成原理</li>
    <li>计算机网络</li>
    <li>算法</li>

    <hr/>
<!-- 自定义列表 dl
     dt 列表名
     dd 列表内容
-->
    <dl>
        <dt>科目</dt>
        <dd>语文</dd>
        <dd>数学</dd>
        <dd>语文</dd>

        <dt>位置</dt>
        <dd>成都</dd>
        <dd>重庆</dd>
        <dd>杭州</dd>
    </dl>

</ul>

</body>
</html>

7.表格

为什么使用表格：

简单通用
结构稳定

基本结构：

单元格
行
列
跨行
跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!-- 表格标签 table
     行      tr
     列      td
-->
<table border="1px">
    <tr>
<!--        colspan : 跨行-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
<!--        rowspan : 跨列-->
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

8.媒体元素

视频元素：video
音频元素：audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素标签</title>
</head>
<body>
<!--音频和视频
    资源路径  src
    控制条    controls
    自动播放  autoplay
-->
<!--  <video src="../sources/videos/apple.mp4" controls autoplay></video>-->
<audio src="../sources/audios/Last_Stop.mp3" controls autoplay></audio>
</body>
</html>

9.页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

10.iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架标签</title>
</head>
<body>
<!--内联框架     iframe
    引用页面地址  src
    框架标识名    name
-->

<a href="https://www.baidu.com" target="baidu">百度一下</a>
<iframe src="" name="baidu" height="300" width="300"/>


</body>
</html>

11.表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<h2>登录</h2>
<!--表单         form
    表单提交的方式 method
    表单提交的位置 action  : get/post
                        get : 我们可以在url中看见我们提交的信息，不安全，高效
                        post : 比较安全，传输大文件
-->
<form method="get" action="myFirstHTML.html">

<!--    文本输入框 : input type="text-->
    <p>用户名：<input type="text" name="用户名"></p>
    、
<!--    密码框 : input type="password"-->
    <p> 密码：<input type="password" name="密码"></p>
    <p>
        <input type="submit" name="Button" value="提交">
        <input type="reset" name="Reset" value="重填">
    </p>
</form>
</body>
</html>

11.1表单元素格式

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

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<h2>登录</h2>
<!--表单         form
    表单提交的方式 method
    表单提交的位置 action  : get/post
                        get : 我们可以在url中看见我们提交的信息，不安全，高效
                        post : 比较安全，传输大文件
-->
<form method="get" action="myFirstHTML.html">

<!--    文本输入框 : input type="text-->
    <p>用户名：<input type="text" name="用户名" value="chen" maxlength="8"></p>
    、
<!--    密码框 : input type="password"-->
    <p> 密码：<input type="password" name="密码"></p>

<!--    单选框   radio
        分组名   name
        值      value
        默认选中  checked
-->
    <p>性别：<input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
    </p>

<!--    多选框     checkbox
-->
    <p>
        爱好：<input type="checkbox" name="hobby" value="唱" checked>唱
        <input type="checkbox" name="hobby" value="跳">跳
        <input type="checkbox" name="hobby" value="rap">rap
        <input type="checkbox" name="hobby" value="篮球">篮球
    </p>

<!-- 按钮     button    -->
    <p><input type="button" name="bt1" value="点击"></p>

<!-- 图片     image   :点击图片有提交效果-->
    <p>
        <input type="image" src="../sources/images/1.jpeg" width="200" height="300">
    </p>
    <!--    下拉框   select-->
    <p>国家：
        <select name="country">
           <option name="China" value="中国">中国</option>
           <option name="America" value="美国">美国</option>
           <option name="Switzerland" value="瑞士" selected>瑞士</option>
           <option name="India" value="印度">印度</option>
        </select>
    </p>

<!--    文本域   textarea-->
    <P>
        <textarea name="textarea" cols="50" rows="10">文本域</textarea>
    </P>

<!--     文件域   file-->
    <p>
        <input type="file" name="file">
        <input type="button" name="upFile" value="上传">
    </p>
    <!--     邮箱验证  email-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

<!--     url验证   url-->
    <p>URL:
        <input type="url" name="url">
    </p>

<!--    数字     number -->
    <p>商品数量:
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

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

<!--      搜索框  search-->
    <p>搜索:
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit" name="Button" value="提交">
        <input type="reset" name="Reset" value="重填">
    </p>
</form>
</body>
</html>

11.2表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

PS：

<!--    增强鼠标可用性   label-->
 <p>
     <label for="mark">你点我试试</label>
     <input type="test" id="mark">
 </p>

11.3表单的初级验证

为什么要进行前台表单的验证：

安全
在数据量大的时候，可以减轻服务器压力

常用方式：

placeholder 提示信息
required 非空判断
pattern 正则表达式

<!--    正则表达式验证邮箱-->
    <p>邮箱地址:
        <input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

一壶烈酒可慰风尘

关注

0
点赞
踩
0

收藏

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

HTMLHyper Text Markup Language(超文本标记语言)超文本：文字、图片、音频、视频、动画等W3CWorld Wide Web Consortium(万维网联盟)成立于1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构W3C标准结构化标准语言（HTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript）1.网页基本信息<!DOCTY
复制链接

扫一扫

专栏目录