HTML5笔记

news/2024/2/23 14:22:03/文章来源:https://blog.csdn.net/2303_77073508/article/details/135514854

web入门

  • HTML5笔记
  • HTML
    • 标签语法
      • 标签关系
      • 注释
      • 标题标签
      • 段落标签
      • 换行标签
      • 水平线标签
      • 文本格式化标签
      • 图像标签
      • 超链接标签
      • 多媒体标签
        • 音频标签
        • 视频标签
      • 列表标签
        • 无序列表
        • 有序列表
        • 定义列表
      • 表格标签
        • 表格结构
        • 合并单元格
      • 表单标签
        • input标签
        • 下拉菜单
      • 文本域
        • label标签
      • 按钮标签
      • 无语义的布局标签
      • 字符实体

HTML5笔记

入门基础技术点

html5 + css3 +移动web

基础环境 : 编辑器用vscode 浏览器用谷歌

HTML

概念:超文本标记语言 HyperText Markup Language

超文本是链接

标记 也叫标签带尖括号的文本

标签语法

  1. 标签成对出现,中间包裹内容
  2. <> 里面放英文字母也就是标签名字
  3. 结束标签比开始标签多 /

例如加粗文字

要加粗的文字

HTML 是骨架 网页模板 CSS是样式 js是交互

骨架内容

  1. html :整个网页
  2. head:网页头部,存放给浏览器识别的代码例如css代码
  3. body: 网页主体存放给用户看的代码,例如图片、文字
  4. title:网页标题

vscode中快速生成骨架可以使用!+回车或则+tab

标签关系

父子关系(嵌套关系)

兄弟关系(并列关系)

<html><head></head><body></body>
</html>

html标签与head和body就是嵌套关系

head与body就是并列关系

注释

格式:

快捷键ctrl+/

标题标签

标签名:h1~h6(双标签,中间包裹内容)

会有换行效果 , 级别标题

h1标签一般一个页面只出现一次 作为主标题或者网页logo

h2~h6则可以多次使用

段落标签

标签名:p(双标签)

效果:形成换行效果

<p>需要显示换行效果的文字</p>  a
<p>需要显示换行效果的文字</p>  b
<!--a行和b行之间会出现一行空白-->

换行标签

单标签:

水平线标签

单标签:


文本格式化标签

效果:突出重点

常见格式:加粗、倾斜、下划线、删除线等

标签名(自带强调意义)效果
strongb加粗
emi倾斜
insu下划线
dels删除线

都是双标签

图像标签

单标签

<img src="img_URL" alt/title/width/hight>
<!--属性 :alt/title/width/hight >
属性作用说明
alt替换文本图片无法显示时显示文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片宽度一般写数字
height图片高度一般写数字(图片缩放是等比例缩放)

标签名和属性之间用空格隔开 属性名=“属性值”

路径有绝对路径、相对路径、网络路径

超链接标签

双标签:

<!--跳转到网页文件-->
<a href="https://www.baidu.com">跳转到百度</a>
<!--跳转到本地文件 并且打开新界面跳转-->
<a href="./index.html" target="_blank">跳转到index</a>

多媒体标签

音频标签
<audio src="音频URL"></audio>
属性作用特殊说明
src ***音频URLmp3 、ogg、wav
controls显示音频控制面板controls=“controls” 在html5中如果属性名和属性值完全一样可以简写为一个单词
loop循环播放同上
autoplay自动播放同上 (浏览器一般默认禁用此属性)
视频标签

双标签

<video src="视频URL"></video>

常见属性 : 与音频标签的controls loop autoplay 一样 支持MP4、WebM、Ogg格式 多出一个muted属性 : 静音播放 并且视频的autoplay需要配合着muted属性才能使用

列表标签

作用:布局内容整齐的区域

三种格式 : 无序列表(多用)、有序列表、定义列表

无序列表

标签名: ul 嵌套 li, ul是无序列表 ,li是列表条目

<ul><li>条目1</li><li>条目2</li>...
</ul>
有序列表

标签名: ol 嵌套 li, ol是无序列表 ,li是列表条目

<ol><li>条目1</li><li>条目2</li>...
</ol>
定义列表

标签名: dl 嵌套 dt 和dd , dl是定义列表 ,dt是定义列表的标题,dd是定义列表的描述

<dl><dt>标题1</dt><dd>描述1</dd><dd>描述1-2</dd><dt>标题2</dt><dd>描述2</dd>....
</dl>

表格标签

标签:table嵌套 tr ,tr嵌套 td/th

在网页中,table默认没有边框线,使用border属性可以为表格添加边框线

标签名作用
table表格
tr
th表头单元格
td内容单元格
表格结构

用表格结构标签将内容划分区域,让表格结构更清晰

标签名含义说明
thead表格头部表头
tbody表格主体主要内容
tfoot表格底部信息汇总

具体格式如下(因为一般表格结构是否添加对于视觉无伤大雅所以一般取消表格结构 直接采用表格标签)

    <table><thead><tr><th>表头</th></tr></thead><tbody><tr><td>内容1</td></tr></tbody><tfoot><tr><td>汇总1</td></tr></tfoot></table>
