web前端html

文章目录

  • 快捷方式
  • 一、html5的声明
  • 二、html5基本骨架
    •  2.1 html标签
    •  2.2 head标签
    •  2.3 body和head同级
    •  2.4 body标签
    •  2.5 title标签
    •  2.6 meta标签
  • 三、标题标签介绍与应用
    •  3.1 标题的介绍
    •  3.2 标题标签位置摆放
    •  3.3 标签之段落、换行、水平线
    •  3.3 标签之图片
      •  3.3.1 图片路径详解
    •  3.4 标签之超文本链接
    •  3.5 标签之文本
  • 四、列表标签之列表
    •  4.1 有序列表
    •  4.2 无序列表
    •  4.3 无序列表之应用场景
  • 五、标签之表格
    •  5.1 表格标签
    •  5.3 合并单元格
    •  5.4 Form表单
      •  5.4.1 表单元素
  • 六、块元素和行内元素（内联元素）
  • 七、html5新标签

快捷方式

生成浏览器文件.html的快捷方式：！+回车
vscode常用快捷方式：

代码格式划：sohift+alt+f
向上或向下快速移动一行：alt+up alt+down
快速复制一行代码：shift+alt+up/down
快速保存：ctrl+s
快速查找：ctrl+f
快速替换：ctrl+h

一、html5的声明

doctype 是document type的缩写，!DOCTYPE html 是必须要写的，作用是避免浏览器的怪异模式。

二、html5基本骨架

 2.1 html标签

定义html文档，浏览器看到html后就明白是一个html文档了，所以其他元素需要包裹在这里面，这个标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
</html>

 2.2 head标签

定义文档头部。
文档头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置等。

<!DOCTYPE html>
<html><head></head>
</html>

 2.3 body和head同级

 2.4 body标签

body元素定义文档主体。
body元素包含文档的所有内容（比如文本、超链接、图像、表格和列等），会直接在页面中显示出来，也就是用户可以直观的看到的内容。

<!DOCTYPE html>
<html><head></head><body>在浏览器中能够显示我</body>
</html>

 2.5 title标签

  • 可定义文档的标题
  • 可显示在浏览器窗口的标题栏或状态栏上
  • 标签是标签中唯一必须要求包含的东西，就是说写head一定要写title
  • 的增加有利于SEO优化

seo是搜索引擎优化的英文缩写，通过对网站内容调整，满足搜索引擎的排名需求

<!DOCTYPE html>
<html><head><title>第一个界面</title></head><body>我会显示在浏览器中</body>
</html>

 2.6 meta标签

meta标签用来描述一个html网页文档的属性，关键词等。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>第一个界面</title></head><body>我会显示在浏览器中</body>
</html>

三、标题标签介绍与应用

 3.1 标题的介绍

标题是通过

-

标签进行定义

定义最大的标题

定义最小的标题 h$*6 快速生成

-

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

 3.2 标题标签位置摆放

在标签中添加属性：align=“left/center/right” 默认居左

 3.3 标签之段落、换行、水平线

段落是通过

标签定义的

<p>这是一个段落</p>

换行
如果想在不产生一个新段落的情况下进行换行（新行），请使用
。

元素是一个空的html元素

<p>这个<br>段落<br>演示了分行的效果</p>

在这里插入图片描述
水平线
<hr//>标签在html页面中创建水平线

