HTML

最新推荐文章于 2024-10-07 21:52:50 发布

weixin_43702063

最新推荐文章于 2024-10-07 21:52:50 发布

阅读量282

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43702063/article/details/103739269

版权

本文详细介绍了HTML的基础知识，包括HTML的简介、标准格式、HTML5的语法规则，以及基本标签的使用，如标题、段落、图像、超链接等。此外，还涵盖了列表、表格和表单的创建及其应用，帮助理解网页结构和功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

1.1 简介：

一个网页由三个元素所组成：分别是结构、表现、行为。其中结构确定了网页的布局。而实现网页结构的技术就是HTML.

HTML的全称是超文本标记语言 。

相对应的是纯文本语言。纯文本指的是只能在纯文本编辑器中打开，只保存文本格式的文件，比如txt。

超指的是超链接。

标记指的是标签。也就是元素。

1.2 HTML的标准格式

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

</body>
</html>

其中：

< !DOCTYPE html> 用来声明使用的版本
2.< html lang=“en”> < /html> 是根标签
< meta charset=“UTF-8”> meta标签用来设置网页的一些元数据,比如设置编码格式charset=“utf-8” 比如网站关键词描述< meta name=“keywords” content=“html”> meta标签中的关键字描述不会影响搜索引擎的排名
4.正常网页的所有内容都需要放在 < body> 标签中
5.Title 标签，就是网站的小标题名称；

1.3 怪异模式

浏览器内置了两种模式，一种普通模式。一种怪异模式。使用怪异模式是为了兼容低版本的HTML。但是使用怪异模式会有一些意想不到的错误。因此我们需要尽量避免使用怪异模式。而避免的方式就是声明版本号。

1.4 HTML5的语法规则

1.html5不区分大小写，但是一般使用小写

2.注释不能嵌套

3.标签必须完整

4.标签可以嵌套但是不能交叉嵌套

5.html里面的属性必须有值,并且必须加引号

1.5 HTML的发展史

HTML 1993年
HTML2.0 1995年
HTML3.2 1996年（W3C推荐标椎）
HTML4.0
HTML4.01 （微小改进）
XHTML1.0 2000年
XHTML2.0 由于改动过大，学习成本高了，胎死腹中！
HTML5 （最新版） 2004 2007正式纳入新成立的HTML工作团队！
2013 HTML 5.1 草案~

基本标签

2.1 标题标签

<body>
<H1>一级标题</H1>
<H2>二级标题</H2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

注意:我们并不关注标签内容的表现形式.我们只重视标签的语义.

2.2 段落标签

<body>
<p>蜀道难</p>
<p>难于上青天</p>
蜀道难
难于上青天
</body>

代表一个自然段，同样的，我们只关注他的语义。

2.3 换行标签

<body>
属地的灶台旁,挂上了一串熏肉.<br/>农家的炊烟徐徐升于空山新雨后
</body>

2.4 水平线标签

<body>
<hr>
</body>

2.5 字体样式标签

<body>
<!--粗体-->
<strong>天青色等烟雨,而我在等你</strong>
<!--斜体-->
<em>炊烟渺渺升起,隔江千万里</em>
</body>

2.6 特殊符号标签

html在源码中连续写多个空格号也只会识别一个。所以需要用特殊符号来代替空格。

大于小于号被赋予了特殊的含义。所以也需要特殊符号

<body>
<!--空格-->
梅&nbsp;&nbsp;&nbsp;&nbsp;子&nbsp;&nbsp;&nbsp;青&nbsp;&nbsp;转&nbsp;黄

<!--大于小于-->
<!--大于-->
&gt;
<!--小于-->
&lt;

<!--版权符号-->
&copy;
</body>

2.7 图像标签

常用的图片的格式有

jpg 颜色丰富,可压缩,不支持透明。一般用来保存照片和颜色复杂的图片

gif 颜色少只支持简单透明,支持动态图。颜色单一或者动态图时使用gif

png 颜色丰富,支持复杂的透明。一般常用png格式

