程序员经验分享-hwhale

前端-01Html5基本知识

2023-05-16

1 基本

1.1 第一个前端程序

  1. 内容
<html>
    <head>
        <title>我的网页</title>
    </head>
    <body>
        Hello,我的第一个网页
    </body>
</html>

使用浏览器打开

image.png

1.2 工具安装

  1. 浏览器

谷歌浏览器

image.png

image.png

清缓存

ctrl+shift+delete

image.png

  1. vscode
  • 生成浏览器文件.html的快捷方式

!+回车

image.png

image.png

  • 常用快捷键

image.png

  • 快速打开浏览器

插件open in browser 安装，就会多出两个选项来

image.png

2 Html5

2.1 介绍

  1. 概念

是一种用来描述网页的一种语言，被称为超文本标记语言，本质是标记语言，标记语言是一套标记标签，一般用

  1. DOCTYPE声明

DOCTYPE是document type(文档类型)的缩写。

<!DOCTYPE html>
是H5的声明位于文档的最前面，甚至在<html>之前

作用是网页必备的组成部分，避免浏览器的怪异模式

image.png

  1. html5的基本骨架

  • html标签

  • head标签

    • 必须包含title标签
    • meta标签：一般是限定utf-8编码格式，注意是一个单标签

  • body标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我的第一个网页
</body>
</html>

2.2 标签之标题

  1. 标题介绍

从h1到h6从大到小，双标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 案例
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="UTF-8">
​
    <title>Document</title>
</head>
​
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
​
</html>

image.png

快捷键

h$*6+回车

  • 网页案例

https://www.mi.com/shop

image.png

  1. 标题标签位置摆放
align="left center | right"
默认为左的，可以设置属性变成右边

image.png

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

  1. 概念

段落§：通过段落去承载文本

换行(br)

水平线(hr)

  1. 段落
  • 运用
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <p>我是一个段落标签</p>
</body>
​
</html>

image.png

  • 网页案例

image.png
3. 换行

  • 运用

注意是单标签

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <p>我是一个段落标签</p>
    <p>如果您希望在不产生一个<br>新段落的情况下进行换行</p>
</body>
​
</html>

image.png

  1. 水平线
  • 运用

image.png

  • 案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>我是一个段落标签</p>
    <p>如果您希望在不产生一个<br>新段落的情况下进行换行</p>
    <hr color="red" width="300px" size ="10px" align = "left">
</body>

</html>

image.png

2.4 标签的图片

  1. 概念

使用标签定义HTML页面中的图像

<img scr="" alt="" title="" width="" height="">
  1. 运用
  • 用法

image.png

  • scr

图片必须和代码在同一个文件夹下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="1683454588303.jpg" >
</body>
</html>

效果

image.png

  • alt
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像">
</body>

当图片获取不到的时候，会显示alt的名字，即代替文本

image.png

  • width
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像" width="300px">
</body>
  • height
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像" width="300px" height="300px">
</body>
  • title

鼠标边边会出现文字提示

image.png

  1. 关于scr的补充
  • 绝对路径
  • 相对路径

子级关系/

image.png

父级关系…/

image.png

同级关系./

2.5 超文本链接

  1. 概念

使用来设置超文本链接，其中href属性来描述链接的地址

<a href="url">链接文本</a>
  1. 运用
<body>
    <a href="https://www.baidu.com">百度</a>
</body>

记得写全https://

图片也可以当作跳转的中介

<body>
    <a href="https://www.baidu.com">
        <img src="1683454588303.jpg" alt="qq头像" width="300px">
    </a>
</body>

2.6 文本标签

  1. 基本使用

image.png

<body>
    <em>月月</em>
    <b>月月</b>
    <i>月月</i>
    <strong>月月</strong>
    <del>月月</del>
    <span>月月</span>
</body>

image.png

  1. 嵌套
<body>
	<p>我喜欢吃<em>em白菜</em></p>
</body>

image.png

2.7 列表标签之有序列表

  1. 有序列表
  • 基本使用
<body>
    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>
</body>

image.png

  • ol属性

image.png

<body>
    <ol type ="1">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>

    <ol type ="a">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>
</body>

image.png

  • 嵌套

也可以嵌套，li中再套一组ol

<body>    
	<ol>
        <li>水果</li>
        <li>
            蔬菜
            <ol>
                <li>白菜</li>
                <li>油菜</li>
            </ol>
        </li>
    </ol>
</body>

image.png

2.8 无序列表

  1. 概念
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>
</body>

image.png

  1. ul属性

image.png

<body>
<ul type ="disc">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type ="circle">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type = "squre">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type = "none">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

</body>

image.png

  • 嵌套

也可以嵌套的

  1. 实际运用
  • 百度新闻

image.png

  • 小米

