-
HTML教程1
2019-06-23 10:03:331,html是什么? 概述:HTML是一种超文本标记语言:其实HTML是一种专门向计算机描述我们的设计图上有什么内容的一种符号。...1,建立一个“文本文档.txt”,我们把文本文档的后缀".txt"修改为“.html”点击确认...1,html是什么?
概述:HTML是一种超文本标记语言:其实HTML是一种专门向计算机描述我们的设计图上有什么内容的一种符号。我们通常将HTML语言成为HTML标签。
基本语法:<HTML标签名称></html标签名称>
我们怎么才能做出来一个HTML页面呢?
1,建立一个“文本文档.txt”,我们把文本文档的后缀".txt"修改为“.html”点击确认,这个时候我们的网页文档就建立起来了。
我们可以点击该文档,以右键方式,选择以记事本或者编辑器的方式打开页面,这个时候我们可以在这个页面进行内容编辑:这个过程叫做输入过程。
我们可以直接双击该文件打开,这个时候只能浏览该页面。
当网页建立起来之后,我们需要在空白的页面上,开始编写我们的网页基本结构。首先我们需要写一个声明标签,向计算机提示:应该用什么标准翻译网页。
语法:<!doctype html>
<!>:代表的意思是:声明如下:doc:文档,type:类型,HTML代表的是版本。综合起来就是:声明如下,我的文档类型是HTML。
为了呼应声明,我们需要设置页面的开始位置和结束位置。
<html>//开始
HTML内容:为了向计算机说明,我们的内容是什么语言:我们需要向计算机提供我们文档存储的编码标准:
<meta charset="">charset="gbk/gb2312/utf-8"这三种取值受到我们文档存储的编码标准的影响。如果我们的页面存储为ANSI格式,取值:gbk/gb2312.
如果存储为UTF_8,取值为utf-8。
这个设置的信息是要给计算机看的,同时它的设置影响了计算机对后面内容的翻译,所以我们必须把该内容放在最顶上,因为计算阅读网页是从上向下,从左往右读取。
所以我们在HTML中专门开辟了head区域存放该类信息,所以head被成为初始化区域。
语法:
<head>
<meta charset="gbk">
除了设置字符标准,我们还需要设置网页的标题。
语法:<title>文字内容</title>
除了网页标题之外,我们还需要写网页的关键词和简介
<meta name="keywords" content=""/>
<meta name="description" content=""/>
</head>
<body>
可视化区域
在网页中,我们经常会看到一段文字上面会有一个总结性的文字,这个文字比较大,比较粗,我们称为:网页标题内容使用典型的标签名<h>
<h>标签有6组h1-h6.h1标签一个页面中,只允许使用一次。常用的h2-h4.
在输入界面不管怎么输入。我们都是独占一行输出的标签,称为:块标签。
如果我们需要将多行内容放到一个段落里,就使用<p>标签
<br/>换行标签是一个典型的单标签,它本身就代表换行的意思。
<img src="">,因为在编辑页面中,我们没办法直接粘贴图片,所以我们只能使用<img>标签,将存放在其他地方的图片调过来。调用的属性叫:src:
后面要写的就是图片存放的地址路径:
路径有四种写法:
1,绝对路径:根目录盘:/存储的文件夹名字/文件名,在计算机中根目录盘:c:/,d:/,e:/f:/;这些盘符。优点:能够无视图片存放的位置,直接找到图片。缺点:不能出错,书写麻烦,一旦更换地址,路径全部错了。
2,相对路径:利用图片和文件共处在一个空间内,只是他们最后的存储位置不太一样,利用这个原理来找文件。
1),图片放在HTML页面同级//图片名称.jpg
2),图片放在HTML的下级//图片存放的文件夹名字/图片名称.jpg
3),图片放在html的上一级// ../图片名称.jpg
标签的属性:img的后面有一个src的字符,这个src:代表图片的调用路径,它是img的属性:英文统称:attr。图片的属性里面除了,src还有title用来作鼠标提示,Alt向搜索引擎做关键词提示的。
链接标签:<a></a>淡出的a没有链接效果,它需要href=""赋予效果。href代表的是跳转路径的意思。路径跳转到外网:需要使用绝对路径:URL的绝对路径必须有http://开始。target:打开方式。取值:“_blank”//新页面形式打开
利用链接标签实现同页面的定点跳转:
1,在目的地建立锚点<a name="锚点名称">目的地</a>。2,在点击区域使用锚点<a href="#锚点名称">点击区域</a>
我们在制作页面的时候发现a标签会排列在一行输出。,无论怎么呢输入,最后都一行输出,这样的标签称为:行标签。
列表标签:1,ul//无序列表:一般我们用来表示网页中出现导航和标题集合内容。其中标题集合的内容区域,我们叫它list,列表内容类型。
在ul中,每一个标题都需要用一个li标签包裹起来。要不就行成不了列表
基本语法:<ul>
<li><a href="#1"></a></li>
<li><a href="#1"></a></li>
<li><a href="#1"></a></li>
</ul>
在ul使用中,li里面必须包含a标签
</body></html>//结束
-
HTML基础 学习笔记2
2020-03-23 21:09:581.使用<br>标签分行显示文本 如果想让学习笔记1末尾的那首诗诗显示得更美观些,如显示下面效果: 怎么可以让每一句诗词后面加入一个折行呢?...将代码改为: 语法: xhtml1.0写法: <br /> html4....1.使用
<br>
标签分行显示文本
如果想让学习笔记1末尾的那首诗诗显示得更美观些,如显示下面效果:
怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />
标签了,在需要加回车换行的地方加入<br />
,<br />
标签作用相当于word文档中的回车。
将代码改为:
语法:
xhtml1.0写法:<br />
html4.01写法:
<br>
大家注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。
与以前我们学过的标签不一样,<br />
标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />
、<hr />
和<img />
。讲到这里,你是不是有个疑问,想折行还不好说嘛,就像在 word 文件档或记事本中,在想要折行的前面输入回车不就行了吗?很遗憾,在 html 中是忽略回车和空格的,你输入的再多回车和空格也是显示不出来的。如下边的代码:
上面的代码在浏览中显示是没有回车效果的。如下图所示:
总结:在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />
。2.为你的网页中添加一些空格
上面的例子,我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入
。
语法:
在html代码中输入空格是不起作用的,如下代码:
在浏览中显示,还是没有空格效果:
输入空格的正确方法:
在浏览器中的显示出来的空格效果。如下图所示:
3.认识<hr>
标签,添加水平横线
在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示:
语法:
html4.01版本<hr>
xhtml1.0版本<hr />
注意:
a.<hr />
标签和<br />
标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。
b.<hr />
标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。
c.大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。4.
<address>
标签,为网页加入地址信息
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>
标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。
语法:<address>联系地址信息</address>
如:
<address>文档编写:lilian 北京市西城区德外大街10号</address>
在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式来修改它
<address>
标签的默认样式。
5.想加入一行代码吗?使用
<code>
标签
在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>
标签了,如下面例子:<code>var i=i+300;</code>
注意:在文章中一般如果要插入多行代码时不能使用
<code>
标签了。
语法:<code>代码语言</code>
注:如果是多行代码,可以使用
<pre>
标签。6.使用
<pre>
标签为你的网页加入大段代码
在上节中介绍加入一行代码的标签为<code>
,但是在大多数情况下是需要加入大段代码的,如下图:
怎么办?不会是每一代码都加入一个<code>
标签吧,没有这么复杂,这时候就可以使用<pre>
标签。
语法:<pre>语言代码段</pre>
<pre>
标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
如下代码:<pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); } </pre>
在浏览器中的显示结果为:
注意:<pre>
标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>
标签的一个常见应用就是用来展示计算机的源代码。7.使用ul,添加新闻信息列表
在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示:
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法:<ul> <li>信息</li> <li>信息</li> ...... </ul>
举例:
<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>
ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:
8.使用ol,添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示,这类信息展示就可以使用- 标签来制作有序列表来展示。
语法:<ol> <li>信息</li> <li>信息</li> ...... </ol>
举例:
下面是一个热点课程下载排行榜:<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
<ol>
在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1开始,如下图所示:
9.认识div在排版中的作用
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>
标签中,这个<div>
标签的作用就相当于一个容器。
语法:<div>…</div>
确定逻辑部分:
什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>
标签作为容器。
10.给div命名,使逻辑更加清晰
在上一小节中,我们把一些标签放进里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。如下两图进行比较,如果设计师把两个图给你,哪个图你看上去能更快的理解呢?是不是右边的那幅图呢。
语法:<div id="版块名称">…</div>
11.table标签,认识网页上的表格
有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:
想在网页上展示上述表格效果可以使用以下代码:
创建表格的四个元素:
table、tbody、tr、th、td
a.<table>…</table>
:整个表格以<table>
标记开始、</table>
标记结束。
b.<tbody>…</tbody>
:如果不加<thead>
<tbody>
<tfooter>
,table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
c.<tr>…</tr>
:表格的一行,所以有几对tr 表格就有几行。
d.<td>…</td>
:表格的一个单元格,一行中包含几对<td>...</td>
,说明一行中就有几列。
e.<th>…</th>
:表格的头部的一个单元格,表格表头。
f.表格中列的个数,取决于一行中数据单元格的个数。上述代码在浏览器中显示的默认的样式为:
总结:
a.table表格在没有添加css样式之前,在浏览器中显示是没有表格线的。
b.表头,也就是th标签中的文本默认为粗体并且居中显示。12.caption标签,为表格添加标题和摘要
表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下:
摘要:
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:<table summary="表格简介文本">
标题:
用以描述表格内容,标题的显示位置:表格上方。
语法:<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
-
富文本编辑器:MarkDown编辑器功能嵌入。 条件搜索:增加条件搜索示例。 restful示例:可以参考用户管理模块中的示例API。 前端文件参考: src\view\superAdmin\api\api.vue 后台文件参考: model\dnModel\api.go ...
-
editplus 代码编辑器html c++ jsp css
2009-08-08 13:00:27如果将查找内容“[0-9][0-9][0-9]”改为“[0-9]*[0-9]”,对应1 或 123 或 12345 或 … 大家根据需要定制 相关内容还有很多,可以自己参考正则表达式的语法仔细研究一下 【3】正则表达式应用——删除每一行行尾的... -
黑客帝国 数字雨
2020-08-19 10:01:20重命名,将后缀改为html;小编就随便取了个名字叫雨2,如图: (后缀名如何更改,请下篇文章,后缀的更改) <!DOCTYPE html> <html> <head> <title>黑客帝国</title&..黑客帝国的数字雨给人一种神秘科技感,你自己也可以实现这种高大上的神秘数字雨啦!我们先来展示下成果:
这就是小编自己用电脑做的,这时动态的哦!
具体怎么做呢?
首先右击桌面,新建一个文本文档,
复制一下以下代码进去,保存;
重命名,将后缀改为html;小编就随便取了个名字叫雨2,如图:
(后缀名如何更改,请下篇文章,后缀的更改)
<!DOCTYPE html>
<html>
<head>
<title>黑客帝国</title>
</head>
<body> <canvas id="canvas"></canvas>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;var texts = '156dsfcac'.split('');
var fontSize = 16;
var columns = canvas.width / fontSize;
// 用于计算输出文字时坐标,所以长度即为列数
var drops = [];
//初始值
for (var x = 0; x < columns; x++) {
drops[x] = 1;
}function draw() {
//让背景逐渐由透明到不透明
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//文字颜色
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px arial';
//逐行输出文字
for (var i = 0; i < drops.length; i++) {
var text = texts[Math.floor(Math.random() * texts.length)];
ctx.fillText(text, i * fontSize, drops[i] * fontSize);if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
drops[i] = 0;
}drops[i]++;
}
}
setInterval(draw, 33);
</script>
</body>
</html -
UEditor 依然是国内使用频率较高的富文本编辑器而 Vue 又有着广泛的使用,将两者结合,是很多 Vue 开发者的切实需求。自己在写公司项目时封装了这个组件,它省去了初始化 UEditor、手动调用 getContent,setContent ...
-
C#基础类库
2018-07-11 08:45:26C#操作缓存的帮助类,实现了怎么设置缓存,怎么取缓存,怎么清理缓存等方法,只需要调用方法就可以实现 CookieHelper C#操作Cookie的帮助类,添加Cookie,删除Cookie,修改Cookie,清理Cookie SessionHelper C#... -
mage字幕是为给定图像生成文本描述的任务。 下面是一些很好的初学者图像字幕数据集。 上下文中的公共对象(COCO)。包含超过12万张带描述的图像的集合 Flickr 8K。从flickr.com获取的8千个描述图像的集合。 ...
-
XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解
2008-12-05 08:39:07XSL也可以将XML转化为HTML,那样,老的浏览器也可以浏览XML文档了。 2.CSS CSS大家很熟悉了,全称是Cascading Style Sheets(层叠样式表),是目前用来在浏览器上显示XML文档的主要方法。 3.Behaviors ... -
mage字幕是为给定图像生成文本描述的任务。 下面是一些很好的初学者图像字幕数据集。 上下文中的公共对象(COCO)。包含超过12万张带描述的图像的集合 Flickr 8K。从flickr.com获取的8千个描述图像的集合。 ...
-
fckedit编辑器
2013-11-10 14:28:32修改合并后的web.xml文件,将名为SimpleUploader的Servlet的enabled参数值改为true, 以允许上传功能,Connector Servlet的baseDir参数值用于设置上传文件存放的位置 在web.xml最后添加标签定义: <taglib-uri>... -
Java面试宝典2020修订版V1.0.1.doc
2020-05-21 19:24:4812、编写一个程序,将d:\java目录下的所有.java文件复制到d:\jad目录下,并将原来文件的扩展名从.java改为.jad。 60 13、java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类... -
网管教程 从入门到精通软件篇.txt
2010-04-25 22:43:49HTM,HTML:超文本文档 HTT:Microsoft超文本模板 HTX:扩展HTML模板 I ICO:Windows图标 IDX:Microsoft FoxPro相关数据库索引文件;Symantec Q&A相关数据库索引文件;Microsoft Outlook Express文件 IMG:... -
C#微软培训教材(高清PDF)
2009-07-30 08:51:17C#--微软.NET的第一语言 ... 在本章中你将了解 Microsoft.NET 的概念 .NET 框架 C#语言在.NET 框架中的作用及其特性 1.1 Microsoft.NET 一场新的革命 1.1.1 什么是.NET 2000 年 6 月 ... -
C#微软培训资料
2014-01-22 14:10:17超越今天各自为营的超越今天各自为营的 超越今天各自为营的 Web 站点 站点站点 站点 把 把把 把 Internet 建成一 建成建成 建成 个 一个一 一个可 可个可 可 以互相交换组件的地方 以互相... -
asp.net知识库
2015-06-18 08:45:45将 ASP.NET 2.0 应用程序服务配置为使用 SQL Server 2000 或 SQL Server 2005 ASP.NET 2.0 中的数据源控件 使用 ASP.NET 2.0 ObjectDataSource 控件 ASP.NET 2.0 的内部变化 使用SQL Cache Dependency 代替 ... -
selenium怎样在多窗口中运行程序 (1)
2012-06-26 19:46:15这是selenium本身限制的问题,暂时不晓得怎么解决,只要不影响测试就不用管这个警告。 "selenium_blank4795 "这个应该是OpenQA里提给selenium的bug号吧? 28.可以直接在DOS环境下,在打开selenium-server.jar的... -
javascript函数的解释
2011-02-26 11:03:52例一:举菜单为例,首先脑子里要有一个概念,如何去实现它……(两步:1、先将所有的按钮变为绿色,2、将点击的按钮变为红色) 点击后变成红色,其它为绿色……这里面最后需要搞清楚的就是一个先后问题,点击下一个... -
arcgis工具
2012-10-22 22:37:31例如下面这个查询将选出那些姓名的最后为Jones或JONES的顾客。 UPPER("LAST_NAME") = 'JONES' 可以用LIKE运算符(不是 = 运算符)与通配符一起构建部分字符串查询。 例如,表达式 [STATE_NAME] LIKE 'Miss*'将... -
软件工程教程
2012-07-06 23:10:29用例只描述参与者和系统在交互过程中做些什么,并不描述怎么做。 用例图 关联关系 用例图 泛化关系 用例图 泛化关系 用例图 用例图 用例图 用例用于什么情况? 不知道什么情况不用用例 如果没有用到用例,... -
400个DreamWeaver插件
2013-03-28 15:30:13比如选择的文字为microsoft,那么将加上一个到www.microsoft.com的连接 mxp/用来验证表单内2个文本框的值是否相同,通常用来检验密码是否一致。并可以自定义抱错信息。 mxp/迅速的插入年份、月份、日期的下拉菜单。... -
java面试宝典2011整理有答案
2011-11-09 13:36:062、编写一个程序,将d:\java目录下的所有.java文件复制到d:\jad目录下,并将原来文件的扩展名从.java改为.jad。 62 3、编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串,但要保证... -
最新Java面试宝典pdf版
2011-08-31 11:29:222、编写一个程序,将d:\java目录下的所有.java文件复制到d:\jad目录下,并将原来文件的扩展名从.java改为.jad。 62 3、编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串,但要保证... -
Java面试宝典2010版
2011-06-27 09:48:272、编写一个程序,将d:\java目录下的所有.java文件复制到d:\jad目录下,并将原来文件的扩展名从.java改为.jad。 62 3、编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串,但要保证... -
Visual C++ 编程资源大全(源码 窗体)
2007-10-19 22:27:22这个例子用于分析了一些以逗号为分割符的文本文件,例如在你的\MSDEV\LIB(VC5.0在DevStudio\VC\Lib)目录下的Win32Api.CSV就是这样的文件(16KB)<END><br>53,scrl.zip 这是一个由Visual C++ 5.0开发的基于对话框的... -
Apache Hive: 是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,通过类SQL语句快速实现简单的MapReduce统计,不必开发专门的MapReduce应用,十分适合数据仓库的统计分析 笔记 Hive篇 ...
-
前端开发基础-JavaScript
2020-11-20 18:08:12- concat 可以将一个或者多个字符串拼接起来,返回一个新的字符串 - slice 接收两个参数,起始位置和结束位置,返回一个新的字符串 - substr和substring和slice一样,唯一的不同是substr第... -
CSS中的BFC
2021-01-09 07:06:01最后文本将环绕在浮动元素之下,因为那时候行盒子不再需要移位,也就成了图Figure1的样子。 再回顾一下W3C的描述: <pre><code> 在BFC上下文中,每个盒子的左外侧紧贴包含块的左侧(... -
Oracle Database 11g数据库管理艺术--详细书签版
2012-09-30 01:09:45本书针对大多数日常的oracle database 11g数据库管理任务,全面覆盖dba行业知识,并将理论与实践相结合,旨在为初中级dba提供高效运行数据库所需的方方面面的知识,帮助他们从oracle公司发行的大量资料中找到自己...
-
龙芯生态应用开发基础:C语言精要
-
基于电商业务的全链路数据中台落地方案(全渠道、全环节、全流程)
-
[蓝桥杯2019初赛]修改数组
-
2019年-华启学院中级通信工程师综合能力真题及答案(完整版).pdf
-
app软件测试全栈系列精品课程
-
自动化测试Python3+Selenium3+Unittest
-
基于Flink+Hudi构建企业亿级云上实时数据湖教程(PC、移动、小
-
成绩文件合并.txt
-
libFuzzer视频教程
-
BGLightChangeDLL.zip
-
赛码网输入输出格式和练习题
-
C++代码规范和Doxygen根据注释自动生成手册
-
迷你 Vue 原理.png
-
本文仅供测试,随时删除
-
MaxScale 实现 MySQL 读写分离与负载均衡
-
MySQL 高可用工具 heartbeat 实战部署详解
-
一天学完MySQL数据库
-
华为1+X——网络系统建设与运维(中级)
-
java为什么不能多继承
-
PS2手柄源码.zip