挑选的原则：效果好。内存少。

<body>
<img src="../static/tp.jpg" alt="图片" title="绿色" width="200px">
</body>

src 用来设置一个外部图片的路径。

alt 搜索引擎会根据alt来识别不同的图片

width和heigth 用来修改图片的大小。只修改一个的话，图片会自适应大小。一般不推荐使用这两个属性.要多大的图片.美工直接裁剪多大就可以了

2.8 超链接

超链接：表示从一个地方跳转到另一个地方

<body>
<!--href写要跳转的网页 target后面写在哪里打开新的
网页.常用的参数有_self
_blank-->

<!--跳转到百度界面-->
<a href="https://www.baidu.com/" target="_self">超链接</a>
<!--超链接可以和图片标签配合使用-->
<a href="http://www.4399.com/"> <img src="../static/tp.jpg" alt="点击此处跳转4399" title="跳转4399" width="200px"></a>
<!--超链接跳转到本地页面-->
<a href="段落标签.html">段落标签</a>
</body>

锚链接

用于在页面间指定位置跳转：快速定位目录

可以在统一页面中进行跳转

也可以在不同的页面中进行跳转

<a href="#button1">去底部</a>
<a id="button1" href="#">去顶部</a>

只要用id选择器选中特定的标签。即可跳转到我们想去的标签里。

2.9 功能性标签

<body>
<!--打开默认的邮件app-->
<a href="mailto:961353053@qq.com">点击此处发邮件</a>

<!--音频标签
autoplay:自动播放
controls:可以控制播放.提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
loop:循环播放-->
<audio src="" autoplay></audio>

<!--视频标签-->
<video src=""></video>
</body>

列表

3.1 无序列表

<body>
<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
</ul>
</body>

3.2 有序列表

<ol>
    <li>第一天</li>
    <li>第二天</li>
    <li>第三天</li>
    <li>第四天</li>
</ol>

3.3 自定义列表

<body>
<dl>
    <dt>哈哈哈</dt>
    <dd>111</dd>
    <dd>111</dd>
    <dd>111</dd>
    <dt>呵呵呵</dt>
    <dd>222</dd>
    <dd>222</dd>
    <dd>222</dd>
    <dt>嘻嘻嘻</dt>
    <dd>333</dd>
    <dd>333</dd>
    <dd>333</dd>
</dl>
</body>

<!--列表里可以插入图片-->
<ul>
    <li><img src="../static/tx1.jpg" alt="" width="200 " ></li>
    <p>aaa</p>
    <li><img src="../static/tx2.jpg" alt="" width="200 " ></li>
    <p>bbb</p>
    <li><img src="../static/tx3.jpg" alt="" width="200 " ></li>
    <p>ccc</p>
    
</ul>

3.4 表格

<body>
<!--birder 设置表格属性-->
<table border="1px">
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
</table>
</body>

跨行跨列

<body>
<table border="1px">
    <tr>
        <td>流量统计</td>
        <td>访客统计</td>
        <td><center>会员</center></td>
        <td><center>游客</center></td>
    </tr>
    <tr>
        <td>百度</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"><center>谷歌<br>火狐</center></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>

        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>平均浏览量</td>
        <td colspan="3"></td>

    </tr>
</table>
</body>

3.5 网页的结构分析

<body>
<header>我是头部</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主题</article>
<section>独立区域</section>

<footder>我是尾部</footder>
</body>

这些都是html5的标签。没有任何作用。只是为了让代码更加好看

3.6 内联框架

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

<body>
<iframe name="baidu" ></iframe>
<a href="https://www.baidu.com/" target="baidu">跳转到百度</a>
</body>

4 表单

4.1 基础表单

<body>
<!--所有的表单元素都要写在form标签中。必须加上name属性
key：控件的name
action：后面跟提交的地址
method: 后面跟提交的方式
        有两种提交方式    get post
        get：携带参数。参数可以在url中看见。不安全。大小有限
        post：参数不可见。安全。大小不限（表单提奖常用方式