image.png

辅助以css

  1. 快捷键

ul>li*2

2.9 标签之表格

  1. 概念

表格：

行：，有几行就几个tr

单元格(列)：，有几列就在tr中写几列，中间可以写文本的

  1. 运用

三行三列的单元格

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

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

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

image.png

  1. 快捷键

table <tr*2>td{单元格}

    table>tr*3>td*3{哦哦}

回车成这样
    <table>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
    </table>
  1. 属性
  • 基本属性

image.png

以后用css调整的多

  • 运用
<table border="1">
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
</table>
  • 效果

image.png

宽高也可以设置，也可以后css调整

  1. 单元格合并
  • 水平合并colspan
<body>
    <p>合并单元格</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td>yes3</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
            <td>yes6</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>
  • 垂直合并rowspan
<body>
    <p>水平合并单元格3,4以及垂直合并单元格3，6</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td rowspan="2">yes3 yes6</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>

效果

image.png

如果合并四个，先水平合并，后垂直合并

2.10 表单

  1. 引入

image.png

  1. 属性

表单一般包括容器和控件，控件包含输入框和按钮

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

action服务器地址，method请求类型，name表单名字

  1. 组成

表单标签，表单域(输入框)，表单按钮

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

image.png

  1. 补充表单元素
  • 文本框
    <form>
        用户名：<input type ="text">
    </form>

image.png

  • 密码框
    <form>
        Password：<input type ="password" name = "pwd">
    </form>

image.png

密码是小黑圆点

  • 提交按钮
   <form>
        <input type = "submit" value = "Submit">
    </form>