<hr color=""" width="" size="" align=""/>

属性：
  color：设置水平线的颜色
  width：设置水平线的长度
  size：设置水平线的高度
  align：设置水平线的对齐方式

 3.3 标签之图片

标签定义html页面中的图像

<img src="" alt="" title="" width="" height="">

注意：是单标签，不需要进行闭合操作
属性：
  src：路径（图片的地址或名称）
  alt：规定图像的替代文本
  width：规定图像的宽度
  height：规定图像的高度
  title：鼠标悬停在图片上给予提示

 3.3.1 图片路径详解

绝对路径
绝对路径是电脑的盘符存储与访问的具体地址

E:\itbaizhancode\1.jpg
<img src="E:\itbaizhancode\1.jpg">

相对路径

  • 子级关系：/
  • 父级关系：…/
  • 同级关系：./
    写相对路径的时候，如果是同级关系./可以省略，先找到同级再找子级
    网络路径

https://ts1.cn.mm.bing.net/th/id/R-C.db3836610f631c4d06bdde4fd923e98f?rik=qaf5de1wCMNaRw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50093%2f5337.jpg_wh1200.jpg&ehk=Oe3ZIbrBYnhQ0zqIu%2ftsRSE8srtaRlewEtSIg3sp6Zw%3d&risl=&pid=ImgRaw&r=0

 3.4 标签之超文本链接

html使用《a》来设置超文本链接
超链接可以是一个字或词或图像，可以点击它来跳转到新的文档或文档的某个部分。

<a href="url">链接文本</a>

超链接属性
在标签《a》中使用了href属性来描述链接的地址。
样式如下，后期可以通过css样式修改掉这些效果：

  • 一个未访问过的链接显示为蓝色字体并带有下划线+ 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线

 3.5 标签之文本

常用文本标签
在这里插入图片描述

四、列表标签之列表

 4.1 有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于《ol》标签，每个列表项始于《li》标签

<ol><li>第一个</li><li>第二个</li>
</ol>

在这里插入图片描述
type属性
《ol》的属性type拥有的选项

  • 1 表示列表项目用数字标号 (1,2,3…)
  • a 表示列表项目用小写字母标号 (a,b,c…)
  • A 表示列表项目用大写字母标号 (A,B,C…)
  • i 表示列表项目用小写罗马数字标号 (iii,iii…)
  • l 表示列表项目用大写罗马数字标号 (l,Il,Ill…)
    在这里插入图片描述

 4.2 无序列表

无序列表实现
无序列表是一个项目的列表，此项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于《ul》标签。每个列表项始于《li》标签。

<ul><li>第一个</li><li>第二个</li>
</ul>

在这里插入图片描述
type属性
《ul》的属性type拥有的选项

  • disc默认实心圆
  • circle 空心圆
  • square 小方块
  • none 不显示
<ul type="square"><li>第一个</li><li>第二个</li></ul><ul type="disc"><li>第一个</li><li>第二个</li></ul>

在这里插入图片描述
无序列表嵌套

	<ul><li>蔬菜</li><li>水果<ul><li>苹果</li><li>芒果</li></ul></li><li>肉类</li></ul>

在这里插入图片描述

 4.3 无序列表之应用场景

导航效果

	<ul><li>蔬菜</li><li>水果</li><li>肉类</li></ul>

快捷键：ul>li*3(数字根据自己的需要的li数量修改)

五、标签之表格

 5.1 表格标签

表格：《table》
行：《tr》
单元格：《td》

<table border="1" width="100px"><tr><td>张三</td><td>李四</td></tr><tr><td>阿里</td><td>京东</td></tr>
</table>

快捷键：table>tr*2>td{单元格}

  • border:设置表格边框
  • width：设置表格宽度
  • height：设置表格高度

 5.3 合并单元格

在这里插入图片描述
水平合并：colspan
保留左边，删除右边
垂直合并：rowspan
保留上边，删除下边

 5.4 Form表单

表单在web网页中用来给用户填写信息，从而能采集用户信息，使网页具有交互的功能。
所有用户输入内容的地方都用表单来写，如登录、注册、搜索框。

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。

<form action="url" method="get|post" name="myform"></form>

属性说明
action服务器地址
name表单名称

method中get和post的区别
数据提交方式，get把提交的数据url可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据

 5.4.1 表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

<form><input type="text"><input type="submit">
</form>

在这里插入图片描述
文本框
文本域通过《input type=“text”》标签来设定，当用户要在表单中输入字母、数字内容时，就会用到文本域。

<form>First name:<input type="text" name="firstname">Last name:<input type="text" name="lastname">
</form>

在这里插入图片描述
密码框
密码字段通过标签《input type=“password”》来定义

<form>password:<input type="password" name="pwd">
</form>

在这里插入图片描述
密码字段字符不会明文显示，而是以星号或者圆点替代
提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名，由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="url" method="get">username:<input type="text" name="user"><input type="submit" value="登录">
</form>

六、块元素和行内元素（内联元素）

在这里插入图片描述
块级元素：div、form、h1-h6、hr、p、table、ul
内联元素：a、b、em、i、span、strong
行内块级元素（特点：不换行，能够识别宽高）：button、img、input

七、html5新标签

  • 《header》《/header》头部
  • 《nav》《/nav》导航
  • 《section》《/section》定义文档中的节，比如章节、页眉、页脚
  • 《aside》《/aside》侧边栏
  • 《footer》《/footer》脚部
  • 《article》《/article》代表一个独立的、完整的相关内容块，例如一个用户的评论

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/25242.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Docker】DockerFile

【Docker】DockerFile

目录 一、镜像原理 二、如何制作镜像 1、容器转镜像 2、DockerFile 三、DockerFile关键字​编辑 四、案例&#xff1a;部署SpringBoot项目 一、镜像原理 docker镜像是由一个特殊的文件系统叠加而成的&#xff0c;他的最低端是bootfs&#xff0c;并使用宿主机的bootfs&…
阅读更多...
ruoyi若依 组织架构设计--[ 角色管理 ]

ruoyi若依 组织架构设计--[ 角色管理 ]

ruoyi若依 组织架构设计--[ 角色管理 ] 角色新增后端代码 角色修改后端代码 角色查询角色删除角色分配数据权限后端代码 角色分配用户 角色新增 后端代码 有一点&#xff0c;我认为新增的时候&#xff0c;也需要修改redis中的权限。 角色修改 后端代码 因为修改了role_menu表了…
阅读更多...
Java8 list多属性去重

Java8 list多属性去重

大家好&#xff0c;我是三叔&#xff0c;很高兴这期又和大家见面了&#xff0c;一个奋斗在互联网的打工人。 在 Java 开发中&#xff0c;我们经常会面临对 List 中的对象属性去重的需求。然而&#xff0c;当需要根据多个属性来进行去重时&#xff0c;情况会稍微复杂一些。本篇…
阅读更多...
51单片机程序烧录教程

51单片机程序烧录教程

STC烧录步骤 &#xff08;1&#xff09;STC单片机烧录方式采用串口进行烧录程序&#xff0c;连接的方式如下图&#xff1a; &#xff08;2&#xff09;所以需要先确保USB转串口驱动是识别到&#xff0c;且驱动运行正常&#xff1b;是否可通过电脑的设备管理器查看驱动是否正常…
阅读更多...
数据结构——红黑树

数据结构——红黑树

文章目录 一.红黑树的定义二.红黑树的插入1.红黑树节点的定义2.红黑树的插入操作3.总结&#xff1a; 三.红黑树与AVL树的比较四.检验手写的红黑树五.源码 一.红黑树的定义 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff…
阅读更多...
Llama 2 with langchain项目详解（一）

Llama 2 with langchain项目详解（一）

Llama 2 with langchain项目详解（一） 2023年2月25日，美国Meta公司发布了Llama 1开源大模型。随后，于2023年7月18日，Meta公司发布了Llama 2开源大模型，该系列包括了70亿、130亿和700亿等不同参数规模的模型。相较于Llama 1，Llama 2的训练数据增加了40%，上下文长度提升至…
阅读更多...
【ArcGIS Pro二次开发】(57)：地图系列

【ArcGIS Pro二次开发】(57)：地图系列

在ArcGIS Pro中&#xff0c;有一个地图系列&#xff0c;可以在一个布局中导出多个地图。 在SDK中为ArcGIS.Desktop.layout.MapSeries类和映射系列导出选项&#xff0c;可以以支持多页导出。 MapSeries类提供了一个静态CreateSpatialMapSeries方法&#xff0c;该方法使用指定的…
阅读更多...
SpringBoot核心内容梳理

SpringBoot核心内容梳理

1.SpringBoot是什么? Spring Boot是一个基于Spring框架的快速开发应用程序的工具。它简化了Spring应用程序的创建和开发过程&#xff0c;使开发人员能够更快速地创建独立的、生产就绪的Spring应用程序。它采用了“约定优于配置”的原则&#xff0c;尽可能地减少开发人员需要进…
阅读更多...
【Linux命令详解 | mkdir命令】Linux系统中用于创建新目录的命令

【Linux命令详解 | mkdir命令】Linux系统中用于创建新目录的命令

文章标题 简介一&#xff0c; 参数列表2&#xff0c;使用介绍1. 基础用法2. 使用 -p 参数创建多级目录3. 使用 -m 参数设置目录权限4. 使用 -v 参数查看详细信息5. 多个目录的创建6. 创建带有特殊字符的目录7. 重复创建目录8. 创建只读目录 总结 简介 mkdir命令在Linux系统中被…
阅读更多...
【C++】透过STL源码深度剖析及模拟实现vector

【C++】透过STL源码深度剖析及模拟实现vector

鉴于读者的响应&#xff0c;打算将文章拆分一下&#xff0c;方便观看&#xff0c;基本接口可看 深入浅出STL之vector类 一、源码引入 以下我所介绍的都是基于【SGI】版本的STL&#xff0c;对源码有兴趣的同学可以去看看 侯捷老师的《STL源码剖析》 然后呢我们就去调出【vector…
阅读更多...
【数据结构OJ题】删除有序数组中的重复项

【数据结构OJ题】删除有序数组中的重复项

原题链接&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-array/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 用双指针算法&#xff0c;定义两个变量src和dst&#xff0c;一开始让src和dst指向num[ ]数组的第一个元素&a…
阅读更多...
微服务——DSL查询文档+搜索结果处理

微服务——DSL查询文档+搜索结果处理

DSL Query分类 DSL Query的基本语法 全文检索查询 常用场景 match查询 要填一个存在的字段&#xff0c;已经要检索的内容 匹配度越高排名越前&#xff0c;这里all字段包含三个字段在里面。 multi_match查询 精确查询 不分词的查询 查询语法 term查询 range查询 gte是大于等…
阅读更多...
Kubernetes关于cpu资源分配的设计

Kubernetes关于cpu资源分配的设计

kubernetes资源 在K8s中定义Pod中运行容器有两个维度的限制： 资源需求(Requests)：即运行Pod的节点必须满足运行Pod的最基本需求才能运行Pod。如 Pod运行至少需要2G内存，1核CPU。（软限制）资源限额(Limits)：即运行Pod期间，可能内存使用量会增加，那最多能使用多少内存，这…
阅读更多...
如何在终端设置代理(设置jupyter notebook同理)

如何在终端设置代理(设置jupyter notebook同理)

设置代理 在终端(我用的gitbash)下执行 set HTTP_PROXYhttp://<user>:<password><proxy server>:<proxy port> set HTTPS_PROXYhttp://<user>:<password><proxy server>:<proxy port>其中&#xff1a; user、password&#…
阅读更多...
IO模型-信号驱动IO

IO模型-信号驱动IO

linux内核中存在一个信号SIGIO&#xff0c;这个信号就是用于实现信号驱动IO的。当应用程序中想要以信号驱动IO的模型读写硬件数据时&#xff0c;首先注册一个SIGIO信号的信号处理函数,当硬件数据就绪&#xff0c;硬件会发起一个中断&#xff0c;在硬件的中断处理函数中向当前进…
阅读更多...
Windows搭建Snort环境及使用方式

Windows搭建Snort环境及使用方式

目录 0x01 前置环境0x02修改配置文件0x03 自测0x04 使用0x05 感言 0x01 前置环境 环境描述windows10snort2.9.2https://www.snort.org/downloads 先把上面环境下载好&#xff01; 需要注意的是安装npcap这个软件 0x02修改配置文件 软件安装目录&#xff1a;C:/Snort/ 配置文…
阅读更多...
MySQL的常用函数大全

MySQL的常用函数大全

一、字符串函数 常用函数&#xff1a; 函数功能CONCAT(s1, s2, …, sn)字符串拼接&#xff0c;将s1, s2, …, sn拼接成一个字符串LOWER(str)将字符串全部转为小写UPPER(str)将字符串全部转为大写LPAD(str, n, pad)左填充&#xff0c;用字符串pad对str的左边进行填充&#xff0…
阅读更多...
uni-app——下拉框多选

uni-app——下拉框多选

一、组件components/my-selectCheckbox.vue <template><view class"uni-stat__select"><span v-if"label" class"uni-label-text">{{label &#xff1a;}}</span><view class"uni-stat-box" :class"…
阅读更多...
Docker 网络模型使用详解 （1）Dockers网络基础

Docker 网络模型使用详解 （1）Dockers网络基础

目录 环境准备 Dockers 网络基础 1.端口映射 查看随机映射端口范围 -p可以指定映射到本地端口 映射指定地址和指定端口 映射指定地址 宿主机端口随机分配 指定传输协议 端口暴露 容器互联 自定义网络 现在把container7加入到demo_net中 在启动一个容器加入到demo_net…
阅读更多...
AI Chat 设计模式：11. 状态模式

AI Chat 设计模式：11. 状态模式

本文是该系列的第十一篇&#xff0c;采用问答式的方式展开&#xff0c;问题由我提出&#xff0c;答案由 Chat AI 作出&#xff0c;灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 你知道状态模式吗A.1Q.2 它与有限状态机有什么联系吗&#xff1f;A.2Q.3 知道了&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023