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.rhkb.cn/news/80829.html

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

相关文章

An unexpected error has occurred. Conda has prepared the above report

An unexpected error has occurred. Conda has prepared the above report

今日在服务器上创建anaconda虚拟环境的时候&#xff0c;出现了如下报错 An unexpected error has occurred. Conda has prepared the above report 直接上解决方案 在终端中输入如下指令 conda config --show-sources 如果出现以下提示&#xff0c;说明多了一个文件 输入以下…
阅读更多...
Java集合

Java集合

一、List 1、ArrayList ArrayList 底层就是⼀个 Object[] 数组 ArrayList 底层数组默认初始化容量为 10 1、jdk1.8 中 ArrayList 底层先创建⼀个⻓度为 0 的数组 2、当第⼀次添加元素&#xff08;调⽤ add() ⽅法&#xff09;时&#xff0c;会初始化为⼀个⻓度为 10 的数组…
阅读更多...
[学习笔记]微信小程序全套开发流程（ing）

[学习笔记]微信小程序全套开发流程（ing）

https://www.bilibili.com/video/BV1mV4y1o7fu 1.整体概述 2.环境搭建 略 4.纯净版项目 5.快速入门 5.1组件(类似HTML标签) wxml中的标签html中的标签textspanviewdivimageimgiconnavigatora view组件 <view><view class"c0">学生&#xff1a;<…
阅读更多...
Flask 是什么？Flask框架详解及实践指南

Flask 是什么？Flask框架详解及实践指南

Flask 是一个轻量级的 Python Web 框架&#xff0c;它被广泛用于构建 Web 应用程序和 API。Flask 简单易用&#xff0c;具有灵活性和可扩展性&#xff0c;是许多开发者喜欢用其构建项目的原因。本文将介绍 Flask 是什么以及如何使用它来构建 Web 应用程序&#xff0c;同时提供一…
阅读更多...
链式二叉树统计结点个数的方法和bug

链式二叉树统计结点个数的方法和bug

方法一&#xff1a; 分治&#xff1a;分而治之 int BTreeSize1(BTNode* root) {if (root NULL) return 0;else return BTreeSize(root->left)BTreeSize(root->right)1; } 方法二&#xff1a; 遍历计数&#xff1a;设置一个计数器&#xff0c;对二叉树正常访问&#…
阅读更多...
OpenCV之信用卡识别实战

OpenCV之信用卡识别实战

文章目录 代码视频讲解模板匹配文件主程序(ocr_template_match.py)myutils.py 代码 链接: https://pan.baidu.com/s/1KjdiqkyYGfHk97wwgF-j3g?pwdhhkf 提取码: hhkf 视频讲解 链接: https://pan.baidu.com/s/1PZ6w5NcSOuKusBTNa3Ng2g?pwd79wr 提取码: 79wr 模板匹配文件 …
阅读更多...
Linux下.py文件只读问题以及解决过程

Linux下.py文件只读问题以及解决过程

一、问题描述 如图&#xff0c;在Ubuntu Linux系统中使用pycharm管理项目文件时&#xff0c;无法编辑&#xff0c;提示文件为只读&#xff1a; 点击"OK"后仍旧无法清除只读模式&#xff0c;并报错&#xff1a; 二、问题解决 将问题定性为文件权限相关问题&#…
阅读更多...
将http协议升级为https协议——域名平台部分的设置

将http协议升级为https协议——域名平台部分的设置

为远程群晖NAS的自定义域名免费申请SSL证书 文章目录 为远程群晖NAS的自定义域名免费申请SSL证书前言1. 向域名平台申请SSL证书1.1 购买“免费证书” 2. 进一步进行创建证书设置2.1 对证书的关联域名进行补充 3. 云解析DNS3.1 进行验证信息 前言 我们可以成功地将自己购买的域…
阅读更多...
RN 使用react-navigation写可以滚动的横向导航条（expo项目）

RN 使用react-navigation写可以滚动的横向导航条（expo项目）

装包&#xff1a; yarn add react-navigation/material-top-tabs react-native-tab-view npx expo install react-native-pager-view import React from react import { View, Text, ScrollView, SafeAreaView } from react-native import { Icon } from ../../../../../compo…
阅读更多...
Linux文件属性与权限管理（可读、可写、可执行）

Linux文件属性与权限管理（可读、可写、可执行）

