.h1-h6标签

都是标题标签，定义一段话的标题，h1最大，依次递减，h6最小

标题标签的作用：让文本加粗显示

2. 段落标签：p标签

用来显示一段文本(图片)，它会忽略源代码中的排版

块元素：独占一行的元素，和相邻的元素不能共享同一行,所有的块元素都有align属性,h1-h6和p元素都是块元素

3. 格式标签：

b标签：加粗文本

del标签：包含的文本中间有条横线

em标签：包裹的文本会显示为斜体

i标签：包裹的文本会显示为斜体

pre标签：显示源代码的排版

strong标签：和em作用一样，都有强调的意思，如果要强调一段文字，建议使用strong标签

u标签：给文本添加下划线

sup：定义上标文本

sub:定义下标文本

4. 图片标签img，用来把图片显示在网页上

必须属性:1.src:图片的路径(可以用相对路径或绝对路径，不建议用绝对路径)

alt:定义图片无法显示时的代替文本

相对路径：以当前文件所在的位置为参考路径,定义出来的路径叫相对路径

绝对路径：文件在硬盘上的物理路径叫绝对路径,

例如：

D:\work181129JAVA班\课件-web前端课件\web-day1\Code\web-day1\img\tly.jpg

可选属性：

1.title：鼠标放在图片上时的提示文字,所有元素都有title属性

2.width:定义图片的宽度，默认以像素px为单位，可以省略单位不写

3.height:定义图片的高度

br标签：换行标签，可以写成<br>或者<br/>

hr标签：水平线标签，可以写成<hr>或者<hr/>,属性有：width(宽度),size(高度),color(颜色)

5. span:通常用于修饰文本，可以给它添加样式，例如style="color: red;"

div:把文档分割成若干个独立的部分 ,块级元素

6. ul定义无序列表，type属性定义列表项目的标记，默认是disc

type="disc" 默认黑色圆点

type="circle" 空心圆点

type="square" 方块

ol定义有序列表，type属性定义项目的标记，默认是数字

type="A"或"a":表示大写字母或者小写字母

type="I"或type="i"：表示罗马大写字母或罗马小写字母

7. border:定义表格的边框属性

cellspacing:单元格之间的距离，设置为0则只有1条边框了

cellpadding:单元格的内容到边框之间的距离

8. 表头：表格中的第一行，用来显示列标题的，使用th定义表头的每一列，把里面的内容加粗居中显示

通常，第一行是表头行，从第二行开始就是数据行(显示具体的数据),

使用td(table data cell )表示数据行每一列

表格的align="center"：让表格整体居中显示

tr(table row)的align="center"：让行里面的内容居中显示

caption：定义表格的标题，会相当于表格居中

9. colspan:跨列，即在水平方向上合并单元格，值是要合并的单元格数目

rowspan:跨行，即在竖直方向上合并单元格，值是要合并的单元格数目

10. form:表单标签，用于创建一个表单，收集用户输入的数据，并提交给服务器程序

属性:action:指定将表单的数据发送到哪个服务器程序

method:指定用哪种方式来提交数据，常用值有GET,POST，默认值是get

表单域：又叫表单元素，作用是收集用户输入的数据 ，并提交给服务器端程序

常用的表单域：1.input元素：它的type属性有不同值，表现出不同形态

type="text":表示文本框，提供文本的输入

type="radio":单选框(单选按钮)， 多个单选框的name值必须相同，如果name不同则不能互斥，提交时是提交value值

type="checkbox":复选框，当name相同时，可以提交多个值(value属性的值)

type="file"":文件域，让用户选择本地文件上传到服务器

type="hidden":隐藏域，对用户不可见的元素，可以有默认值并且能提交给服务器(在javaEE开发中会大量使用隐藏域)

2. select元素：表示下拉列表，又叫下拉框，在下拉列表中用option元素定义待选择的选项，默认第1个选项被选中，

设置某个option被选中： 在option元素上添加selected="selected"或者selected

设置下拉列表为多选下拉列表：在select元素上加multiple属性

关于选中元素的设置：

1)设置单选框或复选框被选中的属性是checked