image.png

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端-01Html5基本知识 的相关文章

  • Statement和PreparedStatement的区别/PreparedStatement和Statement比较的优点

    Statement 和 PreparedStatement之间的关系和区别 关系 xff1a PreparedStatement继承自Statement 都是接口 区别 xff1a PreparedStatement可以使用占位符 xff0

  • MATLAB自适应中值滤波

    span class token operator span 自适应中值滤波 clc span class token punctuation span clear span class token punctuation span clo

  • 操作系统经典问题之生产者消费者问题

    一 生产者消费者问题 生产者和消费者问题是计算机同步互斥的经典问题 xff0c 其意思就是生产者把生产出来的产品放在仓库里 xff0c 消费者把产品从仓库里取出来 仓库属于临界区 xff0c 生产者和消费者一次只能一个进入临界区中 两个进程

  • ctags使用教程

    Ctags ctags在http ctags sourceforge net 下载源码 xff0c 编译后安装 常规的标记命令为 ctags R 34 R 34 表示递归创建 xff0c 也就包括源代码根目录下的所有子目录下的源程序 绝大多

  • 线程池（阻塞队列，生产者消费者模式）

    线程的等待和通知 Object类中有些方法不可随便调用 wait notify notifyAll 这三个方法 xff1a 1 wait 使线程主动释放锁 xff0c 进入等待状态 xff0c 直到他被其他的线程通过 notify 和 no

  • ubuntu18.04开机后无法进入系统问题的解决方法

    解决方法ubuntu18 04开机时无法进入系统的问题 问题描述 xff1a 出现这种错误的原因是安装了nvidia smi安装包 xff0c Ubuntu18 04内核bug导致gdm3和nvidia驱动冲突 xff0c 使得gdm3无法

  • 解决安装软件包时出现E:无法定位的问题

    第一种情况 xff1a 在确定网络连接和质量没问题的情况下 xff0c 任何软件都无法安装 xff0c 出现E 无法定位XXX 解决 xff1a 换源 具体步骤 xff1a 1 备份 etc apt sources list 文件 执行命令

  • 初次入职，git使用教程：如何在idea使用git拉取代码，提交代码，以及在gitlab上发起合并请求

    git的使用相信是很多刚踏入程序员这一行朋友的痛点 xff0c 刚入职的一段时间非常担心git用错 xff0c 把别人的代码覆盖掉 xff0c 下面我详细介绍一下如何在idea上使用git xff0c 拉取 xff0c 提交代码 xff0c

  • nginx配置反向代理

    因为项目会根据生成一个URL 那个URL需要挂在移动端APP上 xff0c 但该项目需要部署在公司内网 xff0c 公司内网不能全外网开放 xff0c 所以需要经过nginx配置反向代理来跳转 文章目录 前言一 pandas是什么 xff1

  • 张筱雨履历

    自出道以来便以清纯可爱风格 席卷全球 幽雅的姿态 迷人的身姿 无不透露出深刻内涵的底蕴 被誉为中国第一 姓名 xff1a 张筱雨 出生日期 xff1a 1985年06月06日 职业 xff1a 模特 性别 xff1a 女性 籍贯 xff1a

  • Hystrix总结

    Hystrix是什么 xff1f Hystrix 能使你的系统在出现依赖服务失效的时候 xff0c 通过隔离系统所依赖的服务 xff0c 防止服务级联失败 xff0c 同时提供失败回退机制 xff0c 更优雅地应对失效 xff0c 并使你的

  • python爬取京东商品信息及评论

    准备 chrome浏览器 和 chromeDriver插件 xff08 其他浏览器步骤类似 xff09 python 环境python selenium模块 代码 span class token triple quoted string

  • 错误:端口被占用解决办法

    1 首先打开cmd xff0c 输入以下命令netstat ano xff0c 这是在查看所有端口 2 会列出以下端口 这里根据你的占用窗口找到他的PID xff0c 我这里占用的是1080 xff0c 可以看到他的PID是10512 3

  • 在RuoYi-Cloud若依系统的环境部署的建议及总结

    RuoYi Cloud若依系统的环境部署 为了开发项目 xff0c 使用了RuoYi Cloud系统 xff0c 在前期需要搭建好相应的环境 xff0c 然后再进行实际开发 下面是综合 RuoYi 官方在线文档的相应介绍及自己在搭建中的步骤

  • （第二版）亿级流量电商详情页系统实战-缓存架构+高可用服务架构+微服务架构+课件

    第1节课程介绍以及高并发高可用复杂系统中的缓存架构有哪些东西 第2节基于大型电商网站中的商品详情页系统贯穿的授课思路介绍 免费观看 7分钟 第3节小型电商网站的商品详情页的页面静态化架构以及其缺陷11分钟 第4节大型电商网站的异步多级缓存构

  • 解决idea报错 “cannot access class“ 同一包下Java代码飘红

    解决idea报错 cannot access class 同一包下Java代码飘红 遇到的问题 xff1a 同一个包下的java代码 xff0c 突然飘红 xff0c 出现红色的波浪下划线 xff0c 错误提示 xff1a cannot a

  • Spring Cloud Alibaba微服务实战笔记之微服务架构篇

    目录 xff1a 一 微服务介绍 二 微服务架构的常见问题 三 微服务架构的常见概念 四 微服务架构的常见解决方案 概述 xff1a 俗话说 xff0c 兵马未动 xff0c 粮草先行 xff0c 只有更好的理解什么是微服务 xff0c 才

  • 主流微服务技术栈Spring Cloud Alibaba

    目录 xff1a 一 国内主流微服务技术栈 二 Spring Cloud Alibaba介绍 三 总结 一 国内主流微服务技术栈 之前有段时间阿里开源的dubbo处于不怎么维护的阶段 xff0c 正好这段时间Spring cloud完善的技

  • 项目实战Dubbo Spring Cloud 并使用Nacos实现注册中心

    搞了大半天 xff0c 终于趟平了 本文中主要是基于Dubbo实现了服务提供和调用的demo xff0c 并接入Nacos注册中心 Dubbo Spring Cloud 是Spring Cloud Alibaba 的核心组件 xff0c 它

  • Dubbo高级应用事件之集群容错

    目录 xff1a 什么是容错Dubbo容错模式 Dubbo集群模式配置 什么是容错 xff1f 在分布式架构的网络通信中 xff0c 容错能力是必须要具备的 那什么叫做容错昵 xff1f 简单来说就是服务容忍错误的能力 xff0c 具体来说

