HTML5笔记

news/2024/9/30 11:30:32

2.HTML:超文本标记语言

3.双标签:成对出现的标签
单标签:只有开始标签,没有结束标签 edg:换行:
水平线:


4.VS Code快速生成html骨架:!(英文)+Enter/Tab

5.标签之间的两种关系:(1)父子关系(嵌套) (2)兄弟关系(并列)

6.标题标签:

~

特点:(1)独占一行 (2)文字加粗 (3)字号逐渐减小
tips:h1标签在一个网页中只用一次,用来放新闻标题或网页的logo

7.段落标签:

...

特点:(1)独占一行 (2)段落之间存在间隙

  1. 换行:
    水平线:

    浏览器不识别代码中的Enter键换行

9.文本格式化标签:加粗(strong、b)、倾斜(em、i)、下划线(ins、u)、删除线(del、s)
在同一行内显示

10.在网页中插入图片:替换文本
src为单标签的必须属性,指定图片的名称和位置
tips1:在VS Code中uri以./开头 edg:
tips2:浏览器缩放图片,默认等比缩放

11.属性名="属性值"
属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不同属性前不区分先后顺序

12.相对路径:. 当前文件所在的文件夹 ..当前文件的上一级文件夹 /进入某个文件夹里面

13.超链接:
跳转到本地文件:相对路径 跳转到网页:绝对路径
target="_blank" :新窗口跳转页面
若开发初期,不知道超链接的跳转地址,href属性值写#,表示空链接,不会跳转

14.音频播放:
一般浏览器会禁用自动播放功能,controls显示出播放控制面板,loop功能为循环播放

15.视频播放:
controls显示出播放控制面板,loop功能为循环播放,muted为静音播放,autoplay在 muted功能启用的条件下才会正常使用

16.列表分类:
(1)无序列表:ul(无序列表)嵌套li(列表条目)
(2)有序列表:ol(有序列表)嵌套li
(3)定义列表:dl(定义列表)嵌套dt(定义列表的标题)和dd(定义列表的描述/详情)
!!tips:ul/ol标签里面只能包裹li标签;而li标签里面可以包裹任何内容
dl标签里面只能包裹dt/dd,而dt/dd标签里可以包裹任何内容

17.表格:table嵌套tr(行),tr嵌套th(表头单元格)/td(内容单元格)
!!!tips:在网页中,表格默认没有边框线,使用broder属性(broder=”1“)可以为表格添加边框线
表格结构标签:tbhead、tbody、tfoot

18.单元格合并:
(1)跨行合并:rowspan
(2)跨列合并:colspan
合并步骤:
(1)保留最左最上的单元格,添加属性(edg:),数字表示为要合并的单元格数量
(2)删除其他单元格
tips!!:不能跨结构合并

19.表单:收集用户信息
input标签:type属性值不同,则功能不同
type属性值:(1)text:文本框,输入什么显示什么,用于输入单行文本
(2)password:密码框,无论输入什么都显示..
(3)radio:单选框
(4)checkbox:多选框
(5)file:上传文件(默认情况在只能上传一个文件)

占位文本:提示信息 <input type="text"/"password" placeholder="提示信息">在文本框和密码框都可以使用  提示信息显示字体默认为灰色 用户输入为黑色

<input type=“radio”name="..." checked>
(1)在多个radio单选框中要想实现单选,需把多个name值设为相同 ;
(2)要想进入页面有一个固定的单选框值,只需添加checked(默认选中)
!!tips:若单词只有一个,没有=“’,说明属性名和值相等

file:上传文件(默认情况在只能上传一个文件)
要想上传多个文件,只需要添加multiple

<input="checkbox" checked> checked:实现默认选中

20.下拉菜单:select嵌套option edg:
下拉菜单实现默认选中:selected

21.文本域:多行输入文本

22.label标签:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围
写法一:label标签只包裹文字内容,label的for属性值要和表单控件的id属性值相同
edg:

写法二:使用label标签包裹表单控件,不需要属性edg:<label><input type="radio" >女</label>

23.按钮button:
type属性值:(1)submit:提交按钮,点击后可以提交数据到后台(默认功能)
(2)reset:重置按钮,点击后将表单控件恢复默认值
(3)button:普通按钮,默认没有功能,一般配合JavaScript使用
!!!tips:要想使按钮起作用,需将按钮包裹在form标签里



24.无语义的布局标签:划分网页区域,摆放内容
(1)div(大盒子):独占一行
(2)span(小盒子):不换行

25.在网页中显示预留字符:字符实体:以&开头 ;结尾
字符实体:(1)空格 :&nbsp;
(2)< :<
(3)> :>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

TiKV 源码分析之 PointGet

本文介绍了TiDB中最基本的PointGet算子在存储层TiKV中的执行流程。作者:来自 vivo 互联网存储研发团队-Guo Xiang本文介绍了TiDB中最基本的PointGet算子在存储层TiKV中的执行流程。 一、背景介绍 TiDB是一款具有HTAP能力(同时支持在线事务处理与在线分析处理 )的融合型分布式数…

大数据同步方案怎么选,才能提高企业的业务效率?

大数据同步通常指的是在多个数据源或存储系统之间同步数据的过程,可以确保数据的一致性,提高数据的可用性和可靠性,同时支持数据分析和决策制定。大数据同步的步骤通常包括: 数据识别:确定需要同步的数据类型和范围; 数据抽取:从源系统中提取数据; 数据转换:将数据转换…

有点东西,template可以直接使用setup语法糖中的变量原来是因为这个

你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢?setup语法糖是如何编译成setup函数的呢?前言 我们每天写vue3代码的时候都会使用到setup语法糖,那你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢?setup语法糖是如何编译成setup函数的…

3个月搞定计算机二级C语言——准备工作

免费分享备考计算机二级C语言所需的编程软件、题库和资料。前言 大家好,我是梁国庆。 前天发文章说了我要备考计算机二级C语言这件事情,我已经将需要的编程软件、题库和资料准备好了。 其中包括“C语言和MsOffice”的资源,因为这些资源是在网上找的,所以在这把它分享出来,…

小白也能玩转Git:从入门到实战详细教程

Git介绍 Git是一种分布式版本控制系统,它广泛应用于软件开发中。通过Git,开发人员可以追踪文件的变化、协作工作、管理代码库等。与集中式版本控制系统(如SVN)不同,Git使每个开发人员都具有完整的代码仓库副本,这使得团队成员能够独立地在本地工作而无需持续的网络连接。…

IEC61850 调试工具 工程师必备

操作 IEC 61850 装置的理想工具,执行多种实用功能,支持 IEC 61850 第 1 版和第 2 版。目录IEC61850 调试工具 工程师必备主要功能软件截图 IEC61850 调试工具 工程师必备 下载地址:http://www.redisant.cn/iec61850client IEC 61850 是国际电工委员会(IEC)制定的一项国际标…

读AI未来进行式笔记12读后总结与感想兼导读

读AI未来进行式笔记12读后总结与感想兼导读1. 基本信息 AI未来进行式 李开复 陈楸帆 著 浙江人民出版社,2022年5月出版 1.1. 读薄率 书籍总字数301千字,笔记总字数39650字。 读薄率39650301000≈13.2% 1.2. 读厚方向千脑智能脑机穿越未来呼啸而来虚拟人AI3.0新机器人人工不智能…