2)设置下拉列表的某个选项被选中的属性是selected

11. body标签：

1.background：定义网页的背景图片，如果背景图片很小，会自动在水平和竖直方向上平铺展示

2.bgcolor:定义网页的背景颜色

12. textarea:文本域，又叫多行文本框,cols是文本区内的宽度,rows:行数

placeholder：用来设置单行文本框(不是textarea)里的默认提示文字，当输入了新的内容后，该提示文字就消失了

label：本身没有什么效果，当结合单选按钮或复选框使用时，如果label的for属性和按钮的id相同，则点击

label后就相当于点击了按钮，会将单选框或复选框选中

表单按钮：

1.提交按钮： <input type="submit">，提交按钮作用是将表单数据发送到action指定的服务器上

2.重置按钮： <input type="reset">，作用是将表单中数据清空

3.普通按钮：<input type="button">，普通按钮在没有添加js代码情况下，是不能提交表单的

13. frameset:框架集，用于将整个浏览器窗口划分成多个小窗口，每个小窗口称为一个frame，每个小窗口(frame)都可以,加载一个独立的html文档

使用frameset的cols或rows属性定义如何分割整个大窗口，

cols:定义水平方向上分割的各个frame的百分比,

rows：定义竖直方向上分割的各个frame的百分比,

noresize:不能调整frame的宽或高 frameborder="0":去掉frame的边框

*代表剩余百分比，会自动计算

使用frame来定义每个小窗口，src指frame所加载的网页的相对路径

14. iframe:能够包含其它文档(网页)的内联框架，内联就是行内，因为它能和相邻的元素共享同一行

src:要加载的文档的路径 width:宽度，height:高度

frameborder:边框，0或no代表无边框

15. 将超链接所跳转的页面显示在iframe的技巧:

1)给iframe元素添加一个name属性,例如

2)超链接添加属性target，值应该是iframe元素的name

16. 实体集

• TML是标签语言，浏览器识别网络传递的最基本的信息就是HTML标签和标签包含的内容，所有网页信息都是这种类型的，开发者用标签来标记信息内容传给浏览器，浏览器识别并解释标签要求的种颜色、样式来展示内容，这种内容一般叫超文本或富文本

无代码元件的TAG属性就是为了定义是什么样的HTML标签

默认的标签可以在需要时修改，上图中就是开发区选中一个Pane元件，下部属性中显示其为div标签对象，所以我们一般其称为显示块元件

以上示例是一个表格元件，默认的表格中行元件标签是tr
WWW规范中，表格行元件tr中必须是td元件，不能是div或其他，所以如果我们需要放一个显示块元件时，需改显示块元件的TAG为td
同理，可以查看表格中默认放的日期、数字TAG都是td

用第三方工具合成自定义的HTML内容

上例是用百度UEditor在线进行一个表格富文本生成的演示
注意生成的HTML富文本正常是有换行处理，但在输入到HTML Display富文本（也叫超文本）显示元件中时，需删除换行符号
 · 删除方式为，将富文本放入一个文本编辑查看工具中，如Notepad++
 · 用查找替换方式，查到\r\n，替换为空格，将超文本转为一行字符串
HTML富文本可以用Create From Template模板生成字符串元件来动态生成可变内容
 · 如果动态生成富文本，需将固定写入的a b ... 改为变量${a} ${b} ... 然后作为模板进行处理
自定义的HTML富文本在开发中，会常用到，作为高级技能的一部分，建议按以上方式掌握
 · 可以用以生成打印内容，Lodop打印的HTML内容可以用HTML富文本传入，参考“第三方插件接入”中“Lodop专业打印”一节内容
 · 第三方图表中的代码，也是由富文本生成并处理的，参考“第三方插件接入”中“Echarts数据可视化”一节内容

• 建议在线使用Ueditor等专业工具处理富文本
• · 请参考：https://ueditor.baidu.com/website/onlinedemo.html

用无代码HTML富文本显示元件展示要显示的内容

拖放一个HTML富文本显示元件
拖入一个字符串常量元件，F2打开后，字符串常量值输入我们用第三方或自写的的富文本

