HTML基础

最新推荐文章于 2022-07-27 18:33:48 发布

ZaynFox

最新推荐文章于 2022-07-27 18:33:48 发布

阅读量535

点赞数 3

分类专栏： # HTML 文章标签： HTML

本文链接：https://blog.csdn.net/allenfoxxxxx/article/details/91994733

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML与网页概述

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。
HTML（英文：Hypertext Markup Language，简称：HTML）也叫作超文本标记语言，是一种用来结构化 Web 网页及其内容的标记语言，标准通用标记语言下的一个应用，通过它，可以实现图片、链接、音乐以及程序等等多种元素。
注意：HTML 不是一种编程语言，而是一种标记语言
万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
三个标准：
- 结构标准—>XHTML , XML等
- 表现标准—>CSS
- 行为标准—>ECMA Script
网页编辑工具
- 记事本
- Notpat++
- Hbuilder
- IDEA
- WebStorm
- VScode
- …

注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。

二、HTML的基本结构

（一）HTML注释

<!--  注释  -->

注意：注释不能嵌套注释

（二）HTML基本结构实例

<!DOCTYPE html><!--约束，声明 : 告诉浏览器使用什么规范-->
<html lang="zh_CN"><!-- html标签表示html的开始   lang="zh_CN"表示中文    html标签中一般分为两部分,分别是:head和body    -->
<!--标签是成对出现-->
<!--头部标签-->
<head><!-- 表示头部信息,一般包含三部分内容,title标签,css样式,js代码 -->
    <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
    <!--网页标题-->
    <title>HELLO</title>
</head>
<!--网页主体-->
<body><!--body标签是整个html页面显示的主体内容-->
Hello,World!
</body>
</html>

DOCTYPE声明了文档的类型
<html>标签是 HTML 页面的根元素，该标签的结束标志为</html>
<head>标签包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>标签定义文档的标题
<meta> 标签 : 关键字标签
<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>
<h1>标签作为一个标题使用，该标签的结束标志为</h1>–　Html标题，同样地还有h2、h3、h4、h5和h6
标签作为一个段落显示，该标签的结束标志为

<!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
utf-8 ---->包含了全世界所有地方的文字和符号

<!--搜索关键字-->
<meta name="keywords" content="Java,Python,linux,大数据">
<!--网页的描述-->
<meta name="description" content="可爱的动物">

（三）HTML标签

HTML 标签是由尖括号包围的关键词，比如<html>
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
标签不能交叉嵌套
标签必须正确闭合
标签内的属性必须有值，且必须加引号
标签拥有自己的属性。分为：
- 基本属性：bgcolor="red" 可以修改简单的样式效果
- 事件属性： onclick="alert('你好')" 可以直接设置事件响应后的代码。

例如

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--alert() 是javaScript语言提供的一个警告框函数.
    它可以接收任意参数.参数就是警告框的提示信息-->
<button onclick="alert('Hello World!')">按钮</button>
</body>
</html>

在这里插入图片描述

1.标题标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--标题标签-->
<!--H1最大 , H6最小-->
<!-- align 属性是对齐属性 left 左对齐(默认) center 居中 right 右对齐-->
	<h1 align="center">一级标题</h1>
	<h2 align="left">二级标题</h2>
	<h3 align="right">三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>
</html>

展示：
在这里插入图片描述

2.段落标签

p 段落标签默认会在段落的上方或下方各空出一行来

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--段落标签-->
<!--p:表示段落标签-->
	<p>两只老虎    两只老虎</p>
	<p>跑得快       跑得快</p>
	<p>一只没有耳朵     一只没有尾巴</p>
	<p>真奇怪      真奇怪</p>
</body>
</html>

展示：

在这里插入图片描述

3.换行标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--换行标签-->
<!--br:单标签-->
	两只老虎 两只老虎 跑得快 跑得快<br/>
	一只没有耳朵 一只没有尾巴<br/>
	真奇怪 真奇怪<br/>
</body>
</html>

展示：
在这里插入图片描述

4.水平线标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--水平线标签-->
<!--hr表示水平线标签-->
	两只老虎    两只老虎<br/>
	跑得快       跑得快<br/>
	<hr/>
	一只没有耳朵     一只没有尾巴<br/>
	真奇怪      真奇怪<br/>
</body>
</html>

展示：
在这里插入图片描述

5.字体标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--字体加粗 , 斜体-->
<!--strong : 粗体-->
<!--em : 斜体-->
	I love you
	加粗后 : <strong>I love you</strong>
	斜体 : <em>I love you</em>
