HTML-CSDN博客

本文链接：https://blog.csdn.net/weixin_45422954/article/details/103598172

一、HTML基础

1.1、简介

HTML：Hyper Text MarkUp Language(超文本标记语言)
文本：文本就是文字、有格式的文本，比如用记事本写的就是文本；
超文本：文字、图片、音频、视频、动画、定位…；
标记语言：<>。
HTML不是一种编程语言，而是一种标记语言，是网页制作所必备的工具。
首先我们在IDEA中来创建一个HTML文档：

配置：将网址修改
创建目录：
将src删除，然后在根目录下创建目录
创建HTML文档：
可以看到：

而回运行HTML文档，浏览器打开后，会加载并读取HTML代码，然后解析每个标签，产生对应的效果。

1.2、发展史、优势

HTML 1993年
HTML2.0 1995年
HTML3.2 1996年
HTML4.0
HTML 4.01
XHTML1.0 2000年
XHTML2.0 由于改动过大，学习成本太高了，胎死腹中
HTML5（最新版）2004 2007Z正式纳入新成立的HTML工作团队
2013 HTML5.1 草案
优势：
所有知名浏览器厂商都支持！
- 微软
- Google
- 苹果
- Opera
- Mozilla frefox
- 很多杂的浏览器，并不支持HTML5
市场的需求
- 市场需要一个统一的标准；
- Web兼容性问题。修改bug需要大量时间！
跨平台（浏览器）B/S
- 天然存在的，因为是B/S开发，PC，移动站，等等所有的都是天然支持！

1.3、W3C标准

W3C：万维网联盟
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
http://www.chinaw3c.org/
.com 国际的
.cn 中国的
.org 开源的

W3C标准

结构化标准（XHTML、HTML)
表现标准（CSS）
行为标准（Dom、ECMAScript====>JavaScript）
很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范
我们按下图进行设置：

1.4、HTML的基本结构

说有的HTML标签都以<>开始</>结尾
正常网页的所有内容都要放在标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML文档</title>
</head>
<body>

</body>
</html>

头部：< head > < \head >
主体：< body ><\body>
DOCTYPE：文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML；
Title标签：网站的小标题名称；
meta：描述信息。

<!--建议规范编码，统一使用UTF-8（全世界）   gb2312：包含了所有的中文字符-->    
<meta charset="UTF-8">
<!--网站关键字描述-->
<meta name="keywords" content="HTML">
<!--网站的描述-->
<meta name="description" content="爱生活，爱Java！">

1.5、网站的基本标签

1、标题标签

<!--标题标签  h1 + tab -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述

2、段落标签

我们随便找一篇文章。

<!--段落标签 p-->
<p>
古今中外，许多让人赞叹不绝的文章荡漾在人间。他们或流芳百世，或邂逅佳时，它们也传递思愁，也汇聚欢笑，它们篇幅短小，却是一个生命的历程，他们气吞山河，讲述着一个国家的兴亡。
</p>
<p>
文字，可以是天地精华，可以是油盐酱醋， 可以是雄心壮志，可以是淡泊明志。 我想用文字讲述至今的，来自我心的文章。
</p>
<p>我也是最喜欢来自心的文章，它们朴实， 以至于粉饰它们都是画蛇添足的， 当我婴儿学步时，泥土沾染我小裤，心告诉我要站起来， 失败不是一次次铸成的，成功却是一次次铸就的。 当鲜红的红领巾照耀我的脸庞时，有难度的文字让求学者的我不要放弃， 这是心告诉我的，她也带领我去探索未知的世界，以至于可以有把
</p>
<p>诗唱得天花乱坠的玩笑。 当红领巾要放逐我去往他乡， 我难过，心告诉我这是让我变得更好的唯一道路， 它可能铺满鲜花，也可能路面崎岖，心告诉我要走难走的那条路， 这样收获的阳光才会更多。当我乘着微风，迈进新的大门时， 心欢快地与我分享它的喜悦：瞧！这树像楼那样高，还有那花， 像你一样。我害羞地低下头，心告诉我要善于去人际交往，不要羞答答的模样。 当复杂无味的功课充斥我的大脑时，心带领我唱起了小曲儿， 它给了我一副好嗓子，让我把这世界唱的更加明亮，心还告诉我……
</p>

在这里插入图片描述

3、换行标签

<!--这是自闭和标签 只有一个 与段落标签不同 只是将文本向下移一行-->
<br/>

4、水平线标签

<!--将这个标签写在哪 哪里就会有水平线-->
<hr/>

在这里插入图片描述

5、字体样式标签

<!--字体样式 加粗-->
<strong>重点加粗</strong>
<!--斜体-->
<p>
    <em>书名斜体</em>
</p>

在这里插入图片描述

6、特殊符号标签

<!--特殊符号 &...-->

