HTML

最新推荐文章于 2022-07-24 14:54:03 发布
最新推荐文章于 2022-07-24 14:54:03 发布
阅读量128 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fancyyj/article/details/97316062
版权

文章目录

一. web前端介绍

1. web 的起源

1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点是世界上第一个网站。
在这里插入图片描述

2. web 开发技术

可以分为： 客户端开发技术和服务端开发技术
在这里插入图片描述

3. web 的特点

  1. 易导航和图形化界面
    2） 与平台无关
    3） 分布式结构
    4） 动态性
    5） 交互性

4. web 的工作原理

主要分为四个步骤
1）建立连接： 这个步骤就是之前整理过的网络编程：TCP 的三次握手
2） 发出请求Request
3） 发出响应消息 Response
4）关闭连接： TCP 的四次分手
在这里插入图片描述

5. URL

URL 统一资源定位器： 也可以理解成网址。
构成：
协议类型：// 服务地址（端口号）/ 路径 / 文件名
eg： http://www.baidu.com

二. HTML 网页结构

1. HTML 定义

HTML （Hyper Text Make-up Language） 超文本标记语言： 通过使用标记标签来描述页面文档结构和表示形式的一种语言，再由浏览器进行解析，然后把结果显示再网页上。
point： 超文本指的是超链接 ， 标记指的是标签
HTML 文件用编辑器打开显示的文本，可以用文本的方式编辑。
HTML 文件用浏览器打开，浏览器会按照标签描述的内容将文章渲染成网页，显示的网页可以从一个网页跳转到另一个网页。

2. HTML 的基本结构

1） 文档声明：
2）注释： < !-- 这是一段注释–>
3） 页头：
< head>
< meta charset=“UTF-8”>
< title>Title
< /head>
4）页身 :
< body>

< /body>
在这里插入图片描述

在这里插入图片描述

3. HTML 的文档类型

xhtml 1.0 和 html 5

在这里插入图片描述

4. HTML的文档规范

1）. 所有的标签都必须是小写
2） 所有的属性都必须用双引号引起来
3） 所有的标签都必须闭合
4） img 必须 要加 alt 属性（对图片的描述）

三. HTML 标签

1. 文本标签

1）标题级别
在这里插入图片描述

eg：

在这里插入图片描述
显示效果：
在这里插入图片描述

2）
在这里插入图片描述
在这里插入图片描述

实验代码:
在这里插入图片描述

显示效果：
在这里插入图片描述

2. 列表标签

在这里插入图片描述
eg： 无序列表：
实验代码：
在这里插入图片描述

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

有序列表：
在这里插入图片描述

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

3. div 和span 标签

.....
常用于组合标签， 以便通过css 来对这些元素进行格式化 .... 常用于包含文本，可以通过css 对它定义样式，过着通过JavaScript 对它进行操作。

4. 图片标签

属性：
1）scr： 图片名及url 地址 ----- 必需属性
2） alt ： 图片加载失败的时候的提示信息 ------- 必须属性
3） title ： 文字提示属性
4） width / height ： 图片的宽度/高度

eg：
在这里插入图片描述

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

5. 超链接标签

…
属性：
1）href： 必需属性， 指的是连接跳转的地址
2） target ： 表示链接的打开方式， _blank : 新窗口 ， _self : 本窗口（默认）
3） title ： 文字提示属性

eg：
文字超链接标签：
在这里插入图片描述
效果展示：
在这里插入图片描述

图片超链接标签：
在这里插入图片描述

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

锚点：
锚点在一篇文章非常长的时候，可以快速定位文章内容的一种方法， 类似于标题的引导，可以点击目录对应的标题，就可以跳转到相应的位置。
定义一个锚点：
< /a1 > 百度一下< /a >
使用锚点：
跳到a1 处< /a1 >

6. 表格标签

在这里插入图片描述
1）表格标签： table
行标签： tr
单元格： （表示列的概念）： td
表头： th ： 加粗 并且居中
表格标题： caption