合并单元格

跨行合并 添加属性rowspan (会保留最上列单元格)

取值是数字表示需要合并的单元格数量

跨列合并 添加属性colspan (会保留最左列单元格)

取值是数字表示需要合并的单元格数量

注意 : 不能跨结构合并

表单标签

表单一般用于登陆注册界面

input标签
<input type="...">     <!--input标签是单标签-->
属性说明
text文本框
password密码框
radio单选框
checkbox多选框
file上传文件

文本框属性: placeholder 提示文字(浅色文字)密码框也能用。

单选框属性:name可以实现单选功能 将需要单选的选项标签中添加属性name 属性值自定义 相同的name属性值分为一组来实现单选功能; 如果想实现默认选中功能要添加属性checked 当然这个属性和属性值相同只需要添加checked即可

upload file属性:如果要上传多个属性添加multiple属性即可

**checkbox的默认选中:**同样是属性checked

input不会换行

下拉菜单

标签:select 嵌套 option ,select是下拉菜单整体 ,option是菜单中的每一项。

  	城市: <select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select>

默认显示属性: selected

文本域

作用:多行输入文本的表单控件

特点是右下角可以放大缩小一般都会禁用,尺寸一般由css设置

<textarea>默认提示文字</textarea>
label标签

作用:网页中,某个标签的说明文体,使用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。就像单选性别的时候点文字“男”或者“女”都能选中 支持很多表单控件

写法一

<input type="radio" id="man">
<label for="man"></label>

写法二

<label><input type="radio"></label>

按钮标签

button

<button type="">按钮</button>
<!--默认是submit提交按钮-->
type属性说明
submit提交按钮,提交数据到后台(默认功能)
reset重置按钮,表单恢复默认值
button普通按钮,默认没有功能,一般配合js使用

注意: 所有表单控件都要写在表单区域from中 只有这样才能实现功能。

<from action="发送数据的地址">......
</from>

无语义的布局标签

作用:布局网页(划分网页区域,摆放内容)

<div> 独占一行</div>
  • div 独占一行
  • span 不换行
<span> 不换行</span>

字符实体

作用:在网页中预留字符

空格		   &nbsp;   
<       	&lt;    
>       	&gt;           

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

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

相关文章

steam游戏搬砖项目还能火多久?

最近放假回到老家&#xff0c;见了不少亲戚朋友&#xff0c;大家不约而同都在感叹今年大环境不好&#xff0c;工作不顺&#xff0c;生意效益不好&#xff0c;公司状况不佳&#xff0c;反问我们生意如何&#xff1f;为了让他们心里好受一点&#xff0c;我也假装附和道:也不咋地&…

3000多个厂商默认帐号、默认密码

做网工这行&#xff0c;多少都会遇上各种各样的厂商设备&#xff0c;遇上一些新设备&#xff0c;虽然没有更改密码&#xff0c;但不知道初始默认账号和密码是啥。 今天就给你整理了一波&#xff0c;三千多个厂商默认帐号、默认密码&#xff0c;方便你查阅。 不过&#xff0c;…

自创C++题目——风扇

预估难度 简单 题目描述 有一个风扇&#xff0c;它有个旋转叶片&#xff0c;每个旋转叶片的编号是&#xff0c;请输出它旋转后&#xff0c;中心点与地面的直线距离哪个叶片最近&#xff0c;输出此旋转叶片的编号。默认以“”的形式。 当时&#xff1a; 当或时&#xff0c;…

MATLAB二维与三维绘图实验

本文MATLAB源码&#xff0c;下载后直接打开运行即可[点击跳转下载]-附实验报告https://download.csdn.net/download/Coin_Collecter/88740747 一、实验目的 掌握图形对象属性的基本操作。掌握利用图形对象进行绘图操作的方法。 二、实验内容 利用图形对象绘制曲线&#xff…

Java基础 - 黑马

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…

最佳实践分享:SQL性能调优

SQL性能调优是一个需要不断探索和实践的过程&#xff0c;旨在确保数据库查询的高效运行。本文将分享一些SQL性能调优的最佳实践&#xff0c;帮助您提升数据库性能&#xff0c;减少查询响应时间。 一、索引优化 索引是提高查询性能的关键。以下是一些关于索引优化的建议&#…

完全备份、增量备份、差异备份、binlog日志

1 案例1&#xff1a;完全备份与恢复 1.1 问题 练习物理备份与恢复练习mysqldump备份与恢复 1.2 方案 在数据库服务器192.168.88.50 练习数据的备份与恢复 1.3 步骤 实现此案例需要按照如下步骤进行。 步骤一&#xff1a;练习物理备份与恢复 冷备份&#xff0c;需停止数…

数据结构第十四弹---链式二叉树基本操作(下)

链式二叉树 1、翻转二叉树2、判断两棵树是否相同3、判断二叉树是否是单值二叉树4、对称二叉树5、判断二叉树是否是平衡二叉树6、判断二叉树是否是另一棵二叉树的子树7、二叉树的销毁8、二叉树的深度遍历8.1、前序遍历8.2、中序遍历8.3、后序遍历 9、二叉树的构造和遍历总结 1、…