<!--空格符号  &nbsp-->
<p><!--这里一个空格可以识别-->hello world!</p>
<p><!--这里只会有一个空格-->hello      world!</p>
<p><!--这里有四个空格-->hello&nbsp;&nbsp;&nbsp;&nbsp;world!</p>

<!--大于小于号-->
<p>
    &gt;
    &lt;
</p>
<!--版权符号  在个大网页上都能看到版权符号-->
<p>
    &copy;版权所有 star
</p>
<hr>

在这里插入图片描述

1.6、图像标签

常见的图片格式：png、jpg、ipeg、bmp、gif…
png会有浏览器兼容问题
一般使用jpg 、pif多一点
图片是静态资源，所以我们创建一个static**images**目录将图片单独放在该目录下
图片会有相对路径和绝对路径

相对路径：…/…/ 两个点是返回上级目录
绝对路径：图片的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--图像标签img 带参数-->
<img src="../statics/KDA女团.jpg" title="KDA女团" alt="KDA女团图片" width="410" height="240" >

<!--src  图片的地址-->
<!--title 鼠标悬浮在图片上时显示的信息-->
<!--alt 当图片加载失败时的提示信息-->
<!--width height 图片的宽和高-->
</body>
</html>

在这里插入图片描述

1.7、超链接

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>

<!--超链接标签 a
href：要挑战的链接即地址
target：目标打开的窗口位置
    _self：在自己的界面打开
    _blank：在新的界面打开
-->

<a href="https://www.baidu.com/" target="_blank">百度</a>
<hr>
<a href="https://www.baidu.com/" target="_blank">
    <img src="../statics/KDA女团.jpg" width="400" height="230" >
</a>

</body>
</html>

在这里插入图片描述
点击百度：

点击图片：

锚链接
- 用于页面间指定位置跳转：快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转
  描点

<!--标记A-->
<a name="markerA">A</a>

跳转到锚点

<a href="#markerA">A</a> <br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
<a href="#markerA">第一章</a><br>
<a href="#markerB">第二章</a><br>
<hr>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<a name="markerA"></a>
<p>这是一章的内容</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<a name="markerB"></a>
<p>这是二章的内容</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>


</body>
</html>

在这里插入图片描述

点击第一章后会跳转到该位置

下面是在不同页面间跳转

<a href="我的第一个HTML文档.html#hehe" target="_blank">hehe</a><br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML文档</title>
</head>
<body>
hello world
<p>
    algnakjghn <br>
    algnakjghn <br>
    algnakjghn <br>
    algnakjghn <br>
    a name="hehe"></a>
    algnakjghn <br>
    algnakjghn <br>
    algnakjghn <br>
    algnakjghn <br>
    algnakjghn <br>
    algnakjghn <br>
    <
</p>

</body>
</html>

在这里插入图片描述

点击hehe后会跳转到该页面

功能性链接

<!--邮件链接-->
<a href="mailto:XX181028@163.com">联系我们</a>

借助第三方平台

<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1412265423&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1412265423:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

在这里插入图片描述
点击该图片就会和对应的QQ号发起对话

1.8、块元素和行内元素

块元素
无论内容多少，都是独占一行。
行内元素
只根据内容的长度来扩展。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>
</body>
</html>

在这里插入图片描述

二、列表、表格、媒体元素

2.1、列表

列表是一种结构，有三种类型
无序列表（ul li）

语文
数学
英语
有序列表（ol li）

热搜一
热搜二
热搜三
自定义列表（dl dd）
既没有点，也没有数字

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

<!--无序列表 ul li
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>Java</li>
</ul>
<hr>

<!--有序列表 ol li
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
    <li>===</li>
    <li>===</li>
    <li>===</li>
    <li>===</li>
</ol>
<hr>

<!--自定义列表
网站的底部，用于标记项
-->
<dl>
    <!--标题-->
    <dt>水果</dt>

    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>桃子</dd>
    <dd>西瓜</dd>
</dl>
</body>
</html>

在这里插入图片描述

2.2、表格

表格结构简单，而且通用
基本结构：

表格 tabe
行 tr rowspan
列 td colspan

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

<!--表格标签 table
border="1px" 边框属性
-->
<table border="1px">
    <!--行和列-->
    <!--第一行 tr，列 td-->
    <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>
</html>

在这里插入图片描述
跨行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行</title>
</head>
<body>
<table border="1px">
    <tr>
        <!--rowspan 所跨的行数-->
        <td rowspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!--由于第一行的第一列跨了一行，所以第二行少一列-->
        <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>
</html>

在这里插入图片描述

跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨列</title>
</head>
<body>
<table border="1px">

    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!--由于跨列，则第二行少一列-->
        <td colspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

2.3、音频、视频

音频 audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>
<!--音频标签 audio
src：音频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
-->

<audio src="../statics/audio/音频.mp3" autoplay controls></audio>

</body>
</html>

在这里插入图片描述
视频 video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>