2）标签的合并：
行合并： rowspan
列合并： colspan

3） 标签的常用属性：
border： 边框
weight ： 宽度
height ： 高度
algin： 对齐方式 ： center ， left ， right

eg： 制作课程表

<!DOCTYPE html>
<!---->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杂货铺</title>
</head>

<body>
<table  border="1px" bordercolor = "blue" , align = "center" width="500" style="text-align: center">
    <caption>课程表</caption>
<tr>
    <th>项目</th>
    <th colspan="5">上课</th>
    <th colspan="2">休息</th>
</tr>
<tr>
    <th>星期</th>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
    <td>星期日</td>
</tr>
    <tr>
        <th rowspan="4">上午</th>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td>计算机</td>
    <td rowspan="4">休息</td>
</tr >

<tr>
    <td>数学</td>
    <td>数学</td>
    <td>地理</td>
    <td>历史</td>
    <td>化学</td>
    <td>计算机</td>
</tr>
<tr>
    <td>化学</td>
    <td>语文</td>
    <td>体育</td>
    <td>计算机</td>
    <td>英语</td>
    <td>计算机</td>
</tr>
<tr>
    <td>政治</td>
    <td>英语</td>
    <td>体育</td>
    <td>历史</td>
    <td>地理</td>
    <td>计算机</td>
</tr>
<tr>
    <th rowspan="2">下午</th>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td>计算机</td>
    <td rowspan="2">休息</td>
</tr>
<tr>
    <td>数学</td>
    <td>数学</td>
    <td>地理</td>
    <td>历史</td>
    <td>化学</td>
    <td>计算机</td>
</tr>
<tr></tr>

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

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

7. 表单标签

常用的属性：
1） action 属性： 提交的目标地址 （URL）
2） method 属性：
提交方式：
get（默认）： URL 地址栏可见 ， 长度受限制， 相对不 安全

post： URL 地址不可见， 长度不受限制， 相对安全

< input > 表单标签input 定义输入字段，用户可以在里面输入数据
type 属性：
1）text： 单行文本框
2）password： 密码输入框
3）checkbox： 多选框 ， 注意要提供value 值
4）radio:单选框 注意要提供value值
5）file:文件上传选择框
6）button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
7） hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
8） email 用于应该包含 e-mail 地址的输入域
url 用于应该包含 URL 地址的输入域
9） number 用于应该包含数值的输入域。
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
10） range 用于应该包含一定范围内数字值的输入域，显示为滑动条
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
11） 日期选择器 Date pickers
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

eg： 设计一个登陆界
实验代码如下：

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



<hr/>
<form action="success.html" method="get">

    <table width="20%" align="center" >
        <tr>
            <td colspan="2" style="text-align: center"><h3>用户登录</h3></td>
        </tr>
        <tr>
            <td style="text-align: right">用户名</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td style="text-align: right">密码</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center"> <input type="submit" value="登录"></td>
        </tr>
    </table>

</form>



</body>
</html>

succcess文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>登陆成功</h1>
</body>
</html>

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

在这里插入图片描述

8. 下拉列表标签

创建下拉列表的标签： < select > …< /select >
name属性： 定义名称， 用于储存下拉值
size： 定义菜单中可见项的数目， html5 不支持
disabled ： 当该属性为True时， 会禁用该菜单
multiple ： 多选
下拉选择标签， 用于嵌套在< select > 标签中：< option>… < /option >
value : 下拉项的值
select ： 默认下拉指定项

文本域标签 ： 多行的文本输入区域 < textarea > … < /textarea >
~name ： 定义名称，用于储存文本区域的值
~ cols： 规定文本区域内可见的列数
~ rows ： 规定文本区域内可见的行数
~ disabled： 是否禁用
~ readonly ： 只读

9. 按钮标签

定义按钮： < button > … < / button >
< fieldset > ----fiedset 元素可以将表单内的相关元素分组