</body>
</html>

展示：
在这里插入图片描述

问：HTML中和都能达到加粗的效果，以及和也都能达到斜体的效果，区别在哪呢？
答：和是起强调的作用，而和是一种字体的形式

6.特殊符号

在这里插入图片描述

其他特殊字符表：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--特殊符号-->
<!--& + 符号字符 + 分号结束-->
<!---->
	<p>大于号 : &gt; </p>
	<p>小于号 : &lt; </p>
	<p>空格 :（未加空格符号）你                好 |（加了空格符号）你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好</p>
	<p>引号 : &quot;&quot;</p>
	<p>版权符号 : &copy; ZaynFox版权所有</p>
</body>
</html>

展示：
在这里插入图片描述

（四）图像标签

请注意：img元素是自关闭元素，不需要结束标记

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>
<!--
src = 图片的路径 (必填)
title = 鼠标悬停显示的标题
alt = 图片的名字（图片加载失败后显示）
width->宽 
height->高
-->
<body>
<img src="../../../resources/photos/006CKO5uly1fy6hrpsqubj31ig0u0hdt.jpg"
     title="这是一张图片" alt="复仇者联盟" width="500px" height="300px">
</body>
</html>

注意看图片和代码的相对路径
在这里插入图片描述
展示：

JavaSE中的相对路径和绝对路径
- 相对路径:从工程名开始算
- 绝对路径:盘符:/目录/文件名
web中的相对路径和绝对路径
- 相对路径:
  . 表示当前文件所在的目录
  ../ 表示当前文件所在的上一级目录
  文件名 表示当前文件所在目录的文件，相当于 ./文件名 （ ./ 可以省略）
- 绝对路径:http://ip:port/工程名/资源路径，不推荐使用

（五）链接标签

1.超链接

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--a:表示超链接-->
<!--
href : 表示连接的地址 : 必填
-->
	<a href="https://www.baidu.com">点击跳转</a>
	<br/>

<!--图像链接-->
	<a href="https://www.baidu.com">
    	<img src="../../../resources/photos/006CKO5uly1fy6hrpsqubj31ig0u0hdt.jpg"
         width="200px" height="100px">
	</a>
</body>
</html>

展示：
在这里插入图片描述
无论点击文字还是图片都能实现跳转到百度页面

2.锚链接

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--锚链接-->
<!--
可以从一个地方跳到锚指定的地方
需要的东西: 标记   ..跳转
-->

<!--创建一个标记-->
	<a name="mark">锚链接标记</a>

<!--跳转到标记-->
	<a href="#mark">点击跳转</a>

<!--跳转到另一个网页的标记位置-->
	<a href="demo.html#top">跳转到demo页top标记</a>
</body>
</html>

3.target

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--target : 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开
-->
	<p>
    	<a target="_blank" href="https://www.baidu.com">打开百度网页_在新网页中打开</a>
   		<br/>
    	<a target="_self" href="https://www.baidu.com">打开百度_在自己网页中打开</a>
	</p>
</body>
</html>

（六）行内元素和块元素

独占一行的标签 : 块标签

p
h1~h6

只有自己那一部分 , 可以在行内定义多个的标签 : 行内标签

a
strong
img
em

（七）列表标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--无序列表-->
<!--
<ul> -> 无序列表
<li> -> 选项
-->
<ul>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ul>

<!--有序列表-->
<!--
<ol> -> 有序列表
<li> -> 选项
-->
<ol>
    <li>java</li>
    <li>C/C++</li>
    <li>Linux</li>
    <li>Python</li>
</ol>

<!--自定义列表-->
<!--
<dl> -> 自定义列表
<dt> -> 列表标题
<dd> -> 列表选项
-->
<dl>
    <dt>早餐</dt>
    <dd>豆浆</dd>
    <dd>油条</dd>
    <dd>面条</dd>

    <dt>午餐</dt>
    <dd>蛋炒饭</dd>
    <dd>酸辣粉</dd>
    <dd>冒菜</dd>
</dl>
</body>
</html>

展示：

在这里插入图片描述
ul和ol标签里有个type属性，可以修改列表项前面的符号

（八）表格

table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--表格-->
<!--
table : 表格
tr : 行 table rows
td : 列
-->