*****

本文为TERSUS无代码开发手册文章，供参考学习使用，在有需要详细了解对应内容时细看学习，敬请关注并转发文章

参考我们手册第一个文章中的2分钟的计算器功能的拖放连线开发演示，可学会无代码开发是如何开发软件的

想学无代码软件开发的学员请先学习3小时免费教学视频，3小时内可学会开发并开发出一套管理软件系统，然后看手册及其他视频来进阶提高快速成为高级开发人员

里我工作中收集了10个很不错的CSS技巧，你可以用在你的项目上。它可以帮你很好地整理你的元素并让他们看起来蛮酷的。下面开始我们的内容，希望你会喜欢它。下面是我收集的CSS技巧，希望能帮助到你，感觉收藏吧。

1. 黑白图像

这段代码会让你的彩色照片显示为黑白照片，是不是很酷？

img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
}

2. 使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

/* add border */.nav li { border-right: 1px solid #666;
}

……然后再除去最后一个元素……

// remove border /.nav li:last-child { border-right: none;
}

……可以直接使用 :not() 伪类来应用元素：

.nav li:not(:last-child) { border-right: 1px solid #666;
}

这样代码就干净，易读，易于理解了。

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

..nav li:first-child ~ li { border-left: 1px solid #666;
}

3. 页面顶部阴影

下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：

body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px;
 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 z-index: 100;
}

4. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

body { line-height: 1;
}

这样文本元素就可以很容易地从 body 继承。

5. 所有一切都垂直居中

要将所有元素垂直居中，太简单了：

html, body { height: 100%; margin: 0;
}body { -webkit-align-items: center; 
 -ms-flex-align: center; 
 align-items: center; display: -webkit-flex; display: flex;
}

看，是不是很简单。

注意：在IE11中要小心flexbox。

6. 逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

ul > li:not(:last-child)::after { content: ",";
}

对最后一个列表项使用 :not() 伪类。

7. 使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

li { display: none;
}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;
}

8. 对图标使用 SVG

我们没有理由不对图标使用SVG：

.logo { background: url("logo.svg");
}

SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

9. 优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。

10. 对纯 CSS 滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块：

.slider ul { max-height: 0; overlow: hidden;
}.slider:hover ul { max-height: 1000px; transition: .3s ease;
}

11. 继承 box-sizing

让 box-sizing 继承 html：

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

12. 表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

.calendar { table-layout: fixed;
}

13. 用 Flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

.list { display: flex; justify-content: space-between;
}.list .person { flex-basis: 23%;
}

现在，列表分隔符就会在均匀间隔的位置出现。

14. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

a[href^="http"]:empty::before { content: attr(href);
}

相当方便。

15. 检测鼠标双击

HTML：

<div class="test3"> <span><input type="text" value=" " readonly="true" />
 <a href="http://renpingjun.com">Double click me</a></span></div>

CSS：

.test3 span { position: relative;
}.test3 span a { position: relative; z-index: 2;
}.test3 span a:hover, .test3 span a:active { z-index: 4;
}.test3 span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; width: 101%; /* Hacky */
 height: 301%; /* Hacky */
 z-index: 3;
}.test3 span input:focus { background: transparent; border: 0; z-index: 1;
}

16. CSS 写出三角形

/* create an arrow that points up */div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* left arrow slant */
 border-right:5px solid transparent; /* right arrow slant */
 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px; line-height:0px;
}
/* create an arrow that points down */div.arrow-down { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #2f2f2f; font-size:0px; line-height:0px;
}
/* create an arrow that points left */div.arrow-left { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-right:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px; line-height:0px;
}
/* create an arrow that points right */div.arrow-right { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-left:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px; line-height:0px;
}

17. CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

/* basic calc */.simpleBlock { width: calc(100% - 100px);
}
/* calc in calc */.complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px);
}

18. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

h2[data-text] {
 position: relative;
}h2[data-text]::after {
 content: attr(data-text);
 z-index: 10;
 color: #e3e3e3;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

19. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

21.简单的方法调整图片大小

.content img {

height:auto;

width:500px;

}