Java中的JVM指令和Arthas以及Dump文件(jvisualvm和MemoryAnalyzer工具)整体分析

前言 前天线上服务器突然内存和CPU都爆掉了&#xff0c;两者都处于一种高负载的状态&#xff0c;而且还是周末的情况下&#xff0c;起初运维同事怀疑是用户数量暴增&#xff0c;但是数据面板上并没有出现很大的暴增现象&#xff0c;之前的服务器4G的内存都跑不满后面升到8G还是…

NFS网络共享服务存储

目录 一、NFS简介 1、NFS定义&#xff1a; 2、NFS的特点 3、NFS的优缺点 4、NFS的原理图示 二、服务端NFS配置文件&#xff1a;/etc/exports 三、实验&#xff1a;NFS共享存储服务配置 1、服务端安装nfs-utils与rpcbind软件包 2、服务端新建共享文件夹目录并赋予权限 …

【数据库】sql优化有哪些?从query层面和数据库层面分析

目录 归纳sql本身的优化数据库层面的优化 归纳 这类型问题可以称为&#xff1a;Query Optimization&#xff0c;从清华AI4DB的paper list中&#xff0c;该类问题大致可以分为&#xff1a; Query RewriterCardinality EstimationCost EstimationPlan Optimization 从中文的角…

排序算法9----计数排序(C)

计数排序是一种非比较排序&#xff0c;不比较大小 。 1、思想 计数排序又称为鸽巢原理&#xff0c;是对哈希直接定址法的变形应用。 2、步骤 1、统计数据&#xff1a;统计每个数据出现了多少次。&#xff08;建立一个count数组&#xff0c;范围从[MIN,MAX],MAX代表arr中…

网页屏幕适配通透了

一&#xff0c;如果设计尺寸固定 那就按照固定尺寸开发 一般都是1920*1080 二&#xff0c;需要适配多种像素屏幕&#xff08;大屏可视化&#xff09; 可使用媒体查询设置多套css样式或者使用自适应单位&#xff0c;%&#xff0c;vw&#xff0c;vh 最好解决方案rem&#xff…

Unity Shader 的模板测试效果

模板测试是渲染管线中逐片元操作的一环&#xff0c;它的作用是筛选出指定模板的片元&#xff0c;而不符合模板的片元会被舍弃&#xff0c;从而做到一个遮罩的效果。 以下是Unity中实践的一个效果&#xff1a; 场景中可以看出&#xff0c;熊模型和茶壶模型都在差不多的位置&am…

Kafka 的架构

实验过程 1.三个虚拟机中解压kafka软件包 tar -zxvf kafka_2.11-1.1.1.tgz 2.修改 3 个节点配置文件 在 zookeeper 节点&#xff0c;进入 kafka_2.11-1.1.1/config 目录下&#xff0c;编辑 server.properties 文件 [rootdb1 ~]# cd kafka_2.11-1.1.1/config [rootdb1 con…

HarmonyOS应用开发者高级认证试题库(鸿蒙)

目录 考试链接&#xff1a; 流程&#xff1a; 选择&#xff1a; 判断 单选 多选 考试链接&#xff1a; 华为开发者学堂华为开发者学堂https://developer.huawei.com/consumer/cn/training/dev-certification/a617e0d3bc144624864a04edb951f6c4 流程&#xff1a; 先进行…

【一】通信协议概述

通信协议概述 简介&#xff1a; 很早之前就思考了要写一下电力系统常用的几种通信协议&#xff0c;一直拖着也没有行动&#xff0c;这次终于下定决心来出一个《通信协议》这样的专栏。电力行业数字化方面资料较少&#xff0c;我理解主要一方面是数字化程度还不高&#xff0c;一…

使用Python操纵Word自动编写离职报告

目录 一、背景介绍 二、技术原理 三、实现步骤 1、安装python-docx库 2、创建Word文档 3、添加标题和内容 4、添加表格和图片 5、设置样式和格式化文本 6、保存文档 四、注意事项与建议 总结 随着现代社会的发展&#xff0c;自动化和智能化已经成为各行各业追求的目…

使用PyTorch实现混合专家(MoE)模型

Mixtral 8x7B 的推出在开放 AI 领域引发了广泛关注&#xff0c;特别是混合专家&#xff08;Mixture-of-Experts&#xff1a;MoEs&#xff09;这一概念被大家所认知。混合专家(MoE)概念是协作智能的象征&#xff0c;体现了“整体大于部分之和”的说法。MoE模型汇集了各种专家模型…

消息的发送与接收

消息的发送与接收 消息的发送与接收不仅仅是在于聊天功能的实现。其实还有很多种情况也算"消息的发送与接收"。而且我们还可以通过多种方法去实现。我们可以基于实际情况来选择。 WebSocket实现 node做后端。找了好多&#xff0c;前端页面总是用到了jQuery&#x…