ueditor编辑器网页版(ueditor html)

ueditor编辑器网页版(ueditor html)HTML 叫做超文本标记语言把它拆分一下拆成 超文本 意味着页面支持文本 声音 图片 视频 表格 链接 标记 在页面上展示数据就需要标签啦 这些标签就组成了一个个的标记 HTML 页面是运行在浏览器上面的 点击去下载 vscode 去下插件 双标签 标签有开始有结束 单标签 只有一个标签 html 文件根标签 编写页面相关的属性 页面的标题 页面的内容展示信息 相当于是树

大家好,我是讯享网,很高兴认识大家。



HTML叫做超文本标记语言
把它拆分一下拆成:
超文本:(意味着页面支持文本、声音、图片、视频、表格、链接)
标记:(在页面上展示数据就需要标签啦,这些标签就组成了一个个的标记)

HTML页面是运行在浏览器上面的

  1. 点击去下载vscode
  2. 去下插件

从0开始开发一个简单web界面的学习笔记(HTML类)
讯享网
从0开始开发一个简单web界面的学习笔记(HTML类)

从0开始开发一个简单web界面的学习笔记(HTML类)

双标签:标签有开始有结束
从0开始开发一个简单web界面的学习笔记(HTML类)

单标签:只有一个标签

:html文件根标签
:编写页面相关的属性
:页面的标题
:页面的内容展示信息

相当于是树,所有的标签都是的子标签,和是兄弟标签, 和是父子标签。每一个标签相当于是一个对象,程序员可以通过这些代码拿到这些对象,拿到之后就可以对这些对象进行增删查改。

关于DOM树可以查看这篇文章:什么是DOM?你了解DOM树吗?

生成结果:
从0开始开发一个简单web界面的学习笔记(HTML类)

注释标签,能被用户看到

 

讯享网
讯享网

段落标签:

 

如果你直接按回车,它会解析成空格,展示在页面上。

换行标签:换行标签换行后,行间隙比段落标签间隙小

讯享网

<br/>是规范写法,不建议写成<br>

在工作中,一般都是以CSS来实现的,但是HTML也可以实现同样的效果

加粗标签

 

倾斜

讯享网

删除线

 

下划线

讯享网

每一个效果的第一种写法除了它本身的效果,还起到强调的效果,强调可以让文本被爬虫获取到。

 

属性:替换文本,当文本不能正确显示的时候,会显示一个替换的文字。后面的文案,只有当图片加载出错的时候才会展示,如果图片加载成功,这个文案就不会显示

讯享网

属性:当你的鼠标移动到图片上时,显示文字

 

示例:
从0开始开发一个简单web界面的学习笔记(HTML类)

/:控制图片宽度高度,宽度和高度一般改一个就行,另外一个会等比例缩放。

讯享网

例如:

 

px:像素,这一张图片上的亮点,像素越大,图片越大

:边框,参数是宽度的像素,但一般用 CSS 来设定

讯享网

效果展示:这张图片附近的黑框框就是边框
从0开始开发一个简单web界面的学习笔记(HTML类)

后面 可以写多个属性,通过空格或者换行来分隔,属性的先后顺序不影响页面展示。

  1. :必须具备,表示点击后会跳转到那个界面
  2. :打开方式。默认是_self(点击后改变当前页面),如果是_blank则用新的标签页打开。

属性使用

  1. 通过文字跳转到对应的界面
     

    效果图:点击后跳转到对应的界面
    从0开始开发一个简单web界面的学习笔记(HTML类)

  2. 跳转到当前页面(刷新页面)
    讯享网

    效果图:点击后仍在当前界面
    从0开始开发一个简单web界面的学习笔记(HTML类)

  3. 通过图片跳转到对应的界面
     

    效果图:点击后就会跳转到对应的界面
    从0开始开发一个简单web界面的学习笔记(HTML类)

:打开方式。默认是(点击后改变当前页面),如果是则用新的标签页打开(另起一个页面)。

讯享网

表格标签基本使用 01 --table

标签:表示整个表格
: 表示表格的一行
:表示一个单元格
:表示表头单元格,会居中加粗

包含,包含或者

表格标签有一些属性,可以用于设置大小边框等,但是一般使用CSS方式来设置。这些属性都要放到table标签中

  • 是表格相对于周围元素的对齐方式。align=“center”(不是内部元素的对齐方式)
  • 表示边框,1表示有边框(数字越大,边框越粗),""表示没边框
  • :内容距离边框的距离,默认1像素
  • :单元格之间的距离,默认为2像素
  • / :设置尺寸

注意这几个属性,vscode都提示不出来

示例:

 

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)

里面的内容居中+加粗展示。
我们通常把表头相关信息放在里,而表格内容相关信息放在里

示例:

讯享网

效果
从0开始开发一个简单web界面的学习笔记(HTML类)
表格合并

:合并行

 

示例:合并两个"男"表格

讯享网

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)

:合并列

 

示例:合并"小红"和"女"这两格

讯享网

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)

无序列表[重要]和标签

 

可以使用快捷键快速生成标签
从0开始开发一个简单web界面的学习笔记(HTML类)

示例:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

有序列表[用的不多]

 

示例:

讯享网

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)
属性可以控制序号从几开始

 

示例:

讯享网

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)

自定义列表

 

示例:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

表单标签分为两个部分:

  • 表单域:包含表单元素的区域,重点是标签
  • 表单控件:输入框,提交按钮等,重点是标签

表单域

 

表单控件:输入框,提交按钮等,重点是标签

作用:让用户用来输入的。

中有一个属性,我们对取不同的值,可以控制的类型

讯享网
 

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

可以看到他是单行输入。

密码框(取)

讯享网

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)

 

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)
但是这不是单选框,男和女都能选
从0开始开发一个简单web界面的学习笔记(HTML类)

解决方案:
加属性,如果后面的值相同,那就只能选一个了~
示例:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

如果我想要它默认选择女,该怎么实现呢?
我们可以借助属性
示例:

 

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)

如果你写成这样:

讯享网

input复选框:

 

示例:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

普通按钮:

 

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

在按钮里写字:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

按钮通常需要搭配JS来使用。

提交按钮通常用来提交用户在前端填写的数据,把数据提交到服务器上。需要搭配使用

 

效果图:
从0开始开发一个简单web界面的学习笔记(HTML类)

示例:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

示例:

 

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

提交文件:

讯享网

效果:点击后开始选择文件
从0开始开发一个简单web界面的学习笔记(HTML类)

示例:

 

效果:点击文字“男”或者“女”即可选择。
从0开始开发一个简单web界面的学习笔记(HTML类)

标签

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)
标签通常搭配来使用
示例:

 

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)
一打开网页,选项框里默认是第一个选项,如果要修改,可以使用
示例:

讯享网

效果:现在默认是选择2005了~
从0开始开发一个简单web界面的学习笔记(HTML类)

textarea标签

 

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)
我们可以通过和来控制它的大小
示例:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)
在实际的开发中可以通过CSS来达到这样的效果

就是两个盒子,用于网页布局

  • 是单独占一行的,是一个大盒子
  • 不单独占一行,是一个小盒子
 

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

有些特殊的字符在html文件中是不能直接表示的,例如:
空格:
小于号:
大于号:
按位与:

html标签就是用 &lt; &gt; 表示的因此内容里存在 &lt; &gt; ,就会发生混淆。

示例:

讯享网

效果:
从0开始开发一个简单web界面的学习笔记(HTML类)

小讯
上一篇 2025-04-29 07:03
下一篇 2025-04-18 12:21

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/166080.html