Linux把所有文件和设备都当作文件来管理&#xff0c;这些文件都在根目录下&#xff0c;同时Linux中的文件名区分大小写。 一、文件属性 使用ls -l命令查看文件详情&#xff1a; 1、每行代表一个文件&#xff0c;每行的第一个字符代表文件类型&#xff0c;linux文件类型包括&am…
阅读更多...
【redis基础】

【redis基础】

目录 一、概述 1.NoSQL 1.1 简述 1.2 类型 1.3 应用场景 1.3.1 缓存 1.3.2 分布式锁 1.3.3 计数器 1.3.4 会话管理 1.3.5 消息队列 2.Redis 2.1 简述 2.2 特性 2.3 监听端口号 2.4 数据类型 二、安装 1.编译安装 2.RPM安装 三、目录结构 1.查看 2.主配置文…
阅读更多...
使用toad库进行机器学习评分卡全流程

使用toad库进行机器学习评分卡全流程

1 加载数据 导入模块 import pandas as pd from sklearn.metrics import roc_auc_score,roc_curve,auc from sklearn.model_selection import train_test_split from sklearn.linear_model import LogisticRegression import numpy as np import math import xgboost as xgb …
阅读更多...
心理咨询预约管理系统javaweb医院挂号jsp源代码mysql

心理咨询预约管理系统javaweb医院挂号jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 心理咨询预约管理系统javaweb MVC模式&#xff0c;普…
阅读更多...
活动发布会邀请媒体6步走

活动发布会邀请媒体6步走

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 邀请媒体参加活动发布会对信息的传播&#xff0c;企业品牌建设有诸多的好处&#xff0c;今天就与大家分享下邀请媒体参加活动报道的6个步骤&#xff1a; 1. 策划与准备&#xff1a; -明…
阅读更多...
构建Docker容器监控系统(Cadvisor +InfluxDB+Grafana)

构建Docker容器监控系统(Cadvisor +InfluxDB+Grafana)

目录 案例概述 Cadvisor InfluxDBGrafana 1.1、 Cadvisor 1.2、InfluxDB 1.3、Grafana 1.4、监控组件架构 1.5、开始部署 安装docker-ce 阿里云镜像加速器 创建自定义网络 创建influxdb容器 案例概述 Docker作为目前十分出色的容器管理技术&#xff0c;得到大量企业…
阅读更多...
基于Java+SpringBoot+Vue的企业客户信息反馈平台设计与实现（源码+LW+部署文档等）

基于Java+SpringBoot+Vue的企业客户信息反馈平台设计与实现（源码+LW+部署文档等）

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…
阅读更多...
STM32 4G学习（二）

STM32 4G学习（二）

特性参数 ATK-IDM750C是正点原子开发的一款高性能4G Cat1 DTU产品&#xff0c;支持移动4G、联通4G和电信4G手机卡。 它以高速率、低延迟和无线数传作为核心功能&#xff0c;可快速解决应用场景下的无线数传方案。 它支持TCP/UDP/HTTP/MQTT/DNS/RNDIS/NTP协议&#xff0c;支持…
阅读更多...
Clion开发Stm32之存储模块(W25Q64)驱动编写

Clion开发Stm32之存储模块(W25Q64)驱动编写

前言 涵盖之前文章: Clion开发STM32之HAL库SPI封装(基础库) W25Q64驱动 头文件 #ifndef F1XX_TEMPLATE_MODULE_W25Q64_H #define F1XX_TEMPLATE_MODULE_W25Q64_H#include "sys_core.h" /* Private typedef ---------------------------------------------------…
阅读更多...
STM32入门——定时器

STM32入门——定时器

内容为江科大STM32标准库学习记录 TIM简介 TIM&#xff08;Timer&#xff09;定时器定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时&…
阅读更多...
广州VR制作 | 利用VR元宇宙平台开展林地管理培训的优势

广州VR制作 | 利用VR元宇宙平台开展林地管理培训的优势

在林业领域&#xff0c;实地调查是获取准确数据和深入了解森林生态的重要手段。然而&#xff0c;传统的实地调查方法存在诸多问题&#xff0c;如时间成本高、人力物力投入大、安全风险高等。为了解决这些教学痛点&#xff0c;我们引入了虚拟现实(VR)技术&#xff0c;通过虚拟林…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023