<table align="center" border="1" width="300" height="300" cellspacing="0">

    <tr>
        <!--colspan=跨列-->
        <th colspan="3">1-1</th>
        <th>1-2</th>
        <th>1-3</th>
    </tr>
    <tr>
        <!--colspan=跨行-->
        <td rowspan="3">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>

</table>
</body>
</html>

展示：
在这里插入图片描述

（九）视频和音频标签

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--播放视频-->
<!--前端要考虑问题 : 浏览器兼容性-->
<!--
video标签
src -> 视频路径 (必填)
controls -> 给视频增加控制播放的按钮
autoplay -> 自动播放视频
w-h -> 视频窗口大小
-->
视频：<video src="../../../resources/videos/onekey_animation.5d7deb3.mp4" controls 
width="400px" height="200px" autoplay></video>
<br/>
<!--音频标签-->
<!--
src -> 音频路径
controls -> 给音频增加控制播放的按钮
autoplay -> 自动播放视频
....
-->
音频：<audio src="../../../resources/music/Lopu$ - So Cute~.mp3" controls autoplay></audio>
</body>
</html>

在这里插入图片描述

（十）内联框架

iframe 内联框架

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!--iframe内联框架-->
<!--
作用:在一个网页中嵌入另外一个网页
-->
<!--
<iframe src="https://www.baidu.com" frameborder="0" width="960" height="540">
</iframe>
-->
<!--在网页中实现容器的效果,实现页面内容加载-->
<iframe name="markup" src="" frameborder="0" width="500" height="250"></iframe>

<a href="https://www.baidu.com" target="markup">百度</a>
<a href="https://www.hao123.com" target="markup">hao123</a>


<iframe src="//player.bilibili.com/player.html?aid=19375362&cid=31595839&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0"
        allowfullscreen="true">
</iframe>
</body>
</html>

在这里插入图片描述

（十一）表单元素

1.常见表单元素

文本框、密码框、按钮、单选框、多选框、文本域、下拉框、文件域、邮箱、网址、数字、滑块、搜索框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
</head>
<body>
<h1>注册</h1>
<!--
input属性:
    type=类型
    name: 名字 , 可以重复
    id: 不能重复,保证全代码唯一
    disabled: 禁用文本框
-->

<!--form为表单元素-->
<!--
action : 提交地址
method : 提交方式 : post/get
-->
<!--post安全，get不安全，会在跳转的网页地址显示密码用户名
post:安全 效率低 理论上能提交无限大的数据
get：不安全 效率高 数据长度有限制
网页中一般使用post方式提交-->
<form action="http://localhost:8080" method="post">
    <!--
    required 必填项
    placeholder 默认提示信息
    -->
    <!--文本框 : input type=text-->
    <p>用户名：<input type="text" name="username" id="username" placeholder="请输入用户名" required></p>
    <!--密码框 : input type=password -->
    <p>密码：<input type="password" name="password" placeholder="请输入密码" required></p>
    <p>确认密码：<input type="password" name="password" placeholder="请再次输入密码" required></p>
    <!--文件域-->
    <p>照片上传：<input type="file"></p>
    <!--radio单选框-->
    <!--name:绑定同一个组-->
    <!--checked 默认选中-->
    <!--
    注意事项:
        1. 若是要提交,则必须要有name和value属性
        2. name就是key 提交的键 , vlaue就是提交的信息
        3. 表单项必须在提交的form标签中
    -->
    <p>
        性别：<input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女
    </p>
    <!--数字的简单验证-->
    <p>年龄：<input type="number" name="age" placeholder="请输入年龄"></p>
    <!-- checkbox多选框-->
    <p>
        爱好：
        <input type="checkbox" value="movie" name="hobby">看电影
        <input type="checkbox" value="music"name="hobby">听歌
        <input type="checkbox" value="code" name="hobby">敲代码
    </p>
    籍贯：
    <!--下拉框-->
    <select name="国家">
        <option value="China">中国</option>
        <option value="America">美国</option>
        <option value="Canada">加拿大</option>
    </select>
    <select name="列表名称">
        <option value="Xian">西安</option>
        <option value="Shanghai">上海</option>
        <option value="Beijing" selected>北京</option><!--selected设置默认选中-->
    </select>

    <!--邮箱表单简单验证-->
    <p>邮箱：<input type="email" name="email" placeholder="请输入邮箱"></p>
    <!--url简单验证-->
    <p>博客地址：<input type="url" name="blog" placeholder="请输入网址"></p>
    <!--
        文本域
        多行的文本框
        rows 属性设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度
        -->
    <p>自我描述：<textarea name="textarea" cols="20" rows="10" placeholder="请输入文本内容"></textarea>
    </p>


    <p><input type="submit" name="Button" value="提交到服务器">
        <!--
        submit默认文字是提交，手动给按钮赋值使用（value=""）
        提交会产生事件 , 会将表单的内容提交到action请求的地址,方法为method指定的方法-->
        <!--重填按钮 : type="reset"-->
        <input type="reset" name="Button" value="重写表单">
    </p>