随机推荐

  • HDU 5984(求木棒切割期望 数学)

    题意是给定一长为 L 的木棒 xff0c 每次任意切去一部分直到剩余部分的长度不超过 D xff0c 求切割次数的期望 若木棒初始长度不超过 D xff0c 则期望是 0 000000 xff1b 设切割长度为 X 的木棒切割次数的期望是

  • 书籍推荐：Spring源码深度解析（第2版）

    Spring源码学习必读书籍 Spring源码深度解析 xff08 第2版 xff09 从核心实现 企业应用和Spring Boot这3个方面 xff0c 由浅入深 由易到难地对Spring源码展开了系统的讲解 xff0c 包括Spring

  • chrome cookies cookie 解密 写入(80+版本)

    一 xff0c 历史变迁 80之前 xff0c 解密 xff1a win32crypt CryptUnprotectData encrypted value bytes None None None 0 1 xff0c 老文N多 xff0c

  • 使用 Nemo 替代 Ubuntu 自带的文件管理器

    Nautilus 是 Ubuntu 下默认的文件管理器 xff0c 为什么要替换它呢 xff1f 如果你用过 Ubuntu 13 04 或 13 10 xff0c 我想你就不会问这个问题了 xff0c 真是 谁用谁知道 Nemo 虽然没有

  • springboot错误: 找不到或无法加载主类

    IDEA如果遇到创建完springboot后 要简单运行 xff0c 却出现找不到或者无法加载主类的这种情况 请再maven那边先clean下 gt 然后再打包package 这样再重新运行就好啦 记得是在Maven gt Lifecycl

  • Linux驱动简介和开发流程--Linux驱动学习（1）

    Linux驱动简介和开发流程 学习笔记 Linux 驱动的分类 Linux三大设备驱动 1 字符设备驱动 IO的传输过程是以字符为单位的 xff0c 没有缓冲 比如I2C SPI都是字符设备 2 块设备驱动 IO传输过程中是以块为单位的 跟

  • 性能优化与内存优化

    性能优化 主要以这四个方向进行优化 xff1a 稳定流畅耗损apk 瘦身 稳定 避免内存溢出异常捕获反馈机制 流畅 卡顿的原因 xff1a 布局复杂动画过多View 的过度绘制UI 耗时操作频繁 GC 耗损 减少没必要的网络访问或合并相关网

  • java 实现快速排序

    1 介绍 快速排序是对冒泡排序的一种改进 它的基本思想是 xff1a 通过一趟排序将要排序的数据分割成独立的两部分 xff0c 其中一 部分的所有数据都比另外一部分的所有数据都要小 xff0c 然后再按此方法对这两部分数据分别进行快速排序

  • 计算机网络——FTP网络服务器

    目录 一 实验目的与要求 二 实验内容与方法 三 实验步骤与过程 一 实验目的与要求 学习安装 使用FTP服务器软件和FTP客户端软件 xff0c 掌握基本的FTP传输数据的控制方式 xff0c 能对FTP协议数据包抓取并进行分析 实验环境

  • 树莓派踩坑之VNC Timed out waiting for a response from the computer

    笔者纯小白入坑树莓派 xff0c 今天在通过VNC viewer 对树莓派进行远程操作时遇到了超时报错 xff0c 报错如下 xff1a VNC Timed out waiting for a response from the compu

  • 系统System.img解包和重新打包过程

    系统System img解包和重新打包过程 把system img转换成ext4格式 simg2img system img system ext4 img 挂载ext4到systemMount目录进行修改 sudo mount syste

  • 腾讯地图 API 调用入门

    本文仅为腾讯地图 API 调用入门 xff0c 如需进阶学习 xff0c 请在腾讯位置服务网站上进行学习 登陆网址 https lbs qq com 点击右上角的登陆按钮 xff0c 需要进行注册按照流程进行就好 完成之后 xff0c 选择

  • QT安装过程中遇到的问题

    问题描述 xff1a 安装了qt安装包后sudo qt opensource linux x64 5 14 2 run显示找不到命令 解决办法 xff1a 把这个文件变成可执行文件 chmod 43 x qt opensource linu

  • 解决Idea升级安装过程中出现Missing essential plugin: com.intellij (platform prefix: null) 的问题

    在进行idea从2020 2升级到2022 1安装成功启动的时候会报这个错 xff1a Missing essential plugin com intellij platform prefix null Please reinstall

  • 吐血整理！SpringMVC常用简单注解（超详细）

    注解解析直达目录 1 用于接收前端给后端的json数据 64 RequestBody 1 1需求分析1 2具体情境1 3最佳实操1 4运行结果以及分析 2 获取restful风格url中的参数值 64 PathVariable 2 1需求分

  • Expression #1 of ORDER BY clause is not in SELECT list, references column ‘d.dept_no‘ which is not i

    问题 xff1a 34 Expression 1 of ORDER BY clause is not in SELECT list references column 39 d dept no 39 which is not in SELE

  • Ubuntu 安装和配置 git

    安装 sudo apt get update y sudo apt get upgrade y sudo apt install git 检查 git version 配置 git config global user name 34 用户

  • Centos检查进程是否关闭的shell脚本

    在运维工作当中会遇到程序打不开或者不工作的类似情况 xff0c 有部分原因是因为维持这个服务的某个进程关闭了 xff0c 这时候需要检查哪些进程是否挂掉了 xff0c 由于进程较多一个个来检查的话效率太慢 在这里给伙伴们安利一个简单实用的检

  • 基于SpringBoot和vue的移动端音乐网站的设计与实现

    1 xff0c 项目介绍 基于SpringBoot和vue的移动端音乐网站拥有两种角色 xff0c 分别为管理员和用户 用户 xff1a 歌单分类 xff1b 歌手分类 xff1b 仿网易云音乐播放 xff1b 音乐收藏 xff1b 音乐评

  • 前端-01Html5基本知识

    1 基本 1 1 第一个前端程序 内容 lt html gt lt head gt lt title gt 我的网页 lt title gt lt head gt lt body gt Hello 我的第一个网页 lt body gt lt

热门标签