首页 前端知识 HTML(零基础)

HTML(零基础)

2024-07-30 22:07:59 前端知识 前端哥 140 80 我要收藏

HTML

<p>内容</p>

常常我们在需要分段把文字有条理的显示出来时候,对内容前加<p>内容后加</p>即可实现文章换段落。

应用举例:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>4.3 段落标签</title>

    </head>

    <body>

        <h2>木兰花·拟古决绝词</h2>

        <p>人生若只如初见,何事秋风悲画扇。</p>

        <p>等闲变却故人心,却道故人心易变。</p>

        <p>骊山语罢清宵半,泪雨零铃终不怨。</p>

        <p>何如薄幸锦衣郎,比翼连枝当日愿。</p>

    </body>

</html>

效果示例图

这个是最重要的一点,也是为什么经常报错的原因,注意命名

不然会出现 undefined 的报错

这个是我们下学期要学的网课

这是有序列表和无序列表

效果图附上

有序列表(Ordered List):有序列表使用<ol>标签创建,其中的列表项由<li>标签表示。有序列表会自动为列表项生成顺序号,通常是数字。

无序列表(Unordered List):无序列表使用<ul>标签表示列表项。无序列表通常使用符号、圆点或其他图标来表示每个列表项。

描述列表(Description List):描述列表使用<dl>标签创建,其中每个列表项由<dt>(描述标题)和<dd>(描述内容)标签组成,描述列表用于展示名称与对应的描述

我把英文打上去了,更好记忆

  • <li>不能单独使用
  • <ul>的子标签只能是<li>
  • <li>中可以放任何标签

代码和效果图

HTML:表格元素

tr:table row

td:table data

th:table header

表格行定义了三行,在下级填充表格数据

另外th 即 table header 是表格的加粗,需要特殊去记

链接 HTML属性

href:Hypertext Reference 超文本引用。用来建立当前元素和文档之间的链接

target 即为目标 对象

target属性的四种值:

. _blank:这个值告诉浏览器在新窗口或标签页中打开链接

_self:这个值表示在当前窗口中打开链接

_parent:这个值表示在父级框架中打开链接

_top:这个值表示在顶级框架中打开链接

另外,后面2行的img是image 图像 的缩写, src 是 source 来源的 缩写

就是相当于 寻址 图形的来源,插入图像

里面的alt是转换,如果图片无法显示,则输出什么

详见这个

1-br标签

br标签 ,表示换行标签 ,br标签是一个自结束标签, br标签的语义是不另起一个段落换行

2-hr标签

hr标签, 可以在页面中生成一个分割线

img标签是图像标签,它也是一个自结束标签,并且它是一个可以设置宽高的行内元素。它里面的src属性是图片的路径,alt属性是当图片没有加载出来时在图片显示位置显示出来的文字信息。如果没有给img标签设置width和height,那么图片按照原大小显示,如果要放大或者缩小图片,只需要设置width或者height中的一个,另一个属性会等比缩放。如果自己设置width和height两个属性可能会导致图片失真。title属性里设置的是鼠标悬停在图片上显示的

HTML区块

链接无声明变量一般用井号

表单属性

form即为表单,是一个专门让用户输入数据或者选择的一个组件。

格式: <form> 记住,所有表单内容都要写在表单里面 </form> //form中主要有两个属性:action和method

<label>标签用于为表单元素提供标签文本,从而增强表单的可用性和可访问性。

第三行,input type 为输入样式,text即为文本框,

使用placeholder属性来提示输入框中需要输入的内容
效果图:

checkbox“单选”和多选

默认情况下(不设置name属性时),是点了几个 checkbox 就有几个 checkbox 被选中,所以严格来说,要实现 checkbox 的“单选”,就只能点击一个 checkbox,如果点击了多个 checkbox,就必有相应个数的 checkbox 被选中

如果要实现只能同时选中一个 checkbox,可以用 js 代码来控制

也就是说,checkbox 所谓的“单选”是不受其 name 属性的值的影响的

radio单选和多选

默认情况下(不设置name属性时),也是点了几个 radio 就有几个 radio 被选中,并且选中后再次点击不可取消选中,除非重置或者刷新页面等

但 radio 既然是单选按钮,肯定是可以实现单选的操作的,这时只要设置每个 radio 的 name 属性的值一样就可以实现单选操作,也就是始终只会有一个 radio 被选中

要实现 radio 的多选操作,除了前面说的默认情况以外,还可以通过设置其 name 属性的值不相同来实现

如果有三个 radio 按钮,前两个的 name 属性的值是一样的,但第三个和前两个不一样,则前两个 radio 按钮,只能同时选中一个,第三个 radio 按钮可以和第一个或第二个同时被选中

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14593.html
标签
windows
评论
发布的文章

AE、Lottie、JSON简单介绍

2024-08-12 10:08:42

VSCode配置settings.json

2024-08-12 10:08:42

JSON 格式说明

2024-08-12 10:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!