input标签：  type
            text：    文本框
            password：密码框
            submit：  提交按钮
            reset：   重置

-->

<form action="" method="get">
    <p>名字：<input type="text" name="username"></p>
    <p>密码框：<input type="password" name="password"></p>  
</form>

</body>

4.2 表单元素

1.文本框

<body>
<!--value文本框默认值 size文本框大小 maxlength文本框最大值-->
<form action="">
    <p>
        用户名：<input type="text" name="username" value="用户名" size="30" maxlength="20">
    </p>
</form>
</body>

2.密码框

<body>
<!--属性同文本框一致-->
<form action="">
    <p>
        密码框：<input type="password" name="pwd" size="20">
    </p>
</form>
</body>

3.单选框

<body>
<!--
value：表单提交的值。
name：名字相同自动分组
checked：默认选中
disabled：禁用
-->
<form action="">
    <input type="radio" value="男" name="sex" chexked>男
    <input type="radio" value="女" name="sex">女

</form>
</body>

4.复选框

</head>
<!--属性同单选框一致-->
<body>
<form action="">
    <input type="checkbox" name="love" value="lol" checked>英雄联盟
    <input type="checkbox" name="love" value="wzry" disabled>王者荣耀
    <input type="checkbox" name="love" value="swxf">守望先锋
</form>
</body>

5.下拉列表框

<body>
<form action="">
    <!--
    下拉框
    select-option
    select
    name：组件的名字
    size：显示的数量
    option
    value：值
    selected：默认选中

 -->
    <select name="kemu" size="2">
        <option value="1"></option>
        <option value="2">语文</option>
        <option value="3" selected>数学</option>
        <option value="4">英语</option>
    </select>
</form>

6.按钮

<body>
<form action="">
    <!--提交-->
    <input type="submit" value="登录">
    <!--重置-->
    <input type="reset" value="清空">
    <!--普通按钮，同JavaScript联合使用-->
    <input type="button" value="屠龙宝刀点击就送">
    <!--图片按钮-->
    <input type="image" src="../static/tp.jpg">
</form>
</body>

7.文本域

<body>
<form action="">
    <textarea name="textarea" cols="30" rows="10"></textarea>
</form>
</body>

8.文件域

<!--当需要提交复杂文件时。添加参数enctype="multipart/form-data-->
<body>
<form action="" enctype="multipart/form-data">
    <input type="file" name="VIDEO">
</form>

9.邮箱

<body>
<!--该邮箱格式包含简单的验证-->
<form action="">
    <input type="email" name="email">
</form>
</body>

10.网址

<body>
<form action=""><input type="url" name="url"></form>
</body>

11.数字

<body>
<!--
最小值：min="0"
最大值：max="100"
步长：step="10"
-->
<form action="">
    <input type="number" min="0" max="100" step="10">
</form>
</body>

12.滑块

<body>
<form action="">
    <input type="range" name="range" min="0" max="100" step="2">
</form>
</body>

13.搜索框

<body>
<form action="">
    <input type="search" name="search">
</form>
</body>

4.3表单的应用

1.隐藏域

<body>
<form action=""><input type="hidden" name="hidden" value="20"></form>
</body>

2.只读和禁用

<body>
<form action="">
    <input type="text" name="user" disabled>
    <input type="text" name="users" readonly>
</form>
</body>

3.标注

<body>
<form action="">
    <!--通过 for="name" 来链接到 表单中的指定ID -->
    <label for="name">用户名</label>
    <input type="text" name="username" id="name">
</form>
</body>

4.4 初级表单验证

表单验证是为了减轻服务器的压力

1.默认提示

<body>
<form action="">
    <input type="text" name="username" placeholder="请输入用户名">
</form>
</body>

2.必填项

<body>
<form action="">
    <input type="text" name="username" required>
</form>
</body>

3.正则表达式

<body>
<!--要求的格式，用正则表达式书写-->
<form action="">
    <input type="text" name="username" required pattern="^1[358]\d{9}">
</form>
</body>