eg ： 用户注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    <table width="50%" align="center">
        <tr>
            <td colspan="2" style="text-align: center"><h3>用户注册</h3></td>
        </tr>
        <tr>
            <td style="text-align: left">用户名</td>
            <td><input type="text" name = "username"></td>
        </tr>
        <tr>
            <td style="text-align: left">密码</td>
            <td><input  type="password" name="password"></td>
        </tr>
        <tr>
            <td style="text-align: left">爱好</td>
            <td style="text-align: left">
                <input type="checkbox" name="hobby" value="0">编程
                <input type="checkbox" name="hobby" value="1">跳舞
                <input type="checkbox" name="hobby" value="2">篮球
            </td>
        </tr>
        <tr>
            <td style="text-align: left">性别</td>
            <td style="text-align: left">
                <input type="radio" name="gender" value="1">男
                <input type="radio" name="gender" value="2">女
            </td>
        </tr>
        <tr>
            <td style="text-align: left">出生日期</td>
            <td style="text-align: left">
                <input type="date" name="birth">
            </td>
        </tr>
        <tr>
            <td style="text-align: left">个人简历</td>
            <td style="text-align: left">
                <input type="file" name="interview">
            </td>
        </tr>
        <tr>
        <td  style="text-align: left">个人简介</td>
        <td style="text-align: left">
            <textarea name="info" cols="50" rows="10" placeholder="个人简介填写"></textarea>
        </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center">
                <input type="submit" value="注册">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

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