<!--video 视频标签
src：视频的路径
controls：提高播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay：自动播放
loop：循环播放
-->

<video src="../statics/video/视频.mp4" controls autoplay></video>

</body>
</html>

在这里插入图片描述
src中放的音频或者视频，都是能直接播放的。

2.4、网页结构分析

页面的头部
页面的主体
页面的尾部
html5标签，没有任何作用，只是让代码结构更好看

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

<!--这些结构都是一些行业规范-->

<header>
    我是头部
</header>

<nav>导航栏</nav>

<aside>侧边栏</aside>

<article>文章主题</article>

<section>独立区域</section>

<footer>
    我是尾部
</footer>

</body>
</html>

2.5、内联框架

iframe

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

<!--iframe 内联框架
src：地址
-->

<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>

</body>
</html>

在这里插入图片描述

三、表单

3.1、基础表单

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

<!--form 表单
action：提交的地址
method：提交的方式
-->

<form action="test.html" method="post">

    <!--输入框
    input
        name：必须写上
        type：
            password：密码框
            submit：提交按钮
            reset：重置按钮
     -->

    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>

在这里插入图片描述

3.2、表单元素

所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值！

1、文本框

<form action="test.html" method="post">
    <!--文本框 type="text"
    value：文本框默认的初始值
    size：文本框的长度
    maxlength：文本框的最大输入长度
    -->
    <p>
        <input type="text" value="用户名" name="username" size="30" maxlength="20">
    </p>
</form>

在这里插入图片描述

2、密码框

<!--密码框 type="password"
size="20"
-->
<p>
    <input type="password" name="password" size="20">;
</p>

在这里插入图片描述
密码框输入的数据都会显示成黑点

3、单选按钮

<!--单选框 type="radio"
value：表单提交的值
name：名字相同则自动分组，必须要分组
checked：默认选中
注意：默认没有值，需要在input标签后加单选框的属性
-->
<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex" checked>女
</p>

在这里插入图片描述

4、复选框

<!--复选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要在input标签后加复选框的属性
-->
<p>
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="music" checked>听音乐
    <input type="checkbox" name="hobby" value="game" disabled>大游戏
</p>

在这里插入图片描述

5、下拉列表框 select-option

<!--下拉列表框
select
	name：组件名字 必填
	size：显示的数量，默认为1

option：选项
	value 必填
	option标签中间写下拉框的值
	selected：默认选中
-->
<select name="科目">
    <option value="1"></option>
    <option value="2">数学</option>
    <option value="3" selected>英语</option>
    <option value="4">语文</option>
    <option value="5">Java</option>
</select>

在这里插入图片描述

6、按钮

<p>
    <!--提交按钮-->
    <input type="submit" value="登录">
    <!--重置-->
    <input type="reset" value="重置">
    <!--普通按钮-->
    <input type="button" value="点我">
    <!--图片按钮
        type="image"
        src：图片按钮
     -->
    <input type="image" src="../statics/KDA女团.jpg" width="100" height="100">
</p>

在这里插入图片描述

7、文本域

<!--文本域 cols 列数 rows 行数-->
<textarea name="textarea" cols="30" rows="10">
</textarea>

在这里插入图片描述

8、文件域

<!--
表单，需要支持提交复杂文件  enctype="multipart/form-data"
未来：文件上传会用到
-->
<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

在这里插入图片描述

9、邮箱

<!--邮箱-->
<p>
   邮箱：<input type="email" name="email">
</p>

在这里插入图片描述

10、网址

<!--url网址-->
<p>
    url：<input type="url" name="url">
</p>

在这里插入图片描述

11、数字

<!--数字：商品数量，计数 type="number"
最小值 min="0"
最大值 max="100"
步长   step="10"
-->
<p>
    数字：<input type="number" min="0" max="100" step="10">
</p>

在这里插入图片描述

12、滑块

<!--滑块
默认值0-100
-->
<p>
    <input type="range" name="range" min="0" max="100" step="2">
</p>

在这里插入图片描述

13、搜索框

<p>
    搜索：<input type="search" name="search">
</p>

在这里插入图片描述

HTML

一、HTML基础

1.1、简介

1.2、发展史、优势

1.3、W3C标准

1.4、HTML的基本结构

1.5、网站的基本标签

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

5、字体样式标签

6、特殊符号标签

1.6、图像标签

1.7、超链接

1.8、块元素和行内元素

二、列表、表格、媒体元素

2.1、列表

2.2、表格

2.3、音频、视频

2.4、网页结构分析

2.5、内联框架

三、表单

3.1、基础表单

3.2、表单元素

1、文本框

2、密码框

3、单选按钮

4、复选框

5、下拉列表框 select-option

6、按钮

7、文本域

8、文件域

9、邮箱

10、网址

11、数字

12、滑块

13、搜索框

“相关推荐”对你有帮助么？