</form>
</body>
</html>

在这里插入图片描述

form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST
GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST请求的特点是：
1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中

其他
search：搜索框
range：滑块
button：按钮
hidden : 隐藏域
readonly : 只读
disabled : 禁用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>
<body>
<form action="http://localhost:8080">
    <!--禁用-->
    disabled:<input type="text" value="zhangsan" name="name" disabled="disabled"><br/>
    <!--只读-->
    readonly:<input type="text" value="18" name="age" readonly="readonly"><br/>
    <!--隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）-->
    hidden:  <input type="hidden" value="man" name="sex"><br/>
    <!--滑块,值的范围0~100-->
    默认值为50的滑块（0-100）：<input type="range" name="range" value="50"><br/>
    <!--搜索框-->
    搜索框：<input type="search" name="search"><br/>
    <!--按钮-->
    <input type="button" value="确认">
        <!--图片按钮-->
        <!--<input type="image" src="../resources/photos/a.jpg">-->
    <input type="submit" value="添加"><br/>
</form>
</body>
</html>

在这里插入图片描述

通过结果我们知道，禁用框不可对该框操作，只读框我们不可修改其中的值，隐藏域的值我们无法看到。

2.表单格式化

将表单写进表格中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
</head>
<body>
<h1 align="center">注册</h1>

<form action="http://localhost:8080" method="post">
    <table align="center">
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username" id="username" placeholder="请输入用户名" required>
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="password" placeholder="请输入密码" required>
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password" name="password" placeholder="请再次输入密码" required>
            </td>
        </tr>
        <tr>
            <td>照片上传：</td>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="男" checked>男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td>
                <input type="number" name="age" placeholder="请输入年龄">
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" value="movie" name="hobby">看电影
                <input type="checkbox" value="music"name="hobby">听歌
                <input type="checkbox" value="code" name="hobby">敲代码
            </td>
        </tr>
        <tr>
            <td>籍贯：</td>
            <td>
                <select name="国家">
                    <option value="China">中国</option>
                    <option value="America">美国</option>
                    <option value="Canada">加拿大</option>
                </select>
                <select name="列表名称">
                    <option value="Xian">西安</option>
                    <option value="Shanghai">上海</option>
                    <option value="Beijing" selected>北京</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td>
                <input type="email" name="email" placeholder="请输入邮箱">
            </td>
        </tr>
        <tr>
            <td>博客地址:</td>
            <td>
                <input type="url" name="blog" placeholder="请输入网址">
            </td>
        </tr>
        <tr>
            <td>自我描述：</td>
            <td>
                <textarea name="textarea" cols="20" rows="10" placeholder="请输入文本内容"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="Button" value="提交到服务器">
            </td>
            <td>
                <input type="reset" name="Button" value="重写表单">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述

3.表单验证

为什么要表单验证？

降低服务器压力
保证数据的安全性

表单验证需要哪些东西？

提示信息

placeholder-->默认提示信息
<p>用户名 : <input type="text" name="username" placeholder="请输出用户名"> </p>

非空判断 (必填项)

required-->必须填写此项
<p>密码 : <input type="password" name="password" required> </p>

正则表达式验证

pattern-->正则表达式
自定义验证 : <input type="text" pattern=" RE "/>

（十二）div和span标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
</head>
<body>
<!-- 1：div、span 标签的演示
div 标签 默认独占一行
span 标签 它的长度是封装数据的长度
-->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

在这里插入图片描述

（十三）网页结构分析

头部
导航
主体内容
底部

在这里插入图片描述

<header> 头部 </header>
<footer> 尾部 </footer>
<nav> 导航 </nav>
<article> 放文章 </article>
<code> 代码 </code>
<section>独立区域</section>
.......

ZaynFox

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

一、HTML与网页概述网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。HTML（英文：Hypertext Markup Language，简称：HTML）也叫作超文本标记语言，是一种用来结构化 Web 网页及其内容的标记语言，标准通用标记语言下的...
复制链接

扫一扫

专栏目录