Fancyyj
关注
HTML鼠标悬停的语法
liu_xin_xinqaq的博客
03-21 7408
HTML设置鼠标悬停的四种语法 在visual studio code上建立一个盒模型 设置鼠标悬停： 1.语法一：selector:hover{} 鼠标悬停在selector元素上的时候给selector元素设置样式 2.语法二：selector：hover childElement{} 鼠标悬停在selector元素上的时候给childElement元素设置样式，childElement是selector的子元素 3.语法三：selector:hover>childElement{} 鼠标
【Javaweb】HTML 基础
耀的博客
03-04 6275
目录 一、HTML结构 1，认识HTML标签 2，HTML 文件基本结构 3，标签层次结构 4，快速生成代码框架 二、HTML 常见标签 1，注释标签 2，标题标签 3，段落标签: p 4，换行标签: br 5，格式化标签 6，超链接标签: a 7，表格标签 8，列表标签 9，表单标签 form 标签 input 标签 label 标签 select 标签 11，无语义标签: div & span 一、HTML结构 1，认识HTML标签 HTML
ansible-cmdb 从ansible事实收集输出生成主机概述
IT- 研究者
08-26 2514
一、ansible-cmdb简介 ansible-cmdb将Ansible 实际收集的输出信息 转换为包含系统配置信息的静态HTML概述页面（以及其他内容）。它支持多种类型的输出（html，csv，sql等），并将由Ansible收集的信息与自定义数据进行扩展。对于每个主机，它还显示组，主机变量，自定义变量和机器本地事实。 开源项目地址：https://github.com/fboender/ansible-cmdb 二、使用教程 1、下载 wget https://github.com/fbo
好看实用的六个html登录页面
热门推荐
nihaio25的博客
09-21 19万+
本人找到了六个html登录页面，感觉还行，也挺好看的。 1.效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
html聊天界面
半块菠萝的博客
05-18 3万+
先看效果图 参考网址：https://desk.v5kf.com/desk/kehu_zh.html html代码 html lang="zh"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&am
html 多级菜单
魑魅魍魉9527
11-24 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty
HTML实体编码
一叶的博客
08-22 8479
HTML实体编码 首先通过一个例子来说明一下HTML实体编码的重要性 //  前端<!DOCTYPE html><html lang="en"><meta charset="utf8" /><head>    <title>测试</title>    <style></style
JavaWeb基础4——HTML,JavaScript&CSS
vincewm的博客
07-24 9836
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
HTML接外链式的CSS 样式
yueyue763184的博客
04-11 5218
在HTML的头部标签<head></head>中导入外链式标记<link> <head> <link rel="stylesheet" href="css/ex3.css" type="text/css" /> </head> 其中 rel表示外部文档和调用文档的关系（stylesheet代表文档的外部样式表）； href 表示CSS文档的路径； type表示文件类型。 ...
html垂直居中的方法
isfor_you的博客
10-15 2万+
1.行高法line-height（适用于单行或较少几个文字） 设置文字的行高和容器的高度相同 <div id="div1"> 单行文本或几个字的垂直居中 </div> <style> #div1{ width: 300px;height: 100px;/* 设置容器的宽高 */ margin: 100px auto;/* 使容器水平边距自动相等 */ border: 1px solid red;/* 给文本加上边框可以更
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
html+css网页设计源码(简洁)
12-25
HTML 和 CSS 是构建网页设计的基础，本资源提供了一套简洁的网页设计源码，适合初学者和需要快速搭建页面的开发者。这套源码充分展示了如何使用 HTML 结构元素和 CSS 样式规则来创建一个清晰、易读且具有基本功能的...
纯HTML5拓扑图编辑器源代码
04-07
屌爆的纯HTML5拓扑图编辑器源代码，找了很久终于申请到，运行就是这个效果 http://www.hightopo.com/blog/wp-content/uploads/2014/08/Screen-Shot-2014-08-12-at-8.57.11-PM.png 可参考这篇博客 ...
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
卡通风格化魔法术技能粒子特效 ：Toon Projectiles 2 1.0
10-19
这款卡通射击特效资源包提供了 15 种独特的射击物、命中效果和闪光效果，风格统一且易于与您的项目集成。它默认支持 Unity 的内置渲染器，并且兼容 HDRP 和 URP 渲染管线。如果您拥有 Hovl Studio 的其他资源，该包将免费提供。所有效果均在各平台兼容，并且可以通过标准尺寸值轻松调整命中效果的大小。需要注意的是，调整射击物大小时，可能需要修改轨迹长度和按距离生成的速率。 该资源还包含了一个演示场景射击脚本，方便用户快速了解如何使用这些特效。该资源包还与 InfinityPBR 的 Projectile Factory 插件兼容，可以进一步增强您的射击游戏效果。 需要注意的是，推广媒体中使用的后处理效果 "Bloom" 并非资源包自带，建议用户在下载资源包之前，先行从 Unity 包管理器下载 "Post Processing Stack"。HDRP 和 URP 渲染管线的用户可以直接利用内置的 "Volume" 组件中的 "Bloom" 效果。
在 MATLAB GUI 中动态更新数据：策略与实践
10-19
通过本文的详细介绍，你应该能够理解如何在 MATLAB GUI 中更新数据。从设计 GUI 界面到处理用户输入，再到动态更新数据，每一步都是构建交互式 MATLAB 应用程序的关键。通过实际的代码示例，你可以更深入地理解这些概念，并将其应用到你自己的项目中。 记住，GUI 的设计和实现是一个迭代的过程。随着你对用户需求的更深入了解，你可能需要不断调整和优化你的 GUI。通过持续的测试和反馈，你可以创建一个既美观又功能强大的 MATLAB GUI 应用程序
【JCR一区级】Matlab实现白鹭群优化算法ESOA-CNN-BiLSTM-Attention的故障诊断算法研究.rar
最新发布
10-20
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
信创实验室建设方案（24页）.pptx
10-19
信创实验室建设方案（24页）
HTML标签属性完全指南
“html标签属性大全（完美版）涵盖了HTML中常用的标签和属性，旨在帮助学习者更好地理解和使用HTML进行网页制作。此大全包括了滚动标签`<marquee>`的各种属性，如行为、方向、循环次数、宽度、高